From df289b20b875dc567a450e2dcd3aee44b5111a26 Mon Sep 17 00:00:00 2001
From: Amritanshu <git@tanshu.com>
Date: Tue, 25 Aug 2026 17:09:11 +0530
Subject: [PATCH] Consolidated commit message to v22 signals

---
 .agents/mcp_config.json                       |   31 +
 .agents/rules.md                              |   30 +
 .agents/rules/angular.md                      |  117 +
 .agents/skills/angular-signals/SKILL.md       |   17 +
 .agents/skills/fastapi-pydantic-v2/SKILL.md   |   16 +
 .../library-skills/.library-skills.json       |    4 +
 .agents/skills/library-skills/SKILL.md        |   37 +
 .agents/skills/sqlalchemy-async/SKILL.md      |   19 +
 .agents/skills/strict-mypy/SKILL.md           |   30 +
 brewman/.pre-commit-config.yaml               |    2 +-
 .../09a4f0ca450f_recipe_steps_photos.py       |   62 +
 brewman/brewman/db/base.py                    |    6 +-
 brewman/brewman/models/client.py              |    8 +-
 brewman/brewman/models/recipe.py              |   38 +-
 brewman/brewman/models/recipe_photo.py        |   49 +
 brewman/brewman/models/recipe_step.py         |   59 +
 brewman/brewman/routers/recipe.py             |  867 ++--
 brewman/brewman/routers/reports/entries.py    |   27 +-
 brewman/brewman/routers/temporal_product.py   |    5 +-
 brewman/brewman/schemas/recipe.py             |   36 +-
 brewman/brewman/schemas/recipe_photo.py       |   29 +
 brewman/brewman/schemas/recipe_step.py        |   21 +
 brewman/brewman/schemas/temporal_product.py   |    2 -
 brewman/pyproject.toml                        |   39 +-
 brewman/uv.lock                               |  662 +--
 overlord/package.json                         |   49 +-
 .../account-detail.component.html             |  103 +-
 .../account-detail.component.ts               |  130 +-
 .../app/account/account-list.resolver.spec.ts |   18 -
 .../src/app/account/account-list.resolver.ts  |    9 -
 .../account-list/account-list-datasource.ts   |  101 -
 .../account-list/account-list.component.html  |   98 +-
 .../account-list/account-list.component.ts    |  177 +-
 .../app/account/account-type.resolver.spec.ts |   18 -
 .../src/app/account/account-type.resolver.ts  |    9 -
 .../src/app/account/account-type.service.ts   |   12 +-
 .../src/app/account/account.resolver.spec.ts  |   18 -
 overlord/src/app/account/account.resolver.ts  |   10 -
 overlord/src/app/account/account.routes.ts    |   18 -
 overlord/src/app/app.config.ts                |   58 +-
 .../app/attendance/attendance-datasource.ts   |   16 -
 .../attendance/attendance-type.resolver.ts    |    9 -
 .../app/attendance/attendance-type.service.ts |   12 +-
 .../app/attendance/attendance.component.html  |  128 +-
 .../app/attendance/attendance.component.ts    |  114 +-
 .../attendance/attendance.resolver.spec.ts    |   18 -
 .../src/app/attendance/attendance.resolver.ts |   10 -
 .../src/app/attendance/attendance.routes.ts   |   10 -
 .../src/app/attendance/attendance.service.ts  |   18 +-
 .../src/app/auth/login/login.component.html   |    8 +-
 .../src/app/auth/login/login.component.ts     |   46 +-
 .../balance-sheet/balance-sheet-datasource.ts |   72 -
 .../balance-sheet.component.html              |   92 +-
 .../balance-sheet/balance-sheet.component.ts  |  124 +-
 .../balance-sheet.resolver.spec.ts            |   18 -
 .../balance-sheet/balance-sheet.resolver.ts   |   10 -
 .../app/balance-sheet/balance-sheet.routes.ts |    7 -
 .../balance-sheet/balance-sheet.service.ts    |   22 +-
 .../batch-integrity-report-datasource.ts      |   16 -
 .../batch-integrity-report.component.html     |   58 +-
 .../batch-integrity-report.component.ts       |   23 +-
 .../batch-integrity-report.routes.ts          |    4 -
 .../batch-integrity-report.service.ts         |   22 +-
 .../batch-integrity.resolver.spec.ts          |   18 -
 .../batch-integrity.resolver.ts               |    9 -
 .../src/app/cash-flow/cash-flow-datasource.ts |   16 -
 .../app/cash-flow/cash-flow.component.html    |   52 +-
 .../src/app/cash-flow/cash-flow.component.ts  |  103 +-
 .../app/cash-flow/cash-flow.resolver.spec.ts  |   18 -
 .../src/app/cash-flow/cash-flow.resolver.ts   |   12 -
 .../src/app/cash-flow/cash-flow.routes.ts     |    7 -
 .../src/app/cash-flow/cash-flow.service.ts    |   48 +-
 .../client-detail.component.html              |   61 +-
 .../client-detail/client-detail.component.ts  |  101 +-
 .../app/client/client-list.resolver.spec.ts   |   18 -
 .../src/app/client/client-list.resolver.ts    |    9 -
 .../client-list/client-list-datasource.ts     |   71 -
 .../client-list/client-list.component.html    |   98 +-
 .../client-list/client-list.component.ts      |   86 +-
 .../src/app/client/client.resolver.spec.ts    |   18 -
 overlord/src/app/client/client.resolver.ts    |   10 -
 overlord/src/app/client/client.routes.ts      |    8 -
 overlord/src/app/client/client.service.ts     |   26 +-
 .../closing-stock/closing-stock-datasource.ts |   73 -
 .../closing-stock.component.html              |  156 +-
 .../closing-stock/closing-stock.component.ts  |  194 +-
 .../closing-stock.resolver.spec.ts            |   18 -
 .../closing-stock/closing-stock.resolver.ts   |   11 -
 .../app/closing-stock/closing-stock.routes.ts |   10 -
 .../closing-stock/closing-stock.service.ts    |   29 +-
 overlord/src/app/core/account.service.ts      |   64 +-
 overlord/src/app/core/batch.service.ts        |   20 +-
 overlord/src/app/core/delay-interceptor.ts    |    7 +
 .../app/core/nav-bar/nav-bar.component.html   |    2 +-
 .../src/app/core/nav-bar/nav-bar.component.ts |   17 +-
 overlord/src/app/core/product-sku.ts          |    4 +
 overlord/src/app/core/product.ts              |    3 +
 overlord/src/app/core/title.service.ts        |   19 +-
 overlord/src/app/core/voucher.service.ts      |   80 +-
 .../cost-centre-detail.component.html         |   29 +-
 .../cost-centre-detail.component.ts           |   77 +-
 .../cost-centre-list.resolver.spec.ts         |   18 -
 .../cost-centre/cost-centre-list.resolver.ts  |    9 -
 .../cost-centre-list-datasource.ts            |   69 -
 .../cost-centre-list.component.html           |   54 +-
 .../cost-centre-list.component.ts             |   81 +-
 .../cost-centre/cost-centre.resolver.spec.ts  |   18 -
 .../app/cost-centre/cost-centre.resolver.ts   |   10 -
 .../src/app/cost-centre/cost-centre.routes.ts |   11 -
 .../app/cost-centre/cost-centre.service.ts    |   28 +-
 .../src/app/daybook/daybook-datasource.ts     |   73 -
 .../src/app/daybook/daybook.component.html    |  120 +-
 overlord/src/app/daybook/daybook.component.ts |  130 +-
 .../src/app/daybook/daybook.resolver.spec.ts  |   18 -
 overlord/src/app/daybook/daybook.resolver.ts  |   11 -
 overlord/src/app/daybook/daybook.routes.ts    |    4 -
 overlord/src/app/daybook/daybook.service.ts   |   32 +-
 .../employee-attendance-datasource.ts         |   16 -
 .../employee-attendance.component.html        |  145 +-
 .../employee-attendance.component.ts          |  189 +-
 .../employee-attendance.resolver.ts           |   12 -
 .../employee-attendance.routes.ts             |   10 -
 .../employee-attendance.service.ts            |   38 +-
 .../employee-benefits-datasource.ts           |   16 -
 .../employee-benefits.component.html          |   39 +-
 .../employee-benefits.component.ts            |  298 +-
 .../employee-benefits.resolver.ts             |   14 -
 .../employee-benefits.routes.ts               |    7 -
 .../employee-functions.component.html         |   20 +-
 .../employee-functions.component.ts           |   56 +-
 .../employee-functions.service.ts             |    6 +-
 .../employee-detail.component.html            |  143 +-
 .../employee-detail.component.ts              |  143 +-
 .../employee/employee-list.resolver.spec.ts   |   18 -
 .../app/employee/employee-list.resolver.ts    |    9 -
 .../employee-list/employee-list-datasource.ts |  106 -
 .../employee-list.component.html              |  134 +-
 .../employee-list/employee-list.component.ts  |  177 +-
 .../app/employee/employee.resolver.spec.ts    |   18 -
 .../src/app/employee/employee.resolver.ts     |   10 -
 overlord/src/app/employee/employee.routes.ts  |   14 -
 overlord/src/app/employee/employee.service.ts |   35 +-
 .../src/app/entries/entries-datasource.ts     |   44 -
 .../src/app/entries/entries.component.html    |  167 +-
 overlord/src/app/entries/entries.component.ts |  204 +-
 .../src/app/entries/entries.resolver.spec.ts  |   17 -
 overlord/src/app/entries/entries.resolver.ts  |   26 -
 overlord/src/app/entries/entries.routes.ts    |    4 -
 overlord/src/app/entries/entries.service.ts   |   63 +-
 .../src/app/incentive/incentive-datasource.ts |   16 -
 .../app/incentive/incentive.component.html    |   54 +-
 .../src/app/incentive/incentive.component.ts  |  184 +-
 .../app/incentive/incentive.resolver.spec.ts  |   18 -
 .../src/app/incentive/incentive.resolver.ts   |   14 -
 .../src/app/incentive/incentive.routes.ts     |    7 -
 overlord/src/app/issue/issue-datasource.ts    |   16 -
 .../src/app/issue/issue-dialog.component.html |   15 +-
 .../src/app/issue/issue-dialog.component.ts   |   92 +-
 .../src/app/issue/issue-grid-datasource.ts    |   16 -
 overlord/src/app/issue/issue-grid.service.ts  |   18 +-
 overlord/src/app/issue/issue.component.html   |  156 +-
 overlord/src/app/issue/issue.component.ts     |  495 +-
 overlord/src/app/issue/issue.resolver.spec.ts |   18 -
 overlord/src/app/issue/issue.resolver.ts      |   14 -
 overlord/src/app/issue/issue.routes.ts        |   10 -
 .../src/app/journal/journal-datasource.ts     |   16 -
 .../app/journal/journal-dialog.component.html |   29 +-
 .../app/journal/journal-dialog.component.ts   |  108 +-
 .../src/app/journal/journal.component.html    |  247 +-
 overlord/src/app/journal/journal.component.ts |  561 ++-
 .../src/app/journal/journal.resolver.spec.ts  |   18 -
 overlord/src/app/journal/journal.resolver.ts  |   14 -
 overlord/src/app/journal/journal.routes.ts    |    7 -
 overlord/src/app/ledger/ledger-datasource.ts  |  120 -
 overlord/src/app/ledger/ledger.component.html |  198 +-
 overlord/src/app/ledger/ledger.component.ts   |  236 +-
 .../src/app/ledger/ledger.resolver.spec.ts    |   18 -
 overlord/src/app/ledger/ledger.resolver.ts    |   12 -
 overlord/src/app/ledger/ledger.routes.ts      |   10 -
 overlord/src/app/ledger/ledger.service.ts     |   34 +-
 .../mozimo-daily-register-datasource.ts       |   63 -
 .../mozimo-daily-register.component.html      |  211 +-
 .../mozimo-daily-register.component.ts        |  172 +-
 .../mozimo-daily-register.resolver.spec.ts    |   18 -
 .../mozimo-daily-register.resolver.ts         |   10 -
 .../mozimo-daily-register.routes.ts           |    7 -
 .../mozimo-daily-register.service.ts          |   18 +-
 .../mozimo-product-register-datasource.ts     |   66 -
 .../mozimo-product-register.component.html    |  217 +-
 .../mozimo-product-register.component.ts      |  214 +-
 .../mozimo-product-register.resolver.spec.ts  |   18 -
 .../mozimo-product-register.resolver.ts       |   12 -
 .../mozimo-product-register.routes.ts         |    7 -
 .../mozimo-product-register.service.ts        |   40 +-
 .../net-transactions-datasource.ts            |   75 -
 .../net-transactions.component.html           |   80 +-
 .../net-transactions.component.ts             |  127 +-
 .../net-transactions.resolver.spec.ts         |   18 -
 .../net-transactions.resolver.ts              |   11 -
 .../net-transactions.routes.ts                |    4 -
 .../net-transactions.service.ts               |   32 +-
 .../non-contract-purchase-datasource.ts       |   16 -
 .../non-contract-purchase.component.html      |   68 +-
 .../non-contract-purchase.component.ts        |   31 +-
 .../non-contract-purchase.resolver.spec.ts    |   18 -
 .../non-contract-purchase.resolver.ts         |    9 -
 .../non-contract-purchase.routes.ts           |    4 -
 .../non-contract-purchase.service.ts          |   22 +-
 .../payment/payment-accounts.resolver.spec.ts |   18 -
 .../app/payment/payment-accounts.resolver.ts  |    9 -
 .../src/app/payment/payment-datasource.ts     |   16 -
 .../app/payment/payment-dialog.component.html |   30 +-
 .../app/payment/payment-dialog.component.ts   |  102 +-
 .../src/app/payment/payment.component.html    |  247 +-
 overlord/src/app/payment/payment.component.ts |  591 ++-
 .../src/app/payment/payment.resolver.spec.ts  |   18 -
 overlord/src/app/payment/payment.resolver.ts  |   15 -
 overlord/src/app/payment/payment.routes.ts    |   10 -
 .../period-detail.component.html              |   55 +-
 .../period-detail/period-detail.component.ts  |   87 +-
 .../app/period/period-list.resolver.spec.ts   |   18 -
 .../src/app/period/period-list.resolver.ts    |    9 -
 .../period-list/period-list-datasource.ts     |   16 -
 .../period-list/period-list.component.html    |   42 +-
 .../period-list/period-list.component.ts      |   35 +-
 .../src/app/period/period.resolver.spec.ts    |   18 -
 overlord/src/app/period/period.resolver.ts    |   10 -
 overlord/src/app/period/period.routes.ts      |   14 -
 overlord/src/app/period/period.service.ts     |   28 +-
 .../product-group-detail.component.html       |   37 +-
 .../product-group-detail.component.ts         |   92 +-
 .../product-group-list.resolver.spec.ts       |   18 -
 .../product-group-list.resolver.ts            |    9 -
 .../product-group-list-datasource.ts          |   69 -
 .../product-group-list.component.html         |   54 +-
 .../product-group-list.component.ts           |   81 +-
 .../product-group.resolver.spec.ts            |   18 -
 .../product-group/product-group.resolver.ts   |   10 -
 .../app/product-group/product-group.routes.ts |   11 -
 .../product-group/product-group.service.ts    |   28 +-
 .../product-ledger-datasource.ts              |   77 -
 .../product-ledger.component.html             |  186 +-
 .../product-ledger.component.ts               |  242 +-
 .../product-ledger.resolver.spec.ts           |   18 -
 .../product-ledger/product-ledger.resolver.ts |   12 -
 .../product-ledger/product-ledger.routes.ts   |    7 -
 .../product-ledger/product-ledger.service.ts  |   31 +-
 .../product-detail-datasource.ts              |   16 -
 .../product-detail-dialog.component.html      |   12 +-
 .../product-detail-dialog.component.ts        |   76 +-
 .../product-detail.component.html             |  156 +-
 .../product-detail.component.ts               |  389 +-
 .../app/product/product-list.resolver.spec.ts |   18 -
 .../src/app/product/product-list.resolver.ts  |    9 -
 .../product-list/product-list-datasource.ts   |   96 -
 .../product-list/product-list.component.html  |  180 +-
 .../product-list/product-list.component.ts    |  190 +-
 .../src/app/product/product.resolver.spec.ts  |   18 -
 overlord/src/app/product/product.resolver.ts  |   10 -
 overlord/src/app/product/product.routes.ts    |   14 -
 overlord/src/app/product/product.service.ts   |   85 +-
 .../app/profit-loss/profit-loss-datasource.ts |   75 -
 .../profit-loss/profit-loss.component.html    |   94 +-
 .../app/profit-loss/profit-loss.component.ts  |  132 +-
 .../profit-loss/profit-loss.resolver.spec.ts  |   18 -
 .../app/profit-loss/profit-loss.resolver.ts   |   11 -
 .../src/app/profit-loss/profit-loss.routes.ts |    4 -
 .../app/profit-loss/profit-loss.service.ts    |   28 +-
 .../purchase-entries-datasource.ts            |   75 -
 .../purchase-entries.component.html           |  120 +-
 .../purchase-entries.component.ts             |  133 +-
 .../purchase-entries.resolver.spec.ts         |   18 -
 .../purchase-entries.resolver.ts              |   11 -
 .../purchase-entries.routes.ts                |    4 -
 .../purchase-entries.service.ts               |   28 +-
 .../purchase-return-datasource.ts             |   16 -
 .../purchase-return-dialog.component.html     |   15 +-
 .../purchase-return-dialog.component.ts       |   92 +-
 .../purchase-return.component.html            |  290 +-
 .../purchase-return.component.ts              |  595 ++-
 .../purchase-return.resolver.spec.ts          |   18 -
 .../purchase-return.resolver.ts               |   13 -
 .../purchase-return/purchase-return.routes.ts |    7 -
 .../src/app/purchase/purchase-datasource.ts   |   16 -
 .../purchase/purchase-dialog.component.html   |   14 +-
 .../app/purchase/purchase-dialog.component.ts |  129 +-
 .../src/app/purchase/purchase.component.html  |  287 +-
 .../src/app/purchase/purchase.component.ts    |  654 ++-
 .../app/purchase/purchase.resolver.spec.ts    |   18 -
 .../src/app/purchase/purchase.resolver.ts     |   13 -
 overlord/src/app/purchase/purchase.routes.ts  |    7 -
 .../src/app/purchases/purchases-datasource.ts |   75 -
 .../app/purchases/purchases.component.html    |  108 +-
 .../src/app/purchases/purchases.component.ts  |  124 +-
 .../app/purchases/purchases.resolver.spec.ts  |   18 -
 .../src/app/purchases/purchases.resolver.ts   |   11 -
 .../src/app/purchases/purchases.routes.ts     |    4 -
 .../src/app/purchases/purchases.service.ts    |   28 +-
 .../rate-contract-detail-datasource.ts        |   16 -
 .../rate-contract-detail.component.html       |   84 +-
 .../rate-contract-detail.component.ts         |  252 +-
 .../rate-contract-list.resolver.spec.ts       |   18 -
 .../rate-contract-list.resolver.ts            |    9 -
 .../rate-contract-list-datasource.ts          |   69 -
 .../rate-contract-list.component.html         |   76 +-
 .../rate-contract-list.component.ts           |   79 +-
 .../rate-contract.resolver.spec.ts            |   18 -
 .../rate-contract/rate-contract.resolver.ts   |   10 -
 .../app/rate-contract/rate-contract.routes.ts |   11 -
 .../rate-contract/rate-contract.service.ts    |   28 +-
 .../raw-material-cost-datasource.ts           |   69 -
 .../raw-material-cost.component.html          |  158 +-
 .../raw-material-cost.component.ts            |  142 +-
 .../raw-material-cost.resolver.spec.ts        |   18 -
 .../raw-material-cost.resolver.ts             |   12 -
 .../raw-material-cost.routes.ts               |    7 -
 .../raw-material-cost.service.ts              |   44 +-
 .../receipt/receipt-accounts.resolver.spec.ts |   18 -
 .../app/receipt/receipt-accounts.resolver.ts  |    9 -
 .../src/app/receipt/receipt-datasource.ts     |   16 -
 .../app/receipt/receipt-dialog.component.html |   21 +-
 .../app/receipt/receipt-dialog.component.ts   |  102 +-
 .../src/app/receipt/receipt.component.html    |  241 +-
 overlord/src/app/receipt/receipt.component.ts |  599 ++-
 .../src/app/receipt/receipt.resolver.spec.ts  |   18 -
 overlord/src/app/receipt/receipt.resolver.ts  |   15 -
 overlord/src/app/receipt/receipt.routes.ts    |   10 -
 .../recipe-template-detail.component.html     |   57 +-
 .../recipe-template-detail.component.ts       |   98 +-
 .../recipe-template-list.resolver.spec.ts     |   18 -
 .../recipe-template-list.resolver.ts          |    9 -
 .../recipe-template-list-datasource.ts        |   71 -
 .../recipe-template-list.component.html       |   64 +-
 .../recipe-template-list.component.ts         |   85 +-
 .../recipe-template.resolver.spec.ts          |   18 -
 .../recipe-template.resolver.ts               |   10 -
 .../recipe-template/recipe-template.routes.ts |   11 -
 .../recipe-template.service.ts                |   28 +-
 .../recipe-detail/recipe-detail-datasource.ts |   16 -
 .../recipe-detail/recipe-detail.component.css |  186 +
 .../recipe-detail.component.html              |  530 +-
 .../recipe-detail/recipe-detail.component.ts  |  624 ++-
 .../app/recipe/recipe-list.resolver.spec.ts   |   18 -
 .../src/app/recipe/recipe-list.resolver.ts    |   10 -
 .../recipe-list/recipe-list-datasource.ts     |  100 -
 .../recipe-list/recipe-list.component.html    |  102 +-
 .../recipe-list/recipe-list.component.ts      |  153 +-
 overlord/src/app/recipe/recipe-photo.ts       |   13 +
 overlord/src/app/recipe/recipe-step.ts        |   11 +
 .../src/app/recipe/recipe.resolver.spec.ts    |   18 -
 overlord/src/app/recipe/recipe.resolver.ts    |   10 -
 overlord/src/app/recipe/recipe.routes.ts      |   17 -
 overlord/src/app/recipe/recipe.service.ts     |   37 +-
 overlord/src/app/recipe/recipe.ts             |   20 +-
 .../role-detail/role-detail.component.html    |   72 +-
 .../role/role-detail/role-detail.component.ts |  195 +-
 .../src/app/role/role-list.resolver.spec.ts   |   18 -
 overlord/src/app/role/role-list.resolver.ts   |    9 -
 .../role/role-list/role-list-datasource.ts    |   69 -
 .../role/role-list/role-list.component.html   |   92 +-
 .../app/role/role-list/role-list.component.ts |   86 +-
 overlord/src/app/role/role.resolver.spec.ts   |   18 -
 overlord/src/app/role/role.resolver.ts        |   10 -
 overlord/src/app/role/role.routes.ts          |   11 -
 overlord/src/app/role/role.service.ts         |   28 +-
 overlord/src/app/settings/lock-datasource.ts  |   16 -
 .../app/settings/lock-information.resolver.ts |    9 -
 .../src/app/settings/maintenance.resolver.ts  |    8 -
 .../src/app/settings/settings.component.html  |   84 +-
 .../src/app/settings/settings.component.ts    |  228 +-
 overlord/src/app/settings/settings.routes.ts  |   10 -
 overlord/src/app/settings/settings.service.ts |   29 +-
 .../src/app/settings/voucher-type.resolver.ts |    9 -
 .../src/app/settings/voucher-type.service.ts  |   12 +-
 .../error-state/error-state.component.html    |   10 +
 .../error-state/error-state.component.sass    |   33 +
 .../error-state/error-state.component.spec.ts |   22 +
 .../error-state/error-state.component.ts      |   21 +
 overlord/src/app/shared/pdf-export.service.ts |   52 +
 .../skeleton-loader.component.html            |   16 +
 .../skeleton-loader.component.sass            |   52 +
 .../skeleton-loader.component.spec.ts         |   22 +
 .../skeleton-loader.component.ts              |   17 +
 .../app/shared/spinner/spinner.component.html |    3 +
 .../app/shared/spinner/spinner.component.sass |   18 +
 .../shared/spinner/spinner.component.spec.ts  |   22 +
 .../app/shared/spinner/spinner.component.ts   |   12 +
 .../stock-movement-datasource.ts              |   79 -
 .../stock-movement.component.html             |  104 +-
 .../stock-movement.component.ts               |  124 +-
 .../stock-movement.resolver.spec.ts           |   18 -
 .../stock-movement/stock-movement.resolver.ts |   11 -
 .../stock-movement/stock-movement.routes.ts   |    4 -
 .../stock-movement/stock-movement.service.ts  |   32 +-
 .../app/tag-dialog/tag-dialog.component.html  |    4 +-
 .../app/tag-dialog/tag-dialog.component.ts    |   34 +-
 .../tag/tag-detail/tag-detail.component.html  |   35 +-
 .../tag/tag-detail/tag-detail.component.ts    |   81 +-
 .../src/app/tag/tag-list.resolver.spec.ts     |   18 -
 overlord/src/app/tag/tag-list.resolver.ts     |    9 -
 .../app/tag/tag-list/tag-list-datasource.ts   |   69 -
 .../app/tag/tag-list/tag-list.component.html  |   44 +-
 .../app/tag/tag-list/tag-list.component.ts    |   81 +-
 overlord/src/app/tag/tag.resolver.spec.ts     |   18 -
 overlord/src/app/tag/tag.resolver.ts          |   10 -
 overlord/src/app/tag/tag.routes.ts            |   11 -
 overlord/src/app/tag/tag.service.ts           |   40 +-
 ...poral-product-detail-product-datasource.ts |   16 -
 .../temporal-product-detail-sku-datasource.ts |   16 -
 .../temporal-product-detail.component.html    |  581 +--
 .../temporal-product-detail.component.ts      |  627 ++-
 .../temporal-product-list.resolver.spec.ts    |   18 -
 .../temporal-product-list.resolver.ts         |    9 -
 .../temporal-product-list-datasource.ts       |   81 -
 .../temporal-product-list.component.html      |   98 +-
 .../temporal-product-list.component.ts        |  109 +-
 .../temporal-product.resolver.spec.ts         |   15 -
 .../temporal-product.resolver.ts              |   10 -
 .../temporal-product.service.ts               |   22 +-
 .../temporal-products.routes.ts               |   15 -
 .../transaction-import.component.ts           |   26 +-
 .../trial-balance/trial-balance-datasource.ts |   75 -
 .../trial-balance.component.html              |   74 +-
 .../trial-balance/trial-balance.component.ts  |  118 +-
 .../trial-balance.resolver.spec.ts            |   18 -
 .../trial-balance/trial-balance.resolver.ts   |   10 -
 .../app/trial-balance/trial-balance.routes.ts |    7 -
 .../trial-balance/trial-balance.service.ts    |   19 +-
 .../user-detail/user-detail.component.html    |   67 +-
 .../user/user-detail/user-detail.component.ts |  117 +-
 .../src/app/user/user-list.resolver.spec.ts   |   18 -
 overlord/src/app/user/user-list.resolver.ts   |    9 -
 .../user/user-list/user-list-datasource.ts    |   70 -
 .../user/user-list/user-list.component.html   |   90 +-
 .../app/user/user-list/user-list.component.ts |   81 +-
 overlord/src/app/user/user.resolver.spec.ts   |   18 -
 overlord/src/app/user/user.resolver.ts        |   10 -
 overlord/src/app/user/user.routes.ts          |   11 -
 overlord/src/app/user/user.service.ts         |   36 +-
 overlord/src/layout.sass                      |  124 +
 overlord/src/styles.sass                      |  115 +
 overlord/tsconfig.app.json                    |   10 +-
 overlord/yarn.lock                            | 4305 +++++++----------
 443 files changed, 16058 insertions(+), 17332 deletions(-)
 create mode 100644 .agents/mcp_config.json
 create mode 100644 .agents/rules.md
 create mode 100644 .agents/rules/angular.md
 create mode 100644 .agents/skills/angular-signals/SKILL.md
 create mode 100644 .agents/skills/fastapi-pydantic-v2/SKILL.md
 create mode 100644 .agents/skills/library-skills/.library-skills.json
 create mode 100644 .agents/skills/library-skills/SKILL.md
 create mode 100644 .agents/skills/sqlalchemy-async/SKILL.md
 create mode 100644 .agents/skills/strict-mypy/SKILL.md
 create mode 100644 brewman/alembic/versions/09a4f0ca450f_recipe_steps_photos.py
 create mode 100644 brewman/brewman/models/recipe_photo.py
 create mode 100644 brewman/brewman/models/recipe_step.py
 create mode 100644 brewman/brewman/schemas/recipe_photo.py
 create mode 100644 brewman/brewman/schemas/recipe_step.py
 delete mode 100644 overlord/src/app/account/account-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/account/account-list.resolver.ts
 delete mode 100644 overlord/src/app/account/account-list/account-list-datasource.ts
 delete mode 100644 overlord/src/app/account/account-type.resolver.spec.ts
 delete mode 100644 overlord/src/app/account/account-type.resolver.ts
 delete mode 100644 overlord/src/app/account/account.resolver.spec.ts
 delete mode 100644 overlord/src/app/account/account.resolver.ts
 delete mode 100644 overlord/src/app/attendance/attendance-datasource.ts
 delete mode 100644 overlord/src/app/attendance/attendance-type.resolver.ts
 delete mode 100644 overlord/src/app/attendance/attendance.resolver.spec.ts
 delete mode 100644 overlord/src/app/attendance/attendance.resolver.ts
 delete mode 100644 overlord/src/app/balance-sheet/balance-sheet-datasource.ts
 delete mode 100644 overlord/src/app/balance-sheet/balance-sheet.resolver.spec.ts
 delete mode 100644 overlord/src/app/balance-sheet/balance-sheet.resolver.ts
 delete mode 100644 overlord/src/app/batch-integrity-report/batch-integrity-report-datasource.ts
 delete mode 100644 overlord/src/app/batch-integrity-report/batch-integrity.resolver.spec.ts
 delete mode 100644 overlord/src/app/batch-integrity-report/batch-integrity.resolver.ts
 delete mode 100644 overlord/src/app/cash-flow/cash-flow-datasource.ts
 delete mode 100644 overlord/src/app/cash-flow/cash-flow.resolver.spec.ts
 delete mode 100644 overlord/src/app/cash-flow/cash-flow.resolver.ts
 delete mode 100644 overlord/src/app/client/client-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/client/client-list.resolver.ts
 delete mode 100644 overlord/src/app/client/client-list/client-list-datasource.ts
 delete mode 100644 overlord/src/app/client/client.resolver.spec.ts
 delete mode 100644 overlord/src/app/client/client.resolver.ts
 delete mode 100644 overlord/src/app/closing-stock/closing-stock-datasource.ts
 delete mode 100644 overlord/src/app/closing-stock/closing-stock.resolver.spec.ts
 delete mode 100644 overlord/src/app/closing-stock/closing-stock.resolver.ts
 create mode 100644 overlord/src/app/core/delay-interceptor.ts
 delete mode 100644 overlord/src/app/cost-centre/cost-centre-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/cost-centre/cost-centre-list.resolver.ts
 delete mode 100644 overlord/src/app/cost-centre/cost-centre-list/cost-centre-list-datasource.ts
 delete mode 100644 overlord/src/app/cost-centre/cost-centre.resolver.spec.ts
 delete mode 100644 overlord/src/app/cost-centre/cost-centre.resolver.ts
 delete mode 100644 overlord/src/app/daybook/daybook-datasource.ts
 delete mode 100644 overlord/src/app/daybook/daybook.resolver.spec.ts
 delete mode 100644 overlord/src/app/daybook/daybook.resolver.ts
 delete mode 100644 overlord/src/app/employee-attendance/employee-attendance-datasource.ts
 delete mode 100644 overlord/src/app/employee-attendance/employee-attendance.resolver.ts
 delete mode 100644 overlord/src/app/employee-benefits/employee-benefits-datasource.ts
 delete mode 100644 overlord/src/app/employee-benefits/employee-benefits.resolver.ts
 delete mode 100644 overlord/src/app/employee/employee-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/employee/employee-list.resolver.ts
 delete mode 100644 overlord/src/app/employee/employee-list/employee-list-datasource.ts
 delete mode 100644 overlord/src/app/employee/employee.resolver.spec.ts
 delete mode 100644 overlord/src/app/employee/employee.resolver.ts
 delete mode 100644 overlord/src/app/entries/entries-datasource.ts
 delete mode 100644 overlord/src/app/entries/entries.resolver.spec.ts
 delete mode 100644 overlord/src/app/entries/entries.resolver.ts
 delete mode 100644 overlord/src/app/incentive/incentive-datasource.ts
 delete mode 100644 overlord/src/app/incentive/incentive.resolver.spec.ts
 delete mode 100644 overlord/src/app/incentive/incentive.resolver.ts
 delete mode 100644 overlord/src/app/issue/issue-datasource.ts
 delete mode 100644 overlord/src/app/issue/issue-grid-datasource.ts
 delete mode 100644 overlord/src/app/issue/issue.resolver.spec.ts
 delete mode 100644 overlord/src/app/issue/issue.resolver.ts
 delete mode 100644 overlord/src/app/journal/journal-datasource.ts
 delete mode 100644 overlord/src/app/journal/journal.resolver.spec.ts
 delete mode 100644 overlord/src/app/journal/journal.resolver.ts
 delete mode 100644 overlord/src/app/ledger/ledger-datasource.ts
 delete mode 100644 overlord/src/app/ledger/ledger.resolver.spec.ts
 delete mode 100644 overlord/src/app/ledger/ledger.resolver.ts
 delete mode 100644 overlord/src/app/mozimo-daily-register/mozimo-daily-register-datasource.ts
 delete mode 100644 overlord/src/app/mozimo-daily-register/mozimo-daily-register.resolver.spec.ts
 delete mode 100644 overlord/src/app/mozimo-daily-register/mozimo-daily-register.resolver.ts
 delete mode 100644 overlord/src/app/mozimo-product-register/mozimo-product-register-datasource.ts
 delete mode 100644 overlord/src/app/mozimo-product-register/mozimo-product-register.resolver.spec.ts
 delete mode 100644 overlord/src/app/mozimo-product-register/mozimo-product-register.resolver.ts
 delete mode 100644 overlord/src/app/net-transactions/net-transactions-datasource.ts
 delete mode 100644 overlord/src/app/net-transactions/net-transactions.resolver.spec.ts
 delete mode 100644 overlord/src/app/net-transactions/net-transactions.resolver.ts
 delete mode 100644 overlord/src/app/non-contact-purchase/non-contract-purchase-datasource.ts
 delete mode 100644 overlord/src/app/non-contact-purchase/non-contract-purchase.resolver.spec.ts
 delete mode 100644 overlord/src/app/non-contact-purchase/non-contract-purchase.resolver.ts
 delete mode 100644 overlord/src/app/payment/payment-accounts.resolver.spec.ts
 delete mode 100644 overlord/src/app/payment/payment-accounts.resolver.ts
 delete mode 100644 overlord/src/app/payment/payment-datasource.ts
 delete mode 100644 overlord/src/app/payment/payment.resolver.spec.ts
 delete mode 100644 overlord/src/app/payment/payment.resolver.ts
 delete mode 100644 overlord/src/app/period/period-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/period/period-list.resolver.ts
 delete mode 100644 overlord/src/app/period/period-list/period-list-datasource.ts
 delete mode 100644 overlord/src/app/period/period.resolver.spec.ts
 delete mode 100644 overlord/src/app/period/period.resolver.ts
 delete mode 100644 overlord/src/app/product-group/product-group-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/product-group/product-group-list.resolver.ts
 delete mode 100644 overlord/src/app/product-group/product-group-list/product-group-list-datasource.ts
 delete mode 100644 overlord/src/app/product-group/product-group.resolver.spec.ts
 delete mode 100644 overlord/src/app/product-group/product-group.resolver.ts
 delete mode 100644 overlord/src/app/product-ledger/product-ledger-datasource.ts
 delete mode 100644 overlord/src/app/product-ledger/product-ledger.resolver.spec.ts
 delete mode 100644 overlord/src/app/product-ledger/product-ledger.resolver.ts
 delete mode 100644 overlord/src/app/product/product-detail/product-detail-datasource.ts
 delete mode 100644 overlord/src/app/product/product-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/product/product-list.resolver.ts
 delete mode 100644 overlord/src/app/product/product-list/product-list-datasource.ts
 delete mode 100644 overlord/src/app/product/product.resolver.spec.ts
 delete mode 100644 overlord/src/app/product/product.resolver.ts
 delete mode 100644 overlord/src/app/profit-loss/profit-loss-datasource.ts
 delete mode 100644 overlord/src/app/profit-loss/profit-loss.resolver.spec.ts
 delete mode 100644 overlord/src/app/profit-loss/profit-loss.resolver.ts
 delete mode 100644 overlord/src/app/purchase-entries/purchase-entries-datasource.ts
 delete mode 100644 overlord/src/app/purchase-entries/purchase-entries.resolver.spec.ts
 delete mode 100644 overlord/src/app/purchase-entries/purchase-entries.resolver.ts
 delete mode 100644 overlord/src/app/purchase-return/purchase-return-datasource.ts
 delete mode 100644 overlord/src/app/purchase-return/purchase-return.resolver.spec.ts
 delete mode 100644 overlord/src/app/purchase-return/purchase-return.resolver.ts
 delete mode 100644 overlord/src/app/purchase/purchase-datasource.ts
 delete mode 100644 overlord/src/app/purchase/purchase.resolver.spec.ts
 delete mode 100644 overlord/src/app/purchase/purchase.resolver.ts
 delete mode 100644 overlord/src/app/purchases/purchases-datasource.ts
 delete mode 100644 overlord/src/app/purchases/purchases.resolver.spec.ts
 delete mode 100644 overlord/src/app/purchases/purchases.resolver.ts
 delete mode 100644 overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail-datasource.ts
 delete mode 100644 overlord/src/app/rate-contract/rate-contract-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/rate-contract/rate-contract-list.resolver.ts
 delete mode 100644 overlord/src/app/rate-contract/rate-contract-list/rate-contract-list-datasource.ts
 delete mode 100644 overlord/src/app/rate-contract/rate-contract.resolver.spec.ts
 delete mode 100644 overlord/src/app/rate-contract/rate-contract.resolver.ts
 delete mode 100644 overlord/src/app/raw-material-cost/raw-material-cost-datasource.ts
 delete mode 100644 overlord/src/app/raw-material-cost/raw-material-cost.resolver.spec.ts
 delete mode 100644 overlord/src/app/raw-material-cost/raw-material-cost.resolver.ts
 delete mode 100644 overlord/src/app/receipt/receipt-accounts.resolver.spec.ts
 delete mode 100644 overlord/src/app/receipt/receipt-accounts.resolver.ts
 delete mode 100644 overlord/src/app/receipt/receipt-datasource.ts
 delete mode 100644 overlord/src/app/receipt/receipt.resolver.spec.ts
 delete mode 100644 overlord/src/app/receipt/receipt.resolver.ts
 delete mode 100644 overlord/src/app/recipe-template/recipe-template-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/recipe-template/recipe-template-list.resolver.ts
 delete mode 100644 overlord/src/app/recipe-template/recipe-template-list/recipe-template-list-datasource.ts
 delete mode 100644 overlord/src/app/recipe-template/recipe-template.resolver.spec.ts
 delete mode 100644 overlord/src/app/recipe-template/recipe-template.resolver.ts
 delete mode 100644 overlord/src/app/recipe/recipe-detail/recipe-detail-datasource.ts
 delete mode 100644 overlord/src/app/recipe/recipe-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/recipe/recipe-list.resolver.ts
 delete mode 100644 overlord/src/app/recipe/recipe-list/recipe-list-datasource.ts
 create mode 100644 overlord/src/app/recipe/recipe-photo.ts
 create mode 100644 overlord/src/app/recipe/recipe-step.ts
 delete mode 100644 overlord/src/app/recipe/recipe.resolver.spec.ts
 delete mode 100644 overlord/src/app/recipe/recipe.resolver.ts
 delete mode 100644 overlord/src/app/role/role-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/role/role-list.resolver.ts
 delete mode 100644 overlord/src/app/role/role-list/role-list-datasource.ts
 delete mode 100644 overlord/src/app/role/role.resolver.spec.ts
 delete mode 100644 overlord/src/app/role/role.resolver.ts
 delete mode 100644 overlord/src/app/settings/lock-datasource.ts
 delete mode 100644 overlord/src/app/settings/lock-information.resolver.ts
 delete mode 100644 overlord/src/app/settings/maintenance.resolver.ts
 delete mode 100644 overlord/src/app/settings/voucher-type.resolver.ts
 create mode 100644 overlord/src/app/shared/error-state/error-state.component.html
 create mode 100644 overlord/src/app/shared/error-state/error-state.component.sass
 create mode 100644 overlord/src/app/shared/error-state/error-state.component.spec.ts
 create mode 100644 overlord/src/app/shared/error-state/error-state.component.ts
 create mode 100644 overlord/src/app/shared/pdf-export.service.ts
 create mode 100644 overlord/src/app/shared/skeleton-loader/skeleton-loader.component.html
 create mode 100644 overlord/src/app/shared/skeleton-loader/skeleton-loader.component.sass
 create mode 100644 overlord/src/app/shared/skeleton-loader/skeleton-loader.component.spec.ts
 create mode 100644 overlord/src/app/shared/skeleton-loader/skeleton-loader.component.ts
 create mode 100644 overlord/src/app/shared/spinner/spinner.component.html
 create mode 100644 overlord/src/app/shared/spinner/spinner.component.sass
 create mode 100644 overlord/src/app/shared/spinner/spinner.component.spec.ts
 create mode 100644 overlord/src/app/shared/spinner/spinner.component.ts
 delete mode 100644 overlord/src/app/stock-movement/stock-movement-datasource.ts
 delete mode 100644 overlord/src/app/stock-movement/stock-movement.resolver.spec.ts
 delete mode 100644 overlord/src/app/stock-movement/stock-movement.resolver.ts
 delete mode 100644 overlord/src/app/tag/tag-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/tag/tag-list.resolver.ts
 delete mode 100644 overlord/src/app/tag/tag-list/tag-list-datasource.ts
 delete mode 100644 overlord/src/app/tag/tag.resolver.spec.ts
 delete mode 100644 overlord/src/app/tag/tag.resolver.ts
 delete mode 100644 overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail-product-datasource.ts
 delete mode 100644 overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail-sku-datasource.ts
 delete mode 100644 overlord/src/app/temporal-product/temporal-product-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/temporal-product/temporal-product-list.resolver.ts
 delete mode 100644 overlord/src/app/temporal-product/temporal-product-list/temporal-product-list-datasource.ts
 delete mode 100644 overlord/src/app/temporal-product/temporal-product.resolver.spec.ts
 delete mode 100644 overlord/src/app/temporal-product/temporal-product.resolver.ts
 delete mode 100644 overlord/src/app/trial-balance/trial-balance-datasource.ts
 delete mode 100644 overlord/src/app/trial-balance/trial-balance.resolver.spec.ts
 delete mode 100644 overlord/src/app/trial-balance/trial-balance.resolver.ts
 delete mode 100644 overlord/src/app/user/user-list.resolver.spec.ts
 delete mode 100644 overlord/src/app/user/user-list.resolver.ts
 delete mode 100644 overlord/src/app/user/user-list/user-list-datasource.ts
 delete mode 100644 overlord/src/app/user/user.resolver.spec.ts
 delete mode 100644 overlord/src/app/user/user.resolver.ts

diff --git a/.agents/mcp_config.json b/.agents/mcp_config.json
new file mode 100644
index 00000000..199f6a62
--- /dev/null
+++ b/.agents/mcp_config.json
@@ -0,0 +1,31 @@
+{
+    "mcpServers": {
+        "postgres-db": {
+            "command": "npx",
+            "args": [
+                "-y",
+                "@modelcontextprotocol/server-postgres",
+                "${POSTGRES_URL}"
+            ],
+            "env": {
+                "POSTGRES_URL": "${env:SQLALCHEMY_DATABASE_URI}"
+            }
+        },
+        "filesystem": {
+            "command": "npx",
+            "args": [
+                "-y",
+                "@modelcontextprotocol/server-filesystem",
+                "."
+            ]
+        },
+        "angular-cli": {
+            "command": "npx",
+            "args": [
+                "-y",
+                "@angular/cli",
+                "mcp"
+            ]
+        }
+    }
+}
diff --git a/.agents/rules.md b/.agents/rules.md
new file mode 100644
index 00000000..ddc12db1
--- /dev/null
+++ b/.agents/rules.md
@@ -0,0 +1,30 @@
+# Project Architecture & Guidelines
+
+## Monorepo Layout
+- **Backend**: `./brewman` (Python, managed via `uv`)
+- **Frontend**: `./overlord` (Angular, managed via `npm`/`ng`)
+- **Environment**: Root `.env` file containing shared/database variables.
+
+---
+
+## Execution Rules & Commands
+
+### Backend (`/brewman`)
+- **Working Directory**: Always execute backend commands within `./brewman` OR pass `--directory brewman` to `uv`.
+- **Package & Script Management**:
+  - Use `uv` exclusively. Never run bare `pip` or global `python`.
+  - Run scripts/tests: `uv run python <script>` or `uv run pytest` from inside `./brewman`.
+  - Manage dependencies: `uv add <package>` or `uv remove <package>`.
+- **Environment**: The root `.env` file (`../.env` relative to `brewman`) contains the database connection string and secret keys.
+
+### Frontend (`/overlord`)
+- **Working Directory**: Always execute frontend commands within `./overlord`.
+- **Commands**:
+  - Run dev server: `npm start` or `ng serve`
+  - Code generation: `ng g c components/<name>` (prefer standalone components)
+  - Testing: `ng test --watch=false`
+  - Build: `ng build`
+
+### Database (PostgreSQL)
+- Database settings are defined in the root `.env`.
+- Inspect schema, run migrations, or check types strictly via database tools or `uv run` scripts inside `./brewman`.
diff --git a/.agents/rules/angular.md b/.agents/rules/angular.md
new file mode 100644
index 00000000..c9e1149f
--- /dev/null
+++ b/.agents/rules/angular.md
@@ -0,0 +1,117 @@
+---
+trigger: glob
+globs: ./bookie/**/**
+---
+
+# Persona
+
+You are a dedicated Angular developer who thrives on leveraging the absolute latest features of the framework to build cutting-edge applications. You are currently immersed in Angular v20+, passionately adopting signals for reactive state management, embracing standalone components for streamlined architecture, and utilizing the new control flow for more intuitive template logic. Performance is paramount to you, who constantly seeks to optimize change detection and improve user experience through these modern Angular paradigms. When prompted, assume You are familiar with all the newest APIs and best practices, valuing clean, efficient, and maintainable code.
+
+## Examples
+
+These are modern examples of how to write an Angular 20 component with signals
+
+```ts
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+
+
+@Component({
+  selector: '{{tag-name}}-root',
+  templateUrl: '{{tag-name}}.html',
+})
+export class {{ClassName}} {
+  protected readonly isServerRunning = signal(true);
+  toggleServerStatus() {
+    this.isServerRunning.update(isServerRunning => !isServerRunning);
+  }
+}
+```
+
+```css
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+
+  button {
+    margin-top: 10px;
+  }
+}
+```
+
+```html
+<section class="container">
+  @if (isServerRunning()) {
+  <span>Yes, the server is running</span>
+  } @else {
+  <span>No, the server is not running</span>
+  }
+  <button (click)="toggleServerStatus()">Toggle Server Status</button>
+</section>
+```
+
+When you update a component, be sure to put the logic in the ts file, the styles in the css file and the html template in the html file.
+
+## Resources
+
+Here are the some links to the essentials for building Angular applications. Use these to get an understanding of how some of the core functionality works
+https://angular.dev/essentials/components
+https://angular.dev/essentials/signals
+https://angular.dev/essentials/templates
+https://angular.dev/essentials/dependency-injection
+
+## Best practices & Style guide
+
+Here are the best practices and the style guide information.
+
+### Coding Style guide
+
+Here is a link to the most recent Angular style guide https://angular.dev/style-guide
+
+### TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+### Angular Best Practices
+
+- Always use standalone components over `NgModules`
+- Do NOT set `standalone: true` inside the `@Component`, `@Directive` and `@Pipe` decorators
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Use `NgOptimizedImage` for all static images.
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` signal instead of decorators, learn more here https://angular.dev/guide/components/inputs
+- Use `output()` function instead of decorators, learn more here https://angular.dev/guide/components/outputs
+- Use `computed()` for derived state learn more about signals here https://angular.dev/guide/signals.
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
+- Do NOT use `ngStyle`, use `style` bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
+
+### State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+### Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Use built in pipes and import pipes when being used in a template, learn more https://angular.dev/guide/templates/pipes#
+
+### Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection
diff --git a/.agents/skills/angular-signals/SKILL.md b/.agents/skills/angular-signals/SKILL.md
new file mode 100644
index 00000000..deb73cee
--- /dev/null
+++ b/.agents/skills/angular-signals/SKILL.md
@@ -0,0 +1,17 @@
+---
+name: angular-signals
+description: Writes modern Angular code using Standalone Components and Signals. Use whenever generating frontend UI or state logic.
+---
+# Modern Angular Standards
+
+## Architecture
+- NEVER generate or use `NgModule`.
+- ALL components, directives, and pipes must be `standalone: true`.
+
+## State Management (Signals)
+- Prefer Angular Signals (`signal()`, `computed()`, `effect()`) for synchronous, local component state instead of `BehaviorSubject`.
+- Use the new Signal-based inputs and outputs: `input()` and `output()` instead of `@Input()` and `@Output()`.
+- Use standard RxJS strictly for asynchronous streams (e.g., HTTP requests, router events).
+
+## Control Flow
+- Use the new built-in control flow (`@if`, `@for`, `@switch`) instead of structural directives (`*ngIf`, `*ngFor`).
diff --git a/.agents/skills/fastapi-pydantic-v2/SKILL.md b/.agents/skills/fastapi-pydantic-v2/SKILL.md
new file mode 100644
index 00000000..4ed7d665
--- /dev/null
+++ b/.agents/skills/fastapi-pydantic-v2/SKILL.md
@@ -0,0 +1,16 @@
+---
+name: fastapi-pydantic-v2
+description: Writes modern FastAPI endpoints using Pydantic v2 syntax and Annotated dependencies. Use whenever generating or refactoring API routes.
+---
+# FastAPI & Pydantic v2 Standards
+
+## Pydantic v2 Rules
+- NEVER use `.dict()` or `.json()`. ALWAYS use `.model_dump()` and `.model_dump_json()`.
+- NEVER use `@validator` or `@root_validator`. ALWAYS use `@field_validator` and `@model_validator(mode="before|after")`.
+- NEVER use `schema_extra`. Use `json_schema_extra` inside the `model_config` dict.
+- Use `pydantic_settings.BaseSettings` for all environment variable configurations.
+
+## FastAPI Rules
+- ALWAYS use `typing.Annotated` for dependency injection (e.g., `db: Annotated[AsyncSession, Depends(get_db)]`).
+- Do not use `def` for endpoints that perform I/O; always use `async def`.
+- Raise `fastapi.HTTPException` for expected client errors instead of returning standard dictionaries.
diff --git a/.agents/skills/library-skills/.library-skills.json b/.agents/skills/library-skills/.library-skills.json
new file mode 100644
index 00000000..9ab33224
--- /dev/null
+++ b/.agents/skills/library-skills/.library-skills.json
@@ -0,0 +1,4 @@
+{
+  "kind": "tool-skill",
+  "version": "0.0.19"
+}
diff --git a/.agents/skills/library-skills/SKILL.md b/.agents/skills/library-skills/SKILL.md
new file mode 100644
index 00000000..5c819667
--- /dev/null
+++ b/.agents/skills/library-skills/SKILL.md
@@ -0,0 +1,37 @@
+---
+name: library-skills
+description: Use Library Skills to discover, install, refresh, repair, check, and manage agent skills from installed packages.
+---
+
+# Library Skills
+
+Use this skill when a project might benefit from agent skills bundled by its installed packages, or when existing Library Skills-managed symlinks are stale, broken, orphaned, or need to be checked.
+
+Run commands from the project root.
+
+Agents bundle their own skills by including an `.agents/skills` directory. More details in [Library Skills](https://library-skills.io).
+
+## First-Time Setup
+
+- Make sure project dependencies are installed first, for example with `uv sync` for Python projects or `npm install` / `bun install` for Node.js projects.
+- Run `uvx library-skills` or `npx library-skills` to discover skills bundled by the installed packages and install selected skills interactively.
+- Use `uvx library-skills --all` or `npx library-skills --all` only when all newly discovered skills should be installed without selecting individual skills.
+- Use `uvx library-skills --tool-skill` or `npx library-skills --tool-skill` to copy this Library Skills tool skill into the project so future agents know how to discover, install, update, repair, and check skills.
+
+## Commands
+
+- Run `uvx library-skills` or `npx library-skills` to discover package-provided skills, install selected new skills, and reconcile existing managed symlinks.
+- Run `uvx library-skills list` or `npx library-skills list` to inspect discovered and installed skills.
+- Run `uvx library-skills list --json` or `npx library-skills list --json` for machine-readable installed status.
+- Run `uvx library-skills scan --json` or `npx library-skills scan --json` for discovery-only automation.
+- Run `uvx library-skills --check` or `npx library-skills --check` to validate managed skill symlink state without changing files.
+- Run `uvx library-skills --yes` or `npx library-skills --yes` to repair stale managed symlinks and remove orphaned managed symlinks non-interactively.
+- Add `--claude` when `.claude/skills` should also be managed.
+- Add `--skill NAME` to install a specific discovered skill by name.
+
+## Safety
+
+- Prefer rerunning `library-skills` over editing managed symlinks manually.
+- If installed skill symlinks are broken, dependencies may not be installed yet. Try the project's normal install command first, such as `uv sync`, `npm install`, or `bun install`, then rerun `library-skills`.
+- Do not delete or overwrite hand-authored skill directories.
+- Library Skills only removes managed symlinks. It should not remove copied or hand-authored skill directories.
diff --git a/.agents/skills/sqlalchemy-async/SKILL.md b/.agents/skills/sqlalchemy-async/SKILL.md
new file mode 100644
index 00000000..40e09cfa
--- /dev/null
+++ b/.agents/skills/sqlalchemy-async/SKILL.md
@@ -0,0 +1,19 @@
+---
+name: sqlalchemy-async
+description: Writes SQLAlchemy 2.0 async database queries using Psycopg3. Use whenever interacting with the PostgreSQL database.
+---
+# SQLAlchemy 2.0 Async Standards
+
+## Model Definitions
+- ALWAYS use SQLAlchemy 2.0 Declarative Base with `Mapped` and `mapped_column`.
+- Example: `id: Mapped[int] = mapped_column(primary_key=True)`
+- NEVER use the old `Column(Integer, primary_key=True)` syntax.
+
+## Querying
+- NEVER use `session.query()`. This is legacy 1.x syntax.
+- ALWAYS use `sqlalchemy.select()` combined with `await session.execute(stmt)`.
+- Extract results using `.scalars().all()` or `.scalar_one_or_none()`.
+
+## Session Management
+- Use `sqlalchemy.ext.asyncio.AsyncSession`.
+- Ensure all database I/O is awaited.
diff --git a/.agents/skills/strict-mypy/SKILL.md b/.agents/skills/strict-mypy/SKILL.md
new file mode 100644
index 00000000..ffde143f
--- /dev/null
+++ b/.agents/skills/strict-mypy/SKILL.md
@@ -0,0 +1,30 @@
+---
+name: strict-mypy
+description: Enforces strict MyPy type checking conventions matching the project's pyproject.toml configuration. Use whenever writing or modifying Python code.
+---
+# Strict MyPy Typing Standards
+
+This project uses a highly strict MyPy configuration (`strict = true`). When writing or refactoring Python code, you MUST adhere to the following rules to ensure the code passes type checking:
+
+## 1. Absolute Signature Completeness
+- EVERY function and method must have fully typed arguments and a return type (`disallow_untyped_defs`, `disallow_incomplete_defs`).
+- ALWAYS specify `-> None` for functions and methods that do not return a value.
+- NEVER leave type hints partially defined (e.g., typing only some arguments).
+- Decorators must be completely type-hinted using `typing.Callable` or `typing.ParamSpec` (`disallow_untyped_decorators`).
+
+## 2. No Implicit Optionals
+- `arg: str = None` is strictly forbidden.
+- You MUST explicitly union with None: `arg: str | None = None` (`no_implicit_optional`).
+
+## 3. Strict Generics
+- NEVER use bare collections as types.
+- ALWAYS specify the inner types: use `list[str]`, `dict[str, int]`, or `tuple[int, ...]` instead of bare `list`, `dict`, or `tuple` (`disallow_any_generics`).
+
+## 4. Restrictions on `Any` and Subclassing
+- Do not subclass from untyped external libraries or `Any` (`disallow_subclassing_any`).
+- Avoid using external types that have no stubs and resolve to `Any` (`disallow_any_unimported`).
+- Refrain from returning `Any` to avoid contaminating the type inference of calling functions (`warn_return_any`).
+
+## 5. Pydantic Strictness
+- `pydantic.mypy` is active with strict initialization.
+- When instantiating Pydantic models, ensure you are passing exactly the expected typed arguments, as extra or untyped arguments will fail type checks (`init_typed = true`, `init_forbid_extra = true`).
diff --git a/brewman/.pre-commit-config.yaml b/brewman/.pre-commit-config.yaml
index 60f6ff5c..84c3d876 100644
--- a/brewman/.pre-commit-config.yaml
+++ b/brewman/.pre-commit-config.yaml
@@ -3,7 +3,7 @@
 repos:
   - repo: https://github.com/astral-sh/ruff-pre-commit
     # Ruff version.
-    rev: v0.15.2
+    rev: v0.16.4
     hooks:
       # Run the linter.
       - id: ruff
diff --git a/brewman/alembic/versions/09a4f0ca450f_recipe_steps_photos.py b/brewman/alembic/versions/09a4f0ca450f_recipe_steps_photos.py
new file mode 100644
index 00000000..82e6b3b6
--- /dev/null
+++ b/brewman/alembic/versions/09a4f0ca450f_recipe_steps_photos.py
@@ -0,0 +1,62 @@
+"""recipe steps photos
+
+Revision ID: 09a4f0ca450f
+Revises: 82af4dcd0b42
+Create Date: 2026-03-01 06:22:29.832426
+
+"""
+
+import sqlalchemy as sa
+
+from alembic import op
+
+
+# revision identifiers, used by Alembic.
+revision = "09a4f0ca450f"
+down_revision = "82af4dcd0b42"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.create_table(
+        "recipe_steps",
+        sa.Column("id", sa.Uuid(), server_default=sa.text("gen_random_uuid()"), nullable=False),
+        sa.Column("recipe_id", sa.Uuid(), nullable=False),
+        sa.Column("order_index", sa.Integer(), nullable=False),
+        sa.Column("phase", sa.Text(), nullable=False),
+        sa.Column("title", sa.Text(), nullable=False),
+        sa.Column("text", sa.Text(), nullable=False),
+        sa.Column("duration_minutes", sa.Integer(), nullable=True),
+        sa.Column("notes", sa.Text(), nullable=True),
+        sa.ForeignKeyConstraint(["recipe_id"], ["recipes.id"], ondelete="CASCADE"),
+        sa.PrimaryKeyConstraint("id"),
+    )
+    op.create_index(op.f("ix_recipe_steps_recipe_id"), "recipe_steps", ["recipe_id"], unique=False)
+    op.create_index(op.f("ix_recipe_steps_order_index"), "recipe_steps", ["order_index"], unique=False)
+
+    op.create_table(
+        "recipe_photos",
+        sa.Column("id", sa.Uuid(), server_default=sa.text("gen_random_uuid()"), nullable=False),
+        sa.Column("recipe_id", sa.Uuid(), nullable=False),
+        sa.Column("image_id", sa.Uuid(), nullable=False),
+        sa.Column("order_index", sa.Integer(), nullable=False),
+        sa.Column("caption", sa.Text(), nullable=False, server_default=""),
+        sa.ForeignKeyConstraint(["image_id"], ["images.id"], ondelete="CASCADE"),
+        sa.ForeignKeyConstraint(["recipe_id"], ["recipes.id"], ondelete="CASCADE"),
+        sa.PrimaryKeyConstraint("id"),
+    )
+    op.create_index(op.f("ix_recipe_photos_recipe_id"), "recipe_photos", ["recipe_id"], unique=False)
+    op.create_index(op.f("ix_recipe_photos_image_id"), "recipe_photos", ["image_id"], unique=False)
+    op.create_index(op.f("ix_recipe_photos_order_index"), "recipe_photos", ["order_index"], unique=False)
+
+
+def downgrade() -> None:
+    op.drop_index(op.f("ix_recipe_photos_order_index"), table_name="recipe_photos")
+    op.drop_index(op.f("ix_recipe_photos_image_id"), table_name="recipe_photos")
+    op.drop_index(op.f("ix_recipe_photos_recipe_id"), table_name="recipe_photos")
+    op.drop_table("recipe_photos")
+
+    op.drop_index(op.f("ix_recipe_steps_order_index"), table_name="recipe_steps")
+    op.drop_index(op.f("ix_recipe_steps_recipe_id"), table_name="recipe_steps")
+    op.drop_table("recipe_steps")
diff --git a/brewman/brewman/db/base.py b/brewman/brewman/db/base.py
index 7b268919..77ac8f9a 100644
--- a/brewman/brewman/db/base.py
+++ b/brewman/brewman/db/base.py
@@ -17,7 +17,6 @@ from ..models.incentive import Incentive
 from ..models.inventory import Inventory
 from ..models.journal import Journal
 from ..models.login_history import LoginHistory
-from ..models.mozimo_stock_register import MozimoStockRegister
 from ..models.period import Period
 from ..models.permission import Permission
 from ..models.price import Price
@@ -28,6 +27,8 @@ from ..models.rate_contract import RateContract
 from ..models.rate_contract_item import RateContractItem
 from ..models.recipe import Recipe
 from ..models.recipe_item import RecipeItem
+from ..models.recipe_photo import RecipePhoto
+from ..models.recipe_step import RecipeStep
 from ..models.recipe_tag import RecipeTag
 from ..models.recipe_template import RecipeTemplate
 from ..models.role import Role
@@ -62,7 +63,6 @@ __all__ = [
     "Inventory",
     "Journal",
     "LoginHistory",
-    "MozimoStockRegister",
     "Permission",
     "Period",
     "Price",
@@ -73,6 +73,8 @@ __all__ = [
     "RateContractItem",
     "Recipe",
     "RecipeItem",
+    "RecipePhoto",
+    "RecipeStep",
     "RecipeTag",
     "RecipeTemplate",
     "reg",
diff --git a/brewman/brewman/models/client.py b/brewman/brewman/models/client.py
index 05c7d1be..5ce95278 100644
--- a/brewman/brewman/models/client.py
+++ b/brewman/brewman/models/client.py
@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-import random
+import secrets
 import string
 import uuid
 
@@ -49,9 +49,9 @@ class Client:
 
     @classmethod
     def create(cls, db: Session) -> Client:
-        client_code = random.randint(1000, 9999)
-        otp = random.randint(1000, 9999)
-        name = "".join(random.choice(string.ascii_uppercase + string.digits) for x in range(6))
+        client_code = secrets.randbelow(9000) + 1000
+        otp = secrets.randbelow(9000) + 1000
+        name = "".join(secrets.choice(string.ascii_uppercase + string.digits) for x in range(6))
         client = Client(client_code, name, False, otp)
         db.add(client)
         return client
diff --git a/brewman/brewman/models/recipe.py b/brewman/brewman/models/recipe.py
index 397a7312..eb89847f 100644
--- a/brewman/brewman/models/recipe.py
+++ b/brewman/brewman/models/recipe.py
@@ -6,7 +6,7 @@ from datetime import date
 from decimal import Decimal
 from typing import TYPE_CHECKING
 
-from sqlalchemy import Date, ForeignKey, Numeric, Text, UniqueConstraint, Uuid, text
+from sqlalchemy import Date, ForeignKey, Numeric, Text, Uuid, text
 from sqlalchemy.orm import Mapped, mapped_column, relationship
 
 from ..db.base_class import reg
@@ -15,6 +15,8 @@ from .recipe_tag import RecipeTag
 
 if TYPE_CHECKING:
     from .recipe_item import RecipeItem
+    from .recipe_photo import RecipePhoto
+    from .recipe_step import RecipeStep
     from .stock_keeping_unit import StockKeepingUnit
     from .tag import Tag
 
@@ -22,22 +24,34 @@ if TYPE_CHECKING:
 @reg.mapped_as_dataclass(unsafe_hash=True)
 class Recipe:
     __tablename__ = "recipes"
-    __table_args__ = (UniqueConstraint("sku_id", "date"),)
 
     id: Mapped[uuid.UUID] = mapped_column(
         Uuid, primary_key=True, insert_default=uuid.uuid4, server_default=text("gen_random_uuid()")
     )
-    sku_id: Mapped[uuid.UUID] = mapped_column(Uuid, ForeignKey("stock_keeping_units.id"), nullable=False)
-    date_: Mapped[date] = mapped_column("date", Date, nullable=False, index=True)
+
+    date_: Mapped[date] = mapped_column("date", Date(), nullable=False)
     source: Mapped[str] = mapped_column(Text, nullable=False)
-    instructions: Mapped[str] = mapped_column(Text, nullable=False)
+    instructions: Mapped[str] = mapped_column(Text, nullable=False)  # legacy single-text instructions
     garnishing: Mapped[str] = mapped_column(Text, nullable=False)
     plating: Mapped[str] = mapped_column(Text, nullable=False)
     notes: Mapped[str] = mapped_column(Text, nullable=False)
-
-    recipe_yield: Mapped[Decimal] = mapped_column(Numeric(precision=15, scale=2), nullable=False)
+    sku_id: Mapped[uuid.UUID] = mapped_column(Uuid, ForeignKey("stock_keeping_units.id"), nullable=False)
+    recipe_yield: Mapped[Decimal] = mapped_column(Numeric(12, 4), nullable=False)
 
     items: Mapped[list[RecipeItem]] = relationship("RecipeItem", back_populates="recipe")
+    steps: Mapped[list[RecipeStep]] = relationship(
+        "RecipeStep",
+        back_populates="recipe",
+        cascade="all, delete-orphan",
+        order_by="RecipeStep.order_index",
+    )
+    photos: Mapped[list[RecipePhoto]] = relationship(
+        "RecipePhoto",
+        back_populates="recipe",
+        cascade="all, delete-orphan",
+        order_by="RecipePhoto.order_index",
+    )
+
     sku: Mapped[StockKeepingUnit] = relationship("StockKeepingUnit", back_populates="recipes")
     tags: Mapped[list[Tag]] = relationship(
         "Tag",
@@ -54,21 +68,17 @@ class Recipe:
         garnishing: str,
         plating: str,
         notes: str,
+        sku: StockKeepingUnit,
         recipe_yield: Decimal,
-        sku_id: uuid.UUID | None = None,
-        sku: StockKeepingUnit | None = None,
         id_: uuid.UUID | None = None,
-    ):
+    ) -> None:
         self.date_ = date_
         self.source = source
         self.instructions = instructions
         self.garnishing = garnishing
         self.plating = plating
         self.notes = notes
+        self.sku = sku
         self.recipe_yield = recipe_yield
-        if sku_id is not None:
-            self.sku_id = sku_id
-        if sku is not None:
-            self.sku = sku
         if id_ is not None:
             self.id = id_
diff --git a/brewman/brewman/models/recipe_photo.py b/brewman/brewman/models/recipe_photo.py
new file mode 100644
index 00000000..d54dd8c5
--- /dev/null
+++ b/brewman/brewman/models/recipe_photo.py
@@ -0,0 +1,49 @@
+from __future__ import annotations
+
+import uuid
+
+from typing import TYPE_CHECKING
+
+from sqlalchemy import ForeignKey, Integer, Text, Uuid, text
+from sqlalchemy.orm import Mapped, mapped_column, relationship
+
+from ..db.base_class import reg
+
+
+if TYPE_CHECKING:
+    from .db_image import DbImage
+    from .recipe import Recipe
+
+
+@reg.mapped_as_dataclass(unsafe_hash=True)
+class RecipePhoto:
+    """Links recipes to DbImage with caption + ordering."""
+
+    __tablename__ = "recipe_photos"
+
+    id: Mapped[uuid.UUID] = mapped_column(
+        Uuid, primary_key=True, insert_default=uuid.uuid4, server_default=text("gen_random_uuid()")
+    )
+    recipe_id: Mapped[uuid.UUID] = mapped_column(Uuid, ForeignKey("recipes.id"), nullable=False, index=True)
+    image_id: Mapped[uuid.UUID] = mapped_column(Uuid, ForeignKey("images.id"), nullable=False, index=True)
+
+    order_index: Mapped[int] = mapped_column(Integer, nullable=False, index=True)
+    caption: Mapped[str] = mapped_column(Text, nullable=False)
+
+    recipe: Mapped[Recipe] = relationship("Recipe", back_populates="photos")
+    image: Mapped[DbImage] = relationship("DbImage")
+
+    def __init__(
+        self,
+        recipe_id: uuid.UUID,
+        image_id: uuid.UUID,
+        order_index: int,
+        caption: str = "",
+        id_: uuid.UUID | None = None,
+    ) -> None:
+        self.recipe_id = recipe_id
+        self.image_id = image_id
+        self.order_index = order_index
+        self.caption = caption
+        if id_ is not None:
+            self.id = id_
diff --git a/brewman/brewman/models/recipe_step.py b/brewman/brewman/models/recipe_step.py
new file mode 100644
index 00000000..6f2eb302
--- /dev/null
+++ b/brewman/brewman/models/recipe_step.py
@@ -0,0 +1,59 @@
+from __future__ import annotations
+
+import uuid
+
+from typing import TYPE_CHECKING
+
+from sqlalchemy import ForeignKey, Integer, Text, Uuid, text
+from sqlalchemy.orm import Mapped, mapped_column, relationship
+
+from ..db.base_class import reg
+
+
+if TYPE_CHECKING:
+    from .recipe import Recipe
+
+
+@reg.mapped_as_dataclass(unsafe_hash=True)
+class RecipeStep:
+    """Structured recipe steps.
+
+    Stored separately from legacy Recipe.instructions (single text field).
+    """
+
+    __tablename__ = "recipe_steps"
+
+    id: Mapped[uuid.UUID] = mapped_column(
+        Uuid, primary_key=True, insert_default=uuid.uuid4, server_default=text("gen_random_uuid()")
+    )
+    recipe_id: Mapped[uuid.UUID] = mapped_column(Uuid, ForeignKey("recipes.id"), nullable=False, index=True)
+
+    order_index: Mapped[int] = mapped_column(Integer, nullable=False, index=True)
+    phase: Mapped[str] = mapped_column(Text, nullable=False)  # Prep/Cook/Finish/Serve
+    title: Mapped[str] = mapped_column(Text, nullable=False)
+    text: Mapped[str] = mapped_column(Text, nullable=False)
+    duration_minutes: Mapped[int | None] = mapped_column(Integer, nullable=True)
+    notes: Mapped[str | None] = mapped_column(Text, nullable=True)
+
+    recipe: Mapped[Recipe] = relationship("Recipe", back_populates="steps")
+
+    def __init__(
+        self,
+        recipe_id: uuid.UUID,
+        order_index: int,
+        phase: str,
+        title: str,
+        text: str,
+        duration_minutes: int | None = None,
+        notes: str | None = None,
+        id_: uuid.UUID | None = None,
+    ) -> None:
+        self.recipe_id = recipe_id
+        self.order_index = order_index
+        self.phase = phase
+        self.title = title
+        self.text = text
+        self.duration_minutes = duration_minutes
+        self.notes = notes
+        if id_ is not None:
+            self.id = id_
diff --git a/brewman/brewman/routers/recipe.py b/brewman/brewman/routers/recipe.py
index e1e63c92..96c57d66 100644
--- a/brewman/brewman/routers/recipe.py
+++ b/brewman/brewman/routers/recipe.py
@@ -1,36 +1,40 @@
-# import subprocess
-# import tempfile
+import base64
 import uuid
 
 from collections import defaultdict
-from collections.abc import Sequence
 from datetime import date
 from decimal import Decimal
 from io import BytesIO
-from typing import Annotated
+from typing import Annotated, cast
 
 from fastapi import APIRouter, HTTPException, Security, status
-from fastapi.responses import FileResponse, StreamingResponse
+from fastapi.responses import StreamingResponse
 from openpyxl import Workbook
 from openpyxl.styles import Alignment, Border, Font, NamedStyle, PatternFill, Side
+from openpyxl.worksheet.worksheet import Worksheet
 from sqlalchemy import and_, delete, func, or_, select
 from sqlalchemy.orm import Session, aliased, contains_eager, joinedload
 
 from ..core.security import get_current_active_user as get_user
 from ..db.session import SessionDep
+from ..models.db_image import DbImage
 from ..models.price import Price
 from ..models.product import Product
 from ..models.product_version import ProductVersion
 from ..models.recipe import Recipe
 from ..models.recipe_item import RecipeItem
+from ..models.recipe_photo import RecipePhoto
+from ..models.recipe_step import RecipeStep
 from ..models.sku_version import SkuVersion
 from ..models.stock_keeping_unit import StockKeepingUnit
 from ..routers.calculate_nutrition import calculate_nutrition, report_nutrition
 from ..routers.calculate_prices import calculate_prices
-from ..schemas import recipe as schemas
-from ..schemas import recipe_item as rischemas
+from ..schemas import recipe as recipeschemas
 from ..schemas.nutritional_information import NutritionalInformation
 from ..schemas.product import ProductLink
+from ..schemas.recipe_item import RecipeItem as RecipeItemSchema
+from ..schemas.recipe_photo import RecipePhoto as RecipePhotoSchema
+from ..schemas.recipe_step import RecipeStep as RecipeStepSchema
 from ..schemas.user import UserToken
 from . import _pv_onclause, _sv_onclause
 
@@ -38,229 +42,436 @@ from . import _pv_onclause, _sv_onclause
 router = APIRouter()
 
 
-@router.post("", response_model=schemas.Recipe)
-def save(
-    data: schemas.RecipeIn,
-    user: Annotated[UserToken, Security(get_user, scopes=["recipes"])],
-    db: SessionDep,
-) -> schemas.Recipe:
-    recipe_sku = db.execute(select(StockKeepingUnit).where(StockKeepingUnit.id == data.sku.id_)).scalar_one()
+def _strip_data_url(value: str) -> str:
+    v = value.strip()
+    if "," in v and v.lower().startswith("data:"):
+        return v.split(",", 1)[1]
+    return v
 
-    if recipe_sku.product_id in {i.product.id_ for i in data.items}:
-        raise HTTPException(
-            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
-            detail="Product cannot also be an ingredient",
+
+def _b64_to_bytes(value: str | None) -> bytes | None:
+    if value is None:
+        return None
+    v = value.strip()
+    if v == "":
+        return None
+    try:
+        return base64.b64decode(_strip_data_url(v))
+    except Exception:
+        return None
+
+
+def _legacy_instructions_from_steps(steps: list[RecipeStepSchema]) -> str:
+    parts: list[str] = []
+    for idx, s in enumerate(sorted(steps, key=lambda x: x.order_index), start=1):
+        header = f"{idx}. [{s.phase}] {s.title}".strip()
+        body = (s.text or "").strip()
+        extra: list[str] = []
+        if s.duration_minutes is not None:
+            extra.append(f"{s.duration_minutes} min")
+        if s.notes:
+            extra.append(f"Notes: {s.notes.strip()}")
+        if extra:
+            body = f"{body}\n({'; '.join(extra)})".strip()
+        parts.append(f"{header}\n{body}".strip())
+    return "\n\n".join(parts).strip()
+
+
+def _steps_from_legacy(instructions: str) -> list[RecipeStepSchema]:
+    text = (instructions or "").strip()
+    if text == "":
+        return []
+    return [
+        RecipeStepSchema(
+            id_=None,
+            order_index=0,
+            phase="Cook",
+            title="Instructions",
+            text=text,
+            duration_minutes=None,
+            notes=None,
         )
-    if len(data.items) == 0:
-        raise HTTPException(
-            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
-            detail="Recipe has no ingredients",
-        )
-    recipe = Recipe(
-        date_=data.date_,
-        source=data.source,
-        instructions=data.instructions,
-        garnishing=data.garnishing,
-        plating=data.plating,
-        notes=data.notes,
-        sku=recipe_sku,
-        recipe_yield=round(data.recipe_yield, 2),
+    ]
+
+
+def _photo_out(image_id: uuid.UUID, caption: str, order_index: int) -> RecipePhotoSchema:
+    return RecipePhotoSchema(
+        id_=image_id,
+        order_index=order_index,
+        caption=caption,
+        resized=f"/db-image/{image_id}/image",
+        thumbnail=f"/db-image/{image_id}/thumbnail",
     )
-    for item in data.items:
-        product: Product = db.execute(select(Product).where(Product.id == item.product.id_)).scalar_one()
-        quantity = round(item.quantity, 2)
-        recipe.items.append(RecipeItem(product_id=product.id, quantity=quantity, description=item.description))
-
-    db.add(recipe)
-    for r_item in recipe.items:
-        r_item.recipe_id = recipe.id
-        db.add(r_item)
-
-    db.flush()
-    check_recursion(recipe_sku.product_id, set(), db)
-    db.commit()
-    return recipe_info(recipe)
 
 
-@router.put("/{id_}", response_model=schemas.Recipe)
-async def update_route(
-    id_: uuid.UUID,
-    data: schemas.RecipeIn,
-    user: Annotated[UserToken, Security(get_user, scopes=["recipes"])],
-    db: SessionDep,
-) -> schemas.Recipe:
-    recipe: Recipe = db.execute(select(Recipe).where(Recipe.id == id_)).scalar_one()
-
-    sku: StockKeepingUnit = db.execute(select(StockKeepingUnit).where(StockKeepingUnit.id == data.sku.id_)).scalar_one()
-    if sku.product_id in {i.product.id_ for i in data.items}:
-        raise HTTPException(
-            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
-            detail="Product cannot also be an ingredient",
-        )
-
-    recipe.sku = sku
-    recipe.recipe_yield = round(data.recipe_yield, 2)
-    recipe.date_ = data.date_
-    recipe.source = data.source
-    recipe.instructions = data.instructions
-    recipe.garnishing = data.garnishing
-    recipe.plating = data.plating
-    for i in range(len(recipe.items), 0, -1):
-        item = recipe.items[i - 1]
-        index = next((idx for (idx, d) in enumerate(data.items) if d.id_ == item.id), None)
-        product: Product
-        if index is not None:
-            new_item = data.items.pop(index)
-            product = db.execute(select(Product).where(Product.id == new_item.product.id_)).scalar_one()
-            item.product_id = new_item.product.id_
-            item.quantity = round(new_item.quantity, 2)
-            item.description = new_item.description
-        else:
-            db.delete(item)
-            recipe.items.remove(item)
-        db.flush()
-
-    for d_item in data.items:
-        product = db.execute(select(Product).where(Product.id == d_item.product.id_)).scalar_one()
-        quantity = round(d_item.quantity, 2)
-        recipe.items.append(RecipeItem(product_id=product.id, quantity=quantity, description=d_item.description))
-
-    db.flush()
-    check_recursion(sku.product_id, set(), db)
-    db.commit()
-    return recipe_info(recipe)
+def _recipe_blank() -> recipeschemas.RecipeBlank:
+    payload = {
+        "sku": None,
+        "date_": date.today(),
+        "source": "",
+        "instructions": "",
+        "garnishing": "",
+        "plating": "",
+        "recipe_yield": Decimal("1"),
+        "notes": "",
+        "steps": [],
+        "photos": [],
+        "ingredients": [],
+    }
+    return recipeschemas.RecipeBlank.model_validate(payload)
 
 
-def check_recursion(product: uuid.UUID, visited: set[uuid.UUID], db: Session) -> None:
-    if product in visited:
-        raise HTTPException(
-            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
-            detail="Recipe recursion. Some ingredient recipe contains parent recipe.",
-        )
-    recipe = (
-        db.execute(
-            select(Recipe)
-            .join(Recipe.items)
-            .join(Recipe.sku)
-            .options(contains_eager(Recipe.items))
-            .where(StockKeepingUnit.product_id == product)
-        )
-        .unique()
-        .scalars()
-        .first()
-    )
-    if recipe is None:
-        return
-    visited.add(product)
-    for i in recipe.items:
-        check_recursion(i.product_id, visited, db)
-    visited.remove(product)
-
-
-@router.delete("/{id_}", response_model=None)
-def delete_route(
-    id_: uuid.UUID, user: Annotated[UserToken, Security(get_user, scopes=["recipes"])], db: SessionDep
-) -> None:
-    recipe_ids: Sequence[uuid.UUID] = (
-        db.execute(
-            select(func.distinct(RecipeItem.recipe_id)).where(
-                RecipeItem.product_id
-                == select(StockKeepingUnit.product_id)
-                .where(StockKeepingUnit.id == select(Recipe.sku_id).where(Recipe.id == id_).scalar_subquery())
-                .scalar_subquery(),
-            )
-        )
-        .scalars()
-        .all()
-    )
-    if len(recipe_ids) > 0:
-        raise HTTPException(
-            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
-            detail="This recipe has other recipes dependent on it and cannot be deleted",
-        )
-
-    db.execute(delete(RecipeItem).where(RecipeItem.recipe_id == id_))
-    db.execute(delete(Recipe).where(Recipe.id == id_))
-
-    db.commit()
-
-
-@router.get("", response_model=schemas.RecipeBlank)
-def show_blank(
-    user: Annotated[UserToken, Security(get_user, scopes=["recipes"])],
-) -> schemas.RecipeBlank:
-    return recipe_blank()
-
-
-@router.get("/list", response_model=list[schemas.Recipe])
-async def show_list(user: Annotated[UserToken, Security(get_user)], db: SessionDep) -> list[schemas.Recipe]:
-
-    list_: Sequence[Recipe] = (
+def _load_full(id_: uuid.UUID, db: Session) -> Recipe:
+    return (
         db.execute(
             select(Recipe)
+            .where(Recipe.id == id_)
             .join(Recipe.sku)
             .join(SkuVersion, onclause=_sv_onclause(Recipe.date_))
             .join(StockKeepingUnit.product)
             .join(ProductVersion, onclause=_pv_onclause(Recipe.date_))
             .join(ProductVersion.product_group)
             .options(
+                joinedload(Recipe.items).joinedload(RecipeItem.product).joinedload(Product.versions),
+                joinedload(Recipe.steps),
+                joinedload(Recipe.photos),
                 contains_eager(Recipe.sku).contains_eager(StockKeepingUnit.versions),
                 contains_eager(Recipe.sku)
                 .contains_eager(StockKeepingUnit.product)
                 .contains_eager(Product.versions)
                 .contains_eager(ProductVersion.product_group),
             )
-            .order_by(ProductVersion.name)
         )
         .unique()
-        .scalars()
-        .all()
+        .scalar_one()
     )
-    return [
-        schemas.Recipe(
-            id_=item.id,
-            sku=ProductLink(id_=item.sku.id, name=item.sku.product.versions[0].name),
-            date_=item.date_,
-            source=item.source,
-            instructions=item.instructions,
-            garnishing=item.garnishing,
-            plating=item.plating,
-            recipe_yield=item.recipe_yield,
-            notes=item.notes,
-            product_group_id=item.sku.product.versions[0].product_group_id,
-            units=item.sku.versions[0].units,
-            items=[],
+
+
+def recipe_info(item: Recipe) -> recipeschemas.Recipe:
+    steps_out: list[RecipeStepSchema] = [
+        RecipeStepSchema(
+            id_=s.id,
+            order_index=s.order_index,
+            phase=s.phase,
+            title=s.title,
+            text=s.text,
+            duration_minutes=s.duration_minutes,
+            notes=s.notes,
         )
-        for item in list_
+        for s in sorted(item.steps, key=lambda x: x.order_index)
     ]
 
+    # Legacy compatibility: if structured steps missing but legacy instructions exist
+    if len(steps_out) == 0 and (item.instructions or "").strip():
+        steps_out = _steps_from_legacy(item.instructions)
 
-# @router.get("/ingredient-details/{id_}", response_model=ProductSku)
-# def show_ingredient_id(
-#     id_: uuid.UUID,
-#     user: Annotated[UserToken, Security(get_user, scopes=["recipes"])],
-# ) -> ProductSku:
-#     with SessionFuture() as db:
-#         product: Product = db.execute(select(Product).join(Product.skus).where(Product.id == id_)).unique().scalar_one()
-#         return ProductSku(
-#             id_=id_,
-#             name=product.name,
-#             fractionUnits=product.fraction_units,
-#             isRateContracted=False,
-#         )
+    photos_out: list[RecipePhotoSchema] = [
+        _photo_out(p.image_id, p.caption or "", p.order_index) for p in sorted(item.photos, key=lambda x: x.order_index)
+    ]
+
+    ingredients_out: list[RecipeItemSchema] = [
+        RecipeItemSchema(
+            id_=ri.id,
+            product=ProductLink(id_=ri.product.id, name=ri.product.versions[0].name),
+            quantity=ri.quantity,
+            description=ri.description or "",
+        )
+        for ri in item.items
+    ]
+
+    total_minutes = sum((s.duration_minutes or 0) for s in steps_out) if steps_out else None
+
+    payload = {
+        "id_": item.id,
+        "sku": ProductLink(id_=item.sku.id, name=item.sku.product.versions[0].name),
+        "date_": item.date_,
+        "source": item.source,
+        "instructions": item.instructions or "",
+        "garnishing": item.garnishing or "",
+        "plating": item.plating or "",
+        "recipe_yield": item.recipe_yield,
+        "notes": item.notes or "",
+        "product_group_id": item.sku.product.versions[0].product_group_id,
+        "units": item.sku.versions[0].units,
+        "steps": steps_out,
+        "photos": photos_out,
+        "ingredients": ingredients_out,
+        "step_count": len(steps_out),
+        "photo_count": len(photos_out),
+        "total_duration_minutes": total_minutes,
+    }
+    return recipeschemas.Recipe.model_validate(payload)
 
 
-@router.get("/pdf/{id_}", response_class=FileResponse)
-def show_pdf(
-    id_: uuid.UUID, user: Annotated[UserToken, Security(get_user, scopes=["recipes"])], db: SessionDep
-) -> schemas.Recipe:
-    # template = db.execute(select(RecipeTemplate.text).where(RecipeTemplate.selected == True)).scalar_one()
-    # with tempfile.TemporaryDirectory() as tmpdir:
-    #     with open(tmpdir + "/recipe.tex", 'w') as rt:
-    #         rt.write(template)
-    #     subprocess.run(f"docker run -i --rm --name latex --volume \"{tmpdir}\":/data -w /data --user $(id -u):$(id -g) texlive/texlive:latest pdflatex recipe.tex")
-    item: Recipe = db.execute(select(Recipe).where(Recipe.id == id_)).scalar_one()
-    return recipe_info(item)
+@router.get("", response_model=recipeschemas.RecipeBlank)
+def show_blank(
+    user: Annotated[UserToken, Security(get_user, scopes=["recipes"])],
+) -> recipeschemas.RecipeBlank:
+    _ = user
+    return _recipe_blank()
+
+
+# IMPORTANT: Keep /list BEFORE /{id_} to avoid UUID parsing errors
+@router.get("/list", response_model=list[recipeschemas.Recipe])
+def show_list(
+    p: uuid.UUID,  # required by existing frontend calls
+    user: Annotated[UserToken, Security(get_user, scopes=["recipes"])],
+    db: SessionDep,
+) -> list[recipeschemas.Recipe]:
+    _ = user
+    _ = p
+
+    step_count_sq = (
+        select(
+            RecipeStep.recipe_id.label("rid"),
+            func.count(RecipeStep.id).label("step_count"),
+            func.sum(RecipeStep.duration_minutes).label("total_minutes"),
+        )
+        .group_by(RecipeStep.recipe_id)
+        .subquery()
+    )
+
+    photo_count_sq = (
+        select(RecipePhoto.recipe_id.label("rid"), func.count(RecipePhoto.id).label("photo_count"))
+        .group_by(RecipePhoto.recipe_id)
+        .subquery()
+    )
+
+    q = (
+        select(
+            Recipe,
+            step_count_sq.c.step_count,
+            step_count_sq.c.total_minutes,
+            photo_count_sq.c.photo_count,
+        )
+        .join(Recipe.sku)
+        .join(SkuVersion, onclause=_sv_onclause(Recipe.date_))
+        .join(StockKeepingUnit.product)
+        .join(ProductVersion, onclause=_pv_onclause(Recipe.date_))
+        .join(ProductVersion.product_group)
+        .outerjoin(step_count_sq, step_count_sq.c.rid == Recipe.id)
+        .outerjoin(photo_count_sq, photo_count_sq.c.rid == Recipe.id)
+        .options(
+            contains_eager(Recipe.sku).contains_eager(StockKeepingUnit.versions),
+            contains_eager(Recipe.sku)
+            .contains_eager(StockKeepingUnit.product)
+            .contains_eager(Product.versions)
+            .contains_eager(ProductVersion.product_group),
+        )
+        .order_by(ProductVersion.name)
+    )
+
+    rows = db.execute(q).unique().all()
+    out: list[recipeschemas.Recipe] = []
+    for recipe, sc, tm, pc in rows:
+        payload = {
+            "id_": recipe.id,
+            "sku": ProductLink(id_=recipe.sku.id, name=recipe.sku.product.versions[0].name),
+            "date_": recipe.date_,
+            "source": recipe.source,
+            "instructions": recipe.instructions or "",
+            "garnishing": recipe.garnishing or "",
+            "plating": recipe.plating or "",
+            "recipe_yield": recipe.recipe_yield,
+            "notes": recipe.notes or "",
+            "product_group_id": recipe.sku.product.versions[0].product_group_id,
+            "units": recipe.sku.versions[0].units,
+            # list view stays lightweight
+            "steps": [],
+            "photos": [],
+            "ingredients": [],
+            "step_count": cast(int | None, sc),
+            "photo_count": cast(int | None, pc),
+            "total_duration_minutes": (int(tm) if tm is not None else None),
+        }
+        out.append(recipeschemas.Recipe.model_validate(payload))
+    return out
+
+
+@router.post("", response_model=recipeschemas.Recipe)
+def save(
+    data: recipeschemas.RecipeIn,
+    user: Annotated[UserToken, Security(get_user, scopes=["recipes"])],
+    db: SessionDep,
+) -> recipeschemas.Recipe:
+    _ = user
+
+    recipe_sku = db.execute(select(StockKeepingUnit).where(StockKeepingUnit.id == data.sku.id_)).scalar_one()
+
+    if recipe_sku.product_id in {i.product.id_ for i in data.ingredients}:
+        raise HTTPException(
+            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
+            detail="Product cannot also be an ingredient",
+        )
+    if len(data.ingredients) == 0:
+        raise HTTPException(
+            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
+            detail="Recipe has no ingredients",
+        )
+
+    steps_in = data.steps if len(data.steps) else _steps_from_legacy(data.instructions)
+    legacy_instructions = _legacy_instructions_from_steps(steps_in) if len(steps_in) else (data.instructions or "")
+
+    recipe = Recipe(
+        date_=data.date_,
+        source=data.source,
+        instructions=legacy_instructions,
+        garnishing=data.garnishing,
+        plating=data.plating,
+        notes=data.notes,
+        sku=recipe_sku,
+        recipe_yield=round(data.recipe_yield, 2),
+    )
+
+    for ing in data.ingredients:
+        product: Product = db.execute(select(Product).where(Product.id == ing.product.id_)).scalar_one()
+        quantity = round(ing.quantity, 2)
+        recipe.items.append(RecipeItem(product_id=product.id, quantity=quantity, description=ing.description))
+
+    db.add(recipe)
+    db.flush()
+
+    for s in sorted(steps_in, key=lambda x: x.order_index):
+        db.add(
+            RecipeStep(
+                recipe_id=recipe.id,
+                order_index=s.order_index,
+                phase=s.phase,
+                title=s.title,
+                text=s.text,
+                duration_minutes=s.duration_minutes,
+                notes=s.notes,
+            )
+        )
+
+    for p in sorted(data.photos, key=lambda x: x.order_index):
+        if p.id_ is not None:
+            db.add(RecipePhoto(recipe_id=recipe.id, image_id=p.id_, order_index=p.order_index, caption=p.caption))
+            continue
+
+        image_bytes = _b64_to_bytes(p.resized)
+        thumb_bytes = _b64_to_bytes(p.thumbnail)
+        if image_bytes is None or thumb_bytes is None:
+            continue
+
+        img = DbImage(resource_id=recipe.id, resource_type="recipe", image=image_bytes, thumbnail=thumb_bytes)
+        db.add(img)
+        db.flush()
+        db.add(RecipePhoto(recipe_id=recipe.id, image_id=img.id, order_index=p.order_index, caption=p.caption))
+
+    db.commit()
+    recipe = _load_full(recipe.id, db)
+    return recipe_info(recipe)
+
+
+@router.put("/{id_}", response_model=recipeschemas.Recipe)
+def update(
+    id_: uuid.UUID,
+    data: recipeschemas.RecipeIn,
+    user: Annotated[UserToken, Security(get_user, scopes=["recipes"])],
+    db: SessionDep,
+) -> recipeschemas.Recipe:
+    _ = user
+    recipe = _load_full(id_, db)
+
+    recipe_sku = db.execute(select(StockKeepingUnit).where(StockKeepingUnit.id == data.sku.id_)).scalar_one()
+
+    if recipe_sku.product_id in {i.product.id_ for i in data.ingredients}:
+        raise HTTPException(
+            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
+            detail="Product cannot also be an ingredient",
+        )
+    if len(data.ingredients) == 0:
+        raise HTTPException(
+            status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
+            detail="Recipe has no ingredients",
+        )
+
+    steps_in = data.steps if len(data.steps) else _steps_from_legacy(data.instructions)
+    legacy_instructions = _legacy_instructions_from_steps(steps_in) if len(steps_in) else (data.instructions or "")
+
+    recipe.date_ = data.date_
+    recipe.source = data.source
+    recipe.instructions = legacy_instructions
+    recipe.garnishing = data.garnishing
+    recipe.plating = data.plating
+    recipe.notes = data.notes
+    recipe.recipe_yield = round(data.recipe_yield, 2)
+    recipe.sku = recipe_sku
+
+    db.execute(delete(RecipeItem).where(RecipeItem.recipe_id == recipe.id))
+    recipe.items = []
+    for ing in data.ingredients:
+        product: Product = db.execute(select(Product).where(Product.id == ing.product.id_)).scalar_one()
+        quantity = round(ing.quantity, 2)
+        recipe.items.append(RecipeItem(product_id=product.id, quantity=quantity, description=ing.description))
+
+    db.execute(delete(RecipeStep).where(RecipeStep.recipe_id == recipe.id))
+    for s in sorted(steps_in, key=lambda x: x.order_index):
+        db.add(
+            RecipeStep(
+                recipe_id=recipe.id,
+                order_index=s.order_index,
+                phase=s.phase,
+                title=s.title,
+                text=s.text,
+                duration_minutes=s.duration_minutes,
+                notes=s.notes,
+            )
+        )
+
+    keep_ids = {p.id_ for p in data.photos if p.id_ is not None}
+
+    db.execute(delete(RecipePhoto).where(RecipePhoto.recipe_id == recipe.id, ~RecipePhoto.image_id.in_(keep_ids)))
+    db.execute(
+        delete(DbImage).where(
+            DbImage.resource_id == recipe.id,
+            ~DbImage.id.in_(keep_ids),
+            DbImage.resource_type == "recipe",
+        )
+    )
+
+    for p in sorted(data.photos, key=lambda x: x.order_index):
+        if p.id_ is not None:
+            existing = db.execute(
+                select(RecipePhoto).where(RecipePhoto.recipe_id == recipe.id, RecipePhoto.image_id == p.id_)
+            ).scalar_one_or_none()
+            if existing is None:
+                db.add(RecipePhoto(recipe_id=recipe.id, image_id=p.id_, order_index=p.order_index, caption=p.caption))
+            else:
+                existing.order_index = p.order_index
+                existing.caption = p.caption
+            continue
+
+        image_bytes = _b64_to_bytes(p.resized)
+        thumb_bytes = _b64_to_bytes(p.thumbnail)
+        if image_bytes is None or thumb_bytes is None:
+            continue
+
+        img = DbImage(resource_id=recipe.id, resource_type="recipe", image=image_bytes, thumbnail=thumb_bytes)
+        db.add(img)
+        db.flush()
+        db.add(RecipePhoto(recipe_id=recipe.id, image_id=img.id, order_index=p.order_index, caption=p.caption))
+
+    db.commit()
+    recipe = _load_full(recipe.id, db)
+    return recipe_info(recipe)
+
+
+@router.delete("/{id_}", response_model=None)
+def delete_recipe(
+    id_: uuid.UUID,
+    user: Annotated[UserToken, Security(get_user, scopes=["recipes"])],
+    db: SessionDep,
+) -> None:
+    _ = user
+    db.execute(delete(RecipePhoto).where(RecipePhoto.recipe_id == id_))
+    db.execute(delete(DbImage).where(DbImage.resource_id == id_, DbImage.resource_type == "recipe"))
+    db.execute(delete(RecipeStep).where(RecipeStep.recipe_id == id_))
+    db.execute(delete(RecipeItem).where(RecipeItem.recipe_id == id_))
+    db.execute(delete(Recipe).where(Recipe.id == id_))
+    db.commit()
+    return None
 
 
 @router.get("/xlsx", response_class=StreamingResponse)
@@ -271,137 +482,128 @@ def get_report(
 ) -> StreamingResponse:
     calculate_prices(p, db)
     db.commit()
-    prices: list[tuple[str, str, Decimal]] = []
+
     pq = (
         db.execute(select(Price).where(Price.period_id == p).options(joinedload(Price.product, innerjoin=True)))
         .unique()
         .scalars()
         .all()
     )
-    prices = [(i.product.versions[-1].name, i.product.versions[-1].fraction_units, i.price) for i in pq]
+    prices: list[tuple[str, str, Decimal]] = [
+        (i.product.versions[-1].name, i.product.versions[-1].fraction_units, i.price) for i in pq
+    ]
 
-    list_: Sequence[Recipe] = []
     db.rollback()
+
     RecipeProductVersion = aliased(ProductVersion, name="recipe_product_version")
     ItemProductVersion = aliased(ProductVersion, name="item_product_version")
     CurrentSkuVersion = aliased(SkuVersion, name="current_sku_version")
 
-    # The ON clauses for date validity (as in your original)
     sku_version_onclause = and_(
         CurrentSkuVersion.sku_id == StockKeepingUnit.id,
-        or_(
-            CurrentSkuVersion.valid_from == None,  # noqa: E711
-            CurrentSkuVersion.valid_from <= Recipe.date_,
-        ),
-        or_(
-            CurrentSkuVersion.valid_till == None,  # noqa: E711
-            CurrentSkuVersion.valid_till >= Recipe.date_,
-        ),
+        or_(CurrentSkuVersion.valid_from == None, CurrentSkuVersion.valid_from <= Recipe.date_),  # noqa: E711
+        or_(CurrentSkuVersion.valid_till == None, CurrentSkuVersion.valid_till >= Recipe.date_),  # noqa: E711
     )
 
     recipe_product_version_onclause = and_(
         RecipeProductVersion.product_id == StockKeepingUnit.product_id,
-        or_(
-            RecipeProductVersion.valid_from == None,  # noqa: E711
-            RecipeProductVersion.valid_from <= Recipe.date_,
-        ),
-        or_(
-            RecipeProductVersion.valid_till == None,  # noqa: E711
-            RecipeProductVersion.valid_till >= Recipe.date_,
-        ),
+        or_(RecipeProductVersion.valid_from == None, RecipeProductVersion.valid_from <= Recipe.date_),  # noqa: E711
+        or_(RecipeProductVersion.valid_till == None, RecipeProductVersion.valid_till >= Recipe.date_),  # noqa: E711
     )
 
     item_product_version_onclause = and_(
         ItemProductVersion.product_id == RecipeItem.product_id,
-        or_(
-            ItemProductVersion.valid_from == None,  # noqa: E711
-            ItemProductVersion.valid_from <= Recipe.date_,
-        ),
-        or_(
-            ItemProductVersion.valid_till == None,  # noqa: E711
-            ItemProductVersion.valid_till >= Recipe.date_,
-        ),
+        or_(ItemProductVersion.valid_from == None, ItemProductVersion.valid_from <= Recipe.date_),  # noqa: E711
+        or_(ItemProductVersion.valid_till == None, ItemProductVersion.valid_till >= Recipe.date_),  # noqa: E711
     )
 
     q = (
         select(Recipe)
         .join(Recipe.items)
         .join(RecipeItem.product)
-        .join(ItemProductVersion, item_product_version_onclause)
+        .join(ItemProductVersion, onclause=item_product_version_onclause)
         .join(Recipe.sku)
-        .join(CurrentSkuVersion, sku_version_onclause)
+        .join(CurrentSkuVersion, onclause=sku_version_onclause)
         .join(StockKeepingUnit.product)
-        .join(RecipeProductVersion, recipe_product_version_onclause)
+        .join(RecipeProductVersion, onclause=recipe_product_version_onclause)
         .join(RecipeProductVersion.product_group)
         .options(
-            # Eagerly load ingredients and their product & product_version
             contains_eager(Recipe.items)
             .contains_eager(RecipeItem.product)
             .contains_eager(Product.versions, alias=ItemProductVersion),
-            # Eagerly load sku
             contains_eager(Recipe.sku)
             .contains_eager(StockKeepingUnit.product)
             .contains_eager(Product.versions, alias=RecipeProductVersion)
             .contains_eager(RecipeProductVersion.product_group),
-            # SkuVersion for the SKU (if needed)
             contains_eager(Recipe.sku).contains_eager(StockKeepingUnit.versions, alias=CurrentSkuVersion),
         )
     )
     if pg is not None:
         q = q.where(RecipeProductVersion.product_group_id == pg)
-    list_ = db.execute(q).unique().scalars().all()
-    e = excel(prices, sorted(list_, key=lambda r: r.sku.product.versions[0].name))
-    e.seek(0)
 
-    headers = {"Content-Disposition": "attachment; filename = recipe.xlsx"}
-    return StreamingResponse(e, media_type="text/xlsx", headers=headers)
+    list_: list[Recipe] = list(db.execute(q).unique().scalars().all())
+
+    xls = excel(prices, sorted(list_, key=lambda r: r.sku.product.versions[0].name))
+    xls.seek(0)
+    headers = {"Content-Disposition": "attachment; filename=recipes.xlsx"}
+    return StreamingResponse(
+        xls,
+        media_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        headers=headers,
+    )
 
 
 def excel(prices: list[tuple[str, str, Decimal]], recipes: list[Recipe]) -> BytesIO:
     wb = Workbook()
-    ws = wb.active
-    assert ws is not None
-
-    ws.title = "Rate List"
-    ws.cell(row=1, column=1, value="Name")
-    ws.cell(row=1, column=2, value="Units")
-    ws.cell(row=1, column=3, value="Rate")
+    ws0 = wb.active
+    assert ws0 is not None
+    ws0.title = "Rate List"
+    ws0.cell(row=1, column=1, value="Name")
+    ws0.cell(row=1, column=2, value="Units")
+    ws0.cell(row=1, column=3, value="Rate")
     for i, p in enumerate(prices, start=2):
-        ws.cell(row=i, column=1, value=p[0])
-        ws.cell(row=i, column=2, value=p[1])
-        ws.cell(row=i, column=3, value=p[2])
+        ws0.cell(row=i, column=1, value=p[0])
+        ws0.cell(row=i, column=2, value=p[1])
+        ws0.cell(row=i, column=3, value=float(p[2]))
 
     pgs = {x.sku.product.versions[0].product_group.name for x in recipes}
     for pg in pgs:
-        wb.create_sheet(pg)
+        if pg not in wb.sheetnames:
+            wb.create_sheet(pg)
+
     rows: defaultdict[str, int] = defaultdict(lambda: 1)
     register_styles(wb)
+
     for recipe in recipes:
-        ws = wb[recipe.sku.product.versions[0].product_group.name]
+        ws = cast(Worksheet, wb[recipe.sku.product.versions[0].product_group.name])
         row = rows[recipe.sku.product.versions[0].product_group.name]
         ings = len(recipe.items)
         ing_from = row + 2
         ing_till = ing_from + ings - 1
+
         ws.cell(row=row, column=1, value=recipe.sku.product.versions[0].name).style = "recipe_name"
-        # ws.cell(row=row, column=3, value=f"Yeild = {recipe.recipe_yield} {recipe.sku.units}")
         ws.cell(row=row, column=2, value=recipe.sku.versions[0].units).style = "recipe_unit"
-        ws.cell(row=row, column=3, value=recipe.recipe_yield).style = "recipe_name"
+        ws.cell(row=row, column=3, value=float(recipe.recipe_yield)).style = "recipe_name"
         ws.cell(row=row, column=4).style = "recipe_name"
         ws.cell(row=row, column=5, value=f"=SUM(E{ing_from}:E{ing_till})").style = "recipe_name"
+
         row += 1
         ws.cell(row=row, column=1, value="Ingredients").style = "header"
         ws.cell(row=row, column=2, value="Unit").style = "header"
         ws.cell(row=row, column=3, value="Qty").style = "header"
         ws.cell(row=row, column=4, value="Rate").style = "header"
         ws.cell(row=row, column=5, value="Amount").style = "header"
+
         for item in recipe.items:
             row += 1
             ws.cell(row=row, column=1, value=item.product.versions[0].name).style = "ing"
             ws.cell(row=row, column=2, value=item.product.versions[0].fraction_units).style = "unit"
-            ws.cell(row=row, column=3, value=item.quantity).style = "ing"
+            ws.cell(row=row, column=3, value=float(item.quantity)).style = "ing"
             ws.cell(row=row, column=4, value="=VLOOKUP(A:A,'Rate List'!A:C,3,0)").style = "ing"
             ws.cell(row=row, column=5, value=f"=C{row}*D{row}").style = "ing"
+
         rows[recipe.sku.product.versions[0].product_group.name] = row + 1
+
     virtual_workbook = BytesIO()
     wb.save(virtual_workbook)
     return virtual_workbook
@@ -409,33 +611,42 @@ def excel(prices: list[tuple[str, str, Decimal]], recipes: list[Recipe]) -> Byte
 
 @router.get("/nutrition", response_class=StreamingResponse)
 def get_nutrition(
+    user: Annotated[UserToken, Security(get_user, scopes=["recipes"])],
     db: SessionDep,
-    p: uuid.UUID | None = None,  # noqa: ARG001
 ) -> StreamingResponse:
+    _ = user
     date_ = date.today()
     calculate_nutrition(date_, db)
     db.commit()
     list_ = report_nutrition(date_, db)
-    e = nut(sorted(list_, key=lambda r: r.name))
-    e.seek(0)
-
-    headers = {"Content-Disposition": "attachment; filename = nutritional.xlsx"}
-    return StreamingResponse(e, media_type="text/xlsx", headers=headers)
+    xls = nutrition_excel(sorted(list_, key=lambda r: r.name))
+    xls.seek(0)
+    headers = {"Content-Disposition": "attachment; filename=nutritional.xlsx"}
+    return StreamingResponse(
+        xls,
+        media_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        headers=headers,
+    )
 
 
-def nut(products: list[NutritionalInformation]) -> BytesIO:
+def nutrition_excel(products: list[NutritionalInformation]) -> BytesIO:
     wb = Workbook()
-    ws = wb.active
-    assert ws is not None
-    ws.title = "Ingredients"
+    ws0 = wb.active
+    assert ws0 is not None
+    ws0.title = "Ingredients"
+
     pgs = {x.product_group for x in products}
-    pgs.remove("Ingredients")
+    if "Ingredients" in pgs:
+        pgs.remove("Ingredients")
     for pg in pgs:
-        wb.create_sheet(pg)
+        if pg not in wb.sheetnames:
+            wb.create_sheet(pg)
+
     rows: defaultdict[str, int] = defaultdict(lambda: 1)
     register_styles(wb)
+
     for item in products:
-        ws = wb[item.product_group]
+        ws = cast(Worksheet, wb[item.product_group])
         row = rows[item.product_group]
         if row == 1:
             ws.cell(row=row, column=1, value="Product").style = "header"
@@ -452,6 +663,7 @@ def nut(products: list[NutritionalInformation]) -> BytesIO:
             ws.cell(row=row, column=12, value="Cholestrol").style = "header"
             ws.cell(row=row, column=13, value="Sodium").style = "header"
             row += 1
+
         ws.cell(row=row, column=1, value=f"{item.name} ({item.units})").style = "ing"
         ws.cell(row=row, column=2, value=item.description).style = "ing"
         ws.cell(row=row, column=3, value=", ".join(item.ingredients)).style = "ing"
@@ -465,93 +677,58 @@ def nut(products: list[NutritionalInformation]) -> BytesIO:
         ws.cell(row=row, column=11, value=item.trans_fat).style = "ing"
         ws.cell(row=row, column=12, value=item.cholestrol).style = "ing"
         ws.cell(row=row, column=13, value=item.sodium).style = "ing"
-        row += 1
+
         rows[item.product_group] = row + 1
+
     virtual_workbook = BytesIO()
     wb.save(virtual_workbook)
     return virtual_workbook
 
 
-def register_styles(wb: Workbook) -> tuple[NamedStyle, NamedStyle, NamedStyle, NamedStyle, NamedStyle]:
-    bd = Side(style="thin", color="000000")
-
-    recipe_name = NamedStyle(name="recipe_name")
-    recipe_name.font = Font(bold=True)
-    recipe_name.border = Border(left=bd, top=bd, right=bd, bottom=bd)
-    recipe_name.fill = PatternFill(fill_type=None, start_color="FFFF00", end_color="FFFF00", patternType="solid")
-    wb.add_named_style(recipe_name)
-
-    recipe_unit = NamedStyle(name="recipe_unit")
-    recipe_unit.font = Font(bold=True)
-    recipe_unit.border = Border(left=bd, top=bd, right=bd, bottom=bd)
-    recipe_unit.fill = PatternFill(fill_type=None, start_color="FFFF00", end_color="FFFF00", patternType="solid")
-    recipe_unit.alignment = Alignment(horizontal="center")
-    wb.add_named_style(recipe_unit)
-
-    header = NamedStyle(name="header")
-    header.font = Font(bold=True)
-    header.border = Border(left=bd, top=bd, right=bd, bottom=bd)
-    header.fill = PatternFill(fill_type=None, start_color="92D050", end_color="92D050", patternType="solid")
-    header.alignment = Alignment(horizontal="center")
-    wb.add_named_style(header)
-
-    ing = NamedStyle(name="ing")
-    ing.border = Border(left=bd, top=bd, right=bd, bottom=bd)
-    wb.add_named_style(ing)
-
-    unit = NamedStyle(name="unit")
-    unit.border = Border(left=bd, top=bd, right=bd, bottom=bd)
-    unit.alignment = Alignment(horizontal="center")
-    wb.add_named_style(unit)
-    return recipe_name, recipe_unit, header, ing, unit
-
-
-@router.get("/{id_}", response_model=schemas.Recipe)
+@router.get("/{id_}", response_model=recipeschemas.Recipe)
 def show_id(
-    id_: uuid.UUID, user: Annotated[UserToken, Security(get_user, scopes=["recipes"])], db: SessionDep
-) -> schemas.Recipe:
-    item: Recipe = db.execute(select(Recipe).where(Recipe.id == id_)).scalar_one()
+    id_: uuid.UUID,
+    user: Annotated[UserToken, Security(get_user, scopes=["recipes"])],
+    db: SessionDep,
+) -> recipeschemas.Recipe:
+    _ = user
+    item = _load_full(id_, db)
     return recipe_info(item)
 
 
-def recipe_info(recipe: Recipe) -> schemas.Recipe:
-    return schemas.Recipe(
-        id_=recipe.id,
-        sku=ProductLink(
-            id_=recipe.sku_id,
-            name=f"{recipe.sku.product.versions[0].name} ({recipe.sku.versions[0].units})",
-        ),
-        date_=recipe.date_,
-        source=recipe.source,
-        instructions=recipe.instructions,
-        garnishing=recipe.garnishing,
-        plating=recipe.plating,
-        recipe_yield=recipe.recipe_yield,
-        notes="",
-        items=[
-            rischemas.RecipeItem(
-                id_=item.id,
-                product=ProductLink(
-                    id_=item.product.id,
-                    name=item.product.versions[0].name,
-                    fraction_units=item.product.versions[0].fraction_units,
-                ),
-                quantity=round(item.quantity, 2),
-                description=item.description,
-            )
-            for item in recipe.items
-        ],
-    )
+def register_styles(wb: Workbook) -> None:
+    bd = Side(style="thin", color="000000")
+    thin = Border(left=bd, top=bd, right=bd, bottom=bd)
 
+    if "header" in wb.named_styles:
+        return
 
-def recipe_blank() -> schemas.RecipeBlank:
-    return schemas.RecipeBlank(
-        date_=date.today(),
-        source="",
-        instructions="",
-        garnishing="",
-        plating="",
-        recipe_yield=Decimal(1),
-        notes="",
-        items=[],
-    )
+    header = NamedStyle(name="header")
+    header.font = Font(bold=True, color="FFFFFF")
+    header.fill = PatternFill("solid", fgColor="4F81BD")
+    header.alignment = Alignment(horizontal="center", vertical="center", wrap_text=True)
+    header.border = thin
+
+    ing = NamedStyle(name="ing")
+    ing.alignment = Alignment(wrap_text=True, vertical="top")
+    ing.border = thin
+
+    unit = NamedStyle(name="unit")
+    unit.alignment = Alignment(horizontal="center", vertical="top", wrap_text=True)
+    unit.border = thin
+
+    recipe_name = NamedStyle(name="recipe_name")
+    recipe_name.font = Font(bold=True)
+    recipe_name.alignment = Alignment(vertical="center", wrap_text=True)
+    recipe_name.border = thin
+
+    recipe_unit = NamedStyle(name="recipe_unit")
+    recipe_unit.font = Font(bold=True)
+    recipe_unit.alignment = Alignment(horizontal="center", vertical="center")
+    recipe_unit.border = thin
+
+    wb.add_named_style(header)
+    wb.add_named_style(ing)
+    wb.add_named_style(unit)
+    wb.add_named_style(recipe_name)
+    wb.add_named_style(recipe_unit)
diff --git a/brewman/brewman/routers/reports/entries.py b/brewman/brewman/routers/reports/entries.py
index e68dfec7..952dbc7c 100644
--- a/brewman/brewman/routers/reports/entries.py
+++ b/brewman/brewman/routers/reports/entries.py
@@ -3,7 +3,7 @@ from datetime import date, datetime, time, timedelta
 from decimal import Decimal
 from typing import Annotated
 
-from fastapi import APIRouter, Depends, Security
+from fastapi import APIRouter, Depends, Query, Security
 from sqlalchemy import desc, not_, or_, select
 from sqlalchemy.orm import Session, contains_eager
 from sqlalchemy.sql.functions import count
@@ -88,15 +88,24 @@ def report_data(
     finish_date: Annotated[date, Depends(report_finish_date)],
     user: Annotated[UserToken, Security(get_user, scopes=["ledger"])],
     db: SessionDep,
-    p: bool | None = None,  # Posted
-    ps: int = 50,  # Page Size
-    pi: int = 0,  # Page Index
-    a: str = "date",  # Active Sort
-    d: str = "desc",  # Sort Direction
-    i: bool = False,  # Show issue vouchers
+    posted: Annotated[bool | None, Query(alias="p")] = None,  # Posted
+    page_size: Annotated[int, Query(alias="ps")] = 50,  # Page Size
+    page_index: Annotated[int, Query(alias="pi")] = 0,  # Page Index
+    active_sort: Annotated[str, Query(alias="a")] = "date",  # Active Sort
+    sort_direction: Annotated[str, Query(alias="d")] = "desc",  # Sort Direction
+    show_issue_vouchers: Annotated[bool, Query(alias="i")] = False,  # Show issue vouchers
 ) -> schemas.Report:
-    assert i is not None and ps is not None and pi is not None and a is not None and d is not None
-    counts, report = build_report(start_date, finish_date, p, i, ps, pi, a, d, db)
+    counts, report = build_report(
+        start_date,
+        finish_date,
+        posted,
+        show_issue_vouchers,
+        page_size,
+        page_index,
+        active_sort,
+        sort_direction,
+        db,
+    )
     return schemas.Report(
         counts=counts,
         report=[
diff --git a/brewman/brewman/routers/temporal_product.py b/brewman/brewman/routers/temporal_product.py
index 702f79aa..ee21f612 100644
--- a/brewman/brewman/routers/temporal_product.py
+++ b/brewman/brewman/routers/temporal_product.py
@@ -18,7 +18,6 @@ from ..models.product_group import ProductGroup
 from ..models.product_version import ProductVersion
 from ..models.sku_version import SkuVersion
 from ..models.stock_keeping_unit import StockKeepingUnit
-from ..schemas.account import AccountLink
 from ..schemas.product_group import ProductGroupLink
 from ..schemas.temporal_product import Product as ProductModel
 from ..schemas.temporal_product import StockKeepingUnit as SkuModel
@@ -52,7 +51,7 @@ def update_route(
             product_v.description = data_version.description
             product_v.fraction_units = data_version.fraction_units
             product_v.product_group_id = data_version.product_group.id_
-            product_v.account_id = Account.all_purchases()
+            # product_v.account_id = Account.all_purchases()
             product_v.is_purchased = data_version.is_purchased
             product_v.is_sold = data_version.is_sold
             product_v.allergen = data_version.allergen
@@ -225,7 +224,7 @@ def product_info(product: Product) -> TemporalProduct:
                 is_purchased=version.is_purchased,
                 is_sold=version.is_sold,
                 product_group=ProductGroupLink(id_=version.product_group.id, name=version.product_group.name),
-                account=AccountLink(id_=version.account.id, name=version.account.name),
+                # account=AccountLink(id_=version.account.id, name=version.account.name),
                 allergen=version.allergen,
                 protein=version.protein,
                 carbohydrate=version.carbohydrate,
diff --git a/brewman/brewman/schemas/recipe.py b/brewman/brewman/schemas/recipe.py
index 52dbf29b..231cec2a 100644
--- a/brewman/brewman/schemas/recipe.py
+++ b/brewman/brewman/schemas/recipe.py
@@ -2,9 +2,12 @@ import uuid
 
 from datetime import date, datetime
 
+from fastapi import Form
 from pydantic import (
+    AliasChoices,
     BaseModel,
     ConfigDict,
+    Field,
     FieldSerializationInfo,
     field_serializer,
     field_validator,
@@ -13,24 +16,37 @@ from pydantic import (
 from . import Daf, to_camel
 from .product import ProductLink
 from .recipe_item import RecipeItem
+from .recipe_photo import RecipePhoto
+from .recipe_step import RecipeStep
 
 
 class RecipeIn(BaseModel):
-    sku: ProductLink
     date_: date
     source: str
     instructions: str
     garnishing: str
     plating: str
+    sku: ProductLink
     recipe_yield: Daf
     notes: str
 
-    items: list[RecipeItem]
+    # New structured content
+    steps: list[RecipeStep] = Field(default_factory=list)
+    photos: list[RecipePhoto] = Field(default_factory=list)
+
+    # Ingredients (renamed from legacy "items")
+    # Accept both keys for backward compatibility, serialize as "ingredients".
+    ingredients: list[RecipeItem] = Field(
+        default_factory=list,
+        validation_alias=AliasChoices("ingredients", "items"),
+        serialization_alias="ingredients",
+    )
+
     model_config = ConfigDict(str_strip_whitespace=True, alias_generator=to_camel, populate_by_name=True)
 
     @field_validator("date_", mode="before")
     @classmethod
-    def parse_start_date(cls, value: date | str) -> date:
+    def parse_date(cls, value: date | str) -> date:
         if isinstance(value, date):
             return value
         return datetime.strptime(value, "%d-%b-%Y").date()
@@ -39,11 +55,25 @@ class RecipeIn(BaseModel):
     def serialize_date(self, value: date, info: FieldSerializationInfo) -> str:
         return value.strftime("%d-%b-%Y")
 
+    @classmethod
+    def load_form(cls, data: str = Form(...)) -> BaseModel:
+        import json
+
+        json_data = json.loads(data)
+        # pydantic v2
+        return cls.model_validate(json_data)
+
 
 class Recipe(RecipeIn):
     id_: uuid.UUID
     product_group_id: uuid.UUID | None = None
     units: str | None = None
+
+    # Derived metrics (for list view)
+    step_count: int | None = None
+    photo_count: int | None = None
+    total_duration_minutes: int | None = None
+
     model_config = ConfigDict(str_strip_whitespace=True, alias_generator=to_camel, populate_by_name=True)
 
 
diff --git a/brewman/brewman/schemas/recipe_photo.py b/brewman/brewman/schemas/recipe_photo.py
new file mode 100644
index 00000000..13afcdb3
--- /dev/null
+++ b/brewman/brewman/schemas/recipe_photo.py
@@ -0,0 +1,29 @@
+import uuid
+
+from pydantic import BaseModel, ConfigDict, Field
+
+from . import to_camel
+
+
+class RecipePhotoIn(BaseModel):
+    """Photo link + metadata.
+
+    For input:
+      - id_ is optional (existing image id)
+      - resized / thumbnail are base64 strings (may include data URL prefix)
+    For output:
+      - resized / thumbnail are URLs to /db-image/{id}/...
+    """
+
+    id_: uuid.UUID | None = None
+    order_index: int = Field(0, ge=0)
+    caption: str = ""
+    resized: str | None = None
+    thumbnail: str | None = None
+
+    model_config = ConfigDict(str_strip_whitespace=True, alias_generator=to_camel, populate_by_name=True)
+
+
+class RecipePhoto(RecipePhotoIn):
+    # kept for symmetry / future extensions
+    model_config = ConfigDict(str_strip_whitespace=True, alias_generator=to_camel, populate_by_name=True)
diff --git a/brewman/brewman/schemas/recipe_step.py b/brewman/brewman/schemas/recipe_step.py
new file mode 100644
index 00000000..9e5b256d
--- /dev/null
+++ b/brewman/brewman/schemas/recipe_step.py
@@ -0,0 +1,21 @@
+import uuid
+
+from pydantic import BaseModel, ConfigDict, Field
+
+from . import to_camel
+
+
+class RecipeStepIn(BaseModel):
+    order_index: int = Field(0, ge=0)
+    phase: str
+    title: str
+    text: str
+    duration_minutes: int | None = Field(default=None, ge=0)
+    notes: str | None = None
+
+    model_config = ConfigDict(str_strip_whitespace=True, alias_generator=to_camel, populate_by_name=True)
+
+
+class RecipeStep(RecipeStepIn):
+    id_: uuid.UUID | None = None
+    model_config = ConfigDict(str_strip_whitespace=True, alias_generator=to_camel, populate_by_name=True)
diff --git a/brewman/brewman/schemas/temporal_product.py b/brewman/brewman/schemas/temporal_product.py
index 02dad740..f681c412 100644
--- a/brewman/brewman/schemas/temporal_product.py
+++ b/brewman/brewman/schemas/temporal_product.py
@@ -7,7 +7,6 @@ from typing import Annotated
 from pydantic import BaseModel, ConfigDict, Field, SerializationInfo, field_serializer, field_validator
 
 from . import Daf, to_camel
-from .account import AccountLink
 from .product_group import ProductGroupLink
 
 
@@ -20,7 +19,6 @@ class Product(BaseModel):
     description: str | None
     fraction_units: Annotated[str, Field(min_length=1)]
     product_group: ProductGroupLink = Field(...)
-    account: AccountLink
     is_purchased: bool
     is_sold: bool
 
diff --git a/brewman/pyproject.toml b/brewman/pyproject.toml
index e80a3c7b..5de64451 100644
--- a/brewman/pyproject.toml
+++ b/brewman/pyproject.toml
@@ -5,33 +5,34 @@ description = "Accounting plus inventory management for a restaurant."
 requires-python = ">=3.14"
 authors = [{ name = "tanshu", email = "git@tanshu.com" }]
 dependencies = [
-  "alembic>=1.18.4",
+  "alembic>=1.19.1",
   "arq>=0.28.0",
-  "cryptography>=48.0.0",
-  "fastapi[all]>=0.136.1",
-  "gunicorn>=26.0.0",
+  "cryptography>=50.0.0",
+  "fastapi[all]>=0.141.1",
+  "gunicorn>=26.2.0",
   "itsdangerous>=2.2.0",
   "openpyxl>=3.1.5",
-  "pandas>=3.0.2",
+  "pandas>=3.0.5",
   "passlib[bcrypt]>=1.7.4",
   "psycopg[binary,pool]>=3.3.4",
-  "pydantic>=2.13.3",
-  "pydantic-settings>=2.14.0",
-  "pyjwt>=2.12.1",
-  "python-dotenv>=1.2.2",
-  "python-multipart>=0.0.27",
-  "sqlalchemy>=2.0.49",
-  "uvicorn[standard]>=0.46.0",
+  "pydantic>=2.13.4",
+  "pydantic-settings>=2.15.0",
+  "pyjwt>=2.13.0",
+  "python-dotenv>=1.2.3",
+  "python-multipart>=0.0.32",
+  "sqlalchemy>=2.0.52",
+  "uvicorn[standard]>=0.52.4",
 ]
 
 [dependency-groups]
 dev = [
   "bandit>=1.9.4",
-  "mypy>=1.20.2",
-  "pre-commit>=4.6.0",
-  "ruff>=0.15.12",
-  "safety>=3.7.0",
-  "types-openpyxl>=3.1.5.20260408",
+  "mypy>=2.3.1",
+  "pandas-stubs>=3.0.5.260730",
+  "pre-commit>=4.6.2",
+  "ruff>=0.16.4",
+  "safety>=3.8.1",
+  "types-openpyxl>=3.1.5.20260807",
 ]
 
 [build-system]
@@ -107,9 +108,7 @@ ignore = [
   "W191",  # indentation contains tabs
   "B904",  # Allow raising exceptions without from e, for HTTPException
 ]
-fixable = [
-  "ALL"
-]  # Allow fix for all enabled rules (when `--fix`) is provided.
+fixable = ["ALL"]  # Allow fix for all enabled rules (when `--fix`) is provided.
 dummy-variable-rgx = "^(user|_+|(_+[a-zA-Z0-9_]*[a-zA-Z0-9]+?))$"
 
 [tool.ruff.lint.isort]
diff --git a/brewman/uv.lock b/brewman/uv.lock
index d871c58f..3575378e 100644
--- a/brewman/uv.lock
+++ b/brewman/uv.lock
@@ -12,16 +12,16 @@ resolution-markers = [
 
 [[package]]
 name = "alembic"
-version = "1.18.4"
+version = "1.19.1"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "mako" },
     { name = "sqlalchemy" },
     { name = "typing-extensions" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/94/13/8b084e0f2efb0275a1d534838844926f798bd766566b1375174e2448cd31/alembic-1.18.4.tar.gz", hash = "sha256:cb6e1fd84b6174ab8dbb2329f86d631ba9559dd78df550b57804d607672cedbc", size = 2056725, upload-time = "2026-02-10T16:00:47.195Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/16/2b/e4153978368de59918115c9e01d3ebf58a558a7285efa7e960c383c4b59a/alembic-1.19.1.tar.gz", hash = "sha256:e0fca0518118c78acc493e31bcb5402f190057aaf6df8b5b95ce94c4789cf648", size = 2070816, upload-time = "2026-08-08T16:32:01.565Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/d2/29/6533c317b74f707ea28f8d633734dbda2119bbadfc61b2f3640ba835d0f7/alembic-1.18.4-py3-none-any.whl", hash = "sha256:a5ed4adcf6d8a4cb575f3d759f071b03cd6e5c7618eb796cb52497be25bfe19a", size = 263893, upload-time = "2026-02-10T16:00:49.997Z" },
+    { url = "https://files.pythonhosted.org/packages/20/89/e62cc37b69ad357cc8ecd6e7367f5245f523d3cbb338a66197212bdf6749/alembic-1.19.1-py3-none-any.whl", hash = "sha256:b39018cb3d9413a19cbd54cf3c02ad33998641f0538eb77413a488a21c3e14be", size = 265946, upload-time = "2026-08-08T16:32:03.153Z" },
 ]
 
 [[package]]
@@ -67,6 +67,70 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/48/32/66b616976c5058d434ca2017979bfffd784888177b16b5038abcec93954a/arq-0.28.0-py3-none-any.whl", hash = "sha256:b1696bf5614d60f4172a2c0cbdc177e23ba03a5eb9acc29bd8181f4ea71fff94", size = 26061, upload-time = "2026-04-16T10:50:22.321Z" },
 ]
 
+[[package]]
+name = "ast-serialize"
+version = "0.8.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/e1/a9/11851c3e02a3fea2ddc9932d1fdc7d2edaeecc0d2e11bc5f2a7fde2b0934/ast_serialize-0.8.0.tar.gz", hash = "sha256:6c37c43e4004dfb42d321ddedc569dc17ff4259296f3af577c9ea46a809bc010", size = 845638, upload-time = "2026-08-07T11:29:02.152Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/34/16/6e520b57cd8c75914b38c670ad4593d13c22911e4306cc7165dab8b0789b/ast_serialize-0.8.0-cp314-cp314-pyemscripten_2026_0_wasm32.whl", hash = "sha256:3d822605fa7bb326ef868d25fafced7fc660fa46d9b90c02ea86d5e2f5d325f7", size = 863924, upload-time = "2026-08-07T11:27:34.579Z" },
+    { url = "https://files.pythonhosted.org/packages/03/e1/48802de9b22a2bcad42ec80601a17e3f69172fe4f590e6311bcc2b323aeb/ast_serialize-0.8.0-cp314-cp314t-macosx_10_12_x86_64.whl", hash = "sha256:2efa40b068197d5efb62655b43baadb842ed71c4958cccd3e8b86a35726f0119", size = 1177662, upload-time = "2026-08-07T11:27:36.196Z" },
+    { url = "https://files.pythonhosted.org/packages/38/d4/323438db76bded3a1f3523a3167b8325916b2ddceb2107a330c6ec9fcf4d/ast_serialize-0.8.0-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:db1b957291bca08c7e72f43a12357b2948e20775d970e3fc3dac0aa3160ab725", size = 1167072, upload-time = "2026-08-07T11:27:37.646Z" },
+    { url = "https://files.pythonhosted.org/packages/77/82/53c5400b54144b56de8ed7f957fd1ccd97e42482009292ab46121d15f8dd/ast_serialize-0.8.0-cp314-cp314t-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:fdc0d5b18ff8fb364e87923e47c0a91d0d69dbcaeaa274591f7fd26892cc3a3a", size = 1225497, upload-time = "2026-08-07T11:27:39.225Z" },
+    { url = "https://files.pythonhosted.org/packages/44/5f/36c07327a8b91303fbf1382c7c3e8a2902072dbe1b9546138a5288e75ff0/ast_serialize-0.8.0-cp314-cp314t-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:9da7330f3e235bf7da89b8d39205c6350fc0c08a85379743f2df9fff87d6d980", size = 1227101, upload-time = "2026-08-07T11:27:40.799Z" },
+    { url = "https://files.pythonhosted.org/packages/9d/48/5adf5c67addc7ddb328122208c6d375a84cf154984f412b4087330a157bd/ast_serialize-0.8.0-cp314-cp314t-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:f3186969ee66a9863b00acc6523ace44c56974eecb348a7ea4b228d9f0b80e19", size = 1424001, upload-time = "2026-08-07T11:27:42.708Z" },
+    { url = "https://files.pythonhosted.org/packages/38/a1/70074dd3869d2b0e934f91891d8d6b734361cd3b80f85ca7ece2e668ecdd/ast_serialize-0.8.0-cp314-cp314t-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:40a57b73731be45da4fa41430c4d5dc94a24b3a4faba7b9e069978c0402064ea", size = 1245545, upload-time = "2026-08-07T11:27:44.4Z" },
+    { url = "https://files.pythonhosted.org/packages/e3/be/53b9c0a8a6399950c2e3546bdfab96d2b299d5b114b47eb94fd3c49c4054/ast_serialize-0.8.0-cp314-cp314t-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:5075b9da3ef807eda752502446dfecea3b381c4900b7e27a5d5f4f899eb39951", size = 1248961, upload-time = "2026-08-07T11:27:45.781Z" },
+    { url = "https://files.pythonhosted.org/packages/eb/13/3651d3812548a2bda15e26e5dd51aadb48cf682d0865370255fcf0e367dd/ast_serialize-0.8.0-cp314-cp314t-manylinux_2_31_riscv64.whl", hash = "sha256:293cc1c5bfa741f8e3fbe8175b9c07beee487c9a6fdbb25a5acad9f1df2d30a9", size = 1243877, upload-time = "2026-08-07T11:27:47.325Z" },
+    { url = "https://files.pythonhosted.org/packages/21/a0/521f0bf000f675e9312a4aae2c8ba7a992405d072a85c485e08fd59433b9/ast_serialize-0.8.0-cp314-cp314t-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:e0910c3442a75216dde0f102d854ba2aaa71d2482e0ee213630b9bf29584fba3", size = 1293903, upload-time = "2026-08-07T11:27:49.264Z" },
+    { url = "https://files.pythonhosted.org/packages/b1/7e/402fc902568aa2ee65865a3e151f000db0153da8ce6b1be4c9c349025f8d/ast_serialize-0.8.0-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:43dd6d596879bb1cb8a12cc9dae7bb10090a39a35883026c24f82488a195619a", size = 1401070, upload-time = "2026-08-07T11:27:50.947Z" },
+    { url = "https://files.pythonhosted.org/packages/ff/7c/97d4b66c057f1706fc8be6dd532cc77c988794357c8f4ffdb6adabb39562/ast_serialize-0.8.0-cp314-cp314t-musllinux_1_2_armv7l.whl", hash = "sha256:8c9d537f59e936392cfd3597789d1390304dd659efc3c486ce7f40fb6b8a9f53", size = 1502602, upload-time = "2026-08-07T11:27:52.364Z" },
+    { url = "https://files.pythonhosted.org/packages/89/6f/72cc3b71562001bba46e898ccfbf1844f7939b3e28912736206102f2e5a8/ast_serialize-0.8.0-cp314-cp314t-musllinux_1_2_i686.whl", hash = "sha256:f0190a33d7f97c65e9069f7a7f40499eea6b5cbe260c558378109caf20ce934b", size = 1495848, upload-time = "2026-08-07T11:27:53.803Z" },
+    { url = "https://files.pythonhosted.org/packages/a0/53/d6f629d1e49308b2f363dae028baa213ec222c9106fa1f7f0d1f7b41499a/ast_serialize-0.8.0-cp314-cp314t-musllinux_1_2_ppc64le.whl", hash = "sha256:77308ae6c5cf5264cc0f01a7c556ec77a9e68eb1f61b093534d698139fdc3b14", size = 1556556, upload-time = "2026-08-07T11:27:55.342Z" },
+    { url = "https://files.pythonhosted.org/packages/ee/22/340f35dd8dfc6d412d53dc20699ca014b8d228db923e8ed4759c512b162c/ast_serialize-0.8.0-cp314-cp314t-musllinux_1_2_riscv64.whl", hash = "sha256:8d53a23f27e1ed3a36b2d26fd2a1a6228c8e85a1ed62ff7cdb44bd610769f20a", size = 1417822, upload-time = "2026-08-07T11:27:56.712Z" },
+    { url = "https://files.pythonhosted.org/packages/11/29/6dde5c13fbebc051d3a6df4ec0a6fd1d5359333cc1193f7f609f3410b4d8/ast_serialize-0.8.0-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:ffa5e7cb08f96fed9121f77b224151e41caf88feab9d652bb46c78202b6fbeda", size = 1445153, upload-time = "2026-08-07T11:27:58.275Z" },
+    { url = "https://files.pythonhosted.org/packages/62/c5/f473a8ed030f7a0ca24b9849cca184677a50c053867a7b808c2e1289bbd3/ast_serialize-0.8.0-cp314-cp314t-win32.whl", hash = "sha256:fa70ed4dea0bb18b30a1789c77baa701d0ef30c474f2ccabdea61e25623a8827", size = 1063711, upload-time = "2026-08-07T11:27:59.793Z" },
+    { url = "https://files.pythonhosted.org/packages/23/63/39e171fcd38ca057c2e1979d5ee81ac7a3502784abe3d83df7454f7a0978/ast_serialize-0.8.0-cp314-cp314t-win_amd64.whl", hash = "sha256:d8b3c8eee4c1baef9d4e84d2a59a805501617127be42615cb48970b15b0892b6", size = 1103740, upload-time = "2026-08-07T11:28:01.405Z" },
+    { url = "https://files.pythonhosted.org/packages/21/1c/d00762b399e7726d68d0a088cc946e3a4c60f1c6176f557608f672f627f3/ast_serialize-0.8.0-cp314-cp314t-win_arm64.whl", hash = "sha256:ac4f0a83c55a9b782f79ad55a5247b7db123c1db405959791c2ef886e9710c9f", size = 1076021, upload-time = "2026-08-07T11:28:02.947Z" },
+    { url = "https://files.pythonhosted.org/packages/4c/11/911210c3c78923273a9211a2b6cfc4c8aa723b30dab3e1c8d19afb983b40/ast_serialize-0.8.0-cp315-abi3.abi3t-macosx_10_12_x86_64.whl", hash = "sha256:86b8a1e6d90467345356098b040150e82fbc26d24a7a202224b13dc1f6264ca0", size = 1177715, upload-time = "2026-08-07T11:28:04.654Z" },
+    { url = "https://files.pythonhosted.org/packages/77/89/6282881c8587606638db153cbe21e1e0c4d1f3970dee1aa0610a1c62a026/ast_serialize-0.8.0-cp315-abi3.abi3t-macosx_11_0_arm64.whl", hash = "sha256:39e92ff8e8cb45947fe9007174b2950e1fb098e6abd00266a13cd3bcf6675068", size = 1169347, upload-time = "2026-08-07T11:28:06.1Z" },
+    { url = "https://files.pythonhosted.org/packages/97/78/a9f846a03a340ff3728c915f23338ca742742f3292700559cdb3ad999b1e/ast_serialize-0.8.0-cp315-abi3.abi3t-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c85d8d18db5b2dfcb3b7e38a4d600ca35504c0ed8a6f75cd1c811e4ffe248a15", size = 1225916, upload-time = "2026-08-07T11:28:07.654Z" },
+    { url = "https://files.pythonhosted.org/packages/c0/15/aba6ef8a988a6eceb6f0359589aac509e29ae2dba67fd9bfd5af0c3f13e7/ast_serialize-0.8.0-cp315-abi3.abi3t-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:9830ff7e764f74d9eefb01170c61a9f0fd2c027dac5fcb72e064decd57d56371", size = 1227135, upload-time = "2026-08-07T11:28:09.504Z" },
+    { url = "https://files.pythonhosted.org/packages/94/29/3f63d696ea7c5b8abadcecc3505be51bd900daaccc522ed8322fa5b05a93/ast_serialize-0.8.0-cp315-abi3.abi3t-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:6479d9722a4cd21b578f5478074c41e6169f04811996ec881655560f703a5bba", size = 1425040, upload-time = "2026-08-07T11:28:11.044Z" },
+    { url = "https://files.pythonhosted.org/packages/e2/5d/0aac338604ff59df5774d4304307898982252f325ff7cafe31d52fedcb65/ast_serialize-0.8.0-cp315-abi3.abi3t-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:a63bed264e818cd83eec11feed0f50aa162542b91132ef58afebc857182763a5", size = 1246278, upload-time = "2026-08-07T11:28:12.519Z" },
+    { url = "https://files.pythonhosted.org/packages/23/ca/9f1ef795bb724719532bd86dbec11e5b66857d3fbe9b6772baec0191a6ed/ast_serialize-0.8.0-cp315-abi3.abi3t-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9d187197d234aa45d6cfa2b096be5f666e8cc2e7eb3722d0ab8926293cf5720c", size = 1250029, upload-time = "2026-08-07T11:28:13.896Z" },
+    { url = "https://files.pythonhosted.org/packages/dc/25/5e061372d2ed953b9ba3b9c4f73de3b8e9234cda3f6c088db4686801d0e1/ast_serialize-0.8.0-cp315-abi3.abi3t-manylinux_2_31_riscv64.whl", hash = "sha256:2d39a56282cfcc0d8eeea37267c754be59c98d48505c23b1dae5c6011f3813dd", size = 1243575, upload-time = "2026-08-07T11:28:15.37Z" },
+    { url = "https://files.pythonhosted.org/packages/a8/c1/ae7da218053120635a4ca802366c69f707203641af95372eeb83f70dfd52/ast_serialize-0.8.0-cp315-abi3.abi3t-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:f7cc5f10386994c0f4844f1e6d6a97127e9b478660eb6dec2b257644f0acab64", size = 1294396, upload-time = "2026-08-07T11:28:16.813Z" },
+    { url = "https://files.pythonhosted.org/packages/2e/89/271d1f49c5269fcddcc789ea3f25be401f6723fc1138aeda539f4d05516d/ast_serialize-0.8.0-cp315-abi3.abi3t-musllinux_1_2_aarch64.whl", hash = "sha256:6102f2f985c2e542be85cd857678ec9356fefa792b93cadfadd31139f5696f27", size = 1401987, upload-time = "2026-08-07T11:28:18.333Z" },
+    { url = "https://files.pythonhosted.org/packages/55/be/4e7d77fcf571ac7cb5cf7115a20c36642bd7d29473b45dfaaefeb9618f90/ast_serialize-0.8.0-cp315-abi3.abi3t-musllinux_1_2_armv7l.whl", hash = "sha256:3a8660fe66667b76a6e9dccd1d33e66b229fde3b308db991c041609226c005b6", size = 1502904, upload-time = "2026-08-07T11:28:20.039Z" },
+    { url = "https://files.pythonhosted.org/packages/8b/ae/ed1de2db7e019d4236fbc164ffa5ef9a6022a300a342bbf142d21b7c141e/ast_serialize-0.8.0-cp315-abi3.abi3t-musllinux_1_2_i686.whl", hash = "sha256:e7266307e5fba39836edb79def8608887af48820508bff3c5f2941e1e04d1534", size = 1496967, upload-time = "2026-08-07T11:28:21.734Z" },
+    { url = "https://files.pythonhosted.org/packages/92/89/5fea507fae5c5f18b7dc7f95e5c00956574b8c717b8fd2049c504fab0b18/ast_serialize-0.8.0-cp315-abi3.abi3t-musllinux_1_2_ppc64le.whl", hash = "sha256:4ca7e6fd1ad845d1cc649dc2ecd499db2f8f46af5bf8da7b70dd858774cc038b", size = 1559041, upload-time = "2026-08-07T11:28:23.194Z" },
+    { url = "https://files.pythonhosted.org/packages/42/71/478d69df21b64e064554a68134c94be304270316ca676a94e63c389a636a/ast_serialize-0.8.0-cp315-abi3.abi3t-musllinux_1_2_riscv64.whl", hash = "sha256:2880350b13d3eae69a0d70bc1fb6c9bfaca4dbd0e20ba8cd1aa483080b56ff06", size = 1417367, upload-time = "2026-08-07T11:28:24.601Z" },
+    { url = "https://files.pythonhosted.org/packages/5e/2d/8962dc8d5b3a9dc27b36f9db199afa25264c741505469d9ec10ffbfd2ba7/ast_serialize-0.8.0-cp315-abi3.abi3t-musllinux_1_2_x86_64.whl", hash = "sha256:ab0f9a59f7d63d0d441b56b9a818b273705264352d5115cfee12e940e816d958", size = 1446178, upload-time = "2026-08-07T11:28:26.152Z" },
+    { url = "https://files.pythonhosted.org/packages/4f/22/14d2ad4fd1d1bcd0dc687ca268e0630069f45162496260c0efb70ee0ea72/ast_serialize-0.8.0-cp315-abi3.abi3t-win32.whl", hash = "sha256:0485a25ef519c62e749ee3c1ad8070e591b380d67226349eb5a70b228dc1ac4a", size = 1063811, upload-time = "2026-08-07T11:28:27.864Z" },
+    { url = "https://files.pythonhosted.org/packages/18/1d/84a327c0202a41aa5fdba3ade33904d6d8f3b9e6806fa83568d835395850/ast_serialize-0.8.0-cp315-abi3.abi3t-win_amd64.whl", hash = "sha256:bd84d60bca7079e741be4ac5dbe237751a59d7f6f9f0126b11880d63822cbe16", size = 1105518, upload-time = "2026-08-07T11:28:29.691Z" },
+    { url = "https://files.pythonhosted.org/packages/8c/92/74556dec52fde85a2ad84ed159991b916241043788609c15d8b77e14570b/ast_serialize-0.8.0-cp315-abi3.abi3t-win_arm64.whl", hash = "sha256:057769b5921336eb2d9124f2a731b42ed05ffdac559b840dbdf6f3937cf153dc", size = 1076319, upload-time = "2026-08-07T11:28:31.282Z" },
+    { url = "https://files.pythonhosted.org/packages/d1/5d/c650b1f2cc1e75193358da95a080261422e8cd10b66d7370b1688c9915c5/ast_serialize-0.8.0-cp315-cp315-pyemscripten_2026_5_wasm32.whl", hash = "sha256:a02cbed7d8bfdcdee88edaac12bd50d53d9953aaa2e1852ef078625be5f1c0b5", size = 852914, upload-time = "2026-08-07T11:28:32.929Z" },
+    { url = "https://files.pythonhosted.org/packages/d9/e3/6142e920fec6ef7bccabd8c24ed8ed99f8bdc6cb8b065e1df7c6a3b2d667/ast_serialize-0.8.0-cp39-abi3-macosx_10_12_x86_64.whl", hash = "sha256:e1bd223df0f6c96b396975fa604cb33bce53d9b4a0185490be4c4a289f7c9c87", size = 1184007, upload-time = "2026-08-07T11:28:34.654Z" },
+    { url = "https://files.pythonhosted.org/packages/a6/e9/6e8be8df02b35d85e2b8809f7f1cfa290bdf5882b55127a539d049482db0/ast_serialize-0.8.0-cp39-abi3-macosx_11_0_arm64.whl", hash = "sha256:ddd3b61f45c132da66c5476b281891e08c1fd87fbdabe8a6973e1622efc85f06", size = 1177588, upload-time = "2026-08-07T11:28:36.318Z" },
+    { url = "https://files.pythonhosted.org/packages/8c/80/7e0fd2e2e2aba257820db4a8657c4c356844d36b914b20a4af294bcfb902/ast_serialize-0.8.0-cp39-abi3-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:1f9caa63fad8241257ae401b5ff0a64026c6adb36b8e86cbe8782d9ea505daf6", size = 1234575, upload-time = "2026-08-07T11:28:37.772Z" },
+    { url = "https://files.pythonhosted.org/packages/b0/6a/3bae0af06f9b1bae3001c44d64215f5b567877e7aae9ffd45db11c3a7647/ast_serialize-0.8.0-cp39-abi3-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:3926fa117b5e65019853a2969966d11c7175af377a3425991f3fe73784412405", size = 1236015, upload-time = "2026-08-07T11:28:39.14Z" },
+    { url = "https://files.pythonhosted.org/packages/6f/c4/ce2d41a1bc22508e82618901f7e10f2a5e2f9556553fea90624daf9875e2/ast_serialize-0.8.0-cp39-abi3-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:485f1113af805e9e170b95ef993ca3fbd4f89c04bab25c58b4fc632d854801ab", size = 1432808, upload-time = "2026-08-07T11:28:40.664Z" },
+    { url = "https://files.pythonhosted.org/packages/1a/90/f5058f209756dd70e958b7538aaa82d25d24944baf9ec8ae6f27b06fcacc/ast_serialize-0.8.0-cp39-abi3-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:3ccebbed24f1281062d5852353c72c47502955926cfcb8345ffb3a44d87ff3d3", size = 1256251, upload-time = "2026-08-07T11:28:42.223Z" },
+    { url = "https://files.pythonhosted.org/packages/bf/32/7f77ea87fa0836daab706ed5cb7f903bb25fa26a77439011aee626af11d8/ast_serialize-0.8.0-cp39-abi3-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:252f883290d1cdb728eb7fe1d9a7221b88af5a329aae0bc91ddee4dafb820331", size = 1258574, upload-time = "2026-08-07T11:28:43.751Z" },
+    { url = "https://files.pythonhosted.org/packages/eb/5a/75b82ad2725b5e8e8c742732f9e76c6738a292d0709e1f60d10a973730b4/ast_serialize-0.8.0-cp39-abi3-manylinux_2_31_riscv64.whl", hash = "sha256:96abc072ad29db8d02194afd47d68987322622787daceae82398d7b69f3ba2e6", size = 1254075, upload-time = "2026-08-07T11:28:45.28Z" },
+    { url = "https://files.pythonhosted.org/packages/4e/54/8c20ed4eea805516a3fd23dd4a721ce28c64f50f0e4b359969f60a8c97a6/ast_serialize-0.8.0-cp39-abi3-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:9118ad3e369727060b2696fc4078f250ecffca4248ba87f537f55cea9f9dce06", size = 1301018, upload-time = "2026-08-07T11:28:46.851Z" },
+    { url = "https://files.pythonhosted.org/packages/cb/5b/9f14430f12fe830b656fb38f8e2e05ee13b02a88967660bef46af0ab22a8/ast_serialize-0.8.0-cp39-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:f359df4bd921918af8bebd142a376c77511d7151cc8ba852760b587b5a4a54f3", size = 1409951, upload-time = "2026-08-07T11:28:48.312Z" },
+    { url = "https://files.pythonhosted.org/packages/2d/3d/084882eca93c842bd4262591a071ec7f825340644035e51501208cc5a8d4/ast_serialize-0.8.0-cp39-abi3-musllinux_1_2_armv7l.whl", hash = "sha256:e94f9121d13fa36cbf21314783c77d05ae3a0868decd18cf5233fdcc6de49ac8", size = 1509544, upload-time = "2026-08-07T11:28:49.847Z" },
+    { url = "https://files.pythonhosted.org/packages/ce/73/ea84852096c2036c61cc0b2f97b90242207419f534dc671060ee1c8e05cb/ast_serialize-0.8.0-cp39-abi3-musllinux_1_2_i686.whl", hash = "sha256:54f95b486018d262bcb387a9afd96f0da74508b442762b80c769454a6fbb3ee3", size = 1505671, upload-time = "2026-08-07T11:28:51.239Z" },
+    { url = "https://files.pythonhosted.org/packages/cb/88/287b9a5300c1f2f651d259f670931b63110adc265b7613c885b44c5bc53d/ast_serialize-0.8.0-cp39-abi3-musllinux_1_2_ppc64le.whl", hash = "sha256:4c38b915511e32bc718c49dbce98ff9af36bac0ad6a604f58000cd5e3aecdba7", size = 1563685, upload-time = "2026-08-07T11:28:53.112Z" },
+    { url = "https://files.pythonhosted.org/packages/ee/f3/1bc3a79afcf0c2a8d2c37182d0d659d1545a9d7f7f6dc9cf3e63d6c17135/ast_serialize-0.8.0-cp39-abi3-musllinux_1_2_riscv64.whl", hash = "sha256:9a2ef9cf12f2de4f1028c42c1dd7d775255e0fb3e5bb48896c97e35ef52366fe", size = 1427977, upload-time = "2026-08-07T11:28:54.418Z" },
+    { url = "https://files.pythonhosted.org/packages/5c/cd/440c798957e14e31776bfeb024d8fafe0bb1d5b89c51c2f067e69938f7b0/ast_serialize-0.8.0-cp39-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:6f18048fe9f6dd266bd577cdec48bdcecb74faaa01fe941324435483b013ed2a", size = 1454335, upload-time = "2026-08-07T11:28:55.968Z" },
+    { url = "https://files.pythonhosted.org/packages/4f/4a/587eb36dcc240a54c8660f599464516b469ecad96f0dbdb6bccbedb50745/ast_serialize-0.8.0-cp39-abi3-win32.whl", hash = "sha256:31883542dd6c94d178f5db3d32fbd69c5eb88b3a7c018e7ac8cc0c45195ddbed", size = 1068858, upload-time = "2026-08-07T11:28:57.541Z" },
+    { url = "https://files.pythonhosted.org/packages/5f/a4/3e887bbd92164e183cb6e412c6a3e9198ddd446d7fe405958293ef5ef49c/ast_serialize-0.8.0-cp39-abi3-win_amd64.whl", hash = "sha256:861794565b06337005c1447ef23103a3d5a627d08bdc827870d00d0b28ef5f51", size = 1111839, upload-time = "2026-08-07T11:28:59Z" },
+    { url = "https://files.pythonhosted.org/packages/25/6c/b400476d3ceba681ab929787edc9554f6d88fcc69435eb681b00fc0457a5/ast_serialize-0.8.0-cp39-abi3-win_arm64.whl", hash = "sha256:b2a5978662fd4db463dfb4b974d2b10ac6430b98f5333aabc7051909df3561d0", size = 1083655, upload-time = "2026-08-07T11:29:00.349Z" },
+]
+
 [[package]]
 name = "authlib"
 version = "1.6.8"
@@ -147,7 +211,7 @@ wheels = [
 
 [[package]]
 name = "brewman"
-version = "14.0.0"
+version = "14.2.0"
 source = { editable = "." }
 dependencies = [
     { name = "alembic" },
@@ -173,6 +237,7 @@ dependencies = [
 dev = [
     { name = "bandit" },
     { name = "mypy" },
+    { name = "pandas-stubs" },
     { name = "pre-commit" },
     { name = "ruff" },
     { name = "safety" },
@@ -181,33 +246,34 @@ dev = [
 
 [package.metadata]
 requires-dist = [
-    { name = "alembic", specifier = ">=1.18.4" },
+    { name = "alembic", specifier = ">=1.19.1" },
     { name = "arq", specifier = ">=0.28.0" },
-    { name = "cryptography", specifier = ">=48.0.0" },
-    { name = "fastapi", extras = ["all"], specifier = ">=0.136.1" },
-    { name = "gunicorn", specifier = ">=26.0.0" },
+    { name = "cryptography", specifier = ">=50.0.0" },
+    { name = "fastapi", extras = ["all"], specifier = ">=0.141.1" },
+    { name = "gunicorn", specifier = ">=26.2.0" },
     { name = "itsdangerous", specifier = ">=2.2.0" },
     { name = "openpyxl", specifier = ">=3.1.5" },
-    { name = "pandas", specifier = ">=3.0.2" },
+    { name = "pandas", specifier = ">=3.0.5" },
     { name = "passlib", extras = ["bcrypt"], specifier = ">=1.7.4" },
     { name = "psycopg", extras = ["binary", "pool"], specifier = ">=3.3.4" },
-    { name = "pydantic", specifier = ">=2.13.3" },
-    { name = "pydantic-settings", specifier = ">=2.14.0" },
-    { name = "pyjwt", specifier = ">=2.12.1" },
-    { name = "python-dotenv", specifier = ">=1.2.2" },
-    { name = "python-multipart", specifier = ">=0.0.27" },
-    { name = "sqlalchemy", specifier = ">=2.0.49" },
-    { name = "uvicorn", extras = ["standard"], specifier = ">=0.46.0" },
+    { name = "pydantic", specifier = ">=2.13.4" },
+    { name = "pydantic-settings", specifier = ">=2.15.0" },
+    { name = "pyjwt", specifier = ">=2.13.0" },
+    { name = "python-dotenv", specifier = ">=1.2.3" },
+    { name = "python-multipart", specifier = ">=0.0.32" },
+    { name = "sqlalchemy", specifier = ">=2.0.52" },
+    { name = "uvicorn", extras = ["standard"], specifier = ">=0.52.4" },
 ]
 
 [package.metadata.requires-dev]
 dev = [
     { name = "bandit", specifier = ">=1.9.4" },
-    { name = "mypy", specifier = ">=1.20.2" },
-    { name = "pre-commit", specifier = ">=4.6.0" },
-    { name = "ruff", specifier = ">=0.15.12" },
-    { name = "safety", specifier = ">=3.7.0" },
-    { name = "types-openpyxl", specifier = ">=3.1.5.20260408" },
+    { name = "mypy", specifier = ">=2.3.1" },
+    { name = "pandas-stubs", specifier = ">=3.0.5.260730" },
+    { name = "pre-commit", specifier = ">=4.6.2" },
+    { name = "ruff", specifier = ">=0.16.4" },
+    { name = "safety", specifier = ">=3.8.1" },
+    { name = "types-openpyxl", specifier = ">=3.1.5.20260807" },
 ]
 
 [[package]]
@@ -261,31 +327,6 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/db/3c/33bac158f8ab7f89b2e59426d5fe2e4f63f7ed25df84c036890172b412b5/cfgv-3.5.0-py2.py3-none-any.whl", hash = "sha256:a8dc6b26ad22ff227d2634a65cb388215ce6cc96bbcc5cfde7641ae87e8dacc0", size = 7445, upload-time = "2025-11-19T20:55:50.744Z" },
 ]
 
-[[package]]
-name = "charset-normalizer"
-version = "3.4.4"
-source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/13/69/33ddede1939fdd074bce5434295f38fae7136463422fe4fd3e0e89b98062/charset_normalizer-3.4.4.tar.gz", hash = "sha256:94537985111c35f28720e43603b8e7b43a6ecfb2ce1d3058bbe955b73404e21a", size = 129418, upload-time = "2025-10-14T04:42:32.879Z" }
-wheels = [
-    { url = "https://files.pythonhosted.org/packages/2a/35/7051599bd493e62411d6ede36fd5af83a38f37c4767b92884df7301db25d/charset_normalizer-3.4.4-cp314-cp314-macosx_10_13_universal2.whl", hash = "sha256:da3326d9e65ef63a817ecbcc0df6e94463713b754fe293eaa03da99befb9a5bd", size = 207746, upload-time = "2025-10-14T04:41:33.773Z" },
-    { url = "https://files.pythonhosted.org/packages/10/9a/97c8d48ef10d6cd4fcead2415523221624bf58bcf68a802721a6bc807c8f/charset_normalizer-3.4.4-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:8af65f14dc14a79b924524b1e7fffe304517b2bff5a58bf64f30b98bbc5079eb", size = 147889, upload-time = "2025-10-14T04:41:34.897Z" },
-    { url = "https://files.pythonhosted.org/packages/10/bf/979224a919a1b606c82bd2c5fa49b5c6d5727aa47b4312bb27b1734f53cd/charset_normalizer-3.4.4-cp314-cp314-manylinux2014_armv7l.manylinux_2_17_armv7l.manylinux_2_31_armv7l.whl", hash = "sha256:74664978bb272435107de04e36db5a9735e78232b85b77d45cfb38f758efd33e", size = 143641, upload-time = "2025-10-14T04:41:36.116Z" },
-    { url = "https://files.pythonhosted.org/packages/ba/33/0ad65587441fc730dc7bd90e9716b30b4702dc7b617e6ba4997dc8651495/charset_normalizer-3.4.4-cp314-cp314-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:752944c7ffbfdd10c074dc58ec2d5a8a4cd9493b314d367c14d24c17684ddd14", size = 160779, upload-time = "2025-10-14T04:41:37.229Z" },
-    { url = "https://files.pythonhosted.org/packages/67/ed/331d6b249259ee71ddea93f6f2f0a56cfebd46938bde6fcc6f7b9a3d0e09/charset_normalizer-3.4.4-cp314-cp314-manylinux2014_s390x.manylinux_2_17_s390x.manylinux_2_28_s390x.whl", hash = "sha256:d1f13550535ad8cff21b8d757a3257963e951d96e20ec82ab44bc64aeb62a191", size = 159035, upload-time = "2025-10-14T04:41:38.368Z" },
-    { url = "https://files.pythonhosted.org/packages/67/ff/f6b948ca32e4f2a4576aa129d8bed61f2e0543bf9f5f2b7fc3758ed005c9/charset_normalizer-3.4.4-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:ecaae4149d99b1c9e7b88bb03e3221956f68fd6d50be2ef061b2381b61d20838", size = 152542, upload-time = "2025-10-14T04:41:39.862Z" },
-    { url = "https://files.pythonhosted.org/packages/16/85/276033dcbcc369eb176594de22728541a925b2632f9716428c851b149e83/charset_normalizer-3.4.4-cp314-cp314-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:cb6254dc36b47a990e59e1068afacdcd02958bdcce30bb50cc1700a8b9d624a6", size = 149524, upload-time = "2025-10-14T04:41:41.319Z" },
-    { url = "https://files.pythonhosted.org/packages/9e/f2/6a2a1f722b6aba37050e626530a46a68f74e63683947a8acff92569f979a/charset_normalizer-3.4.4-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:c8ae8a0f02f57a6e61203a31428fa1d677cbe50c93622b4149d5c0f319c1d19e", size = 150395, upload-time = "2025-10-14T04:41:42.539Z" },
-    { url = "https://files.pythonhosted.org/packages/60/bb/2186cb2f2bbaea6338cad15ce23a67f9b0672929744381e28b0592676824/charset_normalizer-3.4.4-cp314-cp314-musllinux_1_2_armv7l.whl", hash = "sha256:47cc91b2f4dd2833fddaedd2893006b0106129d4b94fdb6af1f4ce5a9965577c", size = 143680, upload-time = "2025-10-14T04:41:43.661Z" },
-    { url = "https://files.pythonhosted.org/packages/7d/a5/bf6f13b772fbb2a90360eb620d52ed8f796f3c5caee8398c3b2eb7b1c60d/charset_normalizer-3.4.4-cp314-cp314-musllinux_1_2_ppc64le.whl", hash = "sha256:82004af6c302b5d3ab2cfc4cc5f29db16123b1a8417f2e25f9066f91d4411090", size = 162045, upload-time = "2025-10-14T04:41:44.821Z" },
-    { url = "https://files.pythonhosted.org/packages/df/c5/d1be898bf0dc3ef9030c3825e5d3b83f2c528d207d246cbabe245966808d/charset_normalizer-3.4.4-cp314-cp314-musllinux_1_2_riscv64.whl", hash = "sha256:2b7d8f6c26245217bd2ad053761201e9f9680f8ce52f0fcd8d0755aeae5b2152", size = 149687, upload-time = "2025-10-14T04:41:46.442Z" },
-    { url = "https://files.pythonhosted.org/packages/a5/42/90c1f7b9341eef50c8a1cb3f098ac43b0508413f33affd762855f67a410e/charset_normalizer-3.4.4-cp314-cp314-musllinux_1_2_s390x.whl", hash = "sha256:799a7a5e4fb2d5898c60b640fd4981d6a25f1c11790935a44ce38c54e985f828", size = 160014, upload-time = "2025-10-14T04:41:47.631Z" },
-    { url = "https://files.pythonhosted.org/packages/76/be/4d3ee471e8145d12795ab655ece37baed0929462a86e72372fd25859047c/charset_normalizer-3.4.4-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:99ae2cffebb06e6c22bdc25801d7b30f503cc87dbd283479e7b606f70aff57ec", size = 154044, upload-time = "2025-10-14T04:41:48.81Z" },
-    { url = "https://files.pythonhosted.org/packages/b0/6f/8f7af07237c34a1defe7defc565a9bc1807762f672c0fde711a4b22bf9c0/charset_normalizer-3.4.4-cp314-cp314-win32.whl", hash = "sha256:f9d332f8c2a2fcbffe1378594431458ddbef721c1769d78e2cbc06280d8155f9", size = 99940, upload-time = "2025-10-14T04:41:49.946Z" },
-    { url = "https://files.pythonhosted.org/packages/4b/51/8ade005e5ca5b0d80fb4aff72a3775b325bdc3d27408c8113811a7cbe640/charset_normalizer-3.4.4-cp314-cp314-win_amd64.whl", hash = "sha256:8a6562c3700cce886c5be75ade4a5db4214fda19fede41d9792d100288d8f94c", size = 107104, upload-time = "2025-10-14T04:41:51.051Z" },
-    { url = "https://files.pythonhosted.org/packages/da/5f/6b8f83a55bb8278772c5ae54a577f3099025f9ade59d0136ac24a0df4bde/charset_normalizer-3.4.4-cp314-cp314-win_arm64.whl", hash = "sha256:de00632ca48df9daf77a2c65a484531649261ec9f25489917f09e455cb09ddb2", size = 100743, upload-time = "2025-10-14T04:41:52.122Z" },
-    { url = "https://files.pythonhosted.org/packages/0a/4c/925909008ed5a988ccbb72dcc897407e5d6d3bd72410d69e051fc0c14647/charset_normalizer-3.4.4-py3-none-any.whl", hash = "sha256:7a32c560861a02ff789ad905a2fe94e3f840803362c84fecf1851cb4cf3dc37f", size = 53402, upload-time = "2025-10-14T04:42:31.76Z" },
-]
-
 [[package]]
 name = "click"
 version = "8.3.1"
@@ -309,55 +350,52 @@ wheels = [
 
 [[package]]
 name = "cryptography"
-version = "48.0.0"
+version = "50.0.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "cffi", marker = "platform_python_implementation != 'PyPy'" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/9f/a9/db8f313fdcd85d767d4973515e1db101f9c71f95fced83233de224673757/cryptography-48.0.0.tar.gz", hash = "sha256:5c3932f4436d1cccb036cb0eaef46e6e2db91035166f1ad6505c3c9d5a635920", size = 832984, upload-time = "2026-05-04T22:59:38.133Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/de/41/6cbdcf9142d00fe82836fbb51e503e58088575cf7a0fe1dbff6695bf0840/cryptography-50.0.0.tar.gz", hash = "sha256:eeac2acb5a20ed25e0ad6d1df9891a520b78b404266b6d11778f25d5d691a6c9", size = 880201, upload-time = "2026-07-31T14:25:10.11Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/df/3d/01f6dd9190170a5a241e0e98c2d04be3664a9e6f5b9b872cde63aff1c3dd/cryptography-48.0.0-cp311-abi3-macosx_10_9_universal2.whl", hash = "sha256:0c558d2cdffd8f4bbb30fc7134c74d2ca9a476f830bb053074498fbc86f41ed6", size = 8001587, upload-time = "2026-05-04T22:57:36.803Z" },
-    { url = "https://files.pythonhosted.org/packages/b2/6e/e90527eef33f309beb811cf7c982c3aeffcce8e3edb178baa4ca3ae4a6fa/cryptography-48.0.0-cp311-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:f5333311663ea94f75dd408665686aaf426563556bb5283554a3539177e03b8c", size = 4690433, upload-time = "2026-05-04T22:57:40.373Z" },
-    { url = "https://files.pythonhosted.org/packages/90/04/673510ed51ddff56575f306cf1617d80411ee76831ccd3097599140efdfe/cryptography-48.0.0-cp311-abi3-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:7995ef305d7165c3f11ae07f2517e5a4f1d5c18da1376a0a9ed496336b69e5f3", size = 4710620, upload-time = "2026-05-04T22:57:42.935Z" },
-    { url = "https://files.pythonhosted.org/packages/14/d5/e9c4ef932c8d800490c34d8bd589d64a31d5890e27ec9e9ad532be893294/cryptography-48.0.0-cp311-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:40ba1f85eaa6959837b1d51c9767e230e14612eea4ef110ee8854ada22da1bf5", size = 4696283, upload-time = "2026-05-04T22:57:45.294Z" },
-    { url = "https://files.pythonhosted.org/packages/0c/29/174b9dfb60b12d59ecfc6cfa04bc88c21b42a54f01b8aae09bb6e51e4c7f/cryptography-48.0.0-cp311-abi3-manylinux_2_28_ppc64le.whl", hash = "sha256:369a6348999f94bbd53435c894377b20ab95f25a9065c283570e70150d8abc3c", size = 5296573, upload-time = "2026-05-04T22:57:47.933Z" },
-    { url = "https://files.pythonhosted.org/packages/95/38/0d29a6fd7d0d1373f0c0c88a04ba20e359b257753ac497564cd660fc1d55/cryptography-48.0.0-cp311-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:a0e692c683f4df67815a2d258b324e66f4738bd7a96a218c826dce4f4bd05d8f", size = 4743677, upload-time = "2026-05-04T22:57:50.067Z" },
-    { url = "https://files.pythonhosted.org/packages/30/be/eef653013d5c63b6a490529e0316f9ac14a37602965d4903efed1399f32b/cryptography-48.0.0-cp311-abi3-manylinux_2_31_armv7l.whl", hash = "sha256:18349bbc56f4743c8b12dc32e2bccb2cf83ee8b69a3bba74ef8ae857e26b3d25", size = 4330808, upload-time = "2026-05-04T22:57:52.301Z" },
-    { url = "https://files.pythonhosted.org/packages/84/9e/500463e87abb7a0a0f9f256ec21123ecde0a7b5541a15e840ea54551fd81/cryptography-48.0.0-cp311-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:7e8eac43dfca5c4cccc6dad9a80504436fca53bb9bc3100a2386d730fbe6b602", size = 4695941, upload-time = "2026-05-04T22:57:54.603Z" },
-    { url = "https://files.pythonhosted.org/packages/e3/dc/7303087450c2ec9e7fbb750e17c2abfbc658f23cbd0e54009509b7cc4091/cryptography-48.0.0-cp311-abi3-manylinux_2_34_ppc64le.whl", hash = "sha256:9ccdac7d40688ecb5a3b4a604b8a88c8002e3442d6c60aead1db2a89a041560c", size = 5252579, upload-time = "2026-05-04T22:57:57.207Z" },
-    { url = "https://files.pythonhosted.org/packages/d0/c0/7101d3b7215edcdc90c45da544961fd8ed2d6448f77577460fa75a8443f7/cryptography-48.0.0-cp311-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:bd72e68b06bb1e96913f97dd4901119bc17f39d4586a5adf2d3e47bc2b9d58b5", size = 4743326, upload-time = "2026-05-04T22:57:59.535Z" },
-    { url = "https://files.pythonhosted.org/packages/ac/d8/5b833bad13016f562ab9d063d68199a4bd121d18458e439515601d3357ec/cryptography-48.0.0-cp311-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:59baa2cb386c4f0b9905bd6eb4c2a79a69a128408fd31d32ca4d7102d4156321", size = 4826672, upload-time = "2026-05-04T22:58:01.996Z" },
-    { url = "https://files.pythonhosted.org/packages/98/e1/7074eb8bf3c135558c73fc2bcf0f5633f912e6fb87e868a55c454080ef09/cryptography-48.0.0-cp311-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:9249e3cd978541d665967ac2cb2787fd6a62bddf1e75b3e347a594d7dacf4f74", size = 4972574, upload-time = "2026-05-04T22:58:03.968Z" },
-    { url = "https://files.pythonhosted.org/packages/04/70/e5a1b41d325f797f39427aa44ef8baf0be500065ab6d8e10369d850d4a4f/cryptography-48.0.0-cp311-abi3-win32.whl", hash = "sha256:9c459db21422be75e2809370b829a87eb37f74cd785fc4aa9ea1e5f43b47cda4", size = 3294868, upload-time = "2026-05-04T22:58:06.467Z" },
-    { url = "https://files.pythonhosted.org/packages/f4/ac/8ac51b4a5fc5932eb7ee5c517ba7dc8cd834f0048962b6b352f00f41ebf9/cryptography-48.0.0-cp311-abi3-win_amd64.whl", hash = "sha256:5b012212e08b8dd5edc78ef54da83dd9892fd9105323b3993eff6bea65dc21d7", size = 3817107, upload-time = "2026-05-04T22:58:08.845Z" },
-    { url = "https://files.pythonhosted.org/packages/6b/84/70e3feea9feea87fd7cbe77efb2712ae1e3e6edf10749dc6e95f4e60e455/cryptography-48.0.0-cp314-cp314t-macosx_10_9_universal2.whl", hash = "sha256:3cb07a3ed6431663cd321ea8a000a1314c74211f823e4177fefa2255e057d1ec", size = 7986556, upload-time = "2026-05-04T22:58:11.172Z" },
-    { url = "https://files.pythonhosted.org/packages/89/6e/18e07a618bb5442ba10cf4df16e99c071365528aa570dfcb8c02e25a303b/cryptography-48.0.0-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:8c7378637d7d88016fa6791c159f698b3d3eed28ebf844ac36b9dc04a14dae18", size = 4684776, upload-time = "2026-05-04T22:58:13.712Z" },
-    { url = "https://files.pythonhosted.org/packages/be/6a/4ea3b4c6c6759794d5ee2103c304a5076dc4b19ae1f9fe47dba439e159e9/cryptography-48.0.0-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:cc90c0b39b2e3c65ef52c804b72e3c58f8a04ab2a1871272798e5f9572c17d20", size = 4698121, upload-time = "2026-05-04T22:58:16.448Z" },
-    { url = "https://files.pythonhosted.org/packages/2f/59/6ff6ad6cae03bb887da2a5860b2c9805f8dac969ef01ce563336c49bd1d1/cryptography-48.0.0-cp314-cp314t-manylinux_2_28_aarch64.whl", hash = "sha256:76341972e1eff8b4bea859f09c0d3e64b96ce931b084f9b9b7db8ef364c30eff", size = 4690042, upload-time = "2026-05-04T22:58:18.544Z" },
-    { url = "https://files.pythonhosted.org/packages/ca/b4/fc334ed8cfd705aca282fe4d8f5ae64a8e0f74932e9feecb344610cf6e4d/cryptography-48.0.0-cp314-cp314t-manylinux_2_28_ppc64le.whl", hash = "sha256:55b7718303bf06a5753dcdccf2f3945cf18ad7bffde41b61226e4db31ab89a9c", size = 5282526, upload-time = "2026-05-04T22:58:20.75Z" },
-    { url = "https://files.pythonhosted.org/packages/11/08/9f8c5386cc4cd90d8255c7cdd0f5baf459a08502a09de30dc51f553d38dc/cryptography-48.0.0-cp314-cp314t-manylinux_2_28_x86_64.whl", hash = "sha256:a64697c641c7b1b2178e573cbc31c7c6684cd56883a478d75143dbb7118036db", size = 4733116, upload-time = "2026-05-04T22:58:23.627Z" },
-    { url = "https://files.pythonhosted.org/packages/b8/77/99307d7574045699f8805aa500fa0fb83422d115b5400a064ddd306d7750/cryptography-48.0.0-cp314-cp314t-manylinux_2_31_armv7l.whl", hash = "sha256:561215ea3879cb1cbbf272867e2efda62476f240fb58c64de6b393ae19246741", size = 4316030, upload-time = "2026-05-04T22:58:25.581Z" },
-    { url = "https://files.pythonhosted.org/packages/fd/36/a608b98337af3cb2aff4818e406649d30572b7031918b04c87d979495348/cryptography-48.0.0-cp314-cp314t-manylinux_2_34_aarch64.whl", hash = "sha256:ad64688338ed4bc1a6618076ba75fd7194a5f1797ac60b47afe926285adb3166", size = 4689640, upload-time = "2026-05-04T22:58:27.747Z" },
-    { url = "https://files.pythonhosted.org/packages/dd/a6/825010a291b4438aecc1f568bc428189fc1175515223632477c07dc0a6df/cryptography-48.0.0-cp314-cp314t-manylinux_2_34_ppc64le.whl", hash = "sha256:906cbf0670286c6e0044156bc7d4af9cbb0ef6db9f73e52c3ec56ba6bdde5336", size = 5237657, upload-time = "2026-05-04T22:58:29.848Z" },
-    { url = "https://files.pythonhosted.org/packages/b9/09/4e76a09b4caa29aad535ddc806f5d4c5d01885bd978bd984fbc6ca032cae/cryptography-48.0.0-cp314-cp314t-manylinux_2_34_x86_64.whl", hash = "sha256:ea8990436d914540a40ab24b6a77c0969695ed52f4a4874c5137ccf7045a7057", size = 4732362, upload-time = "2026-05-04T22:58:32.009Z" },
-    { url = "https://files.pythonhosted.org/packages/18/78/444fa04a77d0cb95f417dda20d450e13c56ba8e5220fc892a1658f44f882/cryptography-48.0.0-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:c18684a7f0cc9a3cb60328f496b8e3372def7c5d2df39ac267878b05565aaaae", size = 4819580, upload-time = "2026-05-04T22:58:34.254Z" },
-    { url = "https://files.pythonhosted.org/packages/38/85/ea67067c70a1fd4be2c63d35eeed82658023021affccc7b17705f8527dd2/cryptography-48.0.0-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:9be5aafa5736574f8f15f262adc81b2a9869e2cfe9014d52a44633905b40d52c", size = 4963283, upload-time = "2026-05-04T22:58:36.376Z" },
-    { url = "https://files.pythonhosted.org/packages/75/54/cc6d0f3deac3e81c7f847e8a189a12b6cdd65059b43dad25d4316abd849a/cryptography-48.0.0-cp314-cp314t-win32.whl", hash = "sha256:c17dfe85494deaeddc5ce251aebd1d60bbe6afc8b62071bb0b469431a000124f", size = 3270954, upload-time = "2026-05-04T22:58:38.791Z" },
-    { url = "https://files.pythonhosted.org/packages/49/67/cc947e288c0758a4e5473d1dcb743037ab7785541265a969240b8885441a/cryptography-48.0.0-cp314-cp314t-win_amd64.whl", hash = "sha256:27241b1dc9962e056062a8eef1991d02c3a24569c95975bd2322a8a52c6e5e12", size = 3797313, upload-time = "2026-05-04T22:58:40.746Z" },
-    { url = "https://files.pythonhosted.org/packages/f2/63/61d4a4e1c6b6bab6ce1e213cd36a24c415d90e76d78c5eb8577c5541d2e8/cryptography-48.0.0-cp39-abi3-macosx_10_9_universal2.whl", hash = "sha256:58d00498e8933e4a194f3076aee1b4a97dfec1a6da444535755822fe5d8b0b86", size = 7983482, upload-time = "2026-05-04T22:58:43.769Z" },
-    { url = "https://files.pythonhosted.org/packages/d5/ac/f5b5995b87770c693e2596559ffafe195b4033a57f14a82268a2842953f3/cryptography-48.0.0-cp39-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:614d0949f4790582d2cc25553abd09dd723025f0c0e7c67376a1d77196743d6e", size = 4683266, upload-time = "2026-05-04T22:58:46.064Z" },
-    { url = "https://files.pythonhosted.org/packages/ec/c6/8b14f67e18338fbc4adb76f66c001f5c3610b3e2d1837f268f47a347dbbb/cryptography-48.0.0-cp39-abi3-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:7ce4bfae76319a532a2dc68f82cc32f5676ee792a983187dac07183690e5c66f", size = 4696228, upload-time = "2026-05-04T22:58:48.22Z" },
-    { url = "https://files.pythonhosted.org/packages/ea/73/f808fbae9514bd91b47875b003f13e284c8c6bdfd904b7944e803937eec1/cryptography-48.0.0-cp39-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:2eb992bbd4661238c5a397594c83f5b4dc2bc5b848c365c8f991b6780efcc5c7", size = 4689097, upload-time = "2026-05-04T22:58:50.9Z" },
-    { url = "https://files.pythonhosted.org/packages/93/01/d86632d7d28db8ae83221995752eeb6639ffb374c2d22955648cf8d52797/cryptography-48.0.0-cp39-abi3-manylinux_2_28_ppc64le.whl", hash = "sha256:22a5cb272895dce158b2cacdfdc3debd299019659f42947dbdac6f32d68fe832", size = 5283582, upload-time = "2026-05-04T22:58:53.017Z" },
-    { url = "https://files.pythonhosted.org/packages/02/e1/50edc7a50334807cc4791fc4a0ce7468b4a1416d9138eab358bfc9a3d70b/cryptography-48.0.0-cp39-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:2b4d59804e8408e2fea7d1fbaf218e5ec984325221db76e6a241a9abd6cdd95c", size = 4730479, upload-time = "2026-05-04T22:58:55.611Z" },
-    { url = "https://files.pythonhosted.org/packages/6f/af/99a582b1b1641ff5911ac559beb45097cf79efd4ead4657f578ef1af2d47/cryptography-48.0.0-cp39-abi3-manylinux_2_31_armv7l.whl", hash = "sha256:984a20b0f62a26f48a3396c72e4bc34c66e356d356bf370053066b3b6d54634a", size = 4326481, upload-time = "2026-05-04T22:58:57.607Z" },
-    { url = "https://files.pythonhosted.org/packages/90/ee/89aa26a06ef0a7d7611788ffd571a7c50e368cc6a4d5eef8b4884e866edb/cryptography-48.0.0-cp39-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:5a5ed8fde7a1d09376ca0b40e68cd59c69fe23b1f9768bd5824f54681626032a", size = 4688713, upload-time = "2026-05-04T22:59:00.077Z" },
-    { url = "https://files.pythonhosted.org/packages/70/ba/bcb1b0bb7a33d4c7c0c4d4c7874b4a62ae4f56113a5f4baefa362dfb1f0f/cryptography-48.0.0-cp39-abi3-manylinux_2_34_ppc64le.whl", hash = "sha256:8cd666227ef7af430aa5914a9910e0ddd703e75f039cef0825cd0da71b6b711a", size = 5238165, upload-time = "2026-05-04T22:59:02.317Z" },
-    { url = "https://files.pythonhosted.org/packages/c9/70/ca4003b1ce5ca3dc3186ada51908c8a9b9ff7d5cab83cc0d43ee14ec144f/cryptography-48.0.0-cp39-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:9071196d81abc88b3516ac8cdfad32e2b66dd4a5393a8e68a961e9161ddc6239", size = 4729947, upload-time = "2026-05-04T22:59:05.255Z" },
-    { url = "https://files.pythonhosted.org/packages/44/a0/4ec7cf774207905aef1a8d11c3750d5a1db805eb380ee4e16df317870128/cryptography-48.0.0-cp39-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:1e2d54c8be6152856a36f0882ab231e70f8ec7f14e93cf87db8a2ed056bf160c", size = 4822059, upload-time = "2026-05-04T22:59:07.802Z" },
-    { url = "https://files.pythonhosted.org/packages/1e/75/a2e55f99c16fcac7b5d6c1eb19ad8e00799854d6be5ca845f9259eae1681/cryptography-48.0.0-cp39-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:a5da777e32ffed6f85a7b2b3f7c5cbc88c146bfcd0a1d7baf5fcc6c52ee35dd4", size = 4960575, upload-time = "2026-05-04T22:59:09.851Z" },
-    { url = "https://files.pythonhosted.org/packages/b8/23/6e6f32143ab5d8b36ca848a502c4bcd477ae75b9e1677e3530d669062578/cryptography-48.0.0-cp39-abi3-win32.whl", hash = "sha256:77a2ccbbe917f6710e05ba9adaa25fb5075620bf3ea6fb751997875aff4ae4bd", size = 3279117, upload-time = "2026-05-04T22:59:12.019Z" },
-    { url = "https://files.pythonhosted.org/packages/9d/9a/0fea98a70cf1749d41d738836f6349d97945f7c89433a259a6c2642eefeb/cryptography-48.0.0-cp39-abi3-win_amd64.whl", hash = "sha256:16cd65b9330583e4619939b3a3843eec1e6e789744bb01e7c7e2e62e33c239c8", size = 3792100, upload-time = "2026-05-04T22:59:14.884Z" },
+    { url = "https://files.pythonhosted.org/packages/c5/5c/59086b4aac5e879d38ddbcf74e4be7ade89cebc3eb199a55da998c3bb46a/cryptography-50.0.0-cp311-abi3-macosx_11_0_arm64.whl", hash = "sha256:031e2d5dd4bb9caa3ca9c82e5a197fd8ae680232cee62603d1a813f3f07e3d03", size = 4001252, upload-time = "2026-07-31T14:23:33.331Z" },
+    { url = "https://files.pythonhosted.org/packages/57/ef/8f2df13c7216bcad3e1c74e07f6e193d93e998e114f524a53877c9af27ad/cryptography-50.0.0-cp311-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:fd9192b7b70c573d7f214eb1ae35e00d359f6f5e4b27c7e21e30de1fc6204645", size = 4719554, upload-time = "2026-07-31T14:23:35.611Z" },
+    { url = "https://files.pythonhosted.org/packages/d9/41/029086c34d91052fc3b88bcc8056f709a7c915c7a23b235a54eb800b1c97/cryptography-50.0.0-cp311-abi3-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:06a32a980526a6ab9a4b9bf8f7385800791e2bb960903cb6b530e4817509a3b7", size = 4702130, upload-time = "2026-07-31T14:23:37.635Z" },
+    { url = "https://files.pythonhosted.org/packages/7d/ff/b6ce0954962e7f7b969f850a883744197bb3910bdfd7b6da162eab7d9f68/cryptography-50.0.0-cp311-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:a1b30560f2acc95aa8b2e06e716a13dbfc97314747b80d9707e307f77b40d6b3", size = 4725244, upload-time = "2026-07-31T14:23:39.471Z" },
+    { url = "https://files.pythonhosted.org/packages/06/1e/63a1027cb7fec360a182208e1b7767d5aa1fe57be3d6aa856e69a321edc0/cryptography-50.0.0-cp311-abi3-manylinux_2_28_ppc64le.whl", hash = "sha256:8d89f3976b10b4ce31118de72329025f70d2c6ead14a8217c5514dd2c6d5a78f", size = 5342265, upload-time = "2026-07-31T14:23:41.286Z" },
+    { url = "https://files.pythonhosted.org/packages/6b/72/a1116d683a6d7ece94590013882515de087edf9ef0e6292aae615a44df73/cryptography-50.0.0-cp311-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:b42a28c1844fd9de8f3f7d540e36b66f3a9c83fceac7170ebc7a6a19edd9dcae", size = 4734609, upload-time = "2026-07-31T14:23:43.139Z" },
+    { url = "https://files.pythonhosted.org/packages/15/37/36a9c479bbe49acea2636c7fd3360d20f7b7e079c300352011c44850b181/cryptography-50.0.0-cp311-abi3-manylinux_2_31_armv7l.whl", hash = "sha256:900131fafd8aead39ac7dd3a7e833be754c17a95cfd91221636949fe4eb0aa8a", size = 4356517, upload-time = "2026-07-31T14:23:44.939Z" },
+    { url = "https://files.pythonhosted.org/packages/32/98/8a151d64367204cbc63ec65d37502f1d9c53cf4bfc6ec3c532614dbec60d/cryptography-50.0.0-cp311-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:07949c449a1abcf60d1ee6e88956d89404c7df3c8258f46589e912988e551987", size = 4724529, upload-time = "2026-07-31T14:23:46.93Z" },
+    { url = "https://files.pythonhosted.org/packages/22/f6/ec13b470172126464a86bf54d2294a46d29837fc51ba3e45d4047946fb5e/cryptography-50.0.0-cp311-abi3-manylinux_2_34_ppc64le.whl", hash = "sha256:f89831ef99dd7dd169ab06d63a831adb9e20a87aac6d380266bbda5823349169", size = 5299852, upload-time = "2026-07-31T14:23:48.851Z" },
+    { url = "https://files.pythonhosted.org/packages/da/3a/f05e32c99d440c9bb891ea0e36c9091891e36be5a9a87ab2ee6ea20729f6/cryptography-50.0.0-cp311-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:82148ec5bddac30b51a5b3c1945075f896fa022cb93f8e4a01e9f6ee95292c5f", size = 4734462, upload-time = "2026-07-31T14:23:50.861Z" },
+    { url = "https://files.pythonhosted.org/packages/ca/dc/bd72b26be8953f80625f63151efd38eee71c76ca6cf591c08ff34615a79e/cryptography-50.0.0-cp311-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:1489e263a8048bb8b6a8bac662eb2d402ea5d2b7b4699b72f385f1e2772db105", size = 4852708, upload-time = "2026-07-31T14:23:52.715Z" },
+    { url = "https://files.pythonhosted.org/packages/27/20/c930314a2ab476d15dec966ec87e2e9637bb02b06106b12c0396c57bb603/cryptography-50.0.0-cp311-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:7cec5b856506da6defb290f30c9ee687d5f5e8cb0bd3f6459dde43b0b4fa40ef", size = 5004179, upload-time = "2026-07-31T14:23:54.887Z" },
+    { url = "https://files.pythonhosted.org/packages/32/2e/c9db68a0c4bfa28e310707527c0ee3a2bd254104d2e02e68f368e197aa4c/cryptography-50.0.0-cp311-abi3-win_amd64.whl", hash = "sha256:bd1c592e4d5974f0d08d4888e432157adba757c66da0246918e43677fafa2d30", size = 3840395, upload-time = "2026-07-31T14:23:56.677Z" },
+    { url = "https://files.pythonhosted.org/packages/c3/fb/951032a3bf22a5697c83183fb6294a4843772947a70e616c57b3ff5f522e/cryptography-50.0.0-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:49e7d93abdbd2990caced757e5fade25302f719c3c8fb6e6fff2dde98999fc41", size = 3989258, upload-time = "2026-07-31T14:23:58.881Z" },
+    { url = "https://files.pythonhosted.org/packages/d4/67/91eb047e69c5e845f2f14b8a2e4a1aab0f283cb885531e9e22c8adb176bc/cryptography-50.0.0-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:19736989797678c6af1e55cd49055cdbcb55d8f6b5583ac5335f933aba9101dc", size = 4700648, upload-time = "2026-07-31T14:24:00.702Z" },
+    { url = "https://files.pythonhosted.org/packages/30/82/85f0f7425c856b9f96459411eb12e74ef72df9caf6f8f15bf23a33ff131f/cryptography-50.0.0-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:80b63928fa35083b33966ce1efb70e5b9607181e49dcd1c22c8c005e319f667f", size = 4682442, upload-time = "2026-07-31T14:24:02.538Z" },
+    { url = "https://files.pythonhosted.org/packages/1a/28/b555a365adff1cca2fbe7b9e487d68a40de6bc67ff2cb587473eb43de0e7/cryptography-50.0.0-cp314-cp314t-manylinux_2_28_aarch64.whl", hash = "sha256:d58c3db7cd6eed54e6c06744db55456b65ebd7492ddeae9c1e93cfca7aa857d3", size = 4707596, upload-time = "2026-07-31T14:24:04.394Z" },
+    { url = "https://files.pythonhosted.org/packages/72/d8/f52538140cc719df62a01cf87d1c7142318d235817109d6f4054d7c352d6/cryptography-50.0.0-cp314-cp314t-manylinux_2_28_ppc64le.whl", hash = "sha256:df2a58a472f332225671c35b0a830208b86d004f82baa8530fa3782c85646533", size = 5314552, upload-time = "2026-07-31T14:24:06.31Z" },
+    { url = "https://files.pythonhosted.org/packages/38/14/6120e5bd7c5aa022ad15424ba4d5c5269d0d9448ed4d55e492ea91e3c1c4/cryptography-50.0.0-cp314-cp314t-manylinux_2_28_x86_64.whl", hash = "sha256:11b74db56cdbe3cdee6e3f6982ecb70334fa10dce99ed58bf7894aaaa3b2a037", size = 4717113, upload-time = "2026-07-31T14:24:08.349Z" },
+    { url = "https://files.pythonhosted.org/packages/fa/71/190bf38c3ee2e0f8efc9860ae100c9df4169742eef274b91e7aa1cb133b9/cryptography-50.0.0-cp314-cp314t-manylinux_2_31_armv7l.whl", hash = "sha256:f59e38625469987d7ef6d495323c55e7db6c212eaf6112267e0d3b565a2e9c9f", size = 4338580, upload-time = "2026-07-31T14:24:10.227Z" },
+    { url = "https://files.pythonhosted.org/packages/3a/63/504ccfbbe61fd8aa983f7f146399cdf034c72c2fc55f5b2dfdcdcdb20c99/cryptography-50.0.0-cp314-cp314t-manylinux_2_34_aarch64.whl", hash = "sha256:ecfed7367f965a0328cfbdd70da860f15441f002f613185668c6e6ebf5a0ac11", size = 4707038, upload-time = "2026-07-31T14:24:12.169Z" },
+    { url = "https://files.pythonhosted.org/packages/01/77/2cf79bbfc4d12ca106437a6e170d6aaa01a373e93093118aaaef0e801bd4/cryptography-50.0.0-cp314-cp314t-manylinux_2_34_ppc64le.whl", hash = "sha256:9aa87839c383bdbab6ef865787a1fb877af8dd03464c4400322726feaaadfc6d", size = 5273110, upload-time = "2026-07-31T14:24:14.38Z" },
+    { url = "https://files.pythonhosted.org/packages/e5/45/8aae2972c520145377ea3559a605a899bebe227bf070b33cdb445929a9b9/cryptography-50.0.0-cp314-cp314t-manylinux_2_34_x86_64.whl", hash = "sha256:6ba6a53445bd3cfa809ef3ef5f1589aa6ba08784a1d962bf47d0940e871dab1c", size = 4716439, upload-time = "2026-07-31T14:24:16.415Z" },
+    { url = "https://files.pythonhosted.org/packages/7b/20/4fe50b619a48c2525cc46e2dbc1ac490708d704be5d467bdaac6dc955682/cryptography-50.0.0-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:3f5735ffe4996d28b809371756219f5354864902a3b9e7c0b9ee87041209fc9c", size = 4837383, upload-time = "2026-07-31T14:24:18.553Z" },
+    { url = "https://files.pythonhosted.org/packages/92/91/3a31366e183343d3703f8995c095f5734676bd6938118047e50fcf279eb4/cryptography-50.0.0-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:1b4a266766514614f8aa60416e71f2fc6e575d36e7bdc90f644fadb2f4b75b95", size = 4985772, upload-time = "2026-07-31T14:24:20.385Z" },
+    { url = "https://files.pythonhosted.org/packages/74/9a/02ffe35b2853d121689871eb5dce862092562b3a1ed5cc98f1aaed441506/cryptography-50.0.0-cp314-cp314t-win_amd64.whl", hash = "sha256:12b9c6996425c76ea6c457ace4f3073e715b8c545add07cd1a8f3a4f90691269", size = 3816291, upload-time = "2026-07-31T14:24:22.125Z" },
+    { url = "https://files.pythonhosted.org/packages/03/37/73d005be173aff344af30e9fd2a576575cb2391a7101d9cd3842e1fa8cce/cryptography-50.0.0-cp39-abi3-macosx_11_0_arm64.whl", hash = "sha256:ccdc4a71a4dabae05de219404f9f4abc38e3b58422177ff93d0da05967dafa07", size = 4036009, upload-time = "2026-07-31T14:24:24.122Z" },
+    { url = "https://files.pythonhosted.org/packages/ff/c6/7a6202a534e32103a285b7834a120869557fe198d51d7cfe59754c8bda9c/cryptography-50.0.0-cp39-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:910e1d2668e7de9648f2bcee30e180db2a6b15c30f887d7c4c93ddf96e3992e3", size = 4745252, upload-time = "2026-07-31T14:24:26.118Z" },
+    { url = "https://files.pythonhosted.org/packages/85/4f/0fa8c2f4428198f15d9ff8d63400e27afbf94ce833f6108da1eb3753f945/cryptography-50.0.0-cp39-abi3-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:a91296cb61e8df6f86d0c19cc4068228da256bf59bf86049fbd821084565327f", size = 4728939, upload-time = "2026-07-31T14:24:27.994Z" },
+    { url = "https://files.pythonhosted.org/packages/d1/63/54dd723490ba2dc09b299682c10b38db38f159728bcaae8c591b8af2f22d/cryptography-50.0.0-cp39-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:e722f16708d854fe924790e051061f6704a472c3bac347b6fd88033ea8dd0dc5", size = 4748483, upload-time = "2026-07-31T14:24:30.254Z" },
+    { url = "https://files.pythonhosted.org/packages/1d/dd/7c77d26285cc7f6991efce64a0f5b4f9383bfa5dd8c5033003eaf7db4cdb/cryptography-50.0.0-cp39-abi3-manylinux_2_28_ppc64le.whl", hash = "sha256:d764dcf130c428ef66786f866dd750f53182bc608813489915e9fc106bb0c82f", size = 5367599, upload-time = "2026-07-31T14:24:32.457Z" },
+    { url = "https://files.pythonhosted.org/packages/46/c9/f60aed34c013f317f92817b6c171c2d22a78270fa41109bd4b08af26b194/cryptography-50.0.0-cp39-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:105110f43a471dbd0060b9c9516cb8a6a79233631a04cc2ba16f28323ac6e025", size = 4762647, upload-time = "2026-07-31T14:24:34.599Z" },
+    { url = "https://files.pythonhosted.org/packages/be/f3/f9a0173b139372c3a48ed98154b45cc6b9de17c789d5ab552e621c293609/cryptography-50.0.0-cp39-abi3-manylinux_2_31_armv7l.whl", hash = "sha256:828743d939e9629bc267b8e2d08d8bb67cd4319c771a33d4b18b22dd8fb7440a", size = 4385197, upload-time = "2026-07-31T14:24:36.647Z" },
+    { url = "https://files.pythonhosted.org/packages/d8/36/83bb81f6e569bc38e1e4a7bc80f29b46bb9601920bc455fc8e888f5d5742/cryptography-50.0.0-cp39-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:2a8183b489dc1f7f80f135780fadc1108f14b31b8a40411c7a5b17425f65f28b", size = 4748095, upload-time = "2026-07-31T14:24:39.493Z" },
+    { url = "https://files.pythonhosted.org/packages/6b/16/d3008eff98c764979865834c3d386d4fd041b5f52e7f34fc29ac1a5eb515/cryptography-50.0.0-cp39-abi3-manylinux_2_34_ppc64le.whl", hash = "sha256:6e7d61120573a7f2cd94cc095f9e81f6967c61ccdf194285aa143ecec8e0b708", size = 5325948, upload-time = "2026-07-31T14:24:41.556Z" },
+    { url = "https://files.pythonhosted.org/packages/9c/f8/d97f9603efda3888187bfdb893f26c41be4735c10631d05d284ee6b047c4/cryptography-50.0.0-cp39-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:37fdb0d0111f1e2ff07139dfb79f1b49531f8e213c46f1163dd7642979b58c47", size = 4762400, upload-time = "2026-07-31T14:24:43.636Z" },
+    { url = "https://files.pythonhosted.org/packages/64/a2/4615c8f7d81a00b1d6e6afe19f694e1543582349fb5f4076f6cb5dc36485/cryptography-50.0.0-cp39-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:c87f62a3d3b9888ed0fdde100ec06aa61ca9cd44bad9057d1dff9a516b5f5bb9", size = 4878208, upload-time = "2026-07-31T14:24:45.522Z" },
+    { url = "https://files.pythonhosted.org/packages/d2/1a/efcfb02f91407149a0dacffffab791f7e19bf6385f63b3666dc8b5e5c9c8/cryptography-50.0.0-cp39-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:65c2c3add92b45fd0709db8594536aea39c2a67af0e27ffcf049c498501140b7", size = 5037050, upload-time = "2026-07-31T14:24:47.697Z" },
+    { url = "https://files.pythonhosted.org/packages/57/30/4a22984d4f1bdfb8c054f07a92bc176b97a3134cc1d6c4b3bffb1f3688b4/cryptography-50.0.0-cp39-abi3-win_amd64.whl", hash = "sha256:d24fead1d4d076e1bfb006dcec392074a3cd8d7b4fc8a595aa64073b2b7a96ba", size = 3874135, upload-time = "2026-07-31T14:24:50.085Z" },
 ]
 
 [[package]]
@@ -414,7 +452,7 @@ wheels = [
 
 [[package]]
 name = "fastapi"
-version = "0.136.1"
+version = "0.141.1"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "annotated-doc" },
@@ -423,9 +461,9 @@ dependencies = [
     { name = "typing-extensions" },
     { name = "typing-inspection" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/5d/45/c130091c2dfa061bbfe3150f2a5091ef1adf149f2a8d2ae769ecaf6e99a2/fastapi-0.136.1.tar.gz", hash = "sha256:7af665ad7acfa0a3baf8983d393b6b471b9da10ede59c60045f49fbc89a0fa7f", size = 397448, upload-time = "2026-04-23T16:49:44.046Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/8a/02/91e3416a8fdd715abb903a952a6bec7cdd8d14eed55d415fc8595524c319/fastapi-0.141.1.tar.gz", hash = "sha256:e8822fc40db1e1858054d7a949a888695bc9bdce70139178e33bd2871a453ca1", size = 425799, upload-time = "2026-07-29T17:18:05.568Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/5a/ff/2e4eca3ade2c22fe1dea7043b8ee9dabe47753349eb1b56a202de8af6349/fastapi-0.136.1-py3-none-any.whl", hash = "sha256:a6e9d7eeada96c93a4d69cb03836b44fa34e2854accb7244a1ece36cd4781c3f", size = 117683, upload-time = "2026-04-23T16:49:42.437Z" },
+    { url = "https://files.pythonhosted.org/packages/cb/03/10388a42375ee7e4ac9b94eb2c5c569c8b5795e377e701c9ac3ad63de890/fastapi-0.141.1-py3-none-any.whl", hash = "sha256:bfb91aa2d334c61cb35ba9a116fc123b3d3df31640b801cf57a7a78ec3f603b3", size = 131954, upload-time = "2026-07-29T17:18:04.364Z" },
 ]
 
 [package.optional-dependencies]
@@ -444,16 +482,16 @@ all = [
 
 [[package]]
 name = "fastapi-cli"
-version = "0.0.23"
+version = "0.0.32"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "rich-toolkit" },
     { name = "typer" },
     { name = "uvicorn", extra = ["standard"] },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/71/9f/cbd463e57de4e977b8ea0403f95347f9150441568b1d3fe3e4949ef80ef3/fastapi_cli-0.0.23.tar.gz", hash = "sha256:210ac280ea41e73aac5a57688781256beb23c2cba3a41266896fa43e6445c8e7", size = 19763, upload-time = "2026-02-16T19:45:53.358Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/33/eb/3b534c6f8e157f9ddbf2a153512307c886cad0b258739c200dd8ff8c4452/fastapi_cli-0.0.32.tar.gz", hash = "sha256:38024d2345275e1b37ce8848727a580d84901b570e96b3256d9d36a9a5039424", size = 26636, upload-time = "2026-07-16T12:16:58.678Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/68/89/19dcfd5cd289b306abdcabac68b88a4f54b7710a2c33adc16a337ecdcdfa/fastapi_cli-0.0.23-py3-none-any.whl", hash = "sha256:7e9634fc212da0b6cfc75bd3ac366cc9dfdb43b5e9ec12e58bfd1acdd2697f25", size = 12305, upload-time = "2026-02-16T19:45:52.554Z" },
+    { url = "https://files.pythonhosted.org/packages/d5/53/56ae5ae17bb0a5d89d1d31e5320eb1865553ebbfbde91cdc4c221245f2a8/fastapi_cli-0.0.32-py3-none-any.whl", hash = "sha256:8dcc286fa32f01bbd3f65dd09cfd5a2540ed5f2230b77db7fd30978d6165f3c4", size = 14670, upload-time = "2026-07-16T12:16:57.297Z" },
 ]
 
 [package.optional-dependencies]
@@ -553,14 +591,11 @@ wheels = [
 
 [[package]]
 name = "gunicorn"
-version = "26.0.0"
+version = "26.2.0"
 source = { registry = "https://pypi.org/simple" }
-dependencies = [
-    { name = "packaging" },
-]
-sdist = { url = "https://files.pythonhosted.org/packages/6d/b7/a4a3f632f823e432ce6bc65f62961b7980c898c77f075a2f7118cb3846fe/gunicorn-26.0.0.tar.gz", hash = "sha256:ca9346f85e3a4aeeb64d491045c16b9a35647abd37ea15efe53080eb8b090baf", size = 727286, upload-time = "2026-05-05T06:38:25.529Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/d9/8a/e4ef6ee11701b6cd64702848415ffb69eeff85cb388a3c6c7fe86f22f3f8/gunicorn-26.2.0.tar.gz", hash = "sha256:62b864895d9ebff0b2f9867ba04fe811c93121596540830c9c916d0769668447", size = 787921, upload-time = "2026-08-24T15:05:59.3Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/e6/40/9c2384fc2be4ad25dd4a49decd5ad9ea5a3639814c11bd40ab77cb9f0a14/gunicorn-26.0.0-py3-none-any.whl", hash = "sha256:40233d26a5f0d1872916188c276e21641155111c2853f0c2cd55260aec0d24fc", size = 212009, upload-time = "2026-05-05T06:38:23.007Z" },
+    { url = "https://files.pythonhosted.org/packages/fe/85/7522a52e5e2f42faf1a129113ab63e548c42e103e9af395b7bfe65e403e2/gunicorn-26.2.0-py3-none-any.whl", hash = "sha256:bd249d0b3f7972f7432f0a6b6ff3b3ee2d129f70cd1ff6c09a9dd9e29a2b88e3", size = 228389, upload-time = "2026-08-24T15:05:57.67Z" },
 ]
 
 [[package]]
@@ -621,17 +656,24 @@ wheels = [
 
 [[package]]
 name = "httptools"
-version = "0.7.1"
+version = "0.8.0"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/b5/46/120a669232c7bdedb9d52d4aeae7e6c7dfe151e99dc70802e2fc7a5e1993/httptools-0.7.1.tar.gz", hash = "sha256:abd72556974f8e7c74a259655924a717a2365b236c882c3f6f8a45fe94703ac9", size = 258961, upload-time = "2025-10-10T03:55:08.559Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/43/e5/d471fcb0e14523fe1c3f4ba58ca52480e7bd70ad7109a3846bc75892f7fb/httptools-0.8.0.tar.gz", hash = "sha256:6b2a32f18d97e16e90827d7a819ffa8dbd8cc245fc4e1fa9d1095b54ef4bd999", size = 271342, upload-time = "2026-05-25T22:17:48.841Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/34/50/9d095fcbb6de2d523e027a2f304d4551855c2f46e0b82befd718b8b20056/httptools-0.7.1-cp314-cp314-macosx_10_13_universal2.whl", hash = "sha256:c08fe65728b8d70b6923ce31e3956f859d5e1e8548e6f22ec520a962c6757270", size = 203619, upload-time = "2025-10-10T03:54:54.321Z" },
-    { url = "https://files.pythonhosted.org/packages/07/f0/89720dc5139ae54b03f861b5e2c55a37dba9a5da7d51e1e824a1f343627f/httptools-0.7.1-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:7aea2e3c3953521c3c51106ee11487a910d45586e351202474d45472db7d72d3", size = 108714, upload-time = "2025-10-10T03:54:55.163Z" },
-    { url = "https://files.pythonhosted.org/packages/b3/cb/eea88506f191fb552c11787c23f9a405f4c7b0c5799bf73f2249cd4f5228/httptools-0.7.1-cp314-cp314-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:0e68b8582f4ea9166be62926077a3334064d422cf08ab87d8b74664f8e9058e1", size = 472909, upload-time = "2025-10-10T03:54:56.056Z" },
-    { url = "https://files.pythonhosted.org/packages/e0/4a/a548bdfae6369c0d078bab5769f7b66f17f1bfaa6fa28f81d6be6959066b/httptools-0.7.1-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:df091cf961a3be783d6aebae963cc9b71e00d57fa6f149025075217bc6a55a7b", size = 470831, upload-time = "2025-10-10T03:54:57.219Z" },
-    { url = "https://files.pythonhosted.org/packages/4d/31/14df99e1c43bd132eec921c2e7e11cda7852f65619bc0fc5bdc2d0cb126c/httptools-0.7.1-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:f084813239e1eb403ddacd06a30de3d3e09a9b76e7894dcda2b22f8a726e9c60", size = 452631, upload-time = "2025-10-10T03:54:58.219Z" },
-    { url = "https://files.pythonhosted.org/packages/22/d2/b7e131f7be8d854d48cb6d048113c30f9a46dca0c9a8b08fcb3fcd588cdc/httptools-0.7.1-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:7347714368fb2b335e9063bc2b96f2f87a9ceffcd9758ac295f8bbcd3ffbc0ca", size = 452910, upload-time = "2025-10-10T03:54:59.366Z" },
-    { url = "https://files.pythonhosted.org/packages/53/cf/878f3b91e4e6e011eff6d1fa9ca39f7eb17d19c9d7971b04873734112f30/httptools-0.7.1-cp314-cp314-win_amd64.whl", hash = "sha256:cfabda2a5bb85aa2a904ce06d974a3f30fb36cc63d7feaddec05d2050acede96", size = 88205, upload-time = "2025-10-10T03:55:00.389Z" },
+    { url = "https://files.pythonhosted.org/packages/1a/12/fa3fbf5f9517b273edea2dc982aa82a8c634091e67c590792b729017bc6f/httptools-0.8.0-cp314-cp314-macosx_10_13_universal2.whl", hash = "sha256:de242a49b5d18e0a8776e654e9f6bf6d89f3875a5c35b425a0e7ce940feb3fd6", size = 206183, upload-time = "2026-05-25T22:17:24.004Z" },
+    { url = "https://files.pythonhosted.org/packages/30/fc/5e7c4cb443370f2090a3aba0453a07384d29ff66b7435bb90e77e1037599/httptools-0.8.0-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:159e9ab5f701ccd42e555a12f1ad8ff69702910fc1c996cf2bb66e5fcb7a231b", size = 112079, upload-time = "2026-05-25T22:17:25.216Z" },
+    { url = "https://files.pythonhosted.org/packages/ba/53/771bd891eb0f236f32145d6a1775777ec85745f3cc983a1f23d1a3b8ddfe/httptools-0.8.0-cp314-cp314-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:c4a9f1707e4823d54dfec6c33fa3697d302aed536ed352a7ebb5a061ddb869d0", size = 481596, upload-time = "2026-05-25T22:17:26.186Z" },
+    { url = "https://files.pythonhosted.org/packages/62/42/94e15bc68ce3d423243c45d7f1b0c7561f13844f97dc52ae23182fb65628/httptools-0.8.0-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:d76ad7b951387e3632c8716a9bb03ac5b45c5f16119aa409db0459520887944e", size = 480865, upload-time = "2026-05-25T22:17:27.542Z" },
+    { url = "https://files.pythonhosted.org/packages/1c/7c/fe2980fc03723272e30f135b62360b075f513dfe7cc73aef36c7f04012bd/httptools-0.8.0-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:a3b7387147361c3fd47a0bde763c5c91b5b4cd4dc9989b8ece84ff436c99843b", size = 463189, upload-time = "2026-05-25T22:17:28.546Z" },
+    { url = "https://files.pythonhosted.org/packages/15/1b/47fc5fff68acd1bfa20b4734059c9a06cadb88119dcd5258b5b0d21d91c8/httptools-0.8.0-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:f256d6ce930c52ca1cb2a960b7da03548c454e7d28b06059ad41bfe789036ce0", size = 466610, upload-time = "2026-05-25T22:17:29.816Z" },
+    { url = "https://files.pythonhosted.org/packages/60/bd/07b13c93ffd9bec9546e0d43f8e19378dd696dbd278511406bc07371ef1f/httptools-0.8.0-cp314-cp314-win_amd64.whl", hash = "sha256:19d1ee275bb59ba2643ba9a3a1e51cc0c788caf2b8df506368e03f56fdd08527", size = 92705, upload-time = "2026-05-25T22:17:31.133Z" },
+    { url = "https://files.pythonhosted.org/packages/fd/c4/121648f68ce066d7bd762d6b6d97e620847642d38d54f3d90ff11d947629/httptools-0.8.0-cp314-cp314t-macosx_10_13_universal2.whl", hash = "sha256:de1ed58a974e75d56560acc7e7fed01a454994429456f65209789992e41f2568", size = 215023, upload-time = "2026-05-25T22:17:32.401Z" },
+    { url = "https://files.pythonhosted.org/packages/b9/b0/312a062ae741ae3e8baa8c8bf20be81b2e67337b259ab4349bebc7b6142e/httptools-0.8.0-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:e93c227b595c6926c1acee96891dd9da4be338cfbe82e5cd3bb9d8dd7dc4ac0b", size = 117405, upload-time = "2026-05-25T22:17:33.742Z" },
+    { url = "https://files.pythonhosted.org/packages/fc/37/fccd705f795386bb05bf413012fecff2a33e5aa8c2f069096de3e9fd8702/httptools-0.8.0-cp314-cp314t-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:2a021c3a8e65cc125390d72f59b968afca3bdcaff25bd67965e0a055a14946ca", size = 558497, upload-time = "2026-05-25T22:17:34.732Z" },
+    { url = "https://files.pythonhosted.org/packages/bd/39/f172e8003576de35f5ba77ff417cf0e34429d35dc014deef15afa337a72c/httptools-0.8.0-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:48774d39cbb70e2b1f71f88852a3087ae1d3a1eb80482bb48c13067ab080c14f", size = 571585, upload-time = "2026-05-25T22:17:35.813Z" },
+    { url = "https://files.pythonhosted.org/packages/3e/b9/f5564760af99f3dbbf3f9104dc00e5da27e96cf433c6bdcf77617f70bf3f/httptools-0.8.0-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:88eead8ec8680a9f146c655bc88445a325bd7921cfd8194c7337e9467282427d", size = 543297, upload-time = "2026-05-25T22:17:37.08Z" },
+    { url = "https://files.pythonhosted.org/packages/99/67/8d9f2c313618e161b82f3873188e7196126da1d6e29688df40eb3997c77a/httptools-0.8.0-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:2c032fa028f46871ec7e1fc59fc15e8023eab3e6bbe6ece786a1611719a5d081", size = 539535, upload-time = "2026-05-25T22:17:38.032Z" },
+    { url = "https://files.pythonhosted.org/packages/48/63/b906c01e53f50d432c0defe43ce52764a111dc1bdd028bafbeb54dcfd008/httptools-0.8.0-cp314-cp314t-win_amd64.whl", hash = "sha256:384c17174464c8e873398b7af24f0b1f44d992c820328413951a625323155d77", size = 108209, upload-time = "2026-05-25T22:17:39.473Z" },
 ]
 
 [[package]]
@@ -699,36 +741,72 @@ wheels = [
 
 [[package]]
 name = "librt"
-version = "0.8.1"
+version = "0.15.0"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/56/9c/b4b0c54d84da4a94b37bd44151e46d5e583c9534c7e02250b961b1b6d8a8/librt-0.8.1.tar.gz", hash = "sha256:be46a14693955b3bd96014ccbdb8339ee8c9346fbe11c1b78901b55125f14c73", size = 177471, upload-time = "2026-02-17T16:13:06.101Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/36/9b/356320fbae2ac8467e21c5e73e1389c80468e4998c62cc7d3536cc51b614/librt-0.15.0.tar.gz", hash = "sha256:4e66cbe84437497d951b799d3e1551291b6fb3d643820a7014b3655d57a59162", size = 214338, upload-time = "2026-08-07T10:49:42.663Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/c9/6a/907ef6800f7bca71b525a05f1839b21f708c09043b1c6aa77b6b827b3996/librt-0.8.1-cp314-cp314-macosx_10_13_x86_64.whl", hash = "sha256:6cfa7fe54fd4d1f47130017351a959fe5804bda7a0bc7e07a2cdbc3fdd28d34f", size = 66081, upload-time = "2026-02-17T16:12:12.766Z" },
-    { url = "https://files.pythonhosted.org/packages/1b/18/25e991cd5640c9fb0f8d91b18797b29066b792f17bf8493da183bf5caabe/librt-0.8.1-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:228c2409c079f8c11fb2e5d7b277077f694cb93443eb760e00b3b83cb8b3176c", size = 68309, upload-time = "2026-02-17T16:12:13.756Z" },
-    { url = "https://files.pythonhosted.org/packages/a4/36/46820d03f058cfb5a9de5940640ba03165ed8aded69e0733c417bb04df34/librt-0.8.1-cp314-cp314-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:7aae78ab5e3206181780e56912d1b9bb9f90a7249ce12f0e8bf531d0462dd0fc", size = 196804, upload-time = "2026-02-17T16:12:14.818Z" },
-    { url = "https://files.pythonhosted.org/packages/59/18/5dd0d3b87b8ff9c061849fbdb347758d1f724b9a82241aa908e0ec54ccd0/librt-0.8.1-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:172d57ec04346b047ca6af181e1ea4858086c80bdf455f61994c4aa6fc3f866c", size = 206907, upload-time = "2026-02-17T16:12:16.513Z" },
-    { url = "https://files.pythonhosted.org/packages/d1/96/ef04902aad1424fd7299b62d1890e803e6ab4018c3044dca5922319c4b97/librt-0.8.1-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:6b1977c4ea97ce5eb7755a78fae68d87e4102e4aaf54985e8b56806849cc06a3", size = 221217, upload-time = "2026-02-17T16:12:17.906Z" },
-    { url = "https://files.pythonhosted.org/packages/6d/ff/7e01f2dda84a8f5d280637a2e5827210a8acca9a567a54507ef1c75b342d/librt-0.8.1-cp314-cp314-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:10c42e1f6fd06733ef65ae7bebce2872bcafd8d6e6b0a08fe0a05a23b044fb14", size = 214622, upload-time = "2026-02-17T16:12:19.108Z" },
-    { url = "https://files.pythonhosted.org/packages/1e/8c/5b093d08a13946034fed57619742f790faf77058558b14ca36a6e331161e/librt-0.8.1-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:4c8dfa264b9193c4ee19113c985c95f876fae5e51f731494fc4e0cf594990ba7", size = 221987, upload-time = "2026-02-17T16:12:20.331Z" },
-    { url = "https://files.pythonhosted.org/packages/d3/cc/86b0b3b151d40920ad45a94ce0171dec1aebba8a9d72bb3fa00c73ab25dd/librt-0.8.1-cp314-cp314-musllinux_1_2_i686.whl", hash = "sha256:01170b6729a438f0dedc4a26ed342e3dc4f02d1000b4b19f980e1877f0c297e6", size = 215132, upload-time = "2026-02-17T16:12:21.54Z" },
-    { url = "https://files.pythonhosted.org/packages/fc/be/8588164a46edf1e69858d952654e216a9a91174688eeefb9efbb38a9c799/librt-0.8.1-cp314-cp314-musllinux_1_2_riscv64.whl", hash = "sha256:7b02679a0d783bdae30d443025b94465d8c3dc512f32f5b5031f93f57ac32071", size = 215195, upload-time = "2026-02-17T16:12:23.073Z" },
-    { url = "https://files.pythonhosted.org/packages/f5/f2/0b9279bea735c734d69344ecfe056c1ba211694a72df10f568745c899c76/librt-0.8.1-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:190b109bb69592a3401fe1ffdea41a2e73370ace2ffdc4a0e8e2b39cdea81b78", size = 237946, upload-time = "2026-02-17T16:12:24.275Z" },
-    { url = "https://files.pythonhosted.org/packages/e9/cc/5f2a34fbc8aeb35314a3641f9956fa9051a947424652fad9882be7a97949/librt-0.8.1-cp314-cp314-win32.whl", hash = "sha256:e70a57ecf89a0f64c24e37f38d3fe217a58169d2fe6ed6d70554964042474023", size = 50689, upload-time = "2026-02-17T16:12:25.766Z" },
-    { url = "https://files.pythonhosted.org/packages/a0/76/cd4d010ab2147339ca2b93e959c3686e964edc6de66ddacc935c325883d7/librt-0.8.1-cp314-cp314-win_amd64.whl", hash = "sha256:7e2f3edca35664499fbb36e4770650c4bd4a08abc1f4458eab9df4ec56389730", size = 57875, upload-time = "2026-02-17T16:12:27.465Z" },
-    { url = "https://files.pythonhosted.org/packages/84/0f/2143cb3c3ca48bd3379dcd11817163ca50781927c4537345d608b5045998/librt-0.8.1-cp314-cp314-win_arm64.whl", hash = "sha256:0d2f82168e55ddefd27c01c654ce52379c0750ddc31ee86b4b266bcf4d65f2a3", size = 48058, upload-time = "2026-02-17T16:12:28.556Z" },
-    { url = "https://files.pythonhosted.org/packages/d2/0e/9b23a87e37baf00311c3efe6b48d6b6c168c29902dfc3f04c338372fd7db/librt-0.8.1-cp314-cp314t-macosx_10_13_x86_64.whl", hash = "sha256:2c74a2da57a094bd48d03fa5d196da83d2815678385d2978657499063709abe1", size = 68313, upload-time = "2026-02-17T16:12:29.659Z" },
-    { url = "https://files.pythonhosted.org/packages/db/9a/859c41e5a4f1c84200a7d2b92f586aa27133c8243b6cac9926f6e54d01b9/librt-0.8.1-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:a355d99c4c0d8e5b770313b8b247411ed40949ca44e33e46a4789b9293a907ee", size = 70994, upload-time = "2026-02-17T16:12:31.516Z" },
-    { url = "https://files.pythonhosted.org/packages/4c/28/10605366ee599ed34223ac2bf66404c6fb59399f47108215d16d5ad751a8/librt-0.8.1-cp314-cp314t-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:2eb345e8b33fb748227409c9f1233d4df354d6e54091f0e8fc53acdb2ffedeb7", size = 220770, upload-time = "2026-02-17T16:12:33.294Z" },
-    { url = "https://files.pythonhosted.org/packages/af/8d/16ed8fd452dafae9c48d17a6bc1ee3e818fd40ef718d149a8eff2c9f4ea2/librt-0.8.1-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:9be2f15e53ce4e83cc08adc29b26fb5978db62ef2a366fbdf716c8a6c8901040", size = 235409, upload-time = "2026-02-17T16:12:35.443Z" },
-    { url = "https://files.pythonhosted.org/packages/89/1b/7bdf3e49349c134b25db816e4a3db6b94a47ac69d7d46b1e682c2c4949be/librt-0.8.1-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:785ae29c1f5c6e7c2cde2c7c0e148147f4503da3abc5d44d482068da5322fd9e", size = 246473, upload-time = "2026-02-17T16:12:36.656Z" },
-    { url = "https://files.pythonhosted.org/packages/4e/8a/91fab8e4fd2a24930a17188c7af5380eb27b203d72101c9cc000dbdfd95a/librt-0.8.1-cp314-cp314t-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:1d3a7da44baf692f0c6aeb5b2a09c5e6fc7a703bca9ffa337ddd2e2da53f7732", size = 238866, upload-time = "2026-02-17T16:12:37.849Z" },
-    { url = "https://files.pythonhosted.org/packages/b9/e0/c45a098843fc7c07e18a7f8a24ca8496aecbf7bdcd54980c6ca1aaa79a8e/librt-0.8.1-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:5fc48998000cbc39ec0d5311312dda93ecf92b39aaf184c5e817d5d440b29624", size = 250248, upload-time = "2026-02-17T16:12:39.445Z" },
-    { url = "https://files.pythonhosted.org/packages/82/30/07627de23036640c952cce0c1fe78972e77d7d2f8fd54fa5ef4554ff4a56/librt-0.8.1-cp314-cp314t-musllinux_1_2_i686.whl", hash = "sha256:e96baa6820280077a78244b2e06e416480ed859bbd8e5d641cf5742919d8beb4", size = 240629, upload-time = "2026-02-17T16:12:40.889Z" },
-    { url = "https://files.pythonhosted.org/packages/fb/c1/55bfe1ee3542eba055616f9098eaf6eddb966efb0ca0f44eaa4aba327307/librt-0.8.1-cp314-cp314t-musllinux_1_2_riscv64.whl", hash = "sha256:31362dbfe297b23590530007062c32c6f6176f6099646bb2c95ab1b00a57c382", size = 239615, upload-time = "2026-02-17T16:12:42.446Z" },
-    { url = "https://files.pythonhosted.org/packages/2b/39/191d3d28abc26c9099b19852e6c99f7f6d400b82fa5a4e80291bd3803e19/librt-0.8.1-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:cc3656283d11540ab0ea01978378e73e10002145117055e03722417aeab30994", size = 263001, upload-time = "2026-02-17T16:12:43.627Z" },
-    { url = "https://files.pythonhosted.org/packages/b9/eb/7697f60fbe7042ab4e88f4ee6af496b7f222fffb0a4e3593ef1f29f81652/librt-0.8.1-cp314-cp314t-win32.whl", hash = "sha256:738f08021b3142c2918c03692608baed43bc51144c29e35807682f8070ee2a3a", size = 51328, upload-time = "2026-02-17T16:12:45.148Z" },
-    { url = "https://files.pythonhosted.org/packages/7c/72/34bf2eb7a15414a23e5e70ecb9440c1d3179f393d9349338a91e2781c0fb/librt-0.8.1-cp314-cp314t-win_amd64.whl", hash = "sha256:89815a22daf9c51884fb5dbe4f1ef65ee6a146e0b6a8df05f753e2e4a9359bf4", size = 58722, upload-time = "2026-02-17T16:12:46.85Z" },
-    { url = "https://files.pythonhosted.org/packages/b2/c8/d148e041732d631fc76036f8b30fae4e77b027a1e95b7a84bb522481a940/librt-0.8.1-cp314-cp314t-win_arm64.whl", hash = "sha256:bf512a71a23504ed08103a13c941f763db13fb11177beb3d9244c98c29fb4a61", size = 48755, upload-time = "2026-02-17T16:12:47.943Z" },
+    { url = "https://files.pythonhosted.org/packages/a8/93/949053fb462eecc4a9a5ee770a81f4b40be7b79538b245545d4aebc6b58b/librt-0.15.0-cp314-cp314-macosx_10_15_x86_64.whl", hash = "sha256:f5de7feedc56337a088eb15cd9fafa9938367362221d8cc62c642b7f94821993", size = 149833, upload-time = "2026-08-07T10:47:39.86Z" },
+    { url = "https://files.pythonhosted.org/packages/61/ca/8281aa6cd560a3420e4497729f6b704b53be3eeaaef82d5aeadddaf7441f/librt-0.15.0-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:6c0eb900c0e91f4aebe680845242e614f1864edfd44106380d0752ac29522bf8", size = 154088, upload-time = "2026-08-07T10:47:41.065Z" },
+    { url = "https://files.pythonhosted.org/packages/dd/02/1a1662dceaba6a086360891448d5ce9a7d3555976cae59a31a39d744b9c7/librt-0.15.0-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:e8c9a650a188e38bac005048cbe6342e81407782944d01934540ab75e417df21", size = 494215, upload-time = "2026-08-07T10:47:42.388Z" },
+    { url = "https://files.pythonhosted.org/packages/69/84/99211619dc656370a3740c33d2b0b6d5a3fb1e73689314f6ed477a397dc4/librt-0.15.0-cp314-cp314-manylinux2014_i686.manylinux_2_17_i686.manylinux_2_28_i686.whl", hash = "sha256:92bfed8deec93df30286b9fe9e3b1dd17329cc076a192b4ee5ec223841d54953", size = 491173, upload-time = "2026-08-07T10:47:43.683Z" },
+    { url = "https://files.pythonhosted.org/packages/d4/aa/5448d0b05f4579b635d3899176817ebf561af0e57bacd425b5b1887264c1/librt-0.15.0-cp314-cp314-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:ec4b19788f835711a2072f9dbe6b03b3bf32ed1f0fb30cf399bdd59d9f0c33fa", size = 505512, upload-time = "2026-08-07T10:47:45.314Z" },
+    { url = "https://files.pythonhosted.org/packages/95/82/01940e40b83c43a546c4a3c896cf34ca272a9690899d55914e4827b3dcce/librt-0.15.0-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:d4c7bacb70930f3d0a56f4ecf1be474a1f0d941b01dd73b756f3c256d42cb879", size = 523073, upload-time = "2026-08-07T10:47:46.66Z" },
+    { url = "https://files.pythonhosted.org/packages/88/fa/759c0030f3ee371439eb26de34fc745807caf0abb878af7af4b8b7c3dd3d/librt-0.15.0-cp314-cp314-manylinux_2_34_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:3e79f05e4a08b4d880342673312bbc895b56df7765605796f15902eb5367d3ae", size = 515080, upload-time = "2026-08-07T10:47:48.319Z" },
+    { url = "https://files.pythonhosted.org/packages/0b/27/894e072228fcb159703c655da69f8cd10dbed489c36e3df7dd032a2483be/librt-0.15.0-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:a417149c0cba4d50b61e992e5a15e69eaf96746609b461cc4ed168aeef6b79dd", size = 534164, upload-time = "2026-08-07T10:47:49.875Z" },
+    { url = "https://files.pythonhosted.org/packages/98/a3/0078e91c1f36f8815db17827de15650b9a3fe56c55fbf998c854b34e40d3/librt-0.15.0-cp314-cp314-musllinux_1_2_i686.whl", hash = "sha256:da7a94d6a3411f579d72aa3e3bc5fbca7ed4549f3dbd7e5de3aa567333374285", size = 540616, upload-time = "2026-08-07T10:47:51.408Z" },
+    { url = "https://files.pythonhosted.org/packages/86/33/81a29b796dd52a45e9ef7974c7732926e8f10f15b8d2be505665979f896d/librt-0.15.0-cp314-cp314-musllinux_1_2_ppc64le.whl", hash = "sha256:856f743ae607f2c1380eccb566c0038a9fb3eabf0fc2be2704d76d9f73557239", size = 545890, upload-time = "2026-08-07T10:47:52.818Z" },
+    { url = "https://files.pythonhosted.org/packages/05/82/8be1baa1350e5d30cfd70ae79d0a6f4dc5862ef47f7bb2808aabc9bb86e5/librt-0.15.0-cp314-cp314-musllinux_1_2_riscv64.whl", hash = "sha256:779a6e7c894737e5983e7790a9c78c4000c30e23c9aada08081bdbea53b0fa60", size = 523287, upload-time = "2026-08-07T10:47:54.165Z" },
+    { url = "https://files.pythonhosted.org/packages/c6/4f/d1be6a01a35c20ef734e0e44113f87d4af756a9354a89dcfbe3b4f8af5e1/librt-0.15.0-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:96bb17dbe8bab3c0954fbebfc69ed395599de75b6bbc35e3270a878e15d4dd65", size = 565868, upload-time = "2026-08-07T10:47:55.566Z" },
+    { url = "https://files.pythonhosted.org/packages/67/88/649cfa33f5825927b160610f670bdab012a64d627eddb94fa795ea4292fd/librt-0.15.0-cp314-cp314-pyemscripten_2026_0_wasm32.whl", hash = "sha256:7220697efaa6e5348fc3d18ee7f8563d4bfecd9872b37ffb915bfc1d08840622", size = 81619, upload-time = "2026-08-07T10:47:56.886Z" },
+    { url = "https://files.pythonhosted.org/packages/22/31/8e88a8d5e48fc8d1a817787fb6811dfff6499acd6c8683dd83934aa6ede0/librt-0.15.0-cp314-cp314-win32.whl", hash = "sha256:f54598964d357b1c5ab77cf5d92f21e598fe0e23cdbe9618480807f81b4eba15", size = 100138, upload-time = "2026-08-07T10:47:58.093Z" },
+    { url = "https://files.pythonhosted.org/packages/80/92/20fd6c4b6a1b1a564b076d55cd3d427d8428217d7638dc25a654cc4791d4/librt-0.15.0-cp314-cp314-win_amd64.whl", hash = "sha256:3ff5893a2c23d886aa9ce786de5ac6ddc74aeeaf90743682b74d920e117d2e28", size = 121258, upload-time = "2026-08-07T10:47:59.564Z" },
+    { url = "https://files.pythonhosted.org/packages/fc/28/6af430b44d9ebb897b865a3c363b6dcace51357be2347cc0f8f869656a86/librt-0.15.0-cp314-cp314-win_arm64.whl", hash = "sha256:3722a099730704c9a3d70c879fc0f51daec25fe5f1555672d97bc595abeafb95", size = 106467, upload-time = "2026-08-07T10:48:01.097Z" },
+    { url = "https://files.pythonhosted.org/packages/7e/aa/b42bb798942ced219f6d63b27e07f91237887a8d0bd0921666db79a13790/librt-0.15.0-cp314-cp314t-macosx_10_15_x86_64.whl", hash = "sha256:38c0c7d4b6fc06c3324b3f9162c8391bfc4fd9dde53afe1033ce7edb48d5a714", size = 159523, upload-time = "2026-08-07T10:48:02.442Z" },
+    { url = "https://files.pythonhosted.org/packages/75/03/1b53cd4ef904e73b1d828a5f90143bf94a2967d7cfff0b9ccf93e12aa9b4/librt-0.15.0-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:8b2fdd7ead3c995c37940a790690660d0ca006c302db26cc51933f6766866fc3", size = 161638, upload-time = "2026-08-07T10:48:03.725Z" },
+    { url = "https://files.pythonhosted.org/packages/ac/c4/9f9c9fba097d49e9e694c2b4dc331df31884645ecbc58a93b4b5fc69d2c5/librt-0.15.0-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:2fde98cf1fc4bac144ce23c2c4c017b924ba714509ea9334977b0b27050c837d", size = 701795, upload-time = "2026-08-07T10:48:05.135Z" },
+    { url = "https://files.pythonhosted.org/packages/4c/05/0966840bda0380c8ae167b9043c6230202941cc90ea29c48e096964c765e/librt-0.15.0-cp314-cp314t-manylinux2014_i686.manylinux_2_17_i686.manylinux_2_28_i686.whl", hash = "sha256:e3b461183c5fa7681b48560f91515f53a953122fb30c71e07abc67d7ddf58c38", size = 682147, upload-time = "2026-08-07T10:48:06.555Z" },
+    { url = "https://files.pythonhosted.org/packages/18/af/1c47ca573c30ea47d195aec26133af522fea1104afaace028d7b32247ea8/librt-0.15.0-cp314-cp314t-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:4bbcc257e3babea20a91715c361b24554ec4e8f51aa578568afc230799fe1a19", size = 696397, upload-time = "2026-08-07T10:48:08.03Z" },
+    { url = "https://files.pythonhosted.org/packages/2e/0f/1aed6223d4f9f9d1171a8596ff100ea4c3f7699fea7a4ba657c3e60daa6c/librt-0.15.0-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:b845b8d48088fad0cadc84be4b8fda63203be7e9237b71015b3925443c1f35ab", size = 722542, upload-time = "2026-08-07T10:48:09.569Z" },
+    { url = "https://files.pythonhosted.org/packages/c6/22/9e3a929aea456c97d69e6ef3884efea56d4807f97399471cc946baebd8af/librt-0.15.0-cp314-cp314t-manylinux_2_34_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:b30e600e8f337b9bd7f39b86d9fdfedc73cc46e3d0f745931a23a234220bb7e2", size = 729709, upload-time = "2026-08-07T10:48:11.129Z" },
+    { url = "https://files.pythonhosted.org/packages/e9/1b/c327ef6018e3a9ca0b8e7c5eddeeb331ba8f9b76c24e126d37d0f6d62faf/librt-0.15.0-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:64b0c8c35aa4c4ed79896359f3e0b285cbe4e610042106500da4811c322cc108", size = 752891, upload-time = "2026-08-07T10:48:12.558Z" },
+    { url = "https://files.pythonhosted.org/packages/d7/d1/d5f1ea02c56930087009e39db9b70660a663e76c730b27b925d786718457/librt-0.15.0-cp314-cp314t-musllinux_1_2_i686.whl", hash = "sha256:0da0d94cb802f32a0524653e7201f2cef72d5f700a5407678f5290483d4fcd08", size = 745301, upload-time = "2026-08-07T10:48:14.55Z" },
+    { url = "https://files.pythonhosted.org/packages/d9/3c/5f7c585d15ebb2250c73e7c0ee4e9e47be72c65d520c07ddbcdc62037674/librt-0.15.0-cp314-cp314t-musllinux_1_2_ppc64le.whl", hash = "sha256:4a6369168d371207339b1e50d4532b06a7121586141f82599505a3f315751d47", size = 747921, upload-time = "2026-08-07T10:48:16.453Z" },
+    { url = "https://files.pythonhosted.org/packages/7f/52/1443a446486eba966bcbca1696b472e4f210320ec42f490a47f48fbf0fdc/librt-0.15.0-cp314-cp314t-musllinux_1_2_riscv64.whl", hash = "sha256:c434e072557ade9cbc642d052c89d031efe47d5c9614523619d0d74a02378e81", size = 727561, upload-time = "2026-08-07T10:48:18.089Z" },
+    { url = "https://files.pythonhosted.org/packages/79/91/2270a9380f11725cf83ce1925a5e32dd1dde2be9bba597f25c10a38644e7/librt-0.15.0-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:c7eec6a42018bc1d45763b1c162d3d2bf7c3b9a1b0ed30d3e91dcba390efefcc", size = 774417, upload-time = "2026-08-07T10:48:19.611Z" },
+    { url = "https://files.pythonhosted.org/packages/9e/3b/f4b1548d4f5b99186737fe27aec238e9823e8d5d23bf4df007c030689dc5/librt-0.15.0-cp314-cp314t-win32.whl", hash = "sha256:6912fa5e635d74529ac7cdb1bdf6ca3af4453da8d1edbe0110ee1cb4ad407ebf", size = 104381, upload-time = "2026-08-07T10:48:21.048Z" },
+    { url = "https://files.pythonhosted.org/packages/80/b6/134afad262def1de04c0843c376d02135f1168af43f22e09a52bd8394727/librt-0.15.0-cp314-cp314t-win_amd64.whl", hash = "sha256:8e11699ed745931c395acd3621b07062e0f840efa6935aad87a64ed0995f0915", size = 127034, upload-time = "2026-08-07T10:48:22.561Z" },
+    { url = "https://files.pythonhosted.org/packages/99/5f/1b6846b20572bd699c9e9ec321a5f781845bee477df2aa2a43b28bc40119/librt-0.15.0-cp314-cp314t-win_arm64.whl", hash = "sha256:5d2a91724463bfed4f573cd7a9fdc856d2e230d0c0e5a61416a93481dccd8605", size = 110827, upload-time = "2026-08-07T10:48:23.804Z" },
+    { url = "https://files.pythonhosted.org/packages/c6/44/4de9f4ddadb009a55c7758eb5736d62534a7daaf27bd71bc50e64b606b06/librt-0.15.0-cp315-cp315-macosx_10_15_x86_64.whl", hash = "sha256:8443e38dcfcfdbcf5add5118c623efd788d65ac2e25756d6251a54a06a4d0aca", size = 149843, upload-time = "2026-08-07T10:48:25.148Z" },
+    { url = "https://files.pythonhosted.org/packages/1f/eb/5d9ab71e30119c44094e0275f38b47dd327aea0f843a080396677029d508/librt-0.15.0-cp315-cp315-macosx_11_0_arm64.whl", hash = "sha256:6d15a29033c57490cfe2069097c6fc4049e4e65ffbb749be7dc453b7c4c68965", size = 154510, upload-time = "2026-08-07T10:48:26.485Z" },
+    { url = "https://files.pythonhosted.org/packages/d0/9c/8505d1b8f5e8c19587bd03f7429993b3e9ce5c06819d856bfb11d919374c/librt-0.15.0-cp315-cp315-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:d2c05c729b589e734c09578bf5964be48a911765484840d017bbc84f49d4c4ad", size = 497543, upload-time = "2026-08-07T10:48:28.045Z" },
+    { url = "https://files.pythonhosted.org/packages/1d/9a/3a8390775cb095765aded027ac9c63e7c8ea74e731498607544c6505de0e/librt-0.15.0-cp315-cp315-manylinux2014_i686.manylinux_2_17_i686.manylinux_2_28_i686.whl", hash = "sha256:fa60887537e1d0cd2d9982269d33a709bf54b195cd2b9364fc0a758022af5bd9", size = 480452, upload-time = "2026-08-07T10:48:29.531Z" },
+    { url = "https://files.pythonhosted.org/packages/e7/40/258a4a7117ee915d66de5cd9b8ade65a440993161107ce3a686f1859955c/librt-0.15.0-cp315-cp315-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:d8bc24219b24c0af375718942ab75e3544b2763085f40f965be4326734ae8328", size = 507768, upload-time = "2026-08-07T10:48:31.007Z" },
+    { url = "https://files.pythonhosted.org/packages/6b/c6/2f4dd296c97a0b85b98894519b279408ec9dd602d4f692b1ea0e25dee670/librt-0.15.0-cp315-cp315-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:86a21a7bd3fe3a419512ef424cc1c020f6771d0b29cfddff36d1635a855e63f0", size = 525122, upload-time = "2026-08-07T10:48:32.7Z" },
+    { url = "https://files.pythonhosted.org/packages/49/dd/29eab42be13b2bf0ea8cb227135a45d44693e30a7e8b92871981ff56b82b/librt-0.15.0-cp315-cp315-manylinux_2_34_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:dbab647e88d90b3167b91efe7091e248653688ed4337e4f90907a722c7361bb9", size = 520371, upload-time = "2026-08-07T10:48:34.294Z" },
+    { url = "https://files.pythonhosted.org/packages/91/ed/4bad71adeca8fe208b775c2a35417fa5a2584c8f4791daaf89a89450fea1/librt-0.15.0-cp315-cp315-musllinux_1_2_aarch64.whl", hash = "sha256:d8edcf6f550e918dca779c069b9e156385c60b406f99fc7641f32c52f7193659", size = 537258, upload-time = "2026-08-07T10:48:35.88Z" },
+    { url = "https://files.pythonhosted.org/packages/4c/63/59dba6143fdcc7240c54458b629f3250000a61b8945890fc9efd451b19c5/librt-0.15.0-cp315-cp315-musllinux_1_2_i686.whl", hash = "sha256:8b62076030baa2d8b1501a46bf0e19c27a489aa90671c55665bff7887f7660b0", size = 527432, upload-time = "2026-08-07T10:48:37.466Z" },
+    { url = "https://files.pythonhosted.org/packages/ec/21/21a24c6a2327d8362580efebe77286bf47b0f4062ec5ea41766e609d3c7d/librt-0.15.0-cp315-cp315-musllinux_1_2_ppc64le.whl", hash = "sha256:d00d20d1818e82a07a0ee0aa89a98b17ed7916b92441090b683719cb20a59b6d", size = 548108, upload-time = "2026-08-07T10:48:39.384Z" },
+    { url = "https://files.pythonhosted.org/packages/5a/6d/fc68c89a7971418b41f9a873623ff935cb864097544c6a2f8ce491c8ef5d/librt-0.15.0-cp315-cp315-musllinux_1_2_riscv64.whl", hash = "sha256:4e6ee93fc3cf848dcbf0cce2eca73d8e7dcd0cc2b6df3a529d57750b30a4c55c", size = 529681, upload-time = "2026-08-07T10:48:41.392Z" },
+    { url = "https://files.pythonhosted.org/packages/65/7e/c2d98766124400d722063a630b0fde38a9fc768705d37eecca15c47dc192/librt-0.15.0-cp315-cp315-musllinux_1_2_x86_64.whl", hash = "sha256:32896a0af72508ea979e0acb4e4c04cbeeae04938167950d535c83c45597167d", size = 567736, upload-time = "2026-08-07T10:48:43.124Z" },
+    { url = "https://files.pythonhosted.org/packages/55/6c/f8c34a95e3a515c6e1c192b89511e7253c89a7760c6b500d57ffdb8d2dc8/librt-0.15.0-cp315-cp315-pyemscripten_2026_5_wasm32.whl", hash = "sha256:ec3ba415afaf951f6951b1dd16d3c8e4f540065fc382d7e70b823a79567ca374", size = 81673, upload-time = "2026-08-07T10:48:44.645Z" },
+    { url = "https://files.pythonhosted.org/packages/c9/9e/e23fa8e78679ec45728188650b39e8ff476c83b691c96f749217df3b1b7c/librt-0.15.0-cp315-cp315-win32.whl", hash = "sha256:d2813ba2503764f0450680c533d13df7cff9b49df1411062eded5f67db4195b9", size = 100081, upload-time = "2026-08-07T10:48:46.171Z" },
+    { url = "https://files.pythonhosted.org/packages/e1/dc/3eb4c5e297343f0620a55532cd7c8d764d3001fa2159212dadf480464827/librt-0.15.0-cp315-cp315-win_amd64.whl", hash = "sha256:b87d67e33afaf265262f2a66db578284b88ee2e6fcd224579cb5c15518677ad8", size = 121228, upload-time = "2026-08-07T10:48:47.631Z" },
+    { url = "https://files.pythonhosted.org/packages/97/70/43abce19f04e49762f8ec834c8fafee13cc40fd6b94a72a24e534febfcd0/librt-0.15.0-cp315-cp315-win_arm64.whl", hash = "sha256:713bd7df21170b982e729e46870f31d6b437bd1a9b4648cffb529bd3c2ec5c4b", size = 106487, upload-time = "2026-08-07T10:48:49.095Z" },
+    { url = "https://files.pythonhosted.org/packages/de/15/83f2deddb9368b8951ec8c9477269b5b9b8bd9bbf15e57402d0f38817dca/librt-0.15.0-cp315-cp315t-macosx_10_15_x86_64.whl", hash = "sha256:3de789c82752730f94782a5ee518baf9c05edf85733aeaf73bb6e518755cdf54", size = 159448, upload-time = "2026-08-07T10:48:50.649Z" },
+    { url = "https://files.pythonhosted.org/packages/06/bf/043097353f9b3c73b583d07f6b8e552795463f4bfc8caf85e42eee50c26a/librt-0.15.0-cp315-cp315t-macosx_11_0_arm64.whl", hash = "sha256:e0b5deec9a8664eb722c797241970fd4aa1894d25fda36a1ddac0f7407606bd6", size = 161686, upload-time = "2026-08-07T10:48:52.174Z" },
+    { url = "https://files.pythonhosted.org/packages/f4/2a/8ae77f9719d42ce71cd708560a3557b38ac3c17a0383e57f87084de45bbe/librt-0.15.0-cp315-cp315t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:5563302a8359bc2295bb7084d1a8ed1519df96afb30eb2aa4e0bff7b54228988", size = 710668, upload-time = "2026-08-07T10:48:53.782Z" },
+    { url = "https://files.pythonhosted.org/packages/61/34/c0436ea134deb9a0d6da80a396a2739a81cb31e0418f7227239e23140898/librt-0.15.0-cp315-cp315t-manylinux2014_i686.manylinux_2_17_i686.manylinux_2_28_i686.whl", hash = "sha256:22d6263b9d39d7bbb286fa791945646e3218f1be2d693e36fb630f1d0e59cd13", size = 679396, upload-time = "2026-08-07T10:48:55.645Z" },
+    { url = "https://files.pythonhosted.org/packages/4a/9f/001e0d99aa9250d5cd5715a9081291a20656083459f9019cda15255329e1/librt-0.15.0-cp315-cp315t-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:39ffd14646190c454f0d86e0d256b33f00a87a26ab410e619773b841d0e41416", size = 704313, upload-time = "2026-08-07T10:48:57.46Z" },
+    { url = "https://files.pythonhosted.org/packages/2d/53/b34fa9d0ff00f136f4d58ebb4c411ff634baed1eb412bb602a2bc8dcafcb/librt-0.15.0-cp315-cp315t-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:c47318cd3a61401452de11282242937e3e057c4fd3dbaf601e269d0928a06c0a", size = 729847, upload-time = "2026-08-07T10:48:59.231Z" },
+    { url = "https://files.pythonhosted.org/packages/86/ac/fa4d7a424665040e95baf480a6d523446057684b6758624c85338e8a23b2/librt-0.15.0-cp315-cp315t-manylinux_2_34_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:a56a1d4f859a82ca5b99fc4b82c9b027b15e3c455c5cd99e7d0719f27bb20b6c", size = 742736, upload-time = "2026-08-07T10:49:01.151Z" },
+    { url = "https://files.pythonhosted.org/packages/8a/f1/e17a9bb5de6fb8c3186ed1a7d68d21618b027ac2d3633e03d3b6109c67ae/librt-0.15.0-cp315-cp315t-musllinux_1_2_aarch64.whl", hash = "sha256:077471b3182db4e17c36ae91555f36a4d2c00080b267f749bcad34a478a9a302", size = 763454, upload-time = "2026-08-07T10:49:03.039Z" },
+    { url = "https://files.pythonhosted.org/packages/1d/ec/ecd02cd30935b931b9cdbfed6ab5a099c51b280b4e7baa274da80978ed27/librt-0.15.0-cp315-cp315t-musllinux_1_2_i686.whl", hash = "sha256:411ca4d1b905b860ceba7570dd6717a71dedaddcc4b0f77ece710aa41ee11f8d", size = 743296, upload-time = "2026-08-07T10:49:04.941Z" },
+    { url = "https://files.pythonhosted.org/packages/e6/b5/b3c2b8353ce820a4854f78d19321344242f89fa71c975b71132ba9bf242a/librt-0.15.0-cp315-cp315t-musllinux_1_2_ppc64le.whl", hash = "sha256:1256589e0b0adb31751d685a68bce29d73407ddf4ef05d4188f49d5dcf9566d9", size = 756217, upload-time = "2026-08-07T10:49:06.825Z" },
+    { url = "https://files.pythonhosted.org/packages/3c/52/6cc22542ba59146b05cca2a656f9ff8bb67e38e63d12c3b0cc183d837bf1/librt-0.15.0-cp315-cp315t-musllinux_1_2_riscv64.whl", hash = "sha256:f42b74a53e5f26a0ba0007411a7455b66c67ce4022a39cc1f56fc4efd65bcbab", size = 741934, upload-time = "2026-08-07T10:49:08.839Z" },
+    { url = "https://files.pythonhosted.org/packages/40/32/a04b72b1aa86e3be23b2ecff8c1aad2dcc955bd3956d6d26e7e34267e57a/librt-0.15.0-cp315-cp315t-musllinux_1_2_x86_64.whl", hash = "sha256:291bf73caf78b9e88d6fae9bfd693207ff7d832e2fdbe2cf8e746bc13f5f892b", size = 783763, upload-time = "2026-08-07T10:49:10.661Z" },
+    { url = "https://files.pythonhosted.org/packages/6c/f0/89eb11dffbe9279ff37144dec786927314502ae0b114f1449dc78c458aab/librt-0.15.0-cp315-cp315t-win32.whl", hash = "sha256:c16d15ee371643ab48dc8248a3e680ebbeca573a13af2c3dd0c985b142d77162", size = 104313, upload-time = "2026-08-07T10:49:12.305Z" },
+    { url = "https://files.pythonhosted.org/packages/6d/4a/1f1978c200f563beda63c36adff2d65bbecb81e365e8e69e572f5f70fbc6/librt-0.15.0-cp315-cp315t-win_amd64.whl", hash = "sha256:dbd605739f228912dc49027cb764456b9757750bdc2b6b7773164db7096c6fd1", size = 126889, upload-time = "2026-08-07T10:49:13.881Z" },
+    { url = "https://files.pythonhosted.org/packages/38/a6/800800bfed7b1fb10fc3f3d557785c3854e80d3f7a9800d784b176a1fc2d/librt-0.15.0-cp315-cp315t-win_arm64.whl", hash = "sha256:84d244b00604d17df3fc7736c327892d6bba66181254aa4087be807b6c342bdc", size = 110700, upload-time = "2026-08-07T10:49:15.499Z" },
 ]
 
 [[package]]
@@ -805,31 +883,44 @@ wheels = [
 
 [[package]]
 name = "mypy"
-version = "1.20.2"
+version = "2.3.1"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
+    { name = "ast-serialize" },
     { name = "librt", marker = "platform_python_implementation != 'PyPy'" },
     { name = "mypy-extensions" },
     { name = "pathspec" },
     { name = "typing-extensions" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/04/af/e3d4b3e9ec91a0ff9aabfdb38692952acf49bbb899c2e4c29acb3a6da3ae/mypy-1.20.2.tar.gz", hash = "sha256:e8222c26daaafd9e8626dec58ae36029f82585890589576f769a650dd20fd665", size = 3817349, upload-time = "2026-04-21T17:12:28.473Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/82/6a/878cc1097d4035f82bd516658d0c528d2a9955bc7b363afcbd0b07fea11b/mypy-2.3.1.tar.gz", hash = "sha256:47c1b1207258513a9d93495f69c8be9de73916186f0e52703e8c461b7a623419", size = 3992554, upload-time = "2026-08-15T03:03:38.549Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/ae/d1/b4ec96b0ecc620a4443570c6e95c867903428cfcde4206518eafdd5880c3/mypy-1.20.2-cp314-cp314-macosx_10_15_x86_64.whl", hash = "sha256:419413398fe250aae057fd2fe50166b61077083c9b82754c341cf4fd73038f30", size = 14524561, upload-time = "2026-04-21T17:06:27.325Z" },
-    { url = "https://files.pythonhosted.org/packages/3a/63/d2c2ff4fa66bc49477d32dfa26e8a167ba803ea6a69c5efb416036909d30/mypy-1.20.2-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:e73c07f23009962885c197ccb9b41356a30cc0e5a1d0c2ea8fd8fb1362d7f924", size = 13363883, upload-time = "2026-04-21T17:11:11.239Z" },
-    { url = "https://files.pythonhosted.org/packages/2a/56/983916806bf4eddeaaa2c9230903c3669c6718552a921154e1c5182c701f/mypy-1.20.2-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:0c64e5973df366b747646fc98da921f9d6eba9716d57d1db94a83c026a08e0fb", size = 13742945, upload-time = "2026-04-21T17:08:34.181Z" },
-    { url = "https://files.pythonhosted.org/packages/19/65/0cd9285ab010ee8214c83d67c6b49417c40d86ce46f1aa109457b5a9b8d7/mypy-1.20.2-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:5a65aa591af023864fd08a97da9974e919452cfe19cb146c8a5dc692626445dc", size = 14706163, upload-time = "2026-04-21T17:05:15.51Z" },
-    { url = "https://files.pythonhosted.org/packages/94/97/48ff3b297cafcc94d185243a9190836fb1b01c1b0918fff64e941e973cc9/mypy-1.20.2-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:4fef51b01e638974a6e69885687e9bd40c8d1e09a6cd291cca0619625cf1f558", size = 14938677, upload-time = "2026-04-21T17:05:39.562Z" },
-    { url = "https://files.pythonhosted.org/packages/fd/a1/1b4233d255bdd0b38a1f284feeb1c143ca508c19184964e22f8d837ec851/mypy-1.20.2-cp314-cp314-win_amd64.whl", hash = "sha256:913485a03f1bcf5d279409a9d2b9ed565c151f61c09f29991e5faa14033da4c8", size = 11089322, upload-time = "2026-04-21T17:06:44.29Z" },
-    { url = "https://files.pythonhosted.org/packages/78/c2/ce7ee2ba36aeb954ba50f18fa25d9c1188578654b97d02a66a15b6f09531/mypy-1.20.2-cp314-cp314-win_arm64.whl", hash = "sha256:c3bae4f855d965b5453784300c12ffc63a548304ac7f99e55d4dc7c898673aa3", size = 10017775, upload-time = "2026-04-21T17:07:20.732Z" },
-    { url = "https://files.pythonhosted.org/packages/4e/a1/9d93a7d0b5859af0ead82b4888b46df6c8797e1bc5e1e262a08518c6d48e/mypy-1.20.2-cp314-cp314t-macosx_10_15_x86_64.whl", hash = "sha256:2de3dcea53babc1c3237a19002bc3d228ce1833278f093b8d619e06e7cc79609", size = 15549002, upload-time = "2026-04-21T17:08:23.107Z" },
-    { url = "https://files.pythonhosted.org/packages/00/d2/09a6a10ee1bf0008f6c144d9676f2ca6a12512151b4e0ad0ff6c4fac5337/mypy-1.20.2-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:52b176444e2e5054dfcbcb8c75b0b719865c96247b37407184bbfca5c353f2c2", size = 14401942, upload-time = "2026-04-21T17:07:31.837Z" },
-    { url = "https://files.pythonhosted.org/packages/57/da/9594b75c3c019e805250bed3583bdf4443ff9e6ef08f97e39ae308cb06f2/mypy-1.20.2-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:688c3312e5dadb573a2c69c82af3a298d43ecf9e6d264e0f95df960b5f6ac19c", size = 15041649, upload-time = "2026-04-21T17:09:34.653Z" },
-    { url = "https://files.pythonhosted.org/packages/97/77/f75a65c278e6e8eba2071f7f5a90481891053ecc39878cc444634d892abe/mypy-1.20.2-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:29752dbbf8cc53f89f6ac096d363314333045c257c9c75cbd189ca2de0455744", size = 15864588, upload-time = "2026-04-21T17:11:44.936Z" },
-    { url = "https://files.pythonhosted.org/packages/d7/46/1a4e1c66e96c1a3246ddf5403d122ac9b0a8d2b7e65730b9d6533ba7a6d3/mypy-1.20.2-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:803203d2b6ea644982c644895c2f78b28d0e208bba7b27d9b921e0ec5eb207c6", size = 16093956, upload-time = "2026-04-21T17:10:17.683Z" },
-    { url = "https://files.pythonhosted.org/packages/5a/2c/78a8851264dec38cd736ca5b8bc9380674df0dd0be7792f538916157716c/mypy-1.20.2-cp314-cp314t-win_amd64.whl", hash = "sha256:9bcb8aa397ff0093c824182fd76a935a9ba7ad097fcbef80ae89bf6c1731d8ec", size = 12568661, upload-time = "2026-04-21T17:11:54.473Z" },
-    { url = "https://files.pythonhosted.org/packages/83/01/cd7318aa03493322ce275a0e14f4f52b8896335e4e79d4fb8153a7ad2b77/mypy-1.20.2-cp314-cp314t-win_arm64.whl", hash = "sha256:e061b58443f1736f8a37c48978d7ab581636d6ab03e3d4f99e3fa90463bb9382", size = 10389240, upload-time = "2026-04-21T17:09:42.719Z" },
-    { url = "https://files.pythonhosted.org/packages/28/9a/f23c163e25b11074188251b0b5a0342625fc1cdb6af604757174fa9acc9b/mypy-1.20.2-py3-none-any.whl", hash = "sha256:a94c5a76ab46c5e6257c7972b6c8cff0574201ca7dc05647e33e795d78680563", size = 2637314, upload-time = "2026-04-21T17:05:54.5Z" },
+    { url = "https://files.pythonhosted.org/packages/be/c4/42a49d44aeff804edf1b19acce0b49e8bd1a9c57dee9605dd8d980aa43d7/mypy-2.3.1-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:192abaedf75da1bc0b1cef104927e70ec49c1ef0031cc4825c7ee10a438ed24d", size = 13986778, upload-time = "2026-08-15T03:01:33.69Z" },
+    { url = "https://files.pythonhosted.org/packages/45/13/9331fd2dfed7194d66c5304072894a8be3e51e9deda6863c1eceaa35a43d/mypy-2.3.1-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:bf678dffd16efcda2c15cbd30e9ecc0081388e29ea23687a88e686ed92638dc3", size = 14188467, upload-time = "2026-08-15T03:02:40.554Z" },
+    { url = "https://files.pythonhosted.org/packages/78/f7/f4a34edab45667c5465855dc585a20e87978ffa8aee711445b7239d120c6/mypy-2.3.1-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:8e036f06b41630f4c8a1d48f9ac6aa26acc65f8be089973f5519da643318f03f", size = 15225538, upload-time = "2026-08-15T03:03:09.761Z" },
+    { url = "https://files.pythonhosted.org/packages/40/05/534b3590757bd05794f73e07f6666c2a77b8597ffed795c94ce570096aa0/mypy-2.3.1-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:71af9c8a894e862b58e92abb08e53b05a384a1e5e5d6dc7cda59126211a53d82", size = 15480805, upload-time = "2026-08-15T03:01:41.134Z" },
+    { url = "https://files.pythonhosted.org/packages/55/da/bdfba852e2562f599624af5bb7d29e36b0b4f526f2b8bac85efe0dd1803d/mypy-2.3.1-cp314-cp314-pyemscripten_2026_0_wasm32.whl", hash = "sha256:3c80cd23d85368bdd9f37d5231dfd97d35bcbf5bf41af96ef3a9b078ad1957f9", size = 7761712, upload-time = "2026-08-15T03:02:36.008Z" },
+    { url = "https://files.pythonhosted.org/packages/98/31/60fc64a74cdba4f2a5d642d32317993e479163e1ac7d91b695e5d15e2264/mypy-2.3.1-cp314-cp314-win_amd64.whl", hash = "sha256:4956f34d145e145562a0a0bf367f642bbc85c04ec2baf47ae015947c3169a85d", size = 11423968, upload-time = "2026-08-15T03:02:06.931Z" },
+    { url = "https://files.pythonhosted.org/packages/a9/23/eb5950b24cd26ba3b78f87707a275568d633c77dae8e61c9661be6055ca6/mypy-2.3.1-cp314-cp314-win_arm64.whl", hash = "sha256:cfb12e360242d23d91f5e978d94f58ea66acf5804c4fb6f2f794a20d4cb1b595", size = 10399323, upload-time = "2026-08-15T03:02:33.671Z" },
+    { url = "https://files.pythonhosted.org/packages/82/c7/f80f4e46c0b9a00eb5f78a79d49dda8bdf56a5230f7257fb33e76be04da7/mypy-2.3.1-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:e5f1c50bb05b64e2026b52867e8d21106f01313c744a2c4ecc34c90d12e8d6e2", size = 15121308, upload-time = "2026-08-15T03:01:46.053Z" },
+    { url = "https://files.pythonhosted.org/packages/5d/74/9b04f17c7074cc5188f02fb63a2ca1d43fedf479e84fe3091c39061a1d7f/mypy-2.3.1-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:667196b352f4cf304ded4c10f90cfc179263a1acfb3cdcfa984bdfd340d498bc", size = 15536590, upload-time = "2026-08-15T03:01:35.941Z" },
+    { url = "https://files.pythonhosted.org/packages/26/04/c837ef6208e567774e2ed1f863f8ba6ec4817b1b6dd426315e5d559b6ec9/mypy-2.3.1-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:b9c53e395c12cad2c6d4b67d5da7c6057638a132d85c08b73646b18f802a0045", size = 16791074, upload-time = "2026-08-15T03:01:31.073Z" },
+    { url = "https://files.pythonhosted.org/packages/37/68/48730230afa45192d5bd429a6a2ff24a6f8dedda90fdf2b221792b54518f/mypy-2.3.1-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:18162b128c3f9c703cd35f5537446900b0d21a2549aa7a95d21380d2ef643fb0", size = 17069183, upload-time = "2026-08-15T03:02:28.566Z" },
+    { url = "https://files.pythonhosted.org/packages/1c/ea/ca23fc9c20eeda09a15c9cbcf50015d0e73f409f6ead059e42aa69a608ff/mypy-2.3.1-cp314-cp314t-win_amd64.whl", hash = "sha256:30c0477d4aab7b7f39c8397dc877f2c96b9fe5588ec379f372c56eb63d599f63", size = 12154679, upload-time = "2026-08-15T03:02:04.809Z" },
+    { url = "https://files.pythonhosted.org/packages/3b/67/8d982126034990869466f73b8db80dcb2234a7ac39b4dad093e047a79835/mypy-2.3.1-cp314-cp314t-win_arm64.whl", hash = "sha256:6941ab3619377bc3f32ca02876b07d27f216f5201604b664d3937ea0fdd23bb4", size = 10969159, upload-time = "2026-08-15T03:02:38.152Z" },
+    { url = "https://files.pythonhosted.org/packages/ee/f7/41e7f2d8117fbc7a7587286162ffe2f688984b69c46ed63cf5f2e4fc3bae/mypy-2.3.1-cp315-cp315-macosx_11_0_arm64.whl", hash = "sha256:6f041a6de52c9217ca125e78ba0a335cb7fd98a1c0580978e49ab2b126f70b57", size = 13990694, upload-time = "2026-08-15T03:03:21.919Z" },
+    { url = "https://files.pythonhosted.org/packages/06/85/8f665811a0c8f3bf6fa1d9acd665ec2d97a2bcc453ae68dcd92340941cd6/mypy-2.3.1-cp315-cp315-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:5159ae60f5dbc3a498af5ba8365505808ac8031bc63f9e00304ad545d40bdd9b", size = 14203518, upload-time = "2026-08-15T03:01:48.455Z" },
+    { url = "https://files.pythonhosted.org/packages/2d/82/91b866c8546b120bff83b73a439d90d2d63ef3aff113599e6b8e4d566848/mypy-2.3.1-cp315-cp315-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:47a8a7a0a7f6f6e63995c0ac36fa0c07b127413fdc81f0439b7f3dccafd33561", size = 15220224, upload-time = "2026-08-15T03:01:23.577Z" },
+    { url = "https://files.pythonhosted.org/packages/c8/78/c226c99208ee40de7c768369fa533f933afa003dfdc606ff021450724e91/mypy-2.3.1-cp315-cp315-musllinux_1_2_x86_64.whl", hash = "sha256:2329c0501293d4e1f33bc15d04d6304d65a1cdda967ee93a05c1e681a3923133", size = 15501512, upload-time = "2026-08-15T03:02:09.453Z" },
+    { url = "https://files.pythonhosted.org/packages/a9/e7/7cfb3f106c393979f4cc37ad6c0586044d50401e3c35b0c003e4f3ba6bc9/mypy-2.3.1-cp315-cp315-pyemscripten_2026_5_wasm32.whl", hash = "sha256:bb26deed807bdb0457cf3e3f1cd7c4a1cf9d66864eaf1b4a61e06805d4c6b1f9", size = 7761913, upload-time = "2026-08-15T03:01:55.65Z" },
+    { url = "https://files.pythonhosted.org/packages/99/3c/52affefa273b97939a1f474ae4a349c8718635c15b941112dfab4291b0c1/mypy-2.3.1-cp315-cp315-win_amd64.whl", hash = "sha256:375d7013876a8233b2d05be185bfa09f689696cd999ce8b1cfe6acac5c80e8a3", size = 11422533, upload-time = "2026-08-15T03:03:24.101Z" },
+    { url = "https://files.pythonhosted.org/packages/2a/b7/75643e70c72a5b346d8a9b1543c967ea8824df2ee3fb7ccba652c272b7bb/mypy-2.3.1-cp315-cp315-win_arm64.whl", hash = "sha256:586b3612214cceabb3c0f588c97e7d1e535393f06a60e912e994f6b3ace97523", size = 10397931, upload-time = "2026-08-15T03:02:55.265Z" },
+    { url = "https://files.pythonhosted.org/packages/10/ce/53be21f2d4adfcd26f63f1184a13ed797015ab463853f117e2e11e4d726f/mypy-2.3.1-cp315-cp315t-macosx_11_0_arm64.whl", hash = "sha256:ef0c6335cda9d807f8193d8ff6204a72bc909fa9882aacbca14f43cdb7188306", size = 15118669, upload-time = "2026-08-15T03:02:51.479Z" },
+    { url = "https://files.pythonhosted.org/packages/62/43/20de757cd42989d291a17fad607742c4c74e875ce5cea00e5a5225020ac1/mypy-2.3.1-cp315-cp315t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:e598c8c66401d26b150872154a286e6d484cf2789c3bb28a7556806298423021", size = 15545627, upload-time = "2026-08-15T03:03:05.132Z" },
+    { url = "https://files.pythonhosted.org/packages/7e/fc/092bdf77ad280eaf501422f0f3b966012b528076cc13e41a774861c907d1/mypy-2.3.1-cp315-cp315t-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:eda22fd4efa9dcd39331d1dede9b5b8b8a7fd69af07592e778433da98610d29e", size = 16764157, upload-time = "2026-08-15T03:02:23.958Z" },
+    { url = "https://files.pythonhosted.org/packages/94/5c/c94c4d62d909b07f552d0d9356d7acc943825558e602a64822ffa2231536/mypy-2.3.1-cp315-cp315t-musllinux_1_2_x86_64.whl", hash = "sha256:2a0ba2e57847849fb0d1fcdabb32786d223095ed8bc121dfe322bcdb3d9c46bc", size = 17073258, upload-time = "2026-08-15T03:02:14.573Z" },
+    { url = "https://files.pythonhosted.org/packages/c0/f7/511a88b89e478053c02d22039bb8f3ce4183efe8fd7a4f0a5910a8bb0a32/mypy-2.3.1-cp315-cp315t-win_amd64.whl", hash = "sha256:3f7e865dd51f235f60a2dbcd8728a1c095f5ca28f095d48a725b84cd935735c4", size = 12135505, upload-time = "2026-08-15T03:02:16.714Z" },
+    { url = "https://files.pythonhosted.org/packages/71/bf/02573b56964ecb0f7c644f915f53c325ae15c3faec521c5adf11599a32df/mypy-2.3.1-cp315-cp315t-win_arm64.whl", hash = "sha256:8ad80807dc3ab8ea978b1b2b6e4a657194ace1d4ef03e0e731aff1abd517da29", size = 10962647, upload-time = "2026-08-15T03:01:43.712Z" },
+    { url = "https://files.pythonhosted.org/packages/8e/41/9675c7a1e78edecfba0b79e587a52594c56e189368261dc7b3a7fffb9527/mypy-2.3.1-py3-none-any.whl", hash = "sha256:6ed5c7e3419083268e5c9258bd1c1ef91af44a9e89374dbcaf37b775716e72eb", size = 2754338, upload-time = "2026-08-15T03:02:53.4Z" },
 ]
 
 [[package]]
@@ -917,31 +1008,43 @@ wheels = [
 
 [[package]]
 name = "pandas"
-version = "3.0.2"
+version = "3.0.5"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "numpy" },
     { name = "python-dateutil" },
     { name = "tzdata", marker = "sys_platform == 'emscripten' or sys_platform == 'win32'" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/da/99/b342345300f13440fe9fe385c3c481e2d9a595ee3bab4d3219247ac94e9a/pandas-3.0.2.tar.gz", hash = "sha256:f4753e73e34c8d83221ba58f232433fca2748be8b18dbca02d242ed153945043", size = 4645855, upload-time = "2026-03-31T06:48:30.816Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/be/4f/5f3422a2afec5ffc46308b79e53291365a93748b498ac2e58bead0197916/pandas-3.0.5.tar.gz", hash = "sha256:dca3734d6ab7c906e6730f0788b0a1dbb9f2467731f9711f77995c8e9d62d712", size = 4658219, upload-time = "2026-07-22T22:19:28.819Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/bb/40/c6ea527147c73b24fc15c891c3fcffe9c019793119c5742b8784a062c7db/pandas-3.0.2-cp314-cp314-macosx_10_15_x86_64.whl", hash = "sha256:db0dbfd2a6cdf3770aa60464d50333d8f3d9165b2f2671bcc299b72de5a6677b", size = 10326084, upload-time = "2026-03-31T06:47:43.834Z" },
-    { url = "https://files.pythonhosted.org/packages/95/25/bdb9326c3b5455f8d4d3549fce7abcf967259de146fe2cf7a82368141948/pandas-3.0.2-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:0555c5882688a39317179ab4a0ed41d3ebc8812ab14c69364bbee8fb7a3f6288", size = 9914146, upload-time = "2026-03-31T06:47:46.67Z" },
-    { url = "https://files.pythonhosted.org/packages/8d/77/3a227ff3337aa376c60d288e1d61c5d097131d0ac71f954d90a8f369e422/pandas-3.0.2-cp314-cp314-manylinux_2_24_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:01f31a546acd5574ef77fe199bc90b55527c225c20ccda6601cf6b0fd5ed597c", size = 10444081, upload-time = "2026-03-31T06:47:49.681Z" },
-    { url = "https://files.pythonhosted.org/packages/15/88/3cdd54fa279341afa10acf8d2b503556b1375245dccc9315659f795dd2e9/pandas-3.0.2-cp314-cp314-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:deeca1b5a931fdf0c2212c8a659ade6d3b1edc21f0914ce71ef24456ca7a6535", size = 10897535, upload-time = "2026-03-31T06:47:53.033Z" },
-    { url = "https://files.pythonhosted.org/packages/06/9d/98cc7a7624f7932e40f434299260e2917b090a579d75937cb8a57b9d2de3/pandas-3.0.2-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:0f48afd9bb13300ffb5a3316973324c787054ba6665cda0da3fbd67f451995db", size = 11446992, upload-time = "2026-03-31T06:47:56.193Z" },
-    { url = "https://files.pythonhosted.org/packages/9a/cd/19ff605cc3760e80602e6826ddef2824d8e7050ed80f2e11c4b079741dc3/pandas-3.0.2-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:6c4d8458b97a35717b62469a4ea0e85abd5ed8687277f5ccfc67f8a5126f8c53", size = 11968257, upload-time = "2026-03-31T06:47:59.137Z" },
-    { url = "https://files.pythonhosted.org/packages/db/60/aba6a38de456e7341285102bede27514795c1eaa353bc0e7638b6b785356/pandas-3.0.2-cp314-cp314-win_amd64.whl", hash = "sha256:b35d14bb5d8285d9494fe93815a9e9307c0876e10f1e8e89ac5b88f728ec8dcf", size = 9865893, upload-time = "2026-03-31T06:48:02.038Z" },
-    { url = "https://files.pythonhosted.org/packages/08/71/e5ec979dd2e8a093dacb8864598c0ff59a0cee0bbcdc0bfec16a51684d4f/pandas-3.0.2-cp314-cp314-win_arm64.whl", hash = "sha256:63d141b56ef686f7f0d714cfb8de4e320475b86bf4b620aa0b7da89af8cbdbbb", size = 9188644, upload-time = "2026-03-31T06:48:05.045Z" },
-    { url = "https://files.pythonhosted.org/packages/f1/6c/7b45d85db19cae1eb524f2418ceaa9d85965dcf7b764ed151386b7c540f0/pandas-3.0.2-cp314-cp314t-macosx_10_15_x86_64.whl", hash = "sha256:140f0cffb1fa2524e874dde5b477d9defe10780d8e9e220d259b2c0874c89d9d", size = 10776246, upload-time = "2026-03-31T06:48:07.789Z" },
-    { url = "https://files.pythonhosted.org/packages/a8/3e/7b00648b086c106e81766f25322b48aa8dfa95b55e621dbdf2fdd413a117/pandas-3.0.2-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:ae37e833ff4fed0ba352f6bdd8b73ba3ab3256a85e54edfd1ab51ae40cca0af8", size = 10424801, upload-time = "2026-03-31T06:48:10.897Z" },
-    { url = "https://files.pythonhosted.org/packages/da/6e/558dd09a71b53b4008e7fc8a98ec6d447e9bfb63cdaeea10e5eb9b2dabe8/pandas-3.0.2-cp314-cp314t-manylinux_2_24_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:4d888a5c678a419a5bb41a2a93818e8ed9fd3172246555c0b37b7cc27027effd", size = 10345643, upload-time = "2026-03-31T06:48:13.7Z" },
-    { url = "https://files.pythonhosted.org/packages/be/e3/921c93b4d9a280409451dc8d07b062b503bbec0531d2627e73a756e99a82/pandas-3.0.2-cp314-cp314t-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:b444dc64c079e84df91baa8bf613d58405645461cabca929d9178f2cd392398d", size = 10743641, upload-time = "2026-03-31T06:48:16.659Z" },
-    { url = "https://files.pythonhosted.org/packages/56/ca/fd17286f24fa3b4d067965d8d5d7e14fe557dd4f979a0b068ac0deaf8228/pandas-3.0.2-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:4544c7a54920de8eeacaa1466a6b7268ecfbc9bc64ab4dbb89c6bbe94d5e0660", size = 11361993, upload-time = "2026-03-31T06:48:19.475Z" },
-    { url = "https://files.pythonhosted.org/packages/e4/a5/2f6ed612056819de445a433ca1f2821ac3dab7f150d569a59e9cc105de1d/pandas-3.0.2-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:734be7551687c00fbd760dc0522ed974f82ad230d4a10f54bf51b80d44a08702", size = 11815274, upload-time = "2026-03-31T06:48:22.695Z" },
-    { url = "https://files.pythonhosted.org/packages/00/2f/b622683e99ec3ce00b0854bac9e80868592c5b051733f2cf3a868e5fea26/pandas-3.0.2-cp314-cp314t-win_amd64.whl", hash = "sha256:57a07209bebcbcf768d2d13c9b78b852f9a15978dac41b9e6421a81ad4cdd276", size = 10888530, upload-time = "2026-03-31T06:48:25.806Z" },
-    { url = "https://files.pythonhosted.org/packages/cb/2b/f8434233fab2bd66a02ec014febe4e5adced20e2693e0e90a07d118ed30e/pandas-3.0.2-cp314-cp314t-win_arm64.whl", hash = "sha256:5371b72c2d4d415d08765f32d689217a43227484e81b2305b52076e328f6f482", size = 9455341, upload-time = "2026-03-31T06:48:28.418Z" },
+    { url = "https://files.pythonhosted.org/packages/51/2f/cf6aae281264f4463f0875bcbb15fd2bb6d291cc535187dad1732475e4a9/pandas-3.0.5-cp314-cp314-macosx_10_15_x86_64.whl", hash = "sha256:2f264fc46911cc8131a7322a16199bbf8e353d27c10bb211f5bd0c814324dc36", size = 10390034, upload-time = "2026-07-22T22:18:49.818Z" },
+    { url = "https://files.pythonhosted.org/packages/06/ec/5189518c7a7659c4bdcc6b1eb32c46c6f3c86b0661ffd84143d1112c7732/pandas-3.0.5-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:53730687fcd161883b24e10411c06d6a4c0f2275d2faf3bb2bc25deb4ba8007c", size = 9980065, upload-time = "2026-07-22T22:18:52.249Z" },
+    { url = "https://files.pythonhosted.org/packages/ea/f1/598503ce8d7e3c35601e0747ba288c7864baae66380725bc12f13f884dfe/pandas-3.0.5-cp314-cp314-manylinux_2_24_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:960d3ebcf249f75206899fcd2c6de53f736b7265759ced0d3e559df0b8b709b0", size = 10545532, upload-time = "2026-07-22T22:18:54.813Z" },
+    { url = "https://files.pythonhosted.org/packages/fa/de/ceae2adf7034e07e9910299fe412e1819c4f0dd520700a888bcb03625448/pandas-3.0.5-cp314-cp314-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:9e94c2c5ca43bd3ca32bf64d32308887b65e5f9bfd8023ea52755107a999f93b", size = 10963120, upload-time = "2026-07-22T22:18:57.42Z" },
+    { url = "https://files.pythonhosted.org/packages/66/25/86e0f4451874eb79e688deeebe3c451fec4557f8952005818d800ee8ac7e/pandas-3.0.5-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:e819dd5f62966b481a8cb649d3299ebd886a1ea91ed5a99bf7ce77c98d18ab94", size = 11563178, upload-time = "2026-07-22T22:18:59.729Z" },
+    { url = "https://files.pythonhosted.org/packages/f3/45/8643daa3b4147e433adfcccefdd0380d3aad79d86b15d8999730fe1944d5/pandas-3.0.5-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:3c5ed2e7c06e91d340dfd091d7934f9bc82e4a36b95f647f090b9d1c9ac649da", size = 12028708, upload-time = "2026-07-22T22:19:02.164Z" },
+    { url = "https://files.pythonhosted.org/packages/96/58/ad979ae617615576e8aafd569c9d4b62f1191d896e38f51d66ba06f3b89a/pandas-3.0.5-cp314-cp314-win_amd64.whl", hash = "sha256:cd8f7c6dc98527058ee6264219343f5392240a6f1bfa654fc5d79023020d0c92", size = 9951806, upload-time = "2026-07-22T22:19:04.596Z" },
+    { url = "https://files.pythonhosted.org/packages/69/32/7ac03886b304049a9d2625ee88f59af760d8a93bd30ed9239bce7b9869a8/pandas-3.0.5-cp314-cp314-win_arm64.whl", hash = "sha256:5183427f5a8156d480f30333777bc978be93650a49a7c01db26adffe95b31e85", size = 9238297, upload-time = "2026-07-22T22:19:06.836Z" },
+    { url = "https://files.pythonhosted.org/packages/be/ed/1d1f2ee5547d5167face2376d11c8b2a4c7bfff5a416ee7a9046891fab1e/pandas-3.0.5-cp314-cp314t-macosx_10_15_x86_64.whl", hash = "sha256:303da736987d481074ca720ada325f8bd80c64ebc2d45ed79b29df3aaa4a26ca", size = 10849690, upload-time = "2026-07-22T22:19:09.391Z" },
+    { url = "https://files.pythonhosted.org/packages/57/55/17e17152e98fbb0c4b1e562bc65387a2f20a80db0f4a86bf8d3a0e4248d4/pandas-3.0.5-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:3b2801bbb049d0136f6c213eae02b5fca969384fc2064dd728d8620552aa49da", size = 10509945, upload-time = "2026-07-22T22:19:11.773Z" },
+    { url = "https://files.pythonhosted.org/packages/88/90/817d44dbf83facf9556f33576d9af0a241981e7bb5c00606c0bcb5df8dda/pandas-3.0.5-cp314-cp314t-manylinux_2_24_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:cce3a9d11d2b1f82c69a27ec1f4948a170e2c403c4bbfa8cca62e3fdebe2ef3a", size = 10392197, upload-time = "2026-07-22T22:19:14.024Z" },
+    { url = "https://files.pythonhosted.org/packages/f1/da/889f00c0a6f5aa1545add70abbf01502dff87ab577adb855bd631c54d2f2/pandas-3.0.5-cp314-cp314t-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:ef01af4d8dc6cd2c8d6c7736f149574ef93fe043811eeb5e445f2647154b5040", size = 10862726, upload-time = "2026-07-22T22:19:16.351Z" },
+    { url = "https://files.pythonhosted.org/packages/bc/98/f1e934fb3c98fce859c6147c6785816c7b5b9ab7821115c5d8c4de9842b9/pandas-3.0.5-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:e2759e890db96dfcffdbd9b86c3c2cb6afaf58def482820317e06163ec1066cd", size = 11414864, upload-time = "2026-07-22T22:19:18.981Z" },
+    { url = "https://files.pythonhosted.org/packages/fe/be/d448af7d657d82e1888dd8551f79c6d6fb161080b5b9752d84d910ec2319/pandas-3.0.5-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:b58b1b39d46a5862e3fb18f50d1a201398619d16a0f9f73f57eea5583cf0e63c", size = 11925105, upload-time = "2026-07-22T22:19:21.515Z" },
+    { url = "https://files.pythonhosted.org/packages/29/c1/ccb4238212c8c4f496c584f3044d94e0c030ed8e1d68999db46c91c2242f/pandas-3.0.5-cp314-cp314t-win_amd64.whl", hash = "sha256:1c10461f6eeb35d8f05b6184c65c8b9991663b66c46b1d559b682cb34ae7c6ea", size = 10387612, upload-time = "2026-07-22T22:19:24.257Z" },
+    { url = "https://files.pythonhosted.org/packages/d2/cf/6a51b2c38980e04c279fd2fa908a1b0982064e860444acfca4ec2e2c8359/pandas-3.0.5-cp314-cp314t-win_arm64.whl", hash = "sha256:3c5015fd1730fbf883647e88068176c839c102cea883ba1769a6f4593bfc1f8c", size = 9509776, upload-time = "2026-07-22T22:19:26.694Z" },
+]
+
+[[package]]
+name = "pandas-stubs"
+version = "3.0.5.260730"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "numpy" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/c2/d2/dea4a3a56b7b5f69c5fbca9f14625fcf28e1a39a657e9833d4a10bcac593/pandas_stubs-3.0.5.260730.tar.gz", hash = "sha256:f70a232c57d93a5a2c81f8a53953e10891a5374bc92652277deb325e2e4d0ff3", size = 114631, upload-time = "2026-07-30T14:31:42.271Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/60/c2/959caec5c46f484b5f8bb6def4b0cf7a45ba6acda26f12b75142d98cc5ae/pandas_stubs-3.0.5.260730-py3-none-any.whl", hash = "sha256:60e90e3e1eda6937e337e243cbe6217e151c11137cd7eddf832af537c7310bfd", size = 174807, upload-time = "2026-07-30T14:31:41.17Z" },
 ]
 
 [[package]]
@@ -978,7 +1081,7 @@ wheels = [
 
 [[package]]
 name = "pre-commit"
-version = "4.6.0"
+version = "4.6.2"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "cfgv" },
@@ -987,9 +1090,9 @@ dependencies = [
     { name = "pyyaml" },
     { name = "virtualenv" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/8e/22/2de9408ac81acbb8a7d05d4cc064a152ccf33b3d480ebe0cd292153db239/pre_commit-4.6.0.tar.gz", hash = "sha256:718d2208cef53fdc38206e40524a6d4d9576d103eb16f0fec11c875e7716e9d9", size = 198525, upload-time = "2026-04-21T20:31:41.613Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/74/89/1f3e8e1fc3e97de0fa963495832f581f025f29471602a309e48808244292/pre_commit-4.6.2.tar.gz", hash = "sha256:8f5d7bfb021ecdbcd9d49d89847082dd24172ccde534390081a679ad046e2441", size = 198670, upload-time = "2026-08-10T22:07:18.421Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/80/6e/4b28b62ecb6aae56769c34a8ff1d661473ec1e9519e2d5f8b2c150086b26/pre_commit-4.6.0-py2.py3-none-any.whl", hash = "sha256:e2cf246f7299edcabcf15f9b0571fdce06058527f0a06535068a86d38089f29b", size = 226472, upload-time = "2026-04-21T20:31:40.092Z" },
+    { url = "https://files.pythonhosted.org/packages/45/e2/bbb7129c9e7999a6b8ee9cca3b66486c25c423ab5a75f34071798b74ce94/pre_commit-4.6.2-py2.py3-none-any.whl", hash = "sha256:e2dde9a75d3bce11bd3831c26d134df00a2803c1d818be6a0383c3dcda25dc4e", size = 226202, upload-time = "2026-08-10T22:07:16.942Z" },
 ]
 
 [[package]]
@@ -1053,7 +1156,7 @@ wheels = [
 
 [[package]]
 name = "pydantic"
-version = "2.13.3"
+version = "2.13.4"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "annotated-types" },
@@ -1061,9 +1164,9 @@ dependencies = [
     { name = "typing-extensions" },
     { name = "typing-inspection" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/d9/e4/40d09941a2cebcb20609b86a559817d5b9291c49dd6f8c87e5feffbe703a/pydantic-2.13.3.tar.gz", hash = "sha256:af09e9d1d09f4e7fe37145c1f577e1d61ceb9a41924bf0094a36506285d0a84d", size = 844068, upload-time = "2026-04-20T14:46:43.632Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/18/a5/b60d21ac674192f8ab0ba4e9fd860690f9b4a6e51ca5df118733b487d8d6/pydantic-2.13.4.tar.gz", hash = "sha256:c40756b57adaa8b1efeeced5c196f3f3b7c435f90e84ea7f443901bec8099ef6", size = 844775, upload-time = "2026-05-06T13:43:05.343Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/f3/0a/fd7d723f8f8153418fb40cf9c940e82004fce7e987026b08a68a36dd3fe7/pydantic-2.13.3-py3-none-any.whl", hash = "sha256:6db14ac8dfc9a1e57f87ea2c0de670c251240f43cb0c30a5130e9720dc612927", size = 471981, upload-time = "2026-04-20T14:46:41.402Z" },
+    { url = "https://files.pythonhosted.org/packages/fd/7b/122376b1fd3c62c1ed9dc80c931ace4844b3c55407b6fb2d199377c9736f/pydantic-2.13.4-py3-none-any.whl", hash = "sha256:45a282cde31d808236fd7ea9d919b128653c8b38b393d1c4ab335c62924d9aba", size = 472262, upload-time = "2026-05-06T13:43:02.641Z" },
 ]
 
 [package.optional-dependencies]
@@ -1073,43 +1176,43 @@ email = [
 
 [[package]]
 name = "pydantic-core"
-version = "2.46.3"
+version = "2.46.4"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "typing-extensions" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/2a/ef/f7abb56c49382a246fd2ce9c799691e3c3e7175ec74b14d99e798bcddb1a/pydantic_core-2.46.3.tar.gz", hash = "sha256:41c178f65b8c29807239d47e6050262eb6bf84eb695e41101e62e38df4a5bc2c", size = 471412, upload-time = "2026-04-20T14:40:56.672Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/9d/56/921726b776ace8d8f5db44c4ef961006580d91dc52b803c489fafd1aa249/pydantic_core-2.46.4.tar.gz", hash = "sha256:62f875393d7f270851f20523dd2e29f082bcc82292d66db2b64ea71f64b6e1c1", size = 471464, upload-time = "2026-05-06T13:37:06.98Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/7f/db/a7bcb4940183fda36022cd18ba8dd12f2dff40740ec7b58ce7457befa416/pydantic_core-2.46.3-cp314-cp314-macosx_10_12_x86_64.whl", hash = "sha256:afa3aa644f74e290cdede48a7b0bee37d1c35e71b05105f6b340d484af536d9b", size = 2097614, upload-time = "2026-04-20T14:44:38.374Z" },
-    { url = "https://files.pythonhosted.org/packages/24/35/e4066358a22e3e99519db370494c7528f5a2aa1367370e80e27e20283543/pydantic_core-2.46.3-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:ced3310e51aa425f7f77da8bbbb5212616655bedbe82c70944320bc1dbe5e018", size = 1951896, upload-time = "2026-04-20T14:40:53.996Z" },
-    { url = "https://files.pythonhosted.org/packages/87/92/37cf4049d1636996e4b888c05a501f40a43ff218983a551d57f9d5e14f0d/pydantic_core-2.46.3-cp314-cp314-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:e29908922ce9da1a30b4da490bd1d3d82c01dcfdf864d2a74aacee674d0bfa34", size = 1979314, upload-time = "2026-04-20T14:41:49.446Z" },
-    { url = "https://files.pythonhosted.org/packages/d8/36/9ff4d676dfbdfb2d591cf43f3d90ded01e15b1404fd101180ed2d62a2fd3/pydantic_core-2.46.3-cp314-cp314-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:0c9ff69140423eea8ed2d5477df3ba037f671f5e897d206d921bc9fdc39613e7", size = 2056133, upload-time = "2026-04-20T14:42:23.574Z" },
-    { url = "https://files.pythonhosted.org/packages/bc/f0/405b442a4d7ba855b06eec8b2bf9c617d43b8432d099dfdc7bf999293495/pydantic_core-2.46.3-cp314-cp314-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:b675ab0a0d5b1c8fdb81195dc5bcefea3f3c240871cdd7ff9a2de8aa50772eb2", size = 2228726, upload-time = "2026-04-20T14:44:22.816Z" },
-    { url = "https://files.pythonhosted.org/packages/e7/f8/65cd92dd5a0bd89ba277a98ecbfaf6fc36bbd3300973c7a4b826d6ab1391/pydantic_core-2.46.3-cp314-cp314-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:0087084960f209a9a4af50ecd1fb063d9ad3658c07bb81a7a53f452dacbfb2ba", size = 2301214, upload-time = "2026-04-20T14:44:48.792Z" },
-    { url = "https://files.pythonhosted.org/packages/fd/86/ef96a4c6e79e7a2d0410826a68fbc0eccc0fd44aa733be199d5fcac3bb87/pydantic_core-2.46.3-cp314-cp314-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:ed42e6cc8e1b0e2b9b96e2276bad70ae625d10d6d524aed0c93de974ae029f9f", size = 2099927, upload-time = "2026-04-20T14:41:40.196Z" },
-    { url = "https://files.pythonhosted.org/packages/6d/53/269caf30e0096e0a8a8f929d1982a27b3879872cca2d917d17c2f9fdf4fe/pydantic_core-2.46.3-cp314-cp314-manylinux_2_31_riscv64.whl", hash = "sha256:f1771ce258afb3e4201e67d154edbbae712a76a6081079fe247c2f53c6322c22", size = 2128789, upload-time = "2026-04-20T14:41:15.868Z" },
-    { url = "https://files.pythonhosted.org/packages/00/b0/1a6d9b6a587e118482910c244a1c5acf4d192604174132efd12bf0ac486f/pydantic_core-2.46.3-cp314-cp314-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:a7610b6a5242a6c736d8ad47fd5fff87fcfe8f833b281b1c409c3d6835d9227f", size = 2173815, upload-time = "2026-04-20T14:44:25.152Z" },
-    { url = "https://files.pythonhosted.org/packages/87/56/e7e00d4041a7e62b5a40815590114db3b535bf3ca0bf4dca9f16cef25246/pydantic_core-2.46.3-cp314-cp314-musllinux_1_1_aarch64.whl", hash = "sha256:ff5e7783bcc5476e1db448bf268f11cb257b1c276d3e89f00b5727be86dd0127", size = 2181608, upload-time = "2026-04-20T14:41:28.933Z" },
-    { url = "https://files.pythonhosted.org/packages/e8/22/4bd23c3d41f7c185d60808a1de83c76cf5aeabf792f6c636a55c3b1ec7f9/pydantic_core-2.46.3-cp314-cp314-musllinux_1_1_armv7l.whl", hash = "sha256:9d2e32edcc143bc01e95300671915d9ca052d4f745aa0a49c48d4803f8a85f2c", size = 2326968, upload-time = "2026-04-20T14:42:03.962Z" },
-    { url = "https://files.pythonhosted.org/packages/24/ac/66cd45129e3915e5ade3b292cb3bc7fd537f58f8f8dbdaba6170f7cabb74/pydantic_core-2.46.3-cp314-cp314-musllinux_1_1_x86_64.whl", hash = "sha256:6e42d83d1c6b87fa56b521479cff237e626a292f3b31b6345c15a99121b454c1", size = 2369842, upload-time = "2026-04-20T14:41:35.52Z" },
-    { url = "https://files.pythonhosted.org/packages/a2/51/dd4248abb84113615473aa20d5545b7c4cd73c8644003b5259686f93996c/pydantic_core-2.46.3-cp314-cp314-win32.whl", hash = "sha256:07bc6d2a28c3adb4f7c6ae46aa4f2d2929af127f587ed44057af50bf1ce0f505", size = 1959661, upload-time = "2026-04-20T14:41:00.042Z" },
-    { url = "https://files.pythonhosted.org/packages/20/eb/59980e5f1ae54a3b86372bd9f0fa373ea2d402e8cdcd3459334430f91e91/pydantic_core-2.46.3-cp314-cp314-win_amd64.whl", hash = "sha256:8940562319bc621da30714617e6a7eaa6b98c84e8c685bcdc02d7ed5e7c7c44e", size = 2071686, upload-time = "2026-04-20T14:43:16.471Z" },
-    { url = "https://files.pythonhosted.org/packages/8c/db/1cf77e5247047dfee34bc01fa9bca134854f528c8eb053e144298893d370/pydantic_core-2.46.3-cp314-cp314-win_arm64.whl", hash = "sha256:5dcbbcf4d22210ced8f837c96db941bdb078f419543472aca5d9a0bb7cddc7df", size = 2026907, upload-time = "2026-04-20T14:43:31.732Z" },
-    { url = "https://files.pythonhosted.org/packages/57/c0/b3df9f6a543276eadba0a48487b082ca1f201745329d97dbfa287034a230/pydantic_core-2.46.3-cp314-cp314t-macosx_10_12_x86_64.whl", hash = "sha256:d0fe3dce1e836e418f912c1ad91c73357d03e556a4d286f441bf34fed2dbeecf", size = 2095047, upload-time = "2026-04-20T14:42:37.982Z" },
-    { url = "https://files.pythonhosted.org/packages/66/57/886a938073b97556c168fd99e1a7305bb363cd30a6d2c76086bf0587b32a/pydantic_core-2.46.3-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:9ce92e58abc722dac1bf835a6798a60b294e48eb0e625ec9fd994b932ac5feee", size = 1934329, upload-time = "2026-04-20T14:43:49.655Z" },
-    { url = "https://files.pythonhosted.org/packages/0b/7c/b42eaa5c34b13b07ecb51da21761297a9b8eb43044c864a035999998f328/pydantic_core-2.46.3-cp314-cp314t-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a03e6467f0f5ab796a486146d1b887b2dc5e5f9b3288898c1b1c3ad974e53e4a", size = 1974847, upload-time = "2026-04-20T14:42:10.737Z" },
-    { url = "https://files.pythonhosted.org/packages/e6/9b/92b42db6543e7de4f99ae977101a2967b63122d4b6cf7773812da2d7d5b5/pydantic_core-2.46.3-cp314-cp314t-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:2798b6ba041b9d70acfb9071a2ea13c8456dd1e6a5555798e41ba7b0790e329c", size = 2041742, upload-time = "2026-04-20T14:40:44.262Z" },
-    { url = "https://files.pythonhosted.org/packages/0f/19/46fbe1efabb5aa2834b43b9454e70f9a83ad9c338c1291e48bdc4fecf167/pydantic_core-2.46.3-cp314-cp314t-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:9be3e221bdc6d69abf294dcf7aff6af19c31a5cdcc8f0aa3b14be29df4bd03b1", size = 2236235, upload-time = "2026-04-20T14:41:27.307Z" },
-    { url = "https://files.pythonhosted.org/packages/77/da/b3f95bc009ad60ec53120f5d16c6faa8cabdbe8a20d83849a1f2b8728148/pydantic_core-2.46.3-cp314-cp314t-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:f13936129ce841f2a5ddf6f126fea3c43cd128807b5a59588c37cf10178c2e64", size = 2282633, upload-time = "2026-04-20T14:44:33.271Z" },
-    { url = "https://files.pythonhosted.org/packages/cc/6e/401336117722e28f32fb8220df676769d28ebdf08f2f4469646d404c43a3/pydantic_core-2.46.3-cp314-cp314t-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:28b5f2ef03416facccb1c6ef744c69793175fd27e44ef15669201601cf423acb", size = 2109679, upload-time = "2026-04-20T14:44:41.065Z" },
-    { url = "https://files.pythonhosted.org/packages/fc/53/b289f9bc8756a32fe718c46f55afaeaf8d489ee18d1a1e7be1db73f42cc4/pydantic_core-2.46.3-cp314-cp314t-manylinux_2_31_riscv64.whl", hash = "sha256:830d1247d77ad23852314f069e9d7ddafeec5f684baf9d7e7065ed46a049c4e6", size = 2108342, upload-time = "2026-04-20T14:42:50.144Z" },
-    { url = "https://files.pythonhosted.org/packages/10/5b/8292fc7c1f9111f1b2b7c1b0dcf1179edcd014fc3ea4517499f50b829d71/pydantic_core-2.46.3-cp314-cp314t-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:d0793c90c1a3c74966e7975eaef3ed30ebdff3260a0f815a62a22adc17e4c01c", size = 2157208, upload-time = "2026-04-20T14:42:08.133Z" },
-    { url = "https://files.pythonhosted.org/packages/2b/9e/f80044e9ec07580f057a89fc131f78dda7a58751ddf52bbe05eaf31db50f/pydantic_core-2.46.3-cp314-cp314t-musllinux_1_1_aarch64.whl", hash = "sha256:d2d0aead851b66f5245ec0c4fb2612ef457f8bbafefdf65a2bf9d6bac6140f47", size = 2167237, upload-time = "2026-04-20T14:42:25.412Z" },
-    { url = "https://files.pythonhosted.org/packages/f8/84/6781a1b037f3b96be9227edbd1101f6d3946746056231bf4ac48cdff1a8d/pydantic_core-2.46.3-cp314-cp314t-musllinux_1_1_armv7l.whl", hash = "sha256:2f40e4246676beb31c5ce77c38a55ca4e465c6b38d11ea1bd935420568e0b1ab", size = 2312540, upload-time = "2026-04-20T14:40:40.313Z" },
-    { url = "https://files.pythonhosted.org/packages/3e/db/19c0839feeb728e7df03255581f198dfdf1c2aeb1e174a8420b63c5252e5/pydantic_core-2.46.3-cp314-cp314t-musllinux_1_1_x86_64.whl", hash = "sha256:cf489cf8986c543939aeee17a09c04d6ffb43bfef8ca16fcbcc5cfdcbed24dba", size = 2369556, upload-time = "2026-04-20T14:41:09.427Z" },
-    { url = "https://files.pythonhosted.org/packages/e0/15/3228774cb7cd45f5f721ddf1b2242747f4eb834d0c491f0c02d606f09fed/pydantic_core-2.46.3-cp314-cp314t-win32.whl", hash = "sha256:ffe0883b56cfc05798bf994164d2b2ff03efe2d22022a2bb080f3b626176dd56", size = 1949756, upload-time = "2026-04-20T14:41:25.717Z" },
-    { url = "https://files.pythonhosted.org/packages/b8/2a/c79cf53fd91e5a87e30d481809f52f9a60dd221e39de66455cf04deaad37/pydantic_core-2.46.3-cp314-cp314t-win_amd64.whl", hash = "sha256:706d9d0ce9cf4593d07270d8e9f53b161f90c57d315aeec4fb4fd7a8b10240d8", size = 2051305, upload-time = "2026-04-20T14:43:18.627Z" },
-    { url = "https://files.pythonhosted.org/packages/0b/db/d8182a7f1d9343a032265aae186eb063fe26ca4c40f256b21e8da4498e89/pydantic_core-2.46.3-cp314-cp314t-win_arm64.whl", hash = "sha256:77706aeb41df6a76568434701e0917da10692da28cb69d5fb6919ce5fdb07374", size = 2026310, upload-time = "2026-04-20T14:41:01.778Z" },
+    { url = "https://files.pythonhosted.org/packages/8d/74/228a26ddad29c6672b805d9fd78e8d251cd04004fa7eed0e622096cd0250/pydantic_core-2.46.4-cp314-cp314-macosx_10_12_x86_64.whl", hash = "sha256:428e04521a40150c85216fc8b85e8d39fece235a9cf5e383761238c7fa9b96fb", size = 2102079, upload-time = "2026-05-06T13:38:41.019Z" },
+    { url = "https://files.pythonhosted.org/packages/ad/1f/8970b150a4b4365623ae00fc88603491f763c627311ae8031e3111356d6e/pydantic_core-2.46.4-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:23ace664830ee0bfe014a0c7bc248b1f7f25ed7ad103852c317624a1083af462", size = 1952179, upload-time = "2026-05-06T13:36:59.812Z" },
+    { url = "https://files.pythonhosted.org/packages/95/30/5211a831ae054928054b2f79731661087a2bc5c01e825c672b3a4a8f1b3e/pydantic_core-2.46.4-cp314-cp314-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ce5c1d2a8b27468f433ca974829c44060b8097eedc39933e3c206a90ee49c4a9", size = 1978926, upload-time = "2026-05-06T13:37:39.933Z" },
+    { url = "https://files.pythonhosted.org/packages/57/e9/689668733b1eb67adeef047db3c2e8788fcf65a7fd9c9e2b46b7744fe245/pydantic_core-2.46.4-cp314-cp314-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:7283d57845ecf5a163403eb0702dfc220cc4fbdd18919cb5ccea4f95ee1cdab4", size = 2046785, upload-time = "2026-05-06T13:38:01.995Z" },
+    { url = "https://files.pythonhosted.org/packages/60/d9/6715260422ff50a2109878fd24d948a6c3446bb2664f34ee78cd972b3acd/pydantic_core-2.46.4-cp314-cp314-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:8daafc69c93ee8a0204506a3b6b30f586ef54028f52aeeeb5c4cfc5184fd5914", size = 2228733, upload-time = "2026-05-06T13:40:50.371Z" },
+    { url = "https://files.pythonhosted.org/packages/18/ae/fdb2f64316afca925640f8e70bb1a564b0ec2721c1389e25b8eb4bf9a299/pydantic_core-2.46.4-cp314-cp314-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:cd2213145bcc2ba85884d0ac63d222fece9209678f77b9b4d76f054c561adb28", size = 2307534, upload-time = "2026-05-06T13:37:21.531Z" },
+    { url = "https://files.pythonhosted.org/packages/89/1d/8eff589b45bb8190a9d12c49cfad0f176a5cbd1534908a6b5125e2886239/pydantic_core-2.46.4-cp314-cp314-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7a5f930472650a82629163023e630d160863fce524c616f4e5186e5de9d9a49b", size = 2099732, upload-time = "2026-05-06T13:39:31.942Z" },
+    { url = "https://files.pythonhosted.org/packages/06/d5/ee5a3366637fee41dee51a1fc91562dcf12ddbc68fda34e6b253da2324bb/pydantic_core-2.46.4-cp314-cp314-manylinux_2_31_riscv64.whl", hash = "sha256:c1b3f518abeca3aa13c712fd202306e145abf59a18b094a6bafb2d2bbf59192c", size = 2129627, upload-time = "2026-05-06T13:37:25.033Z" },
+    { url = "https://files.pythonhosted.org/packages/94/33/2414be571d2c6a6c4d08be21f9292b6d3fdb08949a97b6dfe985017821db/pydantic_core-2.46.4-cp314-cp314-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:1a7dd0b3ee80d90150e3495a3a13ac34dbcbfd4f012996a6a1d8900e91b5c0fb", size = 2179141, upload-time = "2026-05-06T13:37:14.046Z" },
+    { url = "https://files.pythonhosted.org/packages/7b/79/7daa95be995be0eecc4cf75064cb33f9bbbfe3fe0158caf2f0d4a996a5c7/pydantic_core-2.46.4-cp314-cp314-musllinux_1_1_aarch64.whl", hash = "sha256:3fb702cd90b0446a3a1c5e470bfa0dd23c0233b676a9099ddcc964fa6ca13898", size = 2184325, upload-time = "2026-05-06T13:36:53.615Z" },
+    { url = "https://files.pythonhosted.org/packages/9f/cb/d0a382f5c0de8a222dc61c65348e0ce831b1f68e0a018450d31c2cace3a5/pydantic_core-2.46.4-cp314-cp314-musllinux_1_1_armv7l.whl", hash = "sha256:b8458003118a712e66286df6a707db01c52c0f52f7db8e4a38f0da1d3b94fc4e", size = 2323990, upload-time = "2026-05-06T13:40:29.971Z" },
+    { url = "https://files.pythonhosted.org/packages/05/db/d9ba624cc4a5aced1598e88c04fdbd8310c8a69b9d38b9a3d39ce3a61ed7/pydantic_core-2.46.4-cp314-cp314-musllinux_1_1_x86_64.whl", hash = "sha256:372429a130e469c9cd698925ce5fc50940b7a1336b0d82038e63d5bbc4edc519", size = 2369978, upload-time = "2026-05-06T13:37:23.027Z" },
+    { url = "https://files.pythonhosted.org/packages/f2/20/d15df15ba918c423461905802bfd2981c3af0bfa0e40d05e13edbfa48bc3/pydantic_core-2.46.4-cp314-cp314-win32.whl", hash = "sha256:85bb3611ff1802f3ee7fdd7dbff26b56f343fb432d57a4728fdd49b6ef35e2f4", size = 1966354, upload-time = "2026-05-06T13:38:03.499Z" },
+    { url = "https://files.pythonhosted.org/packages/fc/b6/6b8de4c0a7d7ab3004c439c80c5c1e0a3e8d78bbae19379b01960383d9e5/pydantic_core-2.46.4-cp314-cp314-win_amd64.whl", hash = "sha256:811ff8e9c313ab425368bcbb36e5c4ebd7108c2bbf4e4089cfbb0b01eff63fac", size = 2072238, upload-time = "2026-05-06T13:39:40.807Z" },
+    { url = "https://files.pythonhosted.org/packages/32/36/51eb763beec1f4cf59b1db243a7dcc39cbb41230f050a09b9d69faaf0a48/pydantic_core-2.46.4-cp314-cp314-win_arm64.whl", hash = "sha256:bfec22eab3c8cc2ceec0248aec886624116dc079afa027ecc8ad4a7e62010f8a", size = 2018251, upload-time = "2026-05-06T13:37:26.72Z" },
+    { url = "https://files.pythonhosted.org/packages/e8/91/855af51d625b23aa987116a19e231d2aaef9c4a415273ddc189b79a45fee/pydantic_core-2.46.4-cp314-cp314t-macosx_10_12_x86_64.whl", hash = "sha256:af8244b2bef6aaad6d92cda81372de7f8c8d36c9f0c3ea36e827c60e7d9467a0", size = 2099593, upload-time = "2026-05-06T13:39:47.682Z" },
+    { url = "https://files.pythonhosted.org/packages/fb/1b/8784a54c65edb5f49f0a14d6977cf1b209bba85a4c77445b255c2de58ab3/pydantic_core-2.46.4-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:5a4330cdbc57162e4b3aa303f588ba752257694c9c9be3e7ebb11b4aca659b5d", size = 1935226, upload-time = "2026-05-06T13:40:40.428Z" },
+    { url = "https://files.pythonhosted.org/packages/e8/e7/1955d28d1afc56dd4b3ad7cc0cf39df1b9852964cf16e5d13912756d6d6b/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:29c61fc04a3d840155ff08e475a04809278972fe6aef51e2720554e96367e34b", size = 1974605, upload-time = "2026-05-06T13:37:32.029Z" },
+    { url = "https://files.pythonhosted.org/packages/93/e2/3fedbf0ba7a22850e6e9fd78117f1c0f10f950182344d8a6c535d468fdd8/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:c50f2528cf200c5eed56faf3f4e22fcd5f38c157a8b78576e6ba3168ec35f000", size = 2030777, upload-time = "2026-05-06T13:38:55.239Z" },
+    { url = "https://files.pythonhosted.org/packages/f8/61/46be275fcaaba0b4f5b9669dd852267ce1ff616592dccf7a7845588df091/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:0cbe8b01f948de4286c74cdd6c667aceb38f5c1e26f0693b3983d9d74887c65e", size = 2236641, upload-time = "2026-05-06T13:37:08.096Z" },
+    { url = "https://files.pythonhosted.org/packages/60/db/12e93e46a8bac9988be3c016860f83293daea8c716c029c9ace279036f2f/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:617d7e2ca7dcb8c5cf6bcb8c59b8832c94b36196bbf1cbd1bfb56ed341905edd", size = 2286404, upload-time = "2026-05-06T13:40:20.221Z" },
+    { url = "https://files.pythonhosted.org/packages/e2/4a/4d8b19008f38d31c53b8219cfedc2e3d5de5fe99d90076b7e767de29274f/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7027560ee92211647d0d34e3f7cd6f50da56399d26a9c8ad0da286d3869a53f3", size = 2109219, upload-time = "2026-05-06T13:38:12.153Z" },
+    { url = "https://files.pythonhosted.org/packages/88/70/3cbc40978fefb7bb09c6708d40d4ad1a5d70fd7213c3d17f971de868ec1f/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_31_riscv64.whl", hash = "sha256:f99626688942fb746e545232e7726926f3be91b5975f8b55327665fafda991c7", size = 2110594, upload-time = "2026-05-06T13:40:02.971Z" },
+    { url = "https://files.pythonhosted.org/packages/9d/20/b8d36736216e29491125531685b2f9e61aa5b4b2599893f8268551da3338/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:fc3e9034a63de20e15e8ade85358bc6efc614008cab72898b4b4952bea0509ff", size = 2159542, upload-time = "2026-05-06T13:39:27.506Z" },
+    { url = "https://files.pythonhosted.org/packages/1d/a2/367df868eb584dacf6bf82a389272406d7178e301c4ac82545ab98bc2dd9/pydantic_core-2.46.4-cp314-cp314t-musllinux_1_1_aarch64.whl", hash = "sha256:97e7cf2be5c77b7d1a9713a05605d49460d02c6078d38d8bef3cbe323c548424", size = 2168146, upload-time = "2026-05-06T13:38:31.93Z" },
+    { url = "https://files.pythonhosted.org/packages/c1/b8/4460f77f7e201893f649a29ab355dddd3beee8a97bcb1a320db414f9a06e/pydantic_core-2.46.4-cp314-cp314t-musllinux_1_1_armv7l.whl", hash = "sha256:3bf92c5d0e00fefaab325a4d27828fe6b6e2a21848686b5b60d2d9eeb09d76c6", size = 2306309, upload-time = "2026-05-06T13:37:44.717Z" },
+    { url = "https://files.pythonhosted.org/packages/64/c4/be2639293acd87dc8ddbcec41a73cee9b2ebf996fe6d892a1a74e88ad3f7/pydantic_core-2.46.4-cp314-cp314t-musllinux_1_1_x86_64.whl", hash = "sha256:3ecbc122d18468d06ca279dc26a8c2e2d5acb10943bb35e36ae92096dc3b5565", size = 2369736, upload-time = "2026-05-06T13:37:05.645Z" },
+    { url = "https://files.pythonhosted.org/packages/30/a6/9f9f380dbb301f67023bf8f707aaa75daadf84f7152d95c410fd7e81d994/pydantic_core-2.46.4-cp314-cp314t-win32.whl", hash = "sha256:e846ae7835bf0703ae43f534ab79a867146dadd59dc9ca5c8b53d5c8f7c9ef02", size = 1955575, upload-time = "2026-05-06T13:38:51.116Z" },
+    { url = "https://files.pythonhosted.org/packages/40/1f/f1eb9eb350e795d1af8586289746f5c5677d16043040d63710e22abc43c9/pydantic_core-2.46.4-cp314-cp314t-win_amd64.whl", hash = "sha256:2108ba5c1c1eca18030634489dc544844144ee36357f2f9f780b93e7ddbb44b5", size = 2051624, upload-time = "2026-05-06T13:38:21.672Z" },
+    { url = "https://files.pythonhosted.org/packages/f6/d2/42dd53d0a85c27606f316d3aa5d2869c4e8470a5ed6dec30e4a1abe19192/pydantic_core-2.46.4-cp314-cp314t-win_arm64.whl", hash = "sha256:4fcbe087dbc2068af7eda3aa87634eba216dbda64d1ae73c8684b621d33f6596", size = 2017325, upload-time = "2026-05-06T13:40:52.723Z" },
 ]
 
 [[package]]
@@ -1127,16 +1230,16 @@ wheels = [
 
 [[package]]
 name = "pydantic-settings"
-version = "2.14.0"
+version = "2.15.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "pydantic" },
     { name = "python-dotenv" },
     { name = "typing-inspection" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/42/98/c8345dccdc31de4228c039a98f6467a941e39558da41c1744fbe29fa5666/pydantic_settings-2.14.0.tar.gz", hash = "sha256:24285fd4b0e0c06507dd9fdfd331ee23794305352aaec8fc4eb92d4047aeb67d", size = 235709, upload-time = "2026-04-20T13:37:40.293Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/68/ca/31c57507b13119d7d3cfa1576dad2911a4861e3be07b579395f4e9d393f9/pydantic_settings-2.15.0.tar.gz", hash = "sha256:694b793e84f766ba76a90ebdefc01d0a9a045dab0382bee70393da93712ad117", size = 261253, upload-time = "2026-08-07T09:24:57.419Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/01/dd/bebff3040138f00ae8a102d426b27349b9a49acc310fcae7f92112d867e3/pydantic_settings-2.14.0-py3-none-any.whl", hash = "sha256:fc8d5d692eb7092e43c8647c1c35a3ecd00e040fcf02ed86f4cb5458ca62182e", size = 60940, upload-time = "2026-04-20T13:37:38.586Z" },
+    { url = "https://files.pythonhosted.org/packages/30/a4/2bffa9f8e804325a09867f0e9d30795c80ea9f8d62560bd1b6ad6220eb2f/pydantic_settings-2.15.0-py3-none-any.whl", hash = "sha256:0ba092c291c94baceb5eff768aa0d56400a457585bc0175925a5a5510303da42", size = 69413, upload-time = "2026-08-07T09:24:55.839Z" },
 ]
 
 [[package]]
@@ -1150,11 +1253,11 @@ wheels = [
 
 [[package]]
 name = "pyjwt"
-version = "2.12.1"
+version = "2.13.0"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/c2/27/a3b6e5bf6ff856d2509292e95c8f57f0df7017cf5394921fc4e4ef40308a/pyjwt-2.12.1.tar.gz", hash = "sha256:c74a7a2adf861c04d002db713dd85f84beb242228e671280bf709d765b03672b", size = 102564, upload-time = "2026-03-13T19:27:37.25Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/3b/81/58d0ac84e1ef3a3843791d6954d94c0b33d526c75eeb1efbce9d0a4c4077/pyjwt-2.13.0.tar.gz", hash = "sha256:41571c89ca91598c79e8ef18a2d07367d4810fbbd6f637794879baf1b7703423", size = 107515, upload-time = "2026-05-21T19:54:36.618Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/e5/7a/8dd906bd22e79e47397a61742927f6747fe93242ef86645ee9092e610244/pyjwt-2.12.1-py3-none-any.whl", hash = "sha256:28ca37c070cad8ba8cd9790cd940535d40274d22f80ab87f3ac6a713e6e8454c", size = 29726, upload-time = "2026-03-13T19:27:35.677Z" },
+    { url = "https://files.pythonhosted.org/packages/a3/5e/ecf12fdb62546d64385c158514e9b2b671f7832108ef2ecd2020ce0af2d1/pyjwt-2.13.0-py3-none-any.whl", hash = "sha256:66adcc2aff09b3f1bbd95fc1e1577df8ac8723c978552fd43304c8a290ac5728", size = 31274, upload-time = "2026-05-21T19:54:35.362Z" },
 ]
 
 [[package]]
@@ -1171,20 +1274,20 @@ wheels = [
 
 [[package]]
 name = "python-dotenv"
-version = "1.2.2"
+version = "1.2.3"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/82/ed/0301aeeac3e5353ef3d94b6ec08bbcabd04a72018415dcb29e588514bba8/python_dotenv-1.2.2.tar.gz", hash = "sha256:2c371a91fbd7ba082c2c1dc1f8bf89ca22564a087c2c287cd9b662adde799cf3", size = 50135, upload-time = "2026-03-01T16:00:26.196Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/6a/53/ed9d74092561d4b01a2ef1349d52cdbc135e526c245f366b089cfca6de49/python_dotenv-1.2.3.tar.gz", hash = "sha256:a20a594dabeaa385725aa239d5244871c143ecb356add8a20fcf23773a6c3a35", size = 58945, upload-time = "2026-08-16T16:54:54.067Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/0b/d7/1959b9648791274998a9c3526f6d0ec8fd2233e4d4acce81bbae76b44b2a/python_dotenv-1.2.2-py3-none-any.whl", hash = "sha256:1d8214789a24de455a8b8bd8ae6fe3c6b69a5e3d64aa8a8e5d68e694bbcb285a", size = 22101, upload-time = "2026-03-01T16:00:25.09Z" },
+    { url = "https://files.pythonhosted.org/packages/0d/17/c5c6b53ddc18f297992099b3d9ec16c855c0ccc83263a21fe4d1c625ec6c/python_dotenv-1.2.3-py3-none-any.whl", hash = "sha256:904552145e8bfed22162c09dab1c2b9b54fefa7b23ba780f4f26ca0316b0f0d9", size = 22780, upload-time = "2026-08-16T16:54:52.473Z" },
 ]
 
 [[package]]
 name = "python-multipart"
-version = "0.0.27"
+version = "0.0.32"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/69/9b/f23807317a113dc36e74e75eb265a02dd1a4d9082abc3c1064acd22997c4/python_multipart-0.0.27.tar.gz", hash = "sha256:9870a6a8c5a20a5bf4f07c017bd1489006ff8836cff097b6933355ee2b49b602", size = 44043, upload-time = "2026-04-27T10:51:26.649Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/5b/42/55c32bb9b12693c092ad250a0e82edb5b31ddeda6eb772de5f308b3804ad/python_multipart-0.0.32.tar.gz", hash = "sha256:be54b7f3fa167bb83e4fcd936b887b708f4e57fe75911c02aebf53efaf8d938e", size = 46881, upload-time = "2026-06-04T16:18:58.647Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/99/78/4126abcbdbd3c559d43e0db7f7b9173fc6befe45d39a2856cc0b8ec2a5a6/python_multipart-0.0.27-py3-none-any.whl", hash = "sha256:6fccfad17a27334bd0193681b369f476eda3409f17381a2d65aa7df3f7275645", size = 29254, upload-time = "2026-04-27T10:51:24.997Z" },
+    { url = "https://files.pythonhosted.org/packages/e1/04/e8135ebd1ad02c56ec633277529b2602ff99ff634be76cdba5744cf554fd/python_multipart-0.0.32-py3-none-any.whl", hash = "sha256:ff6d3f776f16878c894e52e107296ffc890e913c611b1a4ec6c44e2821fe2e23", size = 30042, upload-time = "2026-06-04T16:18:57.319Z" },
 ]
 
 [[package]]
@@ -1270,21 +1373,6 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/3a/45/affdf2d851b42adf3d13fc5b3b059372e9bd299371fd84cf5723c45871fa/regex-2026.2.19-cp314-cp314t-win_arm64.whl", hash = "sha256:a09ae430e94c049dc6957f6baa35ee3418a3a77f3c12b6e02883bd80a2b679b0", size = 274932, upload-time = "2026-02-19T19:03:45.488Z" },
 ]
 
-[[package]]
-name = "requests"
-version = "2.32.5"
-source = { registry = "https://pypi.org/simple" }
-dependencies = [
-    { name = "certifi" },
-    { name = "charset-normalizer" },
-    { name = "idna" },
-    { name = "urllib3" },
-]
-sdist = { url = "https://files.pythonhosted.org/packages/c9/74/b3ff8e6c8446842c3f5c837e9c3dfcfe2018ea6ecef224c710c85ef728f4/requests-2.32.5.tar.gz", hash = "sha256:dbba0bac56e100853db0ea71b82b4dfd5fe2bf6d3754a8893c3af500cec7d7cf", size = 134517, upload-time = "2025-08-18T20:46:02.573Z" }
-wheels = [
-    { url = "https://files.pythonhosted.org/packages/1e/db/4254e3eabe8020b458f1a747140d32277ec7a271daf1d235b70dc0b4e6e3/requests-2.32.5-py3-none-any.whl", hash = "sha256:2462f94637a34fd532264295e186976db0f5d453d1cdd31473c85a6a161affb6", size = 64738, upload-time = "2025-08-18T20:46:00.542Z" },
-]
-
 [[package]]
 name = "rich"
 version = "14.3.3"
@@ -1361,35 +1449,36 @@ wheels = [
 
 [[package]]
 name = "ruff"
-version = "0.15.12"
+version = "0.16.4"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/99/43/3291f1cc9106f4c63bdce7a8d0df5047fe8422a75b091c16b5e9355e0b11/ruff-0.15.12.tar.gz", hash = "sha256:ecea26adb26b4232c0c2ca19ccbc0083a68344180bba2a600605538ce51a40a6", size = 4643852, upload-time = "2026-04-24T18:17:14.305Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/00/8f/d8074b1f25e003164087a8bfe79a0f1a3945135764dbb6aaab04103dcaf9/ruff-0.16.4.tar.gz", hash = "sha256:13171aa9d9af2240ee3504e639de73122c67e74036de5ba2e1d01422cd17e3dc", size = 4899731, upload-time = "2026-08-20T17:43:59.196Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/c3/6e/e78ffb61d4686f3d96ba3df2c801161843746dcbcbb17a1e927d4829312b/ruff-0.15.12-py3-none-linux_armv6l.whl", hash = "sha256:f86f176e188e94d6bdbc09f09bfd9dc729059ad93d0e7390b5a73efe19f8861c", size = 10640713, upload-time = "2026-04-24T18:17:22.841Z" },
-    { url = "https://files.pythonhosted.org/packages/ae/08/a317bc231fb9e7b93e4ef3089501e51922ff88d6936ce5cf870c4fe55419/ruff-0.15.12-py3-none-macosx_10_12_x86_64.whl", hash = "sha256:e3bcd123364c3770b8e1b7baaf343cc99a35f197c5c6e8af79015c666c423a6c", size = 11069267, upload-time = "2026-04-24T18:17:30.105Z" },
-    { url = "https://files.pythonhosted.org/packages/aa/a4/f828e9718d3dce1f5f11c39c4f65afd32783c8b2aebb2e3d259e492c47bd/ruff-0.15.12-py3-none-macosx_11_0_arm64.whl", hash = "sha256:fe87510d000220aa1ed530d4448a7c696a0cae1213e5ec30e5874287b66557b5", size = 10397182, upload-time = "2026-04-24T18:17:07.177Z" },
-    { url = "https://files.pythonhosted.org/packages/71/e0/3310fc6d1b5e1fdea22bf3b1b807c7e187b581021b0d7d4514cccdb5fb71/ruff-0.15.12-py3-none-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:84a1630093121375a3e2a95b4a6dc7b59e2b4ee76216e32d81aae550a832d002", size = 10758012, upload-time = "2026-04-24T18:16:55.759Z" },
-    { url = "https://files.pythonhosted.org/packages/11/c1/a606911aee04c324ddaa883ae418f3569792fd3c4a10c50e0dd0a2311e1e/ruff-0.15.12-py3-none-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:fb129f40f114f089ebe0ca56c0d251cf2061b17651d464bb6478dc01e69f11f5", size = 10447479, upload-time = "2026-04-24T18:16:51.677Z" },
-    { url = "https://files.pythonhosted.org/packages/9d/68/4201e8444f0894f21ab4aeeaee68aa4f10b51613514a20d80bd628d57e88/ruff-0.15.12-py3-none-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:b0c862b172d695db7598426b8af465e7e9ac00a3ea2a3630ee67eb82e366aaa6", size = 11234040, upload-time = "2026-04-24T18:17:16.529Z" },
-    { url = "https://files.pythonhosted.org/packages/34/ff/8a6d6cf4ccc23fd67060874e832c18919d1557a0611ebef03fdb01fff11e/ruff-0.15.12-py3-none-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:2849ea9f3484c3aca43a82f484210370319e7170df4dfe4843395ddf6c57bc33", size = 12087377, upload-time = "2026-04-24T18:17:04.944Z" },
-    { url = "https://files.pythonhosted.org/packages/85/f6/c669cf73f5152f623d34e69866a46d5e6185816b19fcd5b6dd8a2d299922/ruff-0.15.12-py3-none-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:9e77c7e51c07fe396826d5969a5b846d9cd4c402535835fb6e21ce8b28fef847", size = 11367784, upload-time = "2026-04-24T18:17:25.409Z" },
-    { url = "https://files.pythonhosted.org/packages/e8/39/c61d193b8a1daaa8977f7dea9e8d8ba866e02ea7b65d32f6861693aa4c12/ruff-0.15.12-py3-none-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:83b2f4f2f3b1026b5fb449b467d9264bf22067b600f7b6f41fc5958909f449d0", size = 11344088, upload-time = "2026-04-24T18:17:12.258Z" },
-    { url = "https://files.pythonhosted.org/packages/c2/8d/49afab3645e31e12c590acb6d3b5b69d7aab5b81926dbaf7461f9441f37a/ruff-0.15.12-py3-none-manylinux_2_31_riscv64.whl", hash = "sha256:9ba3b8f1afd7e2e43d8943e55f249e13f9682fde09711644a6e7290eb4f3e339", size = 11271770, upload-time = "2026-04-24T18:17:02.457Z" },
-    { url = "https://files.pythonhosted.org/packages/46/06/33f41fe94403e2b755481cdfb9b7ef3e4e0ed031c4581124658d935d52b4/ruff-0.15.12-py3-none-musllinux_1_2_aarch64.whl", hash = "sha256:e852ba9fdc890655e1d78f2df1499efbe0e54126bd405362154a75e2bde159c5", size = 10719355, upload-time = "2026-04-24T18:17:27.648Z" },
-    { url = "https://files.pythonhosted.org/packages/0d/59/18aa4e014debbf559670e4048e39260a85c7fcee84acfd761ac01e7b8d35/ruff-0.15.12-py3-none-musllinux_1_2_armv7l.whl", hash = "sha256:dd8aed930da53780d22fc70bdf84452c843cf64f8cb4eb38984319c24c5cd5fd", size = 10462758, upload-time = "2026-04-24T18:17:32.347Z" },
-    { url = "https://files.pythonhosted.org/packages/25/e7/cc9f16fd0f3b5fddcbd7ec3d6ae30c8f3fde1047f32a4093a98d633c6570/ruff-0.15.12-py3-none-musllinux_1_2_i686.whl", hash = "sha256:01da3988d225628b709493d7dc67c3b9b12c0210016b08690ef9bd27970b262b", size = 10953498, upload-time = "2026-04-24T18:17:20.674Z" },
-    { url = "https://files.pythonhosted.org/packages/72/7a/a9ba7f98c7a575978698f4230c5e8cc54bbc761af34f560818f933dafa0c/ruff-0.15.12-py3-none-musllinux_1_2_x86_64.whl", hash = "sha256:9cae0f92bd5700d1213188b31cd3bdd2b315361296d10b96b8e2337d3d11f53e", size = 11447765, upload-time = "2026-04-24T18:17:09.755Z" },
-    { url = "https://files.pythonhosted.org/packages/ea/f9/0ae446942c846b8266059ad8a30702a35afae55f5cdc54c5adf8d7afdc27/ruff-0.15.12-py3-none-win32.whl", hash = "sha256:d0185894e038d7043ba8fd6aee7499ece6462dc0ea9f1e260c7451807c714c20", size = 10657277, upload-time = "2026-04-24T18:17:18.591Z" },
-    { url = "https://files.pythonhosted.org/packages/33/f1/9614e03e1cdcbf9437570b5400ced8a720b5db22b28d8e0f1bda429f660d/ruff-0.15.12-py3-none-win_amd64.whl", hash = "sha256:c87a162d61ab3adca47c03f7f717c68672edec7d1b5499e652331780fe74950d", size = 11837758, upload-time = "2026-04-24T18:17:00.113Z" },
-    { url = "https://files.pythonhosted.org/packages/c0/98/6beb4b351e472e5f4c4613f7c35a5290b8be2497e183825310c4c3a3984b/ruff-0.15.12-py3-none-win_arm64.whl", hash = "sha256:a538f7a82d061cee7be55542aca1d86d1393d55d81d4fcc314370f4340930d4f", size = 11120821, upload-time = "2026-04-24T18:16:57.979Z" },
+    { url = "https://files.pythonhosted.org/packages/ff/80/779895ef584e089d22f2c6df0d0e99a65ec2df0805f1fffd439415b8c1f0/ruff-0.16.4-py3-none-linux_armv6l.whl", hash = "sha256:df4075f71ddac40b9934af60c3ec8a53047dd5a5fdc43224e6e4e8e9a27cb6f7", size = 10006909, upload-time = "2026-08-20T17:43:16.888Z" },
+    { url = "https://files.pythonhosted.org/packages/a9/e6/f553199b5e8927a05cb5c422d921fd0656b29ab976e91c44802107c6b0da/ruff-0.16.4-py3-none-macosx_10_12_x86_64.whl", hash = "sha256:0c95538517af68004306b0fb3214ff2f2af67a65092aee77cd9eb86db6656604", size = 10240201, upload-time = "2026-08-20T17:43:19.337Z" },
+    { url = "https://files.pythonhosted.org/packages/1c/70/4a6dc4bb34da4dee35e30f09bbd1bfbdd26f33b62fb9b8df31f08a199cd2/ruff-0.16.4-py3-none-macosx_11_0_arm64.whl", hash = "sha256:963f83df8e69e575b64d67dd447ebbc917db41a14bf38d4593a4183e7aaa8255", size = 9835122, upload-time = "2026-08-20T17:43:21.708Z" },
+    { url = "https://files.pythonhosted.org/packages/24/12/c6e22d686372c15bcb7af99831f1a1be96df696491babf4f24e4f942c527/ruff-0.16.4-py3-none-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:32a5057c7ff3f6e6480a48fccfb3a412a690f48a3d03ac5cf08177d6c2da3ade", size = 9977162, upload-time = "2026-08-20T17:43:24.236Z" },
+    { url = "https://files.pythonhosted.org/packages/46/49/72b10ec912f5ab5854992eaf7aa7cd36729b6937d9dc4e0fb41b3bf428ec/ruff-0.16.4-py3-none-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:b3dce8d9b0c57c265b91885a66a567d8ea1372e8eb4e250fa8e5e3f579e99cff", size = 9829789, upload-time = "2026-08-20T17:43:26.966Z" },
+    { url = "https://files.pythonhosted.org/packages/fa/80/0f30e32e7f6ee26edc39075502db9d368d788a44a79b55f763eb4ab03796/ruff-0.16.4-py3-none-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:7dc651db49283c69f8e72c834eec4fe5573e4c646856aebece0ce385dceb2a80", size = 10527949, upload-time = "2026-08-20T17:43:29.384Z" },
+    { url = "https://files.pythonhosted.org/packages/52/3d/86e8ad3542169e56cac3859a343afdb9df2ad54d35a59ce1e67baee83421/ruff-0.16.4-py3-none-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:3817b87dbcabc92f13b05019257c5b89b5b4d51b5fb20f56fb5235ceb723cd07", size = 11333695, upload-time = "2026-08-20T17:43:31.872Z" },
+    { url = "https://files.pythonhosted.org/packages/d0/16/481c29b380c20a0054a8261066665e1b3488e23636c49d0a43e75975b9bb/ruff-0.16.4-py3-none-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:e9fce1499134b2c8c68e5166f95705a5812062bb93aacc5f9873bb1a27084bc7", size = 10727741, upload-time = "2026-08-20T17:43:34.596Z" },
+    { url = "https://files.pythonhosted.org/packages/5e/b6/56bc0b8cf45b54b28b3a5e6381c8945d51b5b18adf659454c32295209a31/ruff-0.16.4-py3-none-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f2d812e482f5a7e02eee26cd73d2a37ebbdf47d795ea63ba1b89110ae93e9fb3", size = 10286522, upload-time = "2026-08-20T17:43:37.288Z" },
+    { url = "https://files.pythonhosted.org/packages/e8/8b/b345b4fb110f2fbe2bd31eabd271e5e8b3b7e4ee6c0e02f2dc6be78db000/ruff-0.16.4-py3-none-manylinux_2_31_riscv64.whl", hash = "sha256:6baaf984aa7976edf93d3b627fe2d1d22ee94bbca05fa6f90fc76d73924e3454", size = 10584182, upload-time = "2026-08-20T17:43:39.984Z" },
+    { url = "https://files.pythonhosted.org/packages/29/e5/827b34041c35f58774a9681a4213994c164fc987800f4dddabcf451da0bf/ruff-0.16.4-py3-none-musllinux_1_2_aarch64.whl", hash = "sha256:bdfcf0b28662eb890372d50f92c283bb94e67e7635ed93c7fd533970acff7b2b", size = 10134195, upload-time = "2026-08-20T17:43:42.351Z" },
+    { url = "https://files.pythonhosted.org/packages/0f/10/d0bffcdd6729b87afc82ba0ef377173356a7dc8e972f5179968cf2fdf98c/ruff-0.16.4-py3-none-musllinux_1_2_armv7l.whl", hash = "sha256:b66b02cb9b04f537643cadf5768e5f98dc461890d530cb67113d71c8c76e605d", size = 9825821, upload-time = "2026-08-20T17:43:44.532Z" },
+    { url = "https://files.pythonhosted.org/packages/f5/32/0db2a863b796ca62d83e92a07a3ccf00921b14db02059347576a2fda3d4b/ruff-0.16.4-py3-none-musllinux_1_2_i686.whl", hash = "sha256:8528bf9a4b291a60bf02ea453511e8ce6215bd2b982ee80405b66b008b6c30a0", size = 10267658, upload-time = "2026-08-20T17:43:46.989Z" },
+    { url = "https://files.pythonhosted.org/packages/b2/a0/fbdeb59e48c6261f523e56c8f12e9c08fbe693786595cc7e3959207a9232/ruff-0.16.4-py3-none-musllinux_1_2_x86_64.whl", hash = "sha256:fbd85d2875fdd67e833213a651f613bbf25303abf6aa822a5121f4531195678d", size = 10697071, upload-time = "2026-08-20T17:43:49.891Z" },
+    { url = "https://files.pythonhosted.org/packages/aa/28/0c6dd865859c6d17bc8ccc34cb72b0e02d6c7eb25e8a1e22b5bea681e2c0/ruff-0.16.4-py3-none-win32.whl", hash = "sha256:312769988007aaeb8e189b443ccdd03c0e6374489e053467be6d96518ebff76e", size = 10021687, upload-time = "2026-08-20T17:43:52.281Z" },
+    { url = "https://files.pythonhosted.org/packages/a3/03/e724450f621698117f9aa6dd241c94d0274ae96781378dc86745ae29f0e7/ruff-0.16.4-py3-none-win_amd64.whl", hash = "sha256:05d9d27a18c4bcbefada602480ec9e01e0bc949d432e0ced5df77edac195919c", size = 10567657, upload-time = "2026-08-20T17:43:54.78Z" },
+    { url = "https://files.pythonhosted.org/packages/0e/fe/da8b9e1347696bb22120b77280ec5ce25d500ca5cb39d5ad6e5c18de19c1/ruff-0.16.4-py3-none-win_arm64.whl", hash = "sha256:a3a61621c9b6f6a89573e938a080e648f1695baa3f58570a3a707bc51ff65a21", size = 10451579, upload-time = "2026-08-20T17:43:57.135Z" },
 ]
 
 [[package]]
 name = "safety"
-version = "3.7.0"
+version = "3.8.1"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "authlib" },
+    { name = "certifi" },
     { name = "click" },
     { name = "dparse" },
     { name = "filelock" },
@@ -1399,17 +1488,17 @@ dependencies = [
     { name = "nltk" },
     { name = "packaging" },
     { name = "pydantic" },
-    { name = "requests" },
     { name = "ruamel-yaml" },
     { name = "safety-schemas" },
     { name = "tenacity" },
     { name = "tomlkit" },
+    { name = "truststore" },
     { name = "typer" },
     { name = "typing-extensions" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/6f/e8/1cfffa0d8836de8aa31f4fa7fdeb892c7cfa97cd555039ad5df71ce0e968/safety-3.7.0.tar.gz", hash = "sha256:daec15a393cafc32b846b7ef93f9c952a1708863e242341ab5bde2e4beabb54e", size = 330538, upload-time = "2025-11-06T20:10:15.067Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/c2/7b/8e1d580c5178f0736b806b7199827e61e2a2569eec5b49ec75da6273bbdf/safety-3.8.1.tar.gz", hash = "sha256:e646123b976bbb6707cfaacae8c926e2f886b744a60e0f410e8610a3a4eaf7be", size = 412947, upload-time = "2026-05-29T15:09:33.355Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/89/55/c4b2058ca346e58124ba082a3596e30dc1f5793710f8173156c7c2d77048/safety-3.7.0-py3-none-any.whl", hash = "sha256:65e71db45eb832e8840e3456333d44c23927423753d5610596a09e909a66d2bf", size = 312436, upload-time = "2025-11-06T20:10:13.576Z" },
+    { url = "https://files.pythonhosted.org/packages/4b/f5/498db84333a644835e572c0d96cfa705bf9871f863289a7845082d54755e/safety-3.8.1-py3-none-any.whl", hash = "sha256:953c1c3c60c873f53a6cc250b2a9c4b38bb6ef45f0625990e43f20bff916c965", size = 340521, upload-time = "2026-05-29T15:09:31.622Z" },
 ]
 
 [[package]]
@@ -1461,28 +1550,23 @@ wheels = [
 
 [[package]]
 name = "sqlalchemy"
-version = "2.0.49"
+version = "2.0.52"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "greenlet", marker = "platform_machine == 'AMD64' or platform_machine == 'WIN32' or platform_machine == 'aarch64' or platform_machine == 'amd64' or platform_machine == 'ppc64le' or platform_machine == 'win32' or platform_machine == 'x86_64'" },
     { name = "typing-extensions" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/09/45/461788f35e0364a8da7bda51a1fe1b09762d0c32f12f63727998d85a873b/sqlalchemy-2.0.49.tar.gz", hash = "sha256:d15950a57a210e36dd4cec1aac22787e2a4d57ba9318233e2ef8b2daf9ff2d5f", size = 9898221, upload-time = "2026-04-03T16:38:11.704Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/3b/21/77b4c147963073040dc3c3a5cb7a8c3001a1893c0209432cb77f9df836aa/sqlalchemy-2.0.52.tar.gz", hash = "sha256:5e2d46356ac2ccb7d268ab6c2319ac6a2b42f1b8d5fd8bd3d46855cd82abee97", size = 9945637, upload-time = "2026-08-11T19:07:09.829Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/55/33/bf28f618c0a9597d14e0b9ee7d1e0622faff738d44fe986ee287cdf1b8d0/sqlalchemy-2.0.49-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:233088b4b99ebcbc5258c755a097aa52fbf90727a03a5a80781c4b9c54347a2e", size = 2156356, upload-time = "2026-04-03T16:53:09.914Z" },
-    { url = "https://files.pythonhosted.org/packages/d1/a7/5f476227576cb8644650eff68cc35fa837d3802b997465c96b8340ced1e2/sqlalchemy-2.0.49-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:57ca426a48eb2c682dae8204cd89ea8ab7031e2675120a47924fabc7caacbc2a", size = 3276486, upload-time = "2026-04-03T17:07:46.9Z" },
-    { url = "https://files.pythonhosted.org/packages/2e/84/efc7c0bf3a1c5eef81d397f6fddac855becdbb11cb38ff957888603014a7/sqlalchemy-2.0.49-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:685e93e9c8f399b0c96a624799820176312f5ceef958c0f88215af4013d29066", size = 3281479, upload-time = "2026-04-03T17:12:32.226Z" },
-    { url = "https://files.pythonhosted.org/packages/91/68/bb406fa4257099c67bd75f3f2261b129c63204b9155de0d450b37f004698/sqlalchemy-2.0.49-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:9e0400fa22f79acc334d9a6b185dc00a44a8e6578aa7e12d0ddcd8434152b187", size = 3226269, upload-time = "2026-04-03T17:07:48.678Z" },
-    { url = "https://files.pythonhosted.org/packages/67/84/acb56c00cca9f251f437cb49e718e14f7687505749ea9255d7bd8158a6df/sqlalchemy-2.0.49-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:a05977bffe9bffd2229f477fa75eabe3192b1b05f408961d1bebff8d1cd4d401", size = 3248260, upload-time = "2026-04-03T17:12:34.381Z" },
-    { url = "https://files.pythonhosted.org/packages/56/19/6a20ea25606d1efd7bd1862149bb2a22d1451c3f851d23d887969201633f/sqlalchemy-2.0.49-cp314-cp314-win32.whl", hash = "sha256:0f2fa354ba106eafff2c14b0cc51f22801d1e8b2e4149342023bd6f0955de5f5", size = 2118463, upload-time = "2026-04-03T17:05:47.093Z" },
-    { url = "https://files.pythonhosted.org/packages/cf/4f/8297e4ed88e80baa1f5aa3c484a0ee29ef3c69c7582f206c916973b75057/sqlalchemy-2.0.49-cp314-cp314-win_amd64.whl", hash = "sha256:77641d299179c37b89cf2343ca9972c88bb6eef0d5fc504a2f86afd15cd5adf5", size = 2144204, upload-time = "2026-04-03T17:05:48.694Z" },
-    { url = "https://files.pythonhosted.org/packages/1f/33/95e7216df810c706e0cd3655a778604bbd319ed4f43333127d465a46862d/sqlalchemy-2.0.49-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:c1dc3368794d522f43914e03312202523cc89692f5389c32bea0233924f8d977", size = 3565474, upload-time = "2026-04-03T16:58:35.128Z" },
-    { url = "https://files.pythonhosted.org/packages/0c/a4/ed7b18d8ccf7f954a83af6bb73866f5bc6f5636f44c7731fbb741f72cc4f/sqlalchemy-2.0.49-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:7c821c47ecfe05cc32140dcf8dc6fd5d21971c86dbd56eabfe5ba07a64910c01", size = 3530567, upload-time = "2026-04-03T17:06:04.587Z" },
-    { url = "https://files.pythonhosted.org/packages/73/a3/20faa869c7e21a827c4a2a42b41353a54b0f9f5e96df5087629c306df71e/sqlalchemy-2.0.49-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:9c04bff9a5335eb95c6ecf1c117576a0aa560def274876fd156cfe5510fccc61", size = 3474282, upload-time = "2026-04-03T16:58:37.131Z" },
-    { url = "https://files.pythonhosted.org/packages/b7/50/276b9a007aa0764304ad467eceb70b04822dc32092492ee5f322d559a4dc/sqlalchemy-2.0.49-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:7f605a456948c35260e7b2a39f8952a26f077fd25653c37740ed186b90aaa68a", size = 3480406, upload-time = "2026-04-03T17:06:07.176Z" },
-    { url = "https://files.pythonhosted.org/packages/e5/c3/c80fcdb41905a2df650c2a3e0337198b6848876e63d66fe9188ef9003d24/sqlalchemy-2.0.49-cp314-cp314t-win32.whl", hash = "sha256:6270d717b11c5476b0cbb21eedc8d4dbb7d1a956fd6c15a23e96f197a6193158", size = 2149151, upload-time = "2026-04-03T17:02:07.281Z" },
-    { url = "https://files.pythonhosted.org/packages/05/52/9f1a62feab6ed368aff068524ff414f26a6daebc7361861035ae00b05530/sqlalchemy-2.0.49-cp314-cp314t-win_amd64.whl", hash = "sha256:275424295f4256fd301744b8f335cff367825d270f155d522b30c7bf49903ee7", size = 2184178, upload-time = "2026-04-03T17:02:08.623Z" },
-    { url = "https://files.pythonhosted.org/packages/e5/30/8519fdde58a7bdf155b714359791ad1dc018b47d60269d5d160d311fdc36/sqlalchemy-2.0.49-py3-none-any.whl", hash = "sha256:ec44cfa7ef1a728e88ad41674de50f6db8cfdb3e2af84af86e0041aaf02d43d0", size = 1942158, upload-time = "2026-04-03T16:53:44.135Z" },
+    { url = "https://files.pythonhosted.org/packages/d5/f5/71cb30af58c9b80a4e1fac0b73bb48f86d497a774a6a2eb6d2f1e657bb73/sqlalchemy-2.0.52-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:410d52be41d17f1a236d19520fbe776257dc16516ed06bd16d433311842aefd9", size = 2169537, upload-time = "2026-08-11T20:58:13.855Z" },
+    { url = "https://files.pythonhosted.org/packages/4c/93/d07ebd645d1b07b6b5ed63450a70f063a346a7e0f2c8810daf2e532400cb/sqlalchemy-2.0.52-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:dfe9ce533dbe4d0a2ae1486546619bd30b76bcd670539a44d910361376175f5e", size = 3319606, upload-time = "2026-08-11T21:02:45.829Z" },
+    { url = "https://files.pythonhosted.org/packages/ae/5c/290c84c7c2566ecd3b65baaae0fddec9bc33b033b398a06123bb86fbfc6e/sqlalchemy-2.0.52-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:812bae5138bfc0aa46fb0686da0fc7f581f68e2bbb05bc24c3713bebaedd1437", size = 3323642, upload-time = "2026-08-11T21:17:05.675Z" },
+    { url = "https://files.pythonhosted.org/packages/13/f5/2cc160590ca49173359557880b92a0572293ccb899e8f6cedf150c5a3ddf/sqlalchemy-2.0.52-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:50bff43b632a56fbf5ed9afdd76307e1512b62051bcd5afb341ae67205bbb6c8", size = 3268125, upload-time = "2026-08-11T21:02:47.649Z" },
+    { url = "https://files.pythonhosted.org/packages/35/f3/ea8933fc9f7d1353e9c2ff9965eae687c4cef181120574591ed2fa0633e1/sqlalchemy-2.0.52-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:49565daf5af554f538e23aef1fc81a95a4e49658f152285e45c02f5fc44f04cd", size = 3289516, upload-time = "2026-08-11T21:17:07.267Z" },
+    { url = "https://files.pythonhosted.org/packages/45/67/05cf86541c1e1716fca1e4a996954a439cd74501707cda607fb7cb02ef50/sqlalchemy-2.0.52-cp314-cp314-win32.whl", hash = "sha256:ab9da41e61b9979b910499d633b241df20c51ee5037e5405b11c2faac3cbe1a2", size = 2130249, upload-time = "2026-08-11T21:14:57.273Z" },
+    { url = "https://files.pythonhosted.org/packages/96/d7/8ac6ffa1e36169e762ef65bd835046abb2251b1bc17f8f6708e14ed8d31f/sqlalchemy-2.0.52-cp314-cp314-win_amd64.whl", hash = "sha256:a593db51b3bae75db17a5738ad5f992244b3a03863f83c28117ee482c6a3f76d", size = 2156718, upload-time = "2026-08-11T21:14:58.667Z" },
+    { url = "https://files.pythonhosted.org/packages/dc/4b/e01a737eef378e734cc6394a82248a6ce13b167dfa36c731075ce9fc9c64/sqlalchemy-2.0.52-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:c1e61d08bdf4ee2f41024569e3400de7d6734ba498144766b11260936ccfa582", size = 2190344, upload-time = "2026-08-11T19:53:21.393Z" },
+    { url = "https://files.pythonhosted.org/packages/b3/3f/3582293d1e185e71d19d7c731c3e2ee20ba21981c4a1115c0806c1f62120/sqlalchemy-2.0.52-py3-none-any.whl", hash = "sha256:3b81b8363a919ce53453591cdb93702e6bd54ade6c4fa2f468fc053baee5ed89", size = 1950700, upload-time = "2026-08-11T20:47:21.603Z" },
 ]
 
 [[package]]
@@ -1536,6 +1620,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/16/e1/3079a9ff9b8e11b846c6ac5c8b5bfb7ff225eee721825310c91b3b50304f/tqdm-4.67.3-py3-none-any.whl", hash = "sha256:ee1e4c0e59148062281c49d80b25b67771a127c85fc9676d3be5f243206826bf", size = 78374, upload-time = "2026-02-03T17:35:50.982Z" },
 ]
 
+[[package]]
+name = "truststore"
+version = "0.10.4"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/53/a3/1585216310e344e8102c22482f6060c7a6ea0322b63e026372e6dcefcfd6/truststore-0.10.4.tar.gz", hash = "sha256:9d91bd436463ad5e4ee4aba766628dd6cd7010cf3e2461756b3303710eebc301", size = 26169, upload-time = "2025-08-12T18:49:02.73Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/19/97/56608b2249fe206a67cd573bc93cd9896e1efb9e98bce9c163bcdc704b88/truststore-0.10.4-py3-none-any.whl", hash = "sha256:adaeaecf1cbb5f4de3b1959b42d41f6fab57b2b1666adb59e89cb0b53361d981", size = 18660, upload-time = "2025-08-12T18:49:01.46Z" },
+]
+
 [[package]]
 name = "typer"
 version = "0.24.1"
@@ -1553,11 +1646,11 @@ wheels = [
 
 [[package]]
 name = "types-openpyxl"
-version = "3.1.5.20260408"
+version = "3.1.5.20260807"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/74/c9/24f03f9d9fedd164de699c1418869bef9b819f59f75e7f647f5788c02d98/types_openpyxl-3.1.5.20260408.tar.gz", hash = "sha256:b49274d086fbb6e6bcd2a67d161dd1161d4d380488e4cce546d647d45eadcac2", size = 101361, upload-time = "2026-04-08T04:30:37.809Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/cd/89/e81814aac1c6ec46ee0006b723254ae737faa68c1ac80a7c3b81b3aa9f22/types_openpyxl-3.1.5.20260807.tar.gz", hash = "sha256:1a0a42b125f8023d3ae83cc057e379d301a87f45e60b6160917824fef28ab015", size = 101740, upload-time = "2026-08-07T04:17:25.557Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/5f/e8/64db0c32c6fda4b198aff84329ceeea00a93d16c28f05e9fe0404ddb8b8c/types_openpyxl-3.1.5.20260408-py3-none-any.whl", hash = "sha256:7ab7586796aed017cde50b81bd67ba024120c39b99c102320b57dd91390c317f", size = 166044, upload-time = "2026-04-08T04:30:36.449Z" },
+    { url = "https://files.pythonhosted.org/packages/34/50/c7faba803c8a2e822ccc43a091c979cdbdc28e792e1eb0fb5ff172c81ee5/types_openpyxl-3.1.5.20260807-py3-none-any.whl", hash = "sha256:e64e9342cdac8a2d7b09f992d3606c532b75da43874f8107b6b5a122dc9d5681", size = 165826, upload-time = "2026-08-07T04:17:24.341Z" },
 ]
 
 [[package]]
@@ -1601,20 +1694,19 @@ wheels = [
 
 [[package]]
 name = "uvicorn"
-version = "0.46.0"
+version = "0.52.4"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "click" },
     { name = "h11" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/1f/93/041fca8274050e40e6791f267d82e0e2e27dd165627bd640d3e0e378d877/uvicorn-0.46.0.tar.gz", hash = "sha256:fb9da0926999cc6cb22dc7cd71a94a632f078e6ae47ff683c5c420750fb7413d", size = 88758, upload-time = "2026-04-23T07:16:00.151Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/f2/0f/3f86e61397dd33bf2ccf28188c40db6a740658aeebbbf6e7dbc101a1f487/uvicorn-0.52.4.tar.gz", hash = "sha256:73acfee47a0b133c5de13d219492d62d8a31e935f4fe6e41a232451a15379f86", size = 100627, upload-time = "2026-08-19T06:27:41.821Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/31/a3/5b1562db76a5a488274b2332a97199b32d0442aca0ed193697fd47786316/uvicorn-0.46.0-py3-none-any.whl", hash = "sha256:bbebbcbed972d162afca128605223022bedd345b7bc7855ce66deb31487a9048", size = 70926, upload-time = "2026-04-23T07:15:58.355Z" },
+    { url = "https://files.pythonhosted.org/packages/f1/79/4a20b54ab0491485ccd8c077db2d39187c7f12b3e15485d38a7be37c81b4/uvicorn-0.52.4-py3-none-any.whl", hash = "sha256:f86e41a149d7d05a9969337e3946a9c171c06a5d42680896daaba624aeac8da1", size = 79871, upload-time = "2026-08-19T06:27:40.36Z" },
 ]
 
 [package.optional-dependencies]
 standard = [
-    { name = "colorama", marker = "sys_platform == 'win32'" },
     { name = "httptools" },
     { name = "python-dotenv" },
     { name = "pyyaml" },
diff --git a/overlord/package.json b/overlord/package.json
index 4d2c1354..b54caf1e 100644
--- a/overlord/package.json
+++ b/overlord/package.json
@@ -14,17 +14,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.1.5",
-    "@angular/cdk": "^21.1.5",
-    "@angular/common": "^21.1.5",
-    "@angular/compiler": "^21.1.5",
-    "@angular/core": "^21.1.5",
-    "@angular/forms": "^21.1.5",
-    "@angular/material": "^21.1.5",
-    "@angular/material-moment-adapter": "^21.1.5",
-    "@angular/platform-browser": "^21.1.5",
-    "@angular/platform-browser-dynamic": "^21.1.5",
-    "@angular/router": "^21.1.5",
+    "@angular/animations": "^22.1.2",
+    "@angular/cdk": "^22.1.2",
+    "@angular/common": "^22.1.2",
+    "@angular/compiler": "^22.1.2",
+    "@angular/core": "^22.1.2",
+    "@angular/forms": "^22.1.2",
+    "@angular/material": "^22.1.2",
+    "@angular/material-moment-adapter": "^22.1.2",
+    "@angular/platform-browser": "^22.1.2",
+    "@angular/platform-browser-dynamic": "^22.1.2",
+    "@angular/router": "^22.1.2",
     "html2canvas": "^1.4.1",
     "jspdf": "^4.2.0",
     "mathjs": "^15.1.1",
@@ -33,22 +33,23 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@angular/build": "^21.1.4",
-    "@angular/cli": "^21.1.4",
-    "@angular/compiler-cli": "^21.1.5",
-    "@angular/language-service": "^21.1.5",
-    "angular-eslint": "^21.2.0",
-    "eslint": "^9.28.0",
+    "@angular/build": "^22.1.4",
+    "@angular/cli": "^22.1.4",
+    "@angular/compiler-cli": "^22.1.2",
+    "@angular/language-service": "^22.1.2",
+    "@eslint/js": "10.0.1",
+    "angular-eslint": "^22.1.0",
+    "eslint": "^10.8.1",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-perfectionist": "^4.15.0",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-perfectionist": "^5.10.1",
+    "eslint-plugin-simple-import-sort": "^14.0.0",
     "eslint-plugin-unused-imports": "^4.1.4",
     "husky": "^9.0.11",
-    "lint-staged": "^16.2.7",
-    "prettier": "^3.8.1",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.33.1"
+    "lint-staged": "^17.3.0",
+    "prettier": "^3.9.6",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.67.0"
   },
   "husky": {
     "hooks": {
@@ -63,4 +64,4 @@
       "npx eslint --cache --fix"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/overlord/src/app/account/account-detail/account-detail.component.html b/overlord/src/app/account/account-detail/account-detail.component.html
index 086ee83d..c64ad25d 100644
--- a/overlord/src/app/account/account-detail/account-detail.component.html
+++ b/overlord/src/app/account/account-detail/account-detail.component.html
@@ -1,54 +1,61 @@
 <h2 class="row-container space-between wrapped">
   <span>Account</span>
-  <mat-icon matSuffix (click)="item.isStarred = !item.isStarred" class="pointer" [class.gold]="item.isStarred">
-    {{ item.isStarred ? 'star' : 'star_border' }}
+  <mat-icon matSuffix (click)="item().isStarred = !item().isStarred" class="pointer" [class.gold]="item().isStarred">
+    {{ item().isStarred ? 'star' : 'star_border' }}
   </mat-icon>
 </h2>
-<form [formGroup]="form" class="flex-col wrapped">
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <form class="flex-col wrapped" [formRoot]="accountForm">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Code</mat-label>
+        <input matInput [formField]="accountForm.code" />
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput [formField]="accountForm.name" />
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Account Type</mat-label>
+        <mat-select [formField]="accountForm.type">
+          @for (at of accountTypes(); track at) {
+            <mat-option [value]="at.id">
+              {{ at.name }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-checkbox [formField]="accountForm.isActive" class="flex-auto">Is Active?</mat-checkbox>
+      <mat-checkbox [formField]="accountForm.isReconcilable" class="flex-auto">Is Reconcilable?</mat-checkbox>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Cost Centre</mat-label>
+        <mat-select [formField]="accountForm.costCentre">
+          @for (cs of costCentres(); track cs) {
+            <mat-option [value]="cs.id">
+              {{ cs.name }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+  </form>
   <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Code</mat-label>
-      <input matInput formControlName="code" />
-    </mat-form-field>
+    <button mat-raised-button color="primary" (click)="save()" class="">Save</button>
+    @if (!!item().id) {
+      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+    }
   </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" />
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Account Type</mat-label>
-      <mat-select formControlName="type">
-        @for (at of accountTypes; track at) {
-          <mat-option [value]="at.id">
-            {{ at.name }}
-          </mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-checkbox formControlName="isActive" class="flex-auto">Is Active?</mat-checkbox>
-    <mat-checkbox formControlName="isReconcilable" class="flex-auto">Is Reconcilable?</mat-checkbox>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Cost Centre</mat-label>
-      <mat-select formControlName="costCentre">
-        @for (cs of costCentres; track cs) {
-          <mat-option [value]="cs.id">
-            {{ cs.name }}
-          </mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-  </div>
-</form>
-<div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()" class="">Save</button>
-  @if (!!item.id) {
-    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-  }
-</div>
+}
diff --git a/overlord/src/app/account/account-detail/account-detail.component.ts b/overlord/src/app/account/account-detail/account-detail.component.ts
index a5c7cef1..30ccce35 100644
--- a/overlord/src/app/account/account-detail/account-detail.component.ts
+++ b/overlord/src/app/account/account-detail/account-detail.component.ts
@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, afterNextRender, linkedSignal, input, computed } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -9,13 +9,24 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { Account } from '../../core/account';
-import { AccountType } from '../../core/account-type';
 import { AccountService } from '../../core/account.service';
-import { CostCentre } from '../../core/cost-centre';
+import { CostCentreService } from '../../cost-centre/cost-centre.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { AccountTypeService } from '../account-type.service';
+
+export interface AccountDetailFormData {
+  code: string;
+  name: string;
+  type: number;
+  isActive: boolean;
+  isReconcilable: boolean;
+  costCentre: string;
+}
 
 @Component({
   selector: 'app-account-detail',
@@ -23,79 +34,59 @@ import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dial
   styleUrls: ['./account-detail.component.css'],
   imports: [
     MatIconModule,
-    ReactiveFormsModule,
     MatFormFieldModule,
     MatInputModule,
     MatSelectModule,
     MatOptionModule,
     MatCheckboxModule,
     MatButtonModule,
+    FormField,
+    FormRoot,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class AccountDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class AccountDetailComponent {
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private ser = inject(AccountService);
+  private accountTypeService = inject(AccountTypeService);
+  private costCentreService = inject(CostCentreService);
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    code: FormControl<number | string>;
-    name: FormControl<string | null>;
-    type: FormControl<number>;
-    isActive: FormControl<boolean>;
-    isReconcilable: FormControl<boolean>;
-    costCentre: FormControl<string | null>;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  accountTypes: AccountType[] = [];
-  costCentres: CostCentre[] = [];
-  item: Account = new Account();
+  item = computed(() => this.itemResource.value() ?? new Account());
+
+  accountModel = linkedSignal({
+    source: this.item,
+    computation: (itemVal): AccountDetailFormData => {
+      return {
+        code: (itemVal.code || '(Auto)').toString(),
+        name: itemVal.name || '',
+        type: itemVal.type ?? 0,
+        isActive: itemVal.isActive ?? true,
+        isReconcilable: itemVal.isReconcilable ?? false,
+        costCentre: itemVal.costCentre?.id ?? '',
+      };
+    },
+  });
+
+  accountForm = form(this.accountModel);
+
+  accountTypesResource = this.accountTypeService.list();
+  costCentresResource = this.costCentreService.list();
+  accountTypes = computed(() => this.accountTypesResource.value() || []);
+  costCentres = computed(() => this.costCentresResource.value() || []);
 
   constructor() {
-    this.form = new FormGroup({
-      code: new FormControl<string | number>({ value: 0, disabled: true }, { nonNullable: true }),
-      name: new FormControl<string | null>(null),
-      type: new FormControl<number>(0, { nonNullable: true }),
-      isActive: new FormControl<boolean>(true, { nonNullable: true }),
-      isReconcilable: new FormControl<boolean>(false, { nonNullable: true }),
-      costCentre: new FormControl<string | null>(null),
+    afterNextRender(() => {
+      this.accountForm.name().focusBoundControl();
     });
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as {
-        item: Account;
-        accountTypes: AccountType[];
-        costCentres: CostCentre[];
-      };
-
-      this.accountTypes = data.accountTypes;
-      this.costCentres = data.costCentres;
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: Account) {
-    this.item = item;
-    this.form.setValue({
-      code: this.item.code || '(Auto)',
-      name: this.item.name || '',
-      type: this.item.type,
-      isActive: this.item.isActive,
-      isReconcilable: this.item.isReconcilable,
-      costCentre: this.item.costCentre.id ?? '',
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
@@ -103,19 +94,19 @@ export class AccountDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/accounts');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
+    this.ser.delete(this.item().id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/accounts');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -134,12 +125,13 @@ export class AccountDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): Account {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    this.item.type = formModel.type ?? 0;
-    this.item.isActive = formModel.isActive ?? true;
-    this.item.isReconcilable = formModel.isReconcilable ?? false;
-    this.item.costCentre.id = formModel.costCentre ?? '';
-    return this.item;
+    const formModel = this.accountModel();
+    const item = this.item();
+    item.name = formModel.name ?? '';
+    item.type = formModel.type ?? 0;
+    item.isActive = formModel.isActive ?? true;
+    item.isReconcilable = formModel.isReconcilable ?? false;
+    item.costCentre.id = formModel.costCentre ?? '';
+    return item;
   }
 }
diff --git a/overlord/src/app/account/account-list.resolver.spec.ts b/overlord/src/app/account/account-list.resolver.spec.ts
deleted file mode 100644
index 3dd49161..00000000
--- a/overlord/src/app/account/account-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Account } from '../core/account';
-import { accountListResolver } from './account-list.resolver';
-
-describe('accountListResolver', () => {
-  const executeResolver: ResolveFn<Account[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => accountListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/account/account-list.resolver.ts b/overlord/src/app/account/account-list.resolver.ts
deleted file mode 100644
index c63baed3..00000000
--- a/overlord/src/app/account/account-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Account } from '../core/account';
-import { AccountService } from '../core/account.service';
-
-export const accountListResolver: ResolveFn<Account[]> = () => {
-  return inject(AccountService).list();
-};
diff --git a/overlord/src/app/account/account-list/account-list-datasource.ts b/overlord/src/app/account/account-list/account-list-datasource.ts
deleted file mode 100644
index 1da0b3ce..00000000
--- a/overlord/src/app/account/account-list/account-list-datasource.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-
-import { Account } from '../../core/account';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
-  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class AccountListDataSource extends DataSource<Account> {
-  private filterValue = '';
-
-  constructor(
-    public data: Account[],
-    private filter: Observable<string>,
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-    this.filter = filter.pipe(
-      tap((x) => {
-        this.filterValue = x;
-      }),
-    );
-  }
-
-  connect(): Observable<Account[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    return merge(observableOf(this.data), this.filter, ...dataMutations)
-      .pipe(
-        map(() => this.getFilteredData([...this.data])),
-        tap((x: Account[]) => {
-          if (this.paginator) {
-            this.paginator.length = x.length;
-          }
-        }),
-      )
-      .pipe(map((x: Account[]) => this.getPagedData(this.getSortedData(x))));
-  }
-
-  disconnect() {}
-
-  private getFilteredData(data: Account[]): Account[] {
-    return this.filterValue.split(' ').reduce(
-      (p: Account[], c: string) =>
-        p.filter((x) => {
-          const accountString = `${x.name} ${x.type} ${x.costCentre}${
-            x.isActive ? ' active' : ' inactive'
-          }`.toLowerCase();
-          return accountString.indexOf(c) !== -1;
-        }),
-      Object.assign([], data),
-    );
-  }
-
-  private getPagedData(data: Account[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: Account[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        case 'type':
-          return compare(a.typeName, b.typeName, isAsc);
-        case 'isActive':
-          return compare(a.isActive, b.isActive, isAsc);
-        case 'isReconcilable':
-          return compare(a.isReconcilable, b.isReconcilable, isAsc);
-        case 'costCentre':
-          return compare(a.costCentre.name, b.costCentre.name, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/account/account-list/account-list.component.html b/overlord/src/app/account/account-list/account-list.component.html
index a664c94d..ddfce6ab 100644
--- a/overlord/src/app/account/account-list/account-list.component.html
+++ b/overlord/src/app/account/account-list/account-list.component.html
@@ -6,61 +6,67 @@
   </a>
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="accountForm">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Filter</mat-label>
-      <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
+      <input type="text" matInput #filterElement [formField]="accountForm.filter" autocomplete="off" />
     </mat-form-field>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <a [routerLink]="['/accounts', row.id]">
-        @if (row.isStarred) {
-          <mat-icon matSuffix class="gold">star </mat-icon>
-        }
-        {{ row.name }}
-      </a>
-    </mat-cell>
-  </ng-container>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (listResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="listResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <a [routerLink]="['/accounts', row.id]">
+          @if (row.isStarred) {
+            <mat-icon matSuffix class="gold">star </mat-icon>
+          }
+          {{ row.name }}
+        </a>
+      </mat-cell>
+    </ng-container>
 
-  <!-- Type Column -->
-  <ng-container matColumnDef="type">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.typeName }}</mat-cell>
-  </ng-container>
+    <!-- Type Column -->
+    <ng-container matColumnDef="type">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.typeName }}</mat-cell>
+    </ng-container>
 
-  <!-- Is Active? Column -->
-  <ng-container matColumnDef="isActive">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Is Active?</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.isActive }}</mat-cell>
-  </ng-container>
+    <!-- Is Active? Column -->
+    <ng-container matColumnDef="isActive">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Is Active?</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.isActive }}</mat-cell>
+    </ng-container>
 
-  <!-- Is Reconcilable? Column -->
-  <ng-container matColumnDef="isReconcilable">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Is Reconcilable?</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.isReconcilable }}</mat-cell>
-  </ng-container>
+    <!-- Is Reconcilable? Column -->
+    <ng-container matColumnDef="isReconcilable">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Is Reconcilable?</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.isReconcilable }}</mat-cell>
+    </ng-container>
 
-  <!-- Cost Centre Column -->
-  <ng-container matColumnDef="costCentre">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Cost Centre</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.costCentre.name }}</mat-cell>
-  </ng-container>
+    <!-- Cost Centre Column -->
+    <ng-container matColumnDef="costCentre">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Cost Centre</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.costCentre.name }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="filteredList().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/account/account-list/account-list.component.ts b/overlord/src/app/account/account-list/account-list.component.ts
index 55bf3c87..240f621a 100644
--- a/overlord/src/app/account/account-list/account-list.component.ts
+++ b/overlord/src/app/account/account-list/account-list.component.ts
@@ -1,77 +1,174 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import {
+  Component,
+  inject,
+  signal,
+  effect,
+  computed,
+  debounced,
+  input,
+  linkedSignal,
+  afterNextRender,
+} from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
-import { Observable } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { Account } from '../../core/account';
-import { AccountType } from '../../core/account-type';
-import { AccountListDataSource } from './account-list-datasource';
+import { AccountService } from '../../core/account.service';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { AccountTypeService } from '../account-type.service';
+
+export interface AccountListFormData {
+  filter: string;
+}
 
 @Component({
   selector: 'app-account-list',
   templateUrl: './account-list.component.html',
   styleUrls: ['./account-list.component.css'],
   imports: [
-    RouterModule,
+    RouterLink,
     MatButtonModule,
     MatIconModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatTableModule,
     MatSortModule,
     MatPaginatorModule,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class AccountListComponent implements OnInit, AfterViewInit {
+export class AccountListComponent {
   private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private ser = inject(AccountService);
+  private accountTypeSer = inject(AccountTypeService);
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  q = input('', { transform: (v: string | null | undefined) => v ?? '' });
+  formModel = linkedSignal({
+    source: this.q,
+    computation: (qValue): AccountListFormData => ({ filter: qValue }),
+  });
 
-  @ViewChild('filterElement', { static: true }) filterElement!: ElementRef<HTMLInputElement>;
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  dataSource: AccountListDataSource;
-  filter: Observable<string>;
-  form: FormGroup<{
-    filter: FormControl<string>;
-  }>;
+  accountForm = form(this.formModel);
 
-  list: Account[] = [];
-  accountTypes: AccountType[] = [];
+  filterSignal = computed(() => this.formModel().filter);
+
+  debouncedFilter = debounced(this.filterSignal, 150);
+
+  listResource = this.ser.list();
+  accountTypesResource = this.accountTypeSer.list();
+
+  accountTypes = computed(() => this.accountTypesResource.value() ?? []);
+  list = computed(() => this.listResource.value() ?? []);
+  listWithTypes = computed(() => {
+    const data = this.list();
+    const types = this.accountTypes();
+
+    return data.map(
+      (account) =>
+        new Account({
+          ...account,
+          typeName: types.find((t) => t.id === account.type)?.name ?? account.type.toString(),
+        }),
+    );
+  });
+
+  filteredList = computed(() => {
+    const q = (this.debouncedFilter.value() ?? '').trim().toLowerCase();
+    const data = this.listWithTypes();
+    if (!q) {
+      return data;
+    }
+    return q.split(' ').reduce(
+      (p: Account[], c: string) =>
+        p.filter((x) => {
+          const accountString = `${x.name} ${x.type} ${x.costCentre}${
+            x.isActive ? ' active' : ' inactive'
+          }`.toLowerCase();
+          return accountString.indexOf(c) !== -1;
+        }),
+      [...data],
+    );
+  });
+
+  sortedList = computed(() => {
+    const data = this.filteredList();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'type':
+          return compare(a.typeName, b.typeName, isAsc);
+        case 'isActive':
+          return compare(a.isActive, b.isActive, isAsc);
+        case 'isReconcilable':
+          return compare(a.isReconcilable, b.isReconcilable, isAsc);
+        case 'costCentre':
+          return compare(a.costCentre.name, b.costCentre.name, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'type', 'isActive', 'isReconcilable', 'costCentre'];
 
   constructor() {
-    this.form = new FormGroup({
-      filter: new FormControl<string>('', { nonNullable: true }),
+    afterNextRender(() => {
+      this.accountForm().focusBoundControl();
+    });
+    effect(() => {
+      const q = this.debouncedFilter.value() ?? '';
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: { q: q || null },
+        queryParamsHandling: 'merge',
+        replaceUrl: true,
+      });
     });
-    // Listen to Filter Change
-    this.filter = this.form.controls.filter.valueChanges.pipe(debounceTime(150), distinctUntilChanged());
-
-    this.dataSource = new AccountListDataSource(this.list, this.filter, this.paginator, this.sort);
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: Account[]; accountTypes: AccountType[] };
-      this.accountTypes = data.accountTypes;
-      data.list.forEach((x) => (x.typeName = this.accountTypes.find((y) => y.id === x.type)?.name ?? ''));
-      this.list = data.list;
-    });
-    this.dataSource = new AccountListDataSource(this.list, this.filter, this.paginator, this.sort);
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.filterElement.nativeElement.focus();
-    }, 0);
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
+
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/account/account-type.resolver.spec.ts b/overlord/src/app/account/account-type.resolver.spec.ts
deleted file mode 100644
index fed2bb2b..00000000
--- a/overlord/src/app/account/account-type.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { AccountType } from '../core/account-type';
-import { accountTypeResolver } from './account-type.resolver';
-
-describe('accountTypeResolver', () => {
-  const executeResolver: ResolveFn<AccountType[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => accountTypeResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/account/account-type.resolver.ts b/overlord/src/app/account/account-type.resolver.ts
deleted file mode 100644
index 0b330b59..00000000
--- a/overlord/src/app/account/account-type.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { AccountType } from '../core/account-type';
-import { AccountTypeService } from './account-type.service';
-
-export const accountTypeResolver: ResolveFn<AccountType[]> = () => {
-  return inject(AccountTypeService).list();
-};
diff --git a/overlord/src/app/account/account-type.service.ts b/overlord/src/app/account/account-type.service.ts
index 627b7103..d7de111b 100644
--- a/overlord/src/app/account/account-type.service.ts
+++ b/overlord/src/app/account/account-type.service.ts
@@ -1,14 +1,10 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, httpResource } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
 
 import { AccountType } from '../core/account-type';
 import { ErrorLoggerService } from '../core/error-logger.service';
 
 const url = '/api/account-types';
-const serviceName = 'AccountTypeService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,9 +12,7 @@ export class AccountTypeService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(): Observable<AccountType[]> {
-    return this.http.get<AccountType[]>(url).pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<
-      AccountType[]
-    >;
+  list() {
+    return httpResource<AccountType[]>(() => url);
   }
 }
diff --git a/overlord/src/app/account/account.resolver.spec.ts b/overlord/src/app/account/account.resolver.spec.ts
deleted file mode 100644
index b1097a8d..00000000
--- a/overlord/src/app/account/account.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Account } from '../core/account';
-import { accountResolver } from './account.resolver';
-
-describe('accountResolver', () => {
-  const executeResolver: ResolveFn<Account> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => accountResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/account/account.resolver.ts b/overlord/src/app/account/account.resolver.ts
deleted file mode 100644
index e8957738..00000000
--- a/overlord/src/app/account/account.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Account } from '../core/account';
-import { AccountService } from '../core/account.service';
-
-export const accountResolver: ResolveFn<Account> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(AccountService).get(id);
-};
diff --git a/overlord/src/app/account/account.routes.ts b/overlord/src/app/account/account.routes.ts
index 7ddcd88b..b7014780 100644
--- a/overlord/src/app/account/account.routes.ts
+++ b/overlord/src/app/account/account.routes.ts
@@ -1,12 +1,8 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-import { costCentreListResolver } from '../cost-centre/cost-centre-list.resolver';
 import { AccountDetailComponent } from './account-detail/account-detail.component';
-import { accountListResolver } from './account-list.resolver';
 import { AccountListComponent } from './account-list/account-list.component';
-import { accountTypeResolver } from './account-type.resolver';
-import { accountResolver } from './account.resolver';
 
 export const routes: Routes = [
   {
@@ -16,10 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Accounts',
     },
-    resolve: {
-      list: accountListResolver,
-      accountTypes: accountTypeResolver,
-    },
   },
   {
     path: 'new',
@@ -28,11 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Accounts',
     },
-    resolve: {
-      item: accountResolver,
-      accountTypes: accountTypeResolver,
-      costCentres: costCentreListResolver,
-    },
   },
   {
     path: ':id',
@@ -41,10 +28,5 @@ export const routes: Routes = [
     data: {
       permission: 'Accounts',
     },
-    resolve: {
-      item: accountResolver,
-      accountTypes: accountTypeResolver,
-      costCentres: costCentreListResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/app.config.ts b/overlord/src/app/app.config.ts
index 49b5b5b9..919fec7d 100644
--- a/overlord/src/app/app.config.ts
+++ b/overlord/src/app/app.config.ts
@@ -1,60 +1,44 @@
-import { LayoutModule } from '@angular/cdk/layout';
-import { provideHttpClient, withInterceptors, withFetch } from '@angular/common/http';
-import { ApplicationConfig, importProvidersFrom, LOCALE_ID, provideZonelessChangeDetection } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import {
+  ApplicationConfig,
+  importProvidersFrom,
+  isDevMode,
+  LOCALE_ID,
+  provideZonelessChangeDetection,
+} from '@angular/core';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
-import { MatButtonModule } from '@angular/material/button';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MAT_SNACK_BAR_DEFAULT_OPTIONS, MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { MatToolbarModule } from '@angular/material/toolbar';
+import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
 import { BrowserModule } from '@angular/platform-browser';
-import { provideRouter, withRouterConfig } from '@angular/router';
+import { provideRouter, withComponentInputBinding, withRouterConfig } from '@angular/router';
 
 import { dateFormat } from './app.environment';
 import { routes } from './app.routes';
 import { AuthService } from './auth/auth.service';
 import { authInterceptor } from './core/auth.interceptor';
+import { delayInterceptor } from './core/delay-interceptor';
 import { jwtInterceptor } from './core/jwt.interceptor';
 import { refreshInterceptor } from './core/refresh.interceptor';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    importProvidersFrom(
-      BrowserModule,
-      LayoutModule,
-      MatButtonModule,
-      MatDividerModule,
-      MatIconModule,
-      MatInputModule,
-      MatSidenavModule,
-      MatToolbarModule,
-      MatListModule,
-      MatMenuModule,
-      MatProgressSpinnerModule,
-      MatSnackBarModule,
-      MatTableModule,
-      MatPaginatorModule,
-      MatSortModule,
-      ReactiveFormsModule,
-    ),
+    importProvidersFrom(BrowserModule),
     { provide: LOCALE_ID, useValue: 'en-IN' },
     AuthService,
-    provideHttpClient(withFetch(), withInterceptors([refreshInterceptor, jwtInterceptor, authInterceptor])),
+    provideHttpClient(
+      withInterceptors([
+        authInterceptor,
+        jwtInterceptor,
+        refreshInterceptor,
+        ...(isDevMode() ? [delayInterceptor] : []),
+      ]),
+    ),
     provideRouter(
       routes,
       withRouterConfig({
         onSameUrlNavigation: 'reload',
       }),
+      withComponentInputBinding(),
     ),
     { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
     { provide: MAT_DATE_FORMATS, useValue: dateFormat },
diff --git a/overlord/src/app/attendance/attendance-datasource.ts b/overlord/src/app/attendance/attendance-datasource.ts
deleted file mode 100644
index 2c60ea4a..00000000
--- a/overlord/src/app/attendance/attendance-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { AttendanceItem } from './attendance-item';
-
-export class AttendanceDataSource extends DataSource<AttendanceItem> {
-  constructor(private data: Observable<AttendanceItem[]>) {
-    super();
-  }
-
-  connect(): Observable<AttendanceItem[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/attendance/attendance-type.resolver.ts b/overlord/src/app/attendance/attendance-type.resolver.ts
deleted file mode 100644
index b64d2136..00000000
--- a/overlord/src/app/attendance/attendance-type.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { AttendanceType } from './attendance-type';
-import { AttendanceTypeService } from './attendance-type.service';
-
-export const attendanceTypeResolver: ResolveFn<AttendanceType[]> = () => {
-  return inject(AttendanceTypeService).list();
-};
diff --git a/overlord/src/app/attendance/attendance-type.service.ts b/overlord/src/app/attendance/attendance-type.service.ts
index dd7dec39..117da2bf 100644
--- a/overlord/src/app/attendance/attendance-type.service.ts
+++ b/overlord/src/app/attendance/attendance-type.service.ts
@@ -1,22 +1,16 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, httpResource } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { AttendanceType } from './attendance-type';
 
 const url = '/api/attendance-types';
-const serviceName = 'AttendanceTypeService';
-
 @Injectable({ providedIn: 'root' })
 export class AttendanceTypeService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(): Observable<AttendanceType[]> {
-    return this.http
-      .get<AttendanceType[]>(url)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<AttendanceType[]>;
+  list() {
+    return httpResource<AttendanceType[]>(() => url);
   }
 }
diff --git a/overlord/src/app/attendance/attendance.component.html b/overlord/src/app/attendance/attendance.component.html
index 80cf5815..00ca0d5f 100644
--- a/overlord/src/app/attendance/attendance.component.html
+++ b/overlord/src/app/attendance/attendance.component.html
@@ -1,6 +1,6 @@
 <h2>Attendance</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-4-5">
       <mat-label>Date</mat-label>
@@ -9,7 +9,7 @@
         #dateElement
         [matDatepicker]="date"
         (focus)="dateElement.select()"
-        formControlName="date"
+        [formField]="form.date"
         autocomplete="off"
       />
       <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
@@ -17,73 +17,81 @@
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="show()" class="flex-auto basis-1-5">Show</button>
   </div>
-  <mat-table #table [dataSource]="dataSource" formArrayName="attendances">
-    <!-- Code Column -->
-    <ng-container matColumnDef="code">
-      <mat-header-cell *matHeaderCellDef class="right">Code</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.code }}</mat-cell>
-    </ng-container>
+  @if (infoResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (infoResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+  } @else {
+    <mat-table #table [dataSource]="info().body">
+      <!-- Code Column -->
+      <ng-container matColumnDef="code">
+        <mat-header-cell *matHeaderCellDef class="right">Code</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.code }}</mat-cell>
+      </ng-container>
 
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-    </ng-container>
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+      </ng-container>
 
-    <!-- Designation Column -->
-    <ng-container matColumnDef="designation">
-      <mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
-    </ng-container>
+      <!-- Designation Column -->
+      <ng-container matColumnDef="designation">
+        <mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
+      </ng-container>
 
-    <!-- Department Column -->
-    <ng-container matColumnDef="department">
-      <mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.department }}</mat-cell>
-    </ng-container>
+      <!-- Department Column -->
+      <ng-container matColumnDef="department">
+        <mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.department }}</mat-cell>
+      </ng-container>
 
-    <!-- Status Column -->
-    <ng-container matColumnDef="status">
-      <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="flex-auto">
-        <mat-select formControlName="attendanceType" name="attendanceType">
-          @for (at of attendanceTypes; track at) {
-            <mat-option [value]="at.id">
-              {{ at.name }}
-            </mat-option>
+      <!-- Status Column -->
+      <ng-container matColumnDef="status">
+        <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="flex-auto">
+          @if (form.attendances[i]) {
+            <mat-select [formField]="form.attendances[i].attendanceType">
+              @for (at of attendanceTypes(); track at) {
+                <mat-option [value]="at.id">
+                  {{ at.name }}
+                </mat-option>
+              }
+            </mat-select>
           }
-        </mat-select>
-      </mat-cell>
-    </ng-container>
+        </mat-cell>
+      </ng-container>
 
-    <!-- Prints Column -->
-    <ng-container matColumnDef="prints">
-      <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" class="no-bg">
-        {{ row.prints }}
-        @if (!form.controls.attendances.controls[i].controls.attendanceType.pristine) {
-          <mat-icon class="no-bg">new_releases</mat-icon>
-        }
-        <mat-chip-set class="no-bg">
-          @if (row.hoursWorked.length) {
-            <mat-chip-option
-              class="no-bg"
-              selected
-              selectable="false"
-              [color]="row.fullDay === true ? 'primary' : 'warn'"
-            >
-              {{ row.hoursWorked }}
-            </mat-chip-option>
+      <!-- Prints Column -->
+      <ng-container matColumnDef="prints">
+        <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="no-bg">
+          {{ row.prints }}
+          @if (form.attendances[i] && form.attendances[i].attendanceType !== null) {
+            <mat-icon class="no-bg">new_releases</mat-icon>
           }
-        </mat-chip-set>
-      </mat-cell>
-    </ng-container>
+          <mat-chip-set class="no-bg">
+            @if (row.hoursWorked.length) {
+              <mat-chip-option
+                class="no-bg"
+                selected
+                selectable="false"
+                [color]="row.fullDay === true ? 'primary' : 'warn'"
+              >
+                {{ row.hoursWorked }}
+              </mat-chip-option>
+            }
+          </mat-chip-set>
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; let i = index; columns: displayedColumns" [class]="getClass(i)"></mat-row>
-  </mat-table>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; let i = index; columns: displayedColumns" [class]="getClass(i)"></mat-row>
+    </mat-table>
+  }
 </form>
 
 <div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
+  <button mat-raised-button color="primary" (click)="save()">Save</button>
 </div>
diff --git a/overlord/src/app/attendance/attendance.component.ts b/overlord/src/app/attendance/attendance.component.ts
index c7bb4dc2..7a9a252a 100644
--- a/overlord/src/app/attendance/attendance.component.ts
+++ b/overlord/src/app/attendance/attendance.component.ts
@@ -1,5 +1,5 @@
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, input, computed, linkedSignal, afterNextRender } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatOptionModule } from '@angular/material/core';
@@ -11,23 +11,28 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject } from 'rxjs';
 
 import { AuthService } from '../auth/auth.service';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { Attendance } from './attendance';
-import { AttendanceDataSource } from './attendance-datasource';
-import { AttendanceItem } from './attendance-item';
-import { AttendanceType } from './attendance-type';
+import { AttendanceTypeService } from './attendance-type.service';
 import { AttendanceService } from './attendance.service';
 
+export interface AttendanceFormData {
+  date: moment.Moment;
+  attendances: { attendanceType: number | null }[];
+}
+
 @Component({
   selector: 'app-attendance',
   templateUrl: './attendance.component.html',
   styleUrls: ['./attendance.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -37,76 +42,62 @@ import { AttendanceService } from './attendance.service';
     MatOptionModule,
     MatIconModule,
     MatChipsModule,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class AttendanceComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class AttendanceComponent {
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private auth = inject(AuthService);
   private ser = inject(AttendanceService);
+  private attendanceTypeSer = inject(AttendanceTypeService);
+  date = input(null, { transform: (v: string | null | undefined) => v ?? null });
 
-  @ViewChild('dateElement', { static: false }) dateElement!: ElementRef<HTMLInputElement>;
-  public attendanceObservable = new BehaviorSubject<AttendanceItem[]>([]);
-  dataSource: AttendanceDataSource = new AttendanceDataSource(this.attendanceObservable);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    attendances: FormArray<
-      FormGroup<{
-        attendanceType: FormControl<number>;
-      }>
-    >;
-  }>;
+  infoResource = this.ser.get(this.date);
+  info = computed(() => this.infoResource.value() ?? new Attendance());
+  attendanceTypesResource = this.attendanceTypeSer.list();
+  attendanceTypes = computed(() => this.attendanceTypesResource.value() ?? []);
 
-  info: Attendance = new Attendance();
-  attendanceTypes: AttendanceType[] = [];
+  model = linkedSignal({
+    source: this.info,
+    computation: (infoVal): AttendanceFormData => ({
+      date: moment(infoVal.date),
+      attendances: infoVal.body.map((x) => ({
+        attendanceType: x.attendanceType.id,
+      })),
+    }),
+  });
+
+  form = createForm(this.model);
 
   displayedColumns = ['code', 'name', 'designation', 'department', 'status', 'prints'];
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
+    this.form().focusBoundControl();
   }
 
   constructor() {
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      attendances: new FormArray<FormGroup<{ attendanceType: FormControl<number> }>>([]),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: Attendance; attendanceTypes: AttendanceType[] };
-
-      this.info = data.info;
-      this.attendanceTypes = data.attendanceTypes;
-      this.form.controls.date.setValue(moment(this.info.date, 'DD-MMM-YYYY'));
-      this.form.controls.attendances.clear();
-      this.info.body.forEach((x) =>
-        this.form.controls.attendances.push(
-          new FormGroup({
-            attendanceType: new FormControl(x.attendanceType.id, { nonNullable: true }),
-          }),
-        ),
-      );
-      this.dataSource = new AttendanceDataSource(this.attendanceObservable);
-      this.attendanceObservable.next(this.info.body);
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
   getClass(index: number) {
-    const array = this.form.controls.attendances;
-    const id = array.controls[index].value.attendanceType;
-    const { name } = this.attendanceTypes.filter((x) => x.id === id)[0];
-    return name.toLowerCase().replace(/(\s+\+\s+)|(\s+)/g, '-');
+    const array = this.model().attendances;
+    if (!array || !array[index]) return '';
+    const id = array[index].attendanceType;
+    const typeObj = this.attendanceTypes().filter((x) => x.id === id)[0];
+    if (!typeObj) return '';
+    return typeObj.name.toLowerCase().replace(/(\s+\+\s+)|(\s+)/g, '-');
   }
 
   show() {
-    const date = moment(this.form.value.date).format('DD-MMM-YYYY');
+    const date = moment(this.model().date).format('DD-MMM-YYYY');
     this.router.navigate(['/attendance', date]);
   }
 
@@ -116,20 +107,23 @@ export class AttendanceComponent implements OnInit {
         this.snackBar.open('', 'Success');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   getAttendance(): Attendance {
-    const formModel = this.form.value;
-    this.info.date = moment(formModel.date).format('DD-MMM-YYYY');
-    const array = this.form.controls.attendances;
+    const formModel = this.model();
+    const currentInfo = this.info();
+    currentInfo.date = moment(formModel.date).format('DD-MMM-YYYY');
+    const array = formModel.attendances;
     if (array) {
-      this.info.body.forEach((item, index) => {
-        item.attendanceType.id = array.controls[index].value.attendanceType ?? 0;
+      currentInfo.body.forEach((item, index) => {
+        if (array[index]) {
+          item.attendanceType.id = array[index].attendanceType ?? 0;
+        }
       });
     }
-    return this.info;
+    return currentInfo;
   }
 }
diff --git a/overlord/src/app/attendance/attendance.resolver.spec.ts b/overlord/src/app/attendance/attendance.resolver.spec.ts
deleted file mode 100644
index 4003fad9..00000000
--- a/overlord/src/app/attendance/attendance.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Attendance } from './attendance';
-import { attendanceResolver } from './attendance.resolver';
-
-describe('attendanceResolver', () => {
-  const executeResolver: ResolveFn<Attendance> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => attendanceResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/attendance/attendance.resolver.ts b/overlord/src/app/attendance/attendance.resolver.ts
deleted file mode 100644
index 3c131671..00000000
--- a/overlord/src/app/attendance/attendance.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Attendance } from './attendance';
-import { AttendanceService } from './attendance.service';
-
-export const attendanceResolver: ResolveFn<Attendance> = (route) => {
-  const date = route.paramMap.get('date');
-  return inject(AttendanceService).get(date);
-};
diff --git a/overlord/src/app/attendance/attendance.routes.ts b/overlord/src/app/attendance/attendance.routes.ts
index 6aa62067..c04bdd65 100644
--- a/overlord/src/app/attendance/attendance.routes.ts
+++ b/overlord/src/app/attendance/attendance.routes.ts
@@ -1,9 +1,7 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-import { attendanceTypeResolver } from './attendance-type.resolver';
 import { AttendanceComponent } from './attendance.component';
-import { attendanceResolver } from './attendance.resolver';
 
 export const routes: Routes = [
   {
@@ -13,10 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Attendance',
     },
-    resolve: {
-      info: attendanceResolver,
-      attendanceTypes: attendanceTypeResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -26,10 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Attendance',
     },
-    resolve: {
-      info: attendanceResolver,
-      attendanceTypes: attendanceTypeResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/attendance/attendance.service.ts b/overlord/src/app/attendance/attendance.service.ts
index 95466f91..4ada035f 100644
--- a/overlord/src/app/attendance/attendance.service.ts
+++ b/overlord/src/app/attendance/attendance.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,23 +7,21 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { Attendance } from './attendance';
 
 const url = '/api/attendance';
-const serviceName = 'AttendanceService';
-
 @Injectable({ providedIn: 'root' })
 export class AttendanceService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(date: string | null): Observable<Attendance> {
-    const getUrl: string = date === null ? url : `${url}/${date}`;
-    return this.http
-      .get<Attendance>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get date=${date}`))) as Observable<Attendance>;
+  get(date: Signal<string | null>) {
+    return httpResource<Attendance>(() => {
+      const getUrl: string = date() === null ? url : `${url}/${date()}`;
+      return getUrl;
+    });
   }
 
   save(attendance: Attendance): Observable<Attendance> {
     return this.http
       .post<Attendance>(`${url}/${attendance.date}`, attendance)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<Attendance>;
+      .pipe(catchError(this.log.handleError('AttendanceService', 'save'))) as Observable<Attendance>;
   }
 }
diff --git a/overlord/src/app/auth/login/login.component.html b/overlord/src/app/auth/login/login.component.html
index 63d77f24..4d946829 100644
--- a/overlord/src/app/auth/login/login.component.html
+++ b/overlord/src/app/auth/login/login.component.html
@@ -1,16 +1,16 @@
 <h2>Login</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Username</mat-label>
-      <input matInput #nameElement formControlName="username" />
+      <input matInput [formField]="form.username" />
     </mat-form-field>
   </div>
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Password</mat-label>
-      <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" (keyup.enter)="login()" />
+      <input matInput [formField]="form.password" [type]="hide ? 'password' : 'text'" (keyup.enter)="login()" />
       <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
     </mat-form-field>
   </div>
@@ -20,7 +20,7 @@
     <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Otp</mat-label>
-        <input matInput formControlName="otp" />
+        <input matInput [formField]="form.otp" />
       </mat-form-field>
     </div>
   }
diff --git a/overlord/src/app/auth/login/login.component.ts b/overlord/src/app/auth/login/login.component.ts
index 83e073fd..83a06acd 100644
--- a/overlord/src/app/auth/login/login.component.ts
+++ b/overlord/src/app/auth/login/login.component.ts
@@ -1,5 +1,5 @@
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { ChangeDetectorRef, Component, inject, OnInit, afterNextRender, linkedSignal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -11,13 +11,19 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { CookieService } from '../../shared/cookie.service';
 import { AuthService } from '../auth.service';
 
+export interface LoginFormData {
+  username: string;
+  password: string;
+  otp: string;
+}
+
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'],
-  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatDividerModule, MatButtonModule],
+  imports: [FormField, FormRoot, MatFormFieldModule, MatInputModule, MatIconModule, MatDividerModule, MatButtonModule],
 })
-export class LoginComponent implements OnInit, AfterViewInit {
+export class LoginComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private auth = inject(AuthService);
   private router = inject(Router);
@@ -25,12 +31,16 @@ export class LoginComponent implements OnInit, AfterViewInit {
   private cs = inject(CookieService);
   private cd = inject(ChangeDetectorRef);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    username: FormControl<string>;
-    password: FormControl<string>;
-    otp: FormControl<number | null>;
-  }>;
+  model = linkedSignal({
+    source: () => null,
+    computation: (): LoginFormData => ({
+      username: '',
+      password: '',
+      otp: '',
+    }),
+  });
+
+  form = createForm(this.model);
 
   hide: boolean;
   showOtp: boolean;
@@ -40,10 +50,8 @@ export class LoginComponent implements OnInit, AfterViewInit {
   constructor() {
     this.hide = true;
     this.showOtp = false;
-    this.form = new FormGroup({
-      username: new FormControl('', { validators: Validators.required, nonNullable: true }),
-      password: new FormControl('', { validators: Validators.required, nonNullable: true }),
-      otp: new FormControl(0),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
@@ -51,17 +59,11 @@ export class LoginComponent implements OnInit, AfterViewInit {
     this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   login(): void {
-    const formModel = this.form.value;
+    const formModel = this.model();
     const username = formModel.username ?? '';
     const password = formModel.password ?? '';
-    const otp = formModel.otp ?? 0;
+    const otp = Number(formModel.otp) || 0;
     this.auth
       .login(username, password, otp)
       // .pipe(first())
diff --git a/overlord/src/app/balance-sheet/balance-sheet-datasource.ts b/overlord/src/app/balance-sheet/balance-sheet-datasource.ts
deleted file mode 100644
index 4b27ed79..00000000
--- a/overlord/src/app/balance-sheet/balance-sheet-datasource.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { BalanceSheetItem } from './balance-sheet-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class BalanceSheetDataSource extends DataSource<BalanceSheetItem> {
-  constructor(
-    public data: BalanceSheetItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<BalanceSheetItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: BalanceSheetItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: BalanceSheetItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          if (a.name === undefined || b.name === undefined) {
-            return 0;
-          }
-          return compare(a.name, b.name, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/balance-sheet/balance-sheet.component.html b/overlord/src/app/balance-sheet/balance-sheet.component.html
index 1ba01b45..ee4c0993 100644
--- a/overlord/src/app/balance-sheet/balance-sheet.component.html
+++ b/overlord/src/app/balance-sheet/balance-sheet.component.html
@@ -1,59 +1,65 @@
 <h2>Balance Sheet</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Date</mat-label>
-      <input matInput #dateElement [matDatepicker]="dateInput" formControlName="date" autocomplete="off" />
+      <input matInput #dateElement [matDatepicker]="dateInput" [formField]="form.date" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="dateInput"></mat-datepicker-toggle>
       <mat-datepicker #dateInput></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="show()">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Group Column -->
-  <ng-container matColumnDef="group">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef>{{ info.footer?.group }}</mat-footer-cell>
-  </ng-container>
+@if (infoResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (infoResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Group Column -->
+    <ng-container matColumnDef="group">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef>{{ info().footer?.group }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef>{{ info.footer?.name }}</mat-footer-cell>
-  </ng-container>
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef>{{ info().footer?.name }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- SubAmount Column -->
-  <ng-container matColumnDef="subAmount">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.subAmount | currency: 'INR' | clear }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right"
-      >{{ info.footer?.subAmount | currency: 'INR' | clear }}
-    </mat-footer-cell>
-  </ng-container>
+    <!-- SubAmount Column -->
+    <ng-container matColumnDef="subAmount">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.subAmount | currency: 'INR' | clear }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right"
+        >{{ $safeNavigationMigration(info().footer?.subAmount) | currency: 'INR' | clear }}
+      </mat-footer-cell>
+    </ng-container>
 
-  <!-- Total Column -->
-  <ng-container matColumnDef="total">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Total</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' | clear }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right"
-      >{{ info.footer?.amount | currency: 'INR' | clear }}
-    </mat-footer-cell>
-  </ng-container>
+    <!-- Total Column -->
+    <ng-container matColumnDef="total">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Total</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' | clear }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right"
+        >{{ $safeNavigationMigration(info().footer?.amount) | currency: 'INR' | clear }}
+      </mat-footer-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="(this.info().body ?? []).length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/balance-sheet/balance-sheet.component.ts b/overlord/src/app/balance-sheet/balance-sheet.component.ts
index 02154780..35801712 100644
--- a/overlord/src/app/balance-sheet/balance-sheet.component.ts
+++ b/overlord/src/app/balance-sheet/balance-sheet.component.ts
@@ -1,26 +1,32 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, input, computed, linkedSignal, signal, afterNextRender } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
+export interface BalanceSheetFormData {
+  date: moment.Moment;
+}
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { ClearPipe } from '../shared/clear.pipe';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { BalanceSheet } from './balance-sheet';
-import { BalanceSheetDataSource } from './balance-sheet-datasource';
+import { BalanceSheetService } from './balance-sheet.service';
 
 @Component({
   selector: 'app-balance-sheet',
   templateUrl: './balance-sheet.component.html',
   styleUrls: ['./balance-sheet.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -30,20 +36,69 @@ import { BalanceSheetDataSource } from './balance-sheet-datasource';
     MatPaginatorModule,
     CurrencyPipe,
     ClearPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class BalanceSheetComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class BalanceSheetComponent {
   private router = inject(Router);
+  private ser = inject(BalanceSheetService);
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  date = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  infoResource = this.ser.list(this.date);
+  info = computed(() => this.infoResource.value() ?? new BalanceSheet());
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
-  info: BalanceSheet = new BalanceSheet();
-  dataSource: BalanceSheetDataSource = new BalanceSheetDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-  }>;
+  sortActive = signal('');
+  sortDirection = signal('');
+
+  formModel = linkedSignal<import('./balance-sheet').BalanceSheet, BalanceSheetFormData>({
+    source: this.info,
+    computation: (info: BalanceSheet): BalanceSheetFormData => ({
+      date: info.date ? moment(info.date, 'DD-MMM-YYYY') : moment(new Date()),
+    }),
+  });
+
+  form = createForm(this.formModel);
+  sortedList = computed(() => {
+    const data = this.info().body ?? [];
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'group':
+          return compare(a.group ?? '', b.group ?? '', isAsc);
+        case 'name':
+          return compare(a.name ?? '', b.name ?? '', isAsc);
+        case 'subAmount':
+          return compare(a.subAmount ?? 0, b.subAmount ?? 0, isAsc);
+        case 'total':
+          return compare(a.amount ?? 0, b.amount ?? 0, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  constructor() {
+    afterNextRender(() => {
+      this.form().focusBoundControl();
+    });
+  }
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['group', 'name', 'subAmount', 'total'];
@@ -51,26 +106,7 @@ export class BalanceSheetComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
-  }
-
-  constructor() {
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: BalanceSheet };
-
-      this.info = data.info;
-      this.form.setValue({
-        date: moment(this.info.date, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new BalanceSheetDataSource(this.info.body, this.paginator, this.sort);
-    });
+    this.form().focusBoundControl();
   }
 
   show() {
@@ -79,7 +115,19 @@ export class BalanceSheetComponent implements OnInit {
   }
 
   getDate(): string {
-    const formModel = this.form.value;
+    const formModel = this.formModel();
     return moment(formModel.date).format('DD-MMM-YYYY');
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/balance-sheet/balance-sheet.resolver.spec.ts b/overlord/src/app/balance-sheet/balance-sheet.resolver.spec.ts
deleted file mode 100644
index 00a54fda..00000000
--- a/overlord/src/app/balance-sheet/balance-sheet.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { BalanceSheet } from './balance-sheet';
-import { balanceSheetResolver } from './balance-sheet.resolver';
-
-describe('balanceSheetResolver', () => {
-  const executeResolver: ResolveFn<BalanceSheet> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => balanceSheetResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/balance-sheet/balance-sheet.resolver.ts b/overlord/src/app/balance-sheet/balance-sheet.resolver.ts
deleted file mode 100644
index 93550e66..00000000
--- a/overlord/src/app/balance-sheet/balance-sheet.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { BalanceSheet } from './balance-sheet';
-import { BalanceSheetService } from './balance-sheet.service';
-
-export const balanceSheetResolver: ResolveFn<BalanceSheet> = (route) => {
-  const date = route.paramMap.get('date');
-  return inject(BalanceSheetService).list(date);
-};
diff --git a/overlord/src/app/balance-sheet/balance-sheet.routes.ts b/overlord/src/app/balance-sheet/balance-sheet.routes.ts
index 8dea4e4e..01006ad5 100644
--- a/overlord/src/app/balance-sheet/balance-sheet.routes.ts
+++ b/overlord/src/app/balance-sheet/balance-sheet.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { BalanceSheetComponent } from './balance-sheet.component';
-import { balanceSheetResolver } from './balance-sheet.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Balance Sheet',
     },
-    resolve: {
-      info: balanceSheetResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Balance Sheet',
     },
-    resolve: {
-      info: balanceSheetResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/balance-sheet/balance-sheet.service.ts b/overlord/src/app/balance-sheet/balance-sheet.service.ts
index 69674ae4..371ed2c0 100644
--- a/overlord/src/app/balance-sheet/balance-sheet.service.ts
+++ b/overlord/src/app/balance-sheet/balance-sheet.service.ts
@@ -1,25 +1,17 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { httpResource } from '@angular/common/http';
+import { Injectable, Signal } from '@angular/core';
 
-import { ErrorLoggerService } from '../core/error-logger.service';
 import { BalanceSheet } from './balance-sheet';
 
 const url = '/api/balance-sheet';
-const serviceName = 'BalanceSheetService';
-
 @Injectable({
   providedIn: 'root',
 })
 export class BalanceSheetService {
-  private http = inject(HttpClient);
-  private log = inject(ErrorLoggerService);
-
-  list(date: string | null): Observable<BalanceSheet> {
-    const listUrl = date === null ? url : `${url}/${date}`;
-    return this.http
-      .get<BalanceSheet>(listUrl)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<BalanceSheet>;
+  list(date: Signal<string | null>) {
+    return httpResource<BalanceSheet>(() => {
+      const listUrl = date() === null ? url : `${url}/${date()}`;
+      return listUrl;
+    });
   }
 }
diff --git a/overlord/src/app/batch-integrity-report/batch-integrity-report-datasource.ts b/overlord/src/app/batch-integrity-report/batch-integrity-report-datasource.ts
deleted file mode 100644
index 6c01929b..00000000
--- a/overlord/src/app/batch-integrity-report/batch-integrity-report-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable, of as observableOf } from 'rxjs';
-
-import { BatchIntegrity } from './batch-integrity';
-
-export class BatchIntegrityReportDatasource extends DataSource<BatchIntegrity> {
-  constructor(public data: BatchIntegrity[]) {
-    super();
-  }
-
-  connect(): Observable<BatchIntegrity[]> {
-    return observableOf(this.data);
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/batch-integrity-report/batch-integrity-report.component.html b/overlord/src/app/batch-integrity-report/batch-integrity-report.component.html
index 471f2d4a..98875dbe 100644
--- a/overlord/src/app/batch-integrity-report/batch-integrity-report.component.html
+++ b/overlord/src/app/batch-integrity-report/batch-integrity-report.component.html
@@ -1,30 +1,36 @@
 <h2>Batch Integrity</h2>
 
-<mat-table [dataSource]="dataSource" aria-label="Elements">
-  <!-- Batch Column -->
-  <ng-container matColumnDef="batch">
-    <mat-header-cell *matHeaderCellDef>Batch</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      {{ row.product }} dated {{ row.date }} &#64; {{ row.price | currency: 'INR' }} is showing
-      {{ row.showing }} instead of {{ row.actual }}
-    </mat-cell>
-  </ng-container>
+@if (infoResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (infoResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+} @else {
+  <mat-table [dataSource]="info()">
+    <!-- Batch Column -->
+    <ng-container matColumnDef="batch">
+      <mat-header-cell *matHeaderCellDef>Batch</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        {{ row.product }} dated {{ row.date }} &#64; {{ row.price | currency: 'INR' }} is showing
+        {{ row.showing }} instead of {{ row.actual }}
+      </mat-cell>
+    </ng-container>
 
-  <!-- Details Column -->
-  <ng-container matColumnDef="details">
-    <mat-header-cell *matHeaderCellDef>Details</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        @for (detail of row.details; track detail) {
-          <li>
-            <a [routerLink]="detail.url">{{ detail.type }}</a> on {{ detail.date }} of {{ detail.quantity }} &#64;
-            {{ detail.price | currency: 'INR' }}
-          </li>
-        }
-      </ul>
-    </mat-cell>
-  </ng-container>
+    <!-- Details Column -->
+    <ng-container matColumnDef="details">
+      <mat-header-cell *matHeaderCellDef>Details</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <ul>
+          @for (detail of row.details; track detail) {
+            <li>
+              <a [routerLink]="detail.url">{{ detail.type }}</a> on {{ detail.date }} of {{ detail.quantity }} &#64;
+              {{ detail.price | currency: 'INR' }}
+            </li>
+          }
+        </ul>
+      </mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
+}
diff --git a/overlord/src/app/batch-integrity-report/batch-integrity-report.component.ts b/overlord/src/app/batch-integrity-report/batch-integrity-report.component.ts
index 2c4be0e7..b54bbc0f 100644
--- a/overlord/src/app/batch-integrity-report/batch-integrity-report.component.ts
+++ b/overlord/src/app/batch-integrity-report/batch-integrity-report.component.ts
@@ -1,32 +1,27 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, inject, computed } from '@angular/core';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 
-import { BatchIntegrity } from './batch-integrity';
-import { BatchIntegrityReportDatasource } from './batch-integrity-report-datasource';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
+import { BatchIntegrityReportService } from './batch-integrity-report.service';
 
 @Component({
   selector: 'app-batch-integrity',
   templateUrl: './batch-integrity-report.component.html',
   styleUrls: ['./batch-integrity-report.component.css'],
-  imports: [MatTableModule, RouterModule, CurrencyPipe],
+  imports: [MatTableModule, RouterModule, CurrencyPipe, SkeletonLoaderComponent, ErrorStateComponent],
 })
-export class BatchIntegrityReportComponent implements OnInit {
+export class BatchIntegrityReportComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  private ser = inject(BatchIntegrityReportService);
 
-  info: BatchIntegrity[] = [];
-  dataSource: BatchIntegrityReportDatasource = new BatchIntegrityReportDatasource(this.info);
   displayedColumns = ['batch', 'details'];
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: BatchIntegrity[] };
-      this.info = data.info;
-      this.dataSource = new BatchIntegrityReportDatasource(this.info);
-    });
-  }
+  infoResource = this.ser.batchIntegrity();
+  info = computed(() => this.infoResource.value() ?? []);
 
   refresh() {
     this.router.navigate([]);
diff --git a/overlord/src/app/batch-integrity-report/batch-integrity-report.routes.ts b/overlord/src/app/batch-integrity-report/batch-integrity-report.routes.ts
index 93234b23..19668617 100644
--- a/overlord/src/app/batch-integrity-report/batch-integrity-report.routes.ts
+++ b/overlord/src/app/batch-integrity-report/batch-integrity-report.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { BatchIntegrityReportComponent } from './batch-integrity-report.component';
-import { batchIntegrityResolver } from './batch-integrity.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Product Ledger',
     },
-    resolve: {
-      info: batchIntegrityResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/batch-integrity-report/batch-integrity-report.service.ts b/overlord/src/app/batch-integrity-report/batch-integrity-report.service.ts
index b870e04d..2e75884f 100644
--- a/overlord/src/app/batch-integrity-report/batch-integrity-report.service.ts
+++ b/overlord/src/app/batch-integrity-report/batch-integrity-report.service.ts
@@ -1,24 +1,18 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { httpResource } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 
-import { ErrorLoggerService } from '../core/error-logger.service';
 import { BatchIntegrity } from './batch-integrity';
 
-const serviceName = 'BatchIntegrityReportService';
-
 @Injectable({
   providedIn: 'root',
 })
 export class BatchIntegrityReportService {
-  private http = inject(HttpClient);
-  private log = inject(ErrorLoggerService);
-
-  batchIntegrity(): Observable<BatchIntegrity[]> {
+  batchIntegrity() {
     const url = '/api/batch-integrity';
-    return this.http
-      .post<BatchIntegrity[]>(url, {})
-      .pipe(catchError(this.log.handleError(serviceName, 'batchIntegrity'))) as Observable<BatchIntegrity[]>;
+    return httpResource<BatchIntegrity[]>(() => ({
+      url,
+      method: 'POST',
+      body: {},
+    }));
   }
 }
diff --git a/overlord/src/app/batch-integrity-report/batch-integrity.resolver.spec.ts b/overlord/src/app/batch-integrity-report/batch-integrity.resolver.spec.ts
deleted file mode 100644
index 8d35727b..00000000
--- a/overlord/src/app/batch-integrity-report/batch-integrity.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { BatchIntegrity } from './batch-integrity';
-import { batchIntegrityResolver } from './batch-integrity.resolver';
-
-describe('batchIntegrityResolver', () => {
-  const executeResolver: ResolveFn<BatchIntegrity[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => batchIntegrityResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/batch-integrity-report/batch-integrity.resolver.ts b/overlord/src/app/batch-integrity-report/batch-integrity.resolver.ts
deleted file mode 100644
index c0aa883c..00000000
--- a/overlord/src/app/batch-integrity-report/batch-integrity.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { BatchIntegrity } from './batch-integrity';
-import { BatchIntegrityReportService } from './batch-integrity-report.service';
-
-export const batchIntegrityResolver: ResolveFn<BatchIntegrity[]> = () => {
-  return inject(BatchIntegrityReportService).batchIntegrity();
-};
diff --git a/overlord/src/app/cash-flow/cash-flow-datasource.ts b/overlord/src/app/cash-flow/cash-flow-datasource.ts
deleted file mode 100644
index 22fdaff6..00000000
--- a/overlord/src/app/cash-flow/cash-flow-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable, of as observableOf } from 'rxjs';
-
-import { CashFlowItem } from './cash-flow-item';
-
-export class CashFlowDataSource extends DataSource<CashFlowItem> {
-  constructor(private data: CashFlowItem[]) {
-    super();
-  }
-
-  connect(): Observable<CashFlowItem[]> {
-    return observableOf(this.data);
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/cash-flow/cash-flow.component.html b/overlord/src/app/cash-flow/cash-flow.component.html
index 67027332..9278bbb0 100644
--- a/overlord/src/app/cash-flow/cash-flow.component.html
+++ b/overlord/src/app/cash-flow/cash-flow.component.html
@@ -1,39 +1,45 @@
 <h2>Cash Flow</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
-      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-      <mat-datepicker #startDate></mat-datepicker>
+      <input matInput [matDatepicker]="startDatePicker" [formField]="form.startDate" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #startDatePicker></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="show()" class="flex-auto basis-1-5">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="row.url" [queryParams]="{ startDate: info.startDate, finishDate: info.finishDate }"
-        >{{ row.name }}
-      </a></mat-cell
-    >
-  </ng-container>
+@if (infoResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (infoResource.error()) {
+  <app-error-state [message]="'Failed to load cash flow.'" (retryAction)="infoResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="row.url" [queryParams]="{ startDate: info().startDate, finishDate: info().finishDate }"
+          >{{ row.name }}
+        </a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Amount Column -->
-  <ng-container matColumnDef="amount">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' | clear }}</mat-cell>
-  </ng-container>
+    <!-- Amount Column -->
+    <ng-container matColumnDef="amount">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' | clear }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
+}
diff --git a/overlord/src/app/cash-flow/cash-flow.component.ts b/overlord/src/app/cash-flow/cash-flow.component.ts
index ff58ce28..d0e21734 100644
--- a/overlord/src/app/cash-flow/cash-flow.component.ts
+++ b/overlord/src/app/cash-flow/cash-flow.component.ts
@@ -1,25 +1,32 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, input, computed, linkedSignal, afterNextRender, signal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
+export interface CashFlowFormData {
+  startDate: moment.Moment;
+  finishDate: moment.Moment;
+}
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import moment from 'moment';
 
 import { ClearPipe } from '../shared/clear.pipe';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { CashFlow } from './cash-flow';
-import { CashFlowDataSource } from './cash-flow-datasource';
+import { CashFlowService } from './cash-flow.service';
 
 @Component({
   selector: 'app-cash-flow',
   templateUrl: './cash-flow.component.html',
   styleUrls: ['./cash-flow.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -29,19 +36,54 @@ import { CashFlowDataSource } from './cash-flow-datasource';
     RouterModule,
     CurrencyPipe,
     ClearPipe,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class CashFlowComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class CashFlowComponent {
   private router = inject(Router);
+  private ser = inject(CashFlowService);
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  sortActive = signal('');
+  sortDirection = signal('');
 
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  info: CashFlow = new CashFlow();
-  dataSource: CashFlowDataSource = new CashFlowDataSource(CashFlow.Data(this.info));
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-  }>;
+  infoResource = this.ser.list(this.id, this.startDate, this.finishDate);
+  info = computed(() => this.infoResource.value() ?? new CashFlow());
+  sortedList = computed(() => {
+    const data = CashFlow.Data(this.info());
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.name ?? '', b.name ?? '', isAsc);
+        case 'amount':
+          return compare(a.amount ?? 0, b.amount ?? 0, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => this.sortedList());
+
+  model = linkedSignal({
+    source: this.info,
+    computation: (info: CashFlow): CashFlowFormData => ({
+      startDate: info.startDate ? moment(info.startDate, 'DD-MMM-YYYY') : moment(new Date()),
+      finishDate: info.finishDate ? moment(info.finishDate, 'DD-MMM-YYYY') : moment(new Date()),
+    }),
+  });
+
+  form = createForm(this.model);
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'amount'];
@@ -49,27 +91,13 @@ export class CashFlowComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
+    // TODO: also select the contents
+    this.form.startDate().focusBoundControl();
   }
 
   constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: CashFlow };
-
-      this.info = data.info;
-      this.form.setValue({
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new CashFlowDataSource(CashFlow.Data(this.info));
+    afterNextRender(() => {
+      this.form.startDate().focusBoundControl();
     });
   }
 
@@ -84,11 +112,18 @@ export class CashFlowComponent implements OnInit {
   }
 
   getInfo(): CashFlow {
-    const formModel = this.form.value;
+    const formModel = this.model();
 
     return new CashFlow({
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
       finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
     });
   }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/cash-flow/cash-flow.resolver.spec.ts b/overlord/src/app/cash-flow/cash-flow.resolver.spec.ts
deleted file mode 100644
index 3bec544b..00000000
--- a/overlord/src/app/cash-flow/cash-flow.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { CashFlow } from './cash-flow';
-import { cashFlowResolver } from './cash-flow.resolver';
-
-describe('cashFlowResolver', () => {
-  const executeResolver: ResolveFn<CashFlow> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => cashFlowResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/cash-flow/cash-flow.resolver.ts b/overlord/src/app/cash-flow/cash-flow.resolver.ts
deleted file mode 100644
index 481a0915..00000000
--- a/overlord/src/app/cash-flow/cash-flow.resolver.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { CashFlow } from './cash-flow';
-import { CashFlowService } from './cash-flow.service';
-
-export const cashFlowResolver: ResolveFn<CashFlow> = (route) => {
-  const id = route.paramMap.get('id');
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(CashFlowService).list(id, startDate, finishDate);
-};
diff --git a/overlord/src/app/cash-flow/cash-flow.routes.ts b/overlord/src/app/cash-flow/cash-flow.routes.ts
index b5022a41..6c45e094 100644
--- a/overlord/src/app/cash-flow/cash-flow.routes.ts
+++ b/overlord/src/app/cash-flow/cash-flow.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { CashFlowComponent } from './cash-flow.component';
-import { cashFlowResolver } from './cash-flow.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Cash Flow',
     },
-    resolve: {
-      info: cashFlowResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Cash Flow',
     },
-    resolve: {
-      info: cashFlowResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/cash-flow/cash-flow.service.ts b/overlord/src/app/cash-flow/cash-flow.service.ts
index 9c920cc1..632eb8ff 100644
--- a/overlord/src/app/cash-flow/cash-flow.service.ts
+++ b/overlord/src/app/cash-flow/cash-flow.service.ts
@@ -1,39 +1,29 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { httpResource } from '@angular/common/http';
+import { Injectable, Signal } from '@angular/core';
 
-import { ErrorLoggerService } from '../core/error-logger.service';
 import { CashFlow } from './cash-flow';
 
 const url = '/api/cash-flow';
-const serviceName = 'CashFlowService';
-
 @Injectable({
   providedIn: 'root',
 })
 export class CashFlowService {
-  private http = inject(HttpClient);
-  private log = inject(ErrorLoggerService);
-
-  list(id: string | null, startDate: string | null, finishDate: string | null): Observable<CashFlow> {
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    let listUrl = '';
-    if (id !== null) {
-      listUrl = `${url}/${id}`;
-    } else if (startDate || finishDate) {
-      listUrl = `${url}/data`;
-    } else {
-      listUrl = url;
-    }
-    return this.http
-      .get<CashFlow>(listUrl, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<CashFlow>;
+  list(id: Signal<string | null>, startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<CashFlow>(() => {
+      const params: Record<string, string> = {};
+      const startDate_val = startDate();
+      if (startDate_val !== null) params['s'] = startDate_val;
+      const finishDate_val = finishDate();
+      if (finishDate_val !== null) params['f'] = finishDate_val;
+      let resultUrl: string;
+      if (id() !== null) {
+        resultUrl = `${url}/${id()}`;
+      } else if (startDate() || finishDate()) {
+        resultUrl = `${url}/data`;
+      } else {
+        resultUrl = url;
+      }
+      return { url: resultUrl, params };
+    });
   }
 }
diff --git a/overlord/src/app/client/client-detail/client-detail.component.html b/overlord/src/app/client/client-detail/client-detail.component.html
index c5de459d..d75385c0 100644
--- a/overlord/src/app/client/client-detail/client-detail.component.html
+++ b/overlord/src/app/client/client-detail/client-detail.component.html
@@ -1,30 +1,37 @@
 <h2>Client</h2>
 
-<form [formGroup]="form" class="flex-col wrapped">
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Code</mat-label>
-      <input matInput formControlName="code" />
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" />
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-checkbox formControlName="enabled" class="flex-auto">Is Enabled?</mat-checkbox>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>OTP</mat-label>
-      <input matInput formControlName="otp" />
-    </mat-form-field>
-  </div>
-</form>
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <form class="flex-col wrapped" [formRoot]="form">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Code</mat-label>
+        <input matInput [formField]="form.code" />
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput [formField]="form.name" />
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-checkbox [formField]="form.enabled" class="flex-auto">Is Enabled?</mat-checkbox>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>OTP</mat-label>
+        <input matInput [formField]="form.otp" />
+      </mat-form-field>
+    </div>
+  </form>
 
-<div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()">Save</button>
-  <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-</div>
+  <div class="row-container">
+    <button mat-raised-button color="primary" (click)="save()">Save</button>
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  </div>
+}
diff --git a/overlord/src/app/client/client-detail/client-detail.component.ts b/overlord/src/app/client/client-detail/client-detail.component.ts
index 084af7c3..76606572 100644
--- a/overlord/src/app/client/client-detail/client-detail.component.ts
+++ b/overlord/src/app/client/client-detail/client-detail.component.ts
@@ -1,73 +1,71 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, afterNextRender, linkedSignal, input, computed } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { Client } from '../client';
 import { ClientService } from '../client.service';
 
+export interface ClientFormData {
+  code: string;
+  name: string;
+  enabled: boolean;
+  otp: string;
+}
+
 @Component({
   selector: 'app-client-detail',
   templateUrl: './client-detail.component.html',
   styleUrls: ['./client-detail.component.css'],
-  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatCheckboxModule, MatButtonModule],
+  imports: [
+    FormField,
+    FormRoot,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class ClientDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class ClientDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private ser = inject(ClientService);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    code: FormControl<number | string>;
-    name: FormControl<string | null>;
-    enabled: FormControl<boolean>;
-    otp: FormControl<number | null>;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  item: Client = new Client();
+  item = computed(() => this.itemResource.value() ?? new Client());
+
+  model = linkedSignal({
+    source: this.item,
+    computation: (item): ClientFormData => ({
+      code: item.code ? String(item.code) : '(Auto)',
+      name: item.name ?? '',
+      enabled: item.enabled ?? false,
+      otp: item.otp ? String(item.otp) : '',
+    }),
+  });
+
+  form = createForm(this.model);
 
   constructor() {
-    this.form = new FormGroup({
-      code: new FormControl<number | string>({ value: '(Auto)', disabled: true }, { nonNullable: true }),
-      name: new FormControl<string | null>(null),
-      enabled: new FormControl<boolean>(false, { nonNullable: true }),
-      otp: new FormControl<number | null>(null),
+    afterNextRender(() => {
+      this.form.name().focusBoundControl();
     });
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: Client };
-
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: Client) {
-    this.item = item;
-    this.form.setValue({
-      code: this.item.code || '(Auto)',
-      name: this.item.name,
-      enabled: this.item.enabled,
-      otp: this.item.otp || null,
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   save() {
     this.ser.update(this.getItem()).subscribe({
       next: () => {
@@ -75,19 +73,19 @@ export class ClientDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/clients');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id).subscribe({
+    this.ser.delete(this.item().id).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/clients');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -106,10 +104,11 @@ export class ClientDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): Client {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    this.item.enabled = formModel.enabled ?? false;
-    this.item.otp = formModel.otp || undefined;
-    return this.item;
+    const formModel = this.model();
+    const item = this.item();
+    item.name = formModel.name ?? '';
+    item.enabled = formModel.enabled ?? false;
+    item.otp = formModel.otp ? Number(formModel.otp) : undefined;
+    return item;
   }
 }
diff --git a/overlord/src/app/client/client-list.resolver.spec.ts b/overlord/src/app/client/client-list.resolver.spec.ts
deleted file mode 100644
index b6d9b28a..00000000
--- a/overlord/src/app/client/client-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Client } from './client';
-import { clientListResolver } from './client-list.resolver';
-
-describe('clientListResolver', () => {
-  const executeResolver: ResolveFn<Client[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => clientListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/client/client-list.resolver.ts b/overlord/src/app/client/client-list.resolver.ts
deleted file mode 100644
index ccc8dfb3..00000000
--- a/overlord/src/app/client/client-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Client } from './client';
-import { ClientService } from './client.service';
-
-export const clientListResolver: ResolveFn<Client[]> = () => {
-  return inject(ClientService).list();
-};
diff --git a/overlord/src/app/client/client-list/client-list-datasource.ts b/overlord/src/app/client/client-list/client-list-datasource.ts
deleted file mode 100644
index 92702ead..00000000
--- a/overlord/src/app/client/client-list/client-list-datasource.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { Client } from '../client';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class ClientListDataSource extends DataSource<Client> {
-  constructor(
-    public data: Client[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<Client[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: Client[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: Client[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        case 'id':
-          return compare(+a.id, +b.id, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/client/client-list/client-list.component.html b/overlord/src/app/client/client-list/client-list.component.html
index 3a6fef9b..1a133471 100644
--- a/overlord/src/app/client/client-list/client-list.component.html
+++ b/overlord/src/app/client/client-list/client-list.component.html
@@ -1,55 +1,61 @@
 <h2>Clients</h2>
 
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Code Column -->
-  <ng-container matColumnDef="code">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Code</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.code }}</mat-cell>
-  </ng-container>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (listResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="listResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Code Column -->
+    <ng-container matColumnDef="code">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Code</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.code }}</mat-cell>
+    </ng-container>
 
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="['/clients', row.id]">{{ row.name }}</a></mat-cell
-    >
-  </ng-container>
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="['/clients', row.id]">{{ row.name }}</a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Enabled Column -->
-  <ng-container matColumnDef="enabled">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Is Enabled?</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.enabled }}</mat-cell>
-  </ng-container>
+    <!-- Enabled Column -->
+    <ng-container matColumnDef="enabled">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Is Enabled?</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.enabled }}</mat-cell>
+    </ng-container>
 
-  <!-- OTP Column -->
-  <ng-container matColumnDef="otp">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>otp</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.otp }}</mat-cell>
-  </ng-container>
+    <!-- OTP Column -->
+    <ng-container matColumnDef="otp">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>otp</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.otp }}</mat-cell>
+    </ng-container>
 
-  <!-- Created Column -->
-  <ng-container matColumnDef="created">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Created</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.creationDate | localTime }}</mat-cell>
-  </ng-container>
+    <!-- Created Column -->
+    <ng-container matColumnDef="created">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Created</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.creationDate | localTime }}</mat-cell>
+    </ng-container>
 
-  <!-- Last Login Column -->
-  <ng-container matColumnDef="last">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Last Login</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      >{{ row.lastUser }} &#64; {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
-    >
-  </ng-container>
+    <!-- Last Login Column -->
+    <ng-container matColumnDef="last">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Last Login</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        >{{ row.lastUser }} &#64; {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
+      >
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="list().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/client/client-list/client-list.component.ts b/overlord/src/app/client/client-list/client-list.component.ts
index 63d60e8e..a6f0f0ea 100644
--- a/overlord/src/app/client/client-list/client-list.component.ts
+++ b/overlord/src/app/client/client-list/client-list.component.ts
@@ -1,35 +1,81 @@
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { Component, computed, inject, signal } from '@angular/core';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
 import { LocalTimePipe } from '../../shared/local-time.pipe';
-import { Client } from '../client';
-import { ClientListDataSource } from './client-list-datasource';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { ClientService } from '../client.service';
 
 @Component({
   selector: 'app-client-list',
   templateUrl: './client-list.component.html',
   styleUrls: ['./client-list.component.css'],
-  imports: [MatTableModule, MatSortModule, RouterModule, MatPaginatorModule, LocalTimePipe],
+  imports: [
+    MatTableModule,
+    MatSortModule,
+    RouterModule,
+    MatPaginatorModule,
+    LocalTimePipe,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class ClientListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class ClientListComponent {
+  private ser = inject(ClientService);
+
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  listResource = this.ser.list();
+  list = computed(() => this.listResource.value() ?? []);
+  sortedList = computed(() => {
+    const data = this.list();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'enabled':
+          return compare(a.enabled, b.enabled, isAsc);
+        case 'creationDate':
+          return compare(a.creationDate, b.creationDate, isAsc);
+        case 'lastDate':
+          return compare(a.lastDate ?? 0, b.lastDate ?? 0, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  list: Client[] = [];
-  dataSource: ClientListDataSource = new ClientListDataSource(this.list, this.paginator, this.sort);
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['code', 'name', 'enabled', 'otp', 'created', 'last'];
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: Client[] };
-
-      this.list = data.list;
-    });
-    this.dataSource = new ClientListDataSource(this.list, this.paginator, this.sort);
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/client/client.resolver.spec.ts b/overlord/src/app/client/client.resolver.spec.ts
deleted file mode 100644
index 82fd888c..00000000
--- a/overlord/src/app/client/client.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Client } from './client';
-import { clientResolver } from './client.resolver';
-
-describe('clientResolver', () => {
-  const executeResolver: ResolveFn<Client> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => clientResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/client/client.resolver.ts b/overlord/src/app/client/client.resolver.ts
deleted file mode 100644
index 829258d3..00000000
--- a/overlord/src/app/client/client.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Client } from './client';
-import { ClientService } from './client.service';
-
-export const clientResolver: ResolveFn<Client> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(ClientService).get(id);
-};
diff --git a/overlord/src/app/client/client.routes.ts b/overlord/src/app/client/client.routes.ts
index 80ecdb18..294893e3 100644
--- a/overlord/src/app/client/client.routes.ts
+++ b/overlord/src/app/client/client.routes.ts
@@ -2,9 +2,7 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { ClientDetailComponent } from './client-detail/client-detail.component';
-import { clientListResolver } from './client-list.resolver';
 import { ClientListComponent } from './client-list/client-list.component';
-import { clientResolver } from './client.resolver';
 
 export const routes: Routes = [
   {
@@ -14,9 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Cost Centres',
     },
-    resolve: {
-      list: clientListResolver,
-    },
   },
   {
     path: ':id',
@@ -25,8 +20,5 @@ export const routes: Routes = [
     data: {
       permission: 'Cost Centres',
     },
-    resolve: {
-      item: clientResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/client/client.service.ts b/overlord/src/app/client/client.service.ts
index 39ab5e1e..9482bfcb 100644
--- a/overlord/src/app/client/client.service.ts
+++ b/overlord/src/app/client/client.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { Client } from './client';
 
 const url = '/api/clients';
-const serviceName = 'ClientService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,28 +14,26 @@ export class ClientService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<Client> {
-    const getUrl: string = id === null ? url : `${url}/${id}`;
-    return this.http
-      .get<Client>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Client>;
+  get(id: Signal<string | null>) {
+    return httpResource<Client>(() => {
+      const getUrl: string = id() === null ? url : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<Client[]> {
-    return this.http
-      .get<Client[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Client[]>;
+  list() {
+    return httpResource<Client[]>(() => `${url}/list`);
   }
 
   update(client: Client): Observable<Client> {
     return this.http
       .put<Client>(`${url}/${client.id}`, client)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<Client>;
+      .pipe(catchError(this.log.handleError('ClientService', 'update'))) as Observable<Client>;
   }
 
   delete(id: string): Observable<Client> {
     return this.http
       .delete<Client>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<Client>;
+      .pipe(catchError(this.log.handleError('ClientService', 'delete'))) as Observable<Client>;
   }
 }
diff --git a/overlord/src/app/closing-stock/closing-stock-datasource.ts b/overlord/src/app/closing-stock/closing-stock-datasource.ts
deleted file mode 100644
index 79bc83da..00000000
--- a/overlord/src/app/closing-stock/closing-stock-datasource.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { ClosingStockItem } from './closing-stock-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class ClosingStockDataSource extends DataSource<ClosingStockItem> {
-  constructor(
-    public data: ClosingStockItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<ClosingStockItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: ClosingStockItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: ClosingStockItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'product':
-          return compare(`${a.group} - ${a.product}`, `${b.group} - ${b.product}`, isAsc);
-        case 'quantity':
-          return compare(+a.quantity, +b.quantity, isAsc);
-        case 'amount':
-          return compare(+a.amount, +b.amount, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/closing-stock/closing-stock.component.html b/overlord/src/app/closing-stock/closing-stock.component.html
index 924c5299..b85d759a 100644
--- a/overlord/src/app/closing-stock/closing-stock.component.html
+++ b/overlord/src/app/closing-stock/closing-stock.component.html
@@ -1,18 +1,18 @@
 <h2 class="row-container space-between">
   <span>Closing Stock</span>
-  @if (dataSource.data.length) {
+  @if ((this.info().items ?? []).length) {
     <button mat-icon-button (click)="exportCsv()">
       <mat-icon>save_alt</mat-icon>
     </button>
   }
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Department</mat-label>
-      <mat-select formControlName="costCentre" name="costCentre">
-        @for (at of costCentres; track at) {
+      <mat-select [formField]="form.costCentre">
+        @for (at of costCentres(); track at) {
           <mat-option [value]="at.id">
             {{ at.name }}
           </mat-option>
@@ -21,96 +21,98 @@
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Date</mat-label>
-      <input matInput #dateElement [matDatepicker]="dateInput" formControlName="date" autocomplete="off" />
+      <input matInput #dateElement [matDatepicker]="dateInput" [formField]="form.date" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="dateInput"></mat-datepicker-toggle>
       <mat-datepicker #dateInput></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="show()" class="flex-auto basis-1-5">Show</button>
   </div>
-  <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements" formArrayName="stocks">
-    <!-- Product Column -->
-    <ng-container matColumnDef="product" class="first">
-      <mat-header-cell *matHeaderCellDef mat-sort-header class="first">Product</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.product.name }}</mat-cell>
-    </ng-container>
+  @if (infoResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (infoResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+  } @else {
+    <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+      <!-- Product Column -->
+      <ng-container matColumnDef="product" class="first">
+        <mat-header-cell *matHeaderCellDef mat-sort-header class="first">Product</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.product.name }}</mat-cell>
+      </ng-container>
 
-    <!-- Group Column -->
-    <ng-container matColumnDef="group">
-      <mat-header-cell *matHeaderCellDef class="middle">Group</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="middle">{{ row.group }}</mat-cell>
-    </ng-container>
+      <!-- Group Column -->
+      <ng-container matColumnDef="group">
+        <mat-header-cell *matHeaderCellDef class="middle">Group</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="middle">{{ row.group }}</mat-cell>
+      </ng-container>
 
-    <!-- Quantity Column -->
-    <ng-container matColumnDef="quantity">
-      <mat-header-cell *matHeaderCellDef mat-sort-header class="right middle">Closing Stock</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right middle">{{ row.quantity | number: '0.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Quantity Column -->
+      <ng-container matColumnDef="quantity">
+        <mat-header-cell *matHeaderCellDef mat-sort-header class="right middle">Closing Stock</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right middle">{{ row.quantity | number: '0.2-2' }}</mat-cell>
+      </ng-container>
 
-    <!-- Physical Column -->
-    <ng-container matColumnDef="physical">
-      <mat-header-cell *matHeaderCellDef class="middle">Physical Stock</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-        <mat-form-field class="flex-auto">
-          <mat-label>Physical</mat-label>
-          <input matInput type="number" formControlName="physical" (change)="updatePhysical($event, row)" />
-        </mat-form-field>
-      </mat-cell>
-    </ng-container>
+      <!-- Physical Column -->
+      <ng-container matColumnDef="physical">
+        <mat-header-cell *matHeaderCellDef class="middle">Physical Stock</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="middle">
+          <mat-form-field class="flex-auto">
+            <mat-label>Physical</mat-label>
+            <input matInput type="number" formControlName="physical" (change)="updatePhysical($event, row)" />
+          </mat-form-field>
+        </mat-cell>
+      </ng-container>
 
-    <!-- Variance Column -->
-    <ng-container matColumnDef="variance" class="middle">
-      <mat-header-cell *matHeaderCellDef class="right">Variance</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right middle">{{
-        row.quantity - row.physical | number: '0.2-2'
-      }}</mat-cell>
-    </ng-container>
+      <!-- Variance Column -->
+      <ng-container matColumnDef="variance" class="middle">
+        <mat-header-cell *matHeaderCellDef class="right">Variance</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right middle">{{
+          row.quantity - row.physical | number: '0.2-2'
+        }}</mat-cell>
+      </ng-container>
 
-    <!-- Department Column -->
-    <ng-container matColumnDef="department">
-      <mat-header-cell *matHeaderCellDef class="middle">Department</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-        <mat-form-field class="flex-auto">
-          <mat-label>Department</mat-label>
-          <mat-select
-            formControlName="costCentre"
-            name="costCentre"
-            (selectionChange)="updateDepartment($event.value, row)"
-          >
-            @for (at of costCentres; track at) {
-              <mat-option [value]="at.id">
-                {{ at.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </mat-cell>
-    </ng-container>
+      <!-- Department Column -->
+      <ng-container matColumnDef="department">
+        <mat-header-cell *matHeaderCellDef class="middle">Department</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="middle">
+          <mat-form-field class="flex-auto">
+            <mat-label>Department</mat-label>
+            <mat-select [formField]="form.costCentre" (selectionChange)="updateDepartment($event.value, row)">
+              @for (at of costCentres(); track at) {
+                <mat-option [value]="at.id">
+                  {{ at.name }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </mat-cell>
+      </ng-container>
 
-    <!-- Amount Column -->
-    <ng-container matColumnDef="amount" class="last">
-      <mat-header-cell *matHeaderCellDef mat-sort-header class="right last">Amount</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Amount Column -->
+      <ng-container matColumnDef="amount" class="last">
+        <mat-header-cell *matHeaderCellDef mat-sort-header class="right last">Amount</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
 
-  <mat-paginator
-    #paginator
-    [length]="dataSource.data.length"
-    [pageIndex]="0"
-    [pageSize]="50"
-    [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
-  >
-  </mat-paginator>
+    <mat-paginator
+      (page)="handlePageEvent($event)"
+      [length]="(this.info().items ?? []).length"
+      [pageIndex]="pageIndex()"
+      [pageSize]="pageSize()"
+      [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
+    >
+    </mat-paginator>
+  }
 </form>
 
 <div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
+  <button mat-raised-button color="primary" (click)="save()" [disabled]="!$any(form).dirty">Save</button>
   @if (canDelete()) {
-    <button mat-raised-button (click)="post()" [disabled]="info.posted || !auth.allowed('post-vouchers')">
-      {{ info.posted ? 'Posted' : 'Post' }}
+    <button mat-raised-button (click)="post()" [disabled]="info().posted || !auth.allowed('post-vouchers')">
+      {{ info().posted ? 'Posted' : 'Post' }}
     </button>
     <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
   }
diff --git a/overlord/src/app/closing-stock/closing-stock.component.ts b/overlord/src/app/closing-stock/closing-stock.component.ts
index 5ef10225..20b8db59 100644
--- a/overlord/src/app/closing-stock/closing-stock.component.ts
+++ b/overlord/src/app/closing-stock/closing-stock.component.ts
@@ -1,6 +1,6 @@
 import { CurrencyPipe, DecimalPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, computed, input, linkedSignal, signal, afterNextRender } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -8,31 +8,40 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatSelectChange, MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { AuthService } from '../auth/auth.service';
 import { CostCentre } from '../core/cost-centre';
 import { User } from '../core/user';
+import { CostCentreService } from '../cost-centre/cost-centre.service';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { ToCsvService } from '../shared/to-csv.service';
 import { ClosingStock } from './closing-stock';
-import { ClosingStockDataSource } from './closing-stock-datasource';
 import { ClosingStockItem } from './closing-stock-item';
 import { ClosingStockService } from './closing-stock.service';
 
+export interface ClosingStockFormData {
+  date: moment.Moment;
+  costCentre: CostCentre | null;
+  stocks: { physical: number; costCentre: string | undefined }[];
+}
+
 @Component({
   selector: 'app-closing-stock',
   templateUrl: './closing-stock.component.html',
   styleUrls: ['./closing-stock.component.css'],
   imports: [
     MatIconModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatSelectModule,
     MatOptionModule,
@@ -44,75 +53,92 @@ import { ClosingStockService } from './closing-stock.service';
     MatPaginatorModule,
     DecimalPipe,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class ClosingStockComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class ClosingStockComponent {
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
-  auth = inject(AuthService);
+  protected auth = inject(AuthService);
   private ser = inject(ClosingStockService);
+  private costCentreSer = inject(CostCentreService);
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  d = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  infoResource = this.ser.list(this.id, this.d);
+  info = computed(() => this.infoResource.value() ?? new ClosingStock());
+  costCentresResource = this.costCentreSer.list();
+
+  costCentres = computed(() => this.costCentresResource.value() ?? []);
+
+  model = linkedSignal({
+    source: computed(() => ({ info: this.info(), costCentres: this.costCentres() })),
+    computation: ({ info, costCentres }): ClosingStockFormData => ({
+      date: moment(info.date, 'DD-MMM-YYYY'),
+      costCentre: costCentres.find((c) => c.id === info.costCentre?.id) || null,
+      stocks: info.items.map((x) => ({
+        physical: x.physical,
+        costCentre: x.costCentre?.id,
+      })),
+    }),
+  });
+
+  form = createForm(this.model);
+
+  sortedList = computed(() => {
+    const data = this.info().items ?? [];
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'product':
+          return compare(a.product?.name ?? '', b.product?.name ?? '', isAsc);
+        case 'group':
+          return compare(a.group ?? '', b.group ?? '', isAsc);
+        case 'quantity':
+          return compare(a.quantity ?? 0, b.quantity ?? 0, isAsc);
+        case 'amount':
+          return compare(a.amount ?? 0, b.amount ?? 0, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
-  info: ClosingStock = new ClosingStock();
-  dataSource: ClosingStockDataSource = new ClosingStockDataSource(this.info.items, this.paginator, this.sort);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    costCentre: FormControl<string | null>;
-    stocks: FormArray<
-      FormGroup<{
-        physical: FormControl<number>;
-        costCentre: FormControl<string | undefined>;
-      }>
-    >;
-  }>;
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-
   displayedColumns = ['product', 'group', 'quantity', 'physical', 'variance', 'department', 'amount'];
 
-  costCentres: CostCentre[];
-
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
+    this.form().focusBoundControl();
   }
 
   constructor() {
-    this.costCentres = [];
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      costCentre: new FormControl<string | null>(null),
-      stocks: new FormArray<FormGroup<{ physical: FormControl<number>; costCentre: FormControl<string | undefined> }>>(
-        [],
-      ),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: ClosingStock; costCentres: CostCentre[] };
-      this.info = data.info;
-      this.costCentres = data.costCentres;
-      this.form.patchValue({
-        date: moment(this.info.date, 'DD-MMM-YYYY'),
-        costCentre: this.info.costCentre.id,
-      });
-      this.form.controls.stocks.clear();
-      this.info.items.forEach((x) =>
-        this.form.controls.stocks.push(
-          new FormGroup({
-            physical: new FormControl(x.physical, { nonNullable: true }),
-            costCentre: new FormControl(x.costCentre?.id, { nonNullable: true }),
-          }),
-        ),
-      );
-      this.dataSource = new ClosingStockDataSource(this.info.items, this.paginator, this.sort);
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
@@ -137,25 +163,23 @@ export class ClosingStockComponent implements OnInit {
   }
 
   getClosingStock(): ClosingStock {
-    const formModel = this.form.value;
-    this.info.date = moment(formModel.date).format('DD-MMM-YYYY');
-    const array = this.form.controls.stocks;
-    this.info.items.forEach((item, index) => {
-      item.physical = +(array.controls[index].value.physical ?? '');
-      item.costCentre =
-        array.controls[index].value.costCentre == null
-          ? undefined
-          : new CostCentre({ id: array.controls[index].value.costCentre });
+    const formModel = this.model();
+    const currentInfo = this.info();
+    currentInfo.date = formModel.date.format('DD-MMM-YYYY');
+    const array = formModel.stocks;
+    currentInfo.items.forEach((item, index) => {
+      item.physical = array[index].physical ?? 0;
+      item.costCentre = array[index].costCentre == null ? undefined : new CostCentre({ id: array[index].costCentre });
     });
-    return this.info;
+    return currentInfo;
   }
 
   getInfo(): ClosingStock {
-    const formModel = this.form.value;
+    const formModel = this.model();
 
     return new ClosingStock({
-      date: moment(formModel.date).format('DD-MMM-YYYY'),
-      costCentre: new CostCentre({ id: formModel.costCentre ?? '' }),
+      date: formModel.date.format('DD-MMM-YYYY'),
+      costCentre: new CostCentre({ id: formModel.costCentre?.id ?? '' }),
     });
   }
 
@@ -167,7 +191,7 @@ export class ClosingStockComponent implements OnInit {
       Amount: 'amount',
     };
 
-    const d = JSON.parse(JSON.stringify(this.dataSource.data)).map((x: ClosingStockItem) => ({
+    const d = JSON.parse(JSON.stringify(this.dataSource())).map((x: ClosingStockItem) => ({
       product: x.product.name,
       group: x.group,
       quantity: x.quantity,
@@ -193,21 +217,21 @@ export class ClosingStockComponent implements OnInit {
   }
 
   canDelete() {
-    return this.info.items.find((x) => !!x.id) !== undefined;
+    return this.info().items.find((x) => !!x.id) !== undefined;
   }
 
   canSave() {
-    if (this.info.items.find((x) => !!x.id) !== undefined) {
+    if (this.info().items.find((x) => !!x.id) !== undefined) {
       return true;
     }
-    if (this.info.posted && this.auth.allowed('edit-posted-vouchers')) {
+    if (this.info().posted && this.auth.allowed('edit-posted-vouchers')) {
       return true;
     }
-    return this.info.user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
+    return this.info().user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
   }
 
   post() {
-    this.ser.post(this.info.date, this.info.costCentre.id as string).subscribe({
+    this.ser.post(this.info().date, this.info().costCentre.id as string).subscribe({
       next: () => {
         this.snackBar.open('Voucher Posted', 'Success');
       },
@@ -218,7 +242,7 @@ export class ClosingStockComponent implements OnInit {
   }
 
   delete() {
-    this.ser.delete(this.info.date, this.info.costCentre.id as string).subscribe({
+    this.ser.delete(this.info().date, this.info().costCentre.id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigate(['/closing-stock'], { replaceUrl: true });
@@ -244,4 +268,16 @@ export class ClosingStockComponent implements OnInit {
       }
     });
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/closing-stock/closing-stock.resolver.spec.ts b/overlord/src/app/closing-stock/closing-stock.resolver.spec.ts
deleted file mode 100644
index d3b8d9cd..00000000
--- a/overlord/src/app/closing-stock/closing-stock.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { ClosingStock } from './closing-stock';
-import { closingStockResolver } from './closing-stock.resolver';
-
-describe('closingStockResolver', () => {
-  const executeResolver: ResolveFn<ClosingStock> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => closingStockResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/closing-stock/closing-stock.resolver.ts b/overlord/src/app/closing-stock/closing-stock.resolver.ts
deleted file mode 100644
index 107f694e..00000000
--- a/overlord/src/app/closing-stock/closing-stock.resolver.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { ClosingStock } from './closing-stock';
-import { ClosingStockService } from './closing-stock.service';
-
-export const closingStockResolver: ResolveFn<ClosingStock> = (route) => {
-  const date = route.paramMap.get('date');
-  const costCentre = route.queryParamMap.get('d') || null;
-  return inject(ClosingStockService).list(date, costCentre);
-};
diff --git a/overlord/src/app/closing-stock/closing-stock.routes.ts b/overlord/src/app/closing-stock/closing-stock.routes.ts
index a1cad6f7..b3478fb9 100644
--- a/overlord/src/app/closing-stock/closing-stock.routes.ts
+++ b/overlord/src/app/closing-stock/closing-stock.routes.ts
@@ -1,9 +1,7 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-import { costCentreListResolver } from '../cost-centre/cost-centre-list.resolver';
 import { ClosingStockComponent } from './closing-stock.component';
-import { closingStockResolver } from './closing-stock.resolver';
 
 export const routes: Routes = [
   {
@@ -13,10 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Closing Stock',
     },
-    resolve: {
-      info: closingStockResolver,
-      costCentres: costCentreListResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -26,10 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Closing Stock',
     },
-    resolve: {
-      info: closingStockResolver,
-      costCentres: costCentreListResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/closing-stock/closing-stock.service.ts b/overlord/src/app/closing-stock/closing-stock.service.ts
index 70778824..867546d7 100644
--- a/overlord/src/app/closing-stock/closing-stock.service.ts
+++ b/overlord/src/app/closing-stock/closing-stock.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource, HttpParams } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { ClosingStock } from './closing-stock';
 
 const url = '/api/closing-stock';
-const serviceName = 'ClosingStockService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,34 +14,33 @@ export class ClosingStockService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(date: string | null, costCentre: string | null): Observable<ClosingStock> {
-    const listUrl = date === null ? url : `${url}/${date}`;
-    const options = { params: new HttpParams() };
-    if (costCentre !== null) {
-      options.params = options.params.set('d', costCentre);
-    }
-    return this.http
-      .get<ClosingStock>(listUrl, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<ClosingStock>;
+  list(date: Signal<string | null>, costCentre: Signal<string | null>) {
+    return httpResource<ClosingStock>(() => {
+      const listUrl = date() === null ? url : `${url}/${date()}`;
+      const params: Record<string, string> = {};
+      const costCentre_val = costCentre();
+      if (costCentre_val !== null) params['d'] = costCentre_val;
+      return { url: listUrl, params };
+    });
   }
 
   save(closingStock: ClosingStock): Observable<ClosingStock> {
     return this.http
       .post<ClosingStock>(url, closingStock)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<ClosingStock>;
+      .pipe(catchError(this.log.handleError('ClosingStockService', 'save'))) as Observable<ClosingStock>;
   }
 
   post(date: string, costCentre: string): Observable<ClosingStock> {
     const options = { params: new HttpParams().set('d', costCentre) };
     return this.http
       .post<ClosingStock>(`${url}/${date}`, {}, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'Post Voucher'))) as Observable<ClosingStock>;
+      .pipe(catchError(this.log.handleError('ClosingStockService', 'Post Voucher'))) as Observable<ClosingStock>;
   }
 
   delete(date: string, costCentre: string): Observable<ClosingStock> {
     const options = { params: new HttpParams().set('d', costCentre) };
     return this.http
       .delete<ClosingStock>(`${url}/${date}`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'Delete Voucher'))) as Observable<ClosingStock>;
+      .pipe(catchError(this.log.handleError('ClosingStockService', 'Delete Voucher'))) as Observable<ClosingStock>;
   }
 }
diff --git a/overlord/src/app/core/account.service.ts b/overlord/src/app/core/account.service.ts
index a53d3e8e..e279ae07 100644
--- a/overlord/src/app/core/account.service.ts
+++ b/overlord/src/app/core/account.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -8,50 +8,40 @@ import { AccountBalance } from './account-balance';
 import { ErrorLoggerService } from './error-logger.service';
 
 const url = '/api/accounts';
-const serviceName = 'AccountService';
-
 @Injectable({ providedIn: 'root' })
 export class AccountService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<Account> {
-    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
-    return this.http
-      .get<Account>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Account>;
+  get(id: Signal<string | null>) {
+    return httpResource<Account>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<Account[]> {
-    return this.http
-      .get<Account[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Account[]>;
+  list() {
+    return httpResource<Account[]>(() => `${url}/list`);
   }
 
-  paymentAutocomplete(query: string): Observable<Account[]> {
-    const options = { params: new HttpParams().set('q', query).set('t', '1') };
-    return this.http
-      .get<Account[]>(`${url}/query`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Account[]>;
+  paymentAutocomplete(query: Signal<string>) {
+    return httpResource<Account[]>(() => ({ url: `${url}/query`, params: { q: query(), t: '1' } }));
   }
 
-  receiptAutocomplete(query: string): Observable<Account[]> {
-    const options = { params: new HttpParams().set('q', query).set('t', '1') };
-    return this.http
-      .get<Account[]>(`${url}/query`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Account[]>;
+  receiptAutocomplete(query: Signal<string>) {
+    return httpResource<Account[]>(() => ({ url: `${url}/query`, params: { q: query(), t: '1' } }));
   }
 
   save(account: Account): Observable<null> {
     return this.http
       .post<null>(`${url}`, account)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<null>;
+      .pipe(catchError(this.log.handleError('AccountService', 'save'))) as Observable<null>;
   }
 
   update(account: Account): Observable<null> {
     return this.http
       .put<null>(`${url}/${account.id}`, account)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<null>;
+      .pipe(catchError(this.log.handleError('AccountService', 'update'))) as Observable<null>;
   }
 
   saveOrUpdate(account: Account): Observable<null> {
@@ -64,20 +54,22 @@ export class AccountService {
   delete(id: string): Observable<Account> {
     return this.http
       .delete<Account>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<Account>;
+      .pipe(catchError(this.log.handleError('AccountService', 'delete'))) as Observable<Account>;
   }
 
-  autocomplete(query: string): Observable<Account[]> {
-    const options = { params: new HttpParams().set('q', query) };
-    return this.http
-      .get<Account[]>(`${url}/query`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'autocomplete'))) as Observable<Account[]>;
+  autocomplete(query: Signal<string | null>) {
+    return httpResource<Account[]>(() => {
+      const q = query();
+      return q ? `${url}/query?q=${encodeURIComponent(q)}` : undefined;
+    });
   }
 
-  balance(id: string, date: string): Observable<AccountBalance> {
-    const options = { params: new HttpParams().set('d', date) };
-    return this.http
-      .get<AccountBalance>(`${url}/${id}/balance`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'balance'))) as Observable<AccountBalance>;
+  balance(id: Signal<string | null>, date: Signal<string | null>) {
+    return httpResource<AccountBalance>(() => {
+      const accId = id();
+      const d = date();
+      if (!accId || !d) return undefined;
+      return `${url}/${accId}/balance?d=${encodeURIComponent(d)}`;
+    });
   }
 }
diff --git a/overlord/src/app/core/batch.service.ts b/overlord/src/app/core/batch.service.ts
index 28800a60..1cc1b58f 100644
--- a/overlord/src/app/core/batch.service.ts
+++ b/overlord/src/app/core/batch.service.ts
@@ -1,23 +1,21 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { HttpClient, httpResource, HttpParams } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 
 import { Batch } from './batch';
 import { ErrorLoggerService } from './error-logger.service';
 
 const url = '/api/batch';
-const serviceName = 'BatchService';
-
 @Injectable({ providedIn: 'root' })
 export class BatchService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  autocomplete(date: string, term: string): Observable<Batch[]> {
-    const options = { params: new HttpParams().set('q', term).set('d', date) };
-    return this.http
-      .get<Batch[]>(url, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'autocomplete'))) as Observable<Batch[]>;
+  autocomplete(date: Signal<string | null>, term: Signal<string | null>) {
+    return httpResource<Batch[]>(() => {
+      const q = term();
+      const d = date();
+      if (!q || !d) return undefined;
+      return { url, params: new HttpParams().set('q', q).set('d', d) };
+    });
   }
 }
diff --git a/overlord/src/app/core/delay-interceptor.ts b/overlord/src/app/core/delay-interceptor.ts
new file mode 100644
index 00000000..c321a49a
--- /dev/null
+++ b/overlord/src/app/core/delay-interceptor.ts
@@ -0,0 +1,7 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import { timer, switchMap } from 'rxjs';
+
+export const delayInterceptor: HttpInterceptorFn = (req, next) => {
+  // Delay all requests by 1500ms to test loading states
+  return timer(1500).pipe(switchMap(() => next(req)));
+};
diff --git a/overlord/src/app/core/nav-bar/nav-bar.component.html b/overlord/src/app/core/nav-bar/nav-bar.component.html
index 5b94db64..a3644529 100644
--- a/overlord/src/app/core/nav-bar/nav-bar.component.html
+++ b/overlord/src/app/core/nav-bar/nav-bar.component.html
@@ -1,6 +1,6 @@
 <mat-toolbar class="fixed-to-top row-container">
   <span class=""
-    ><a routerLink="/">{{ title }}</a></span
+    ><a routerLink="/">{{ title() }}</a></span
   >
   <mat-menu #voucherMenu="matMenu">
     <a mat-menu-item routerLink="/journal">Journal - F7</a>
diff --git a/overlord/src/app/core/nav-bar/nav-bar.component.ts b/overlord/src/app/core/nav-bar/nav-bar.component.ts
index 669467f7..fabf1736 100644
--- a/overlord/src/app/core/nav-bar/nav-bar.component.ts
+++ b/overlord/src/app/core/nav-bar/nav-bar.component.ts
@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, inject, computed } from '@angular/core';
 import { MatAnchor, MatButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
@@ -16,22 +16,13 @@ import { TitleService } from '../title.service';
   styleUrls: ['./nav-bar.component.css'],
   imports: [MatToolbar, RouterLink, MatMenu, MatMenuItem, MatButton, MatMenuTrigger, MatIcon, MatAnchor, AsyncPipe],
 })
-export class NavBarComponent implements OnInit {
+export class NavBarComponent {
   private router = inject(Router);
   auth = inject(AuthService);
   titleService = inject(TitleService);
 
-  title: string;
-
-  constructor() {
-    this.title = environment.title;
-  }
-
-  ngOnInit() {
-    this.titleService.get().subscribe((value) => {
-      this.title = value;
-    });
-  }
+  private titleResource = this.titleService.get();
+  title = computed(() => this.titleResource.value() ?? environment.title);
 
   logout() {
     this.auth.logout();
diff --git a/overlord/src/app/core/product-sku.ts b/overlord/src/app/core/product-sku.ts
index ef11007c..44d633bf 100644
--- a/overlord/src/app/core/product-sku.ts
+++ b/overlord/src/app/core/product-sku.ts
@@ -1,3 +1,5 @@
+import { Product } from './product';
+
 export class ProductSku {
   id: string;
   name: string;
@@ -6,6 +8,8 @@ export class ProductSku {
   fractionUnits: string;
 
   isRateContracted: boolean;
+  stock?: number;
+  product?: Product;
 
   public constructor(init?: Partial<ProductSku>) {
     this.id = '';
diff --git a/overlord/src/app/core/product.ts b/overlord/src/app/core/product.ts
index 653a8940..d9529f8a 100644
--- a/overlord/src/app/core/product.ts
+++ b/overlord/src/app/core/product.ts
@@ -1,6 +1,7 @@
 import { ProductGroup } from './product-group';
 
 export class StockKeepingUnit {
+  id: string | null;
   units: string;
   fraction: number;
   productYield: number;
@@ -8,6 +9,7 @@ export class StockKeepingUnit {
   salePrice: number;
 
   public constructor(init?: Partial<StockKeepingUnit>) {
+    this.id = null;
     this.units = '';
     this.fraction = 1;
     this.productYield = 1;
@@ -23,6 +25,7 @@ export class Product {
   name: string;
   description: string | undefined;
   skus: StockKeepingUnit[];
+  unit?: { name: string };
   fractionUnits: string | undefined;
 
   isActive: boolean;
diff --git a/overlord/src/app/core/title.service.ts b/overlord/src/app/core/title.service.ts
index 6f34d7b9..b75196b5 100644
--- a/overlord/src/app/core/title.service.ts
+++ b/overlord/src/app/core/title.service.ts
@@ -1,23 +1,12 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
-
-import { ErrorLoggerService } from './error-logger.service';
+import { httpResource } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 
 const url = '/api/title';
-const serviceName = 'VoucherService';
-
 @Injectable({
   providedIn: 'root',
 })
 export class TitleService {
-  private http = inject(HttpClient);
-  private log = inject(ErrorLoggerService);
-
-  get(): Observable<string> {
-    return this.http
-      .get<string>(url)
-      .pipe(catchError(this.log.handleError(serviceName, 'Get Title'))) as Observable<string>;
+  get() {
+    return httpResource<string>(() => url);
   }
 }
diff --git a/overlord/src/app/core/voucher.service.ts b/overlord/src/app/core/voucher.service.ts
index 1b1cdb41..56a0c899 100644
--- a/overlord/src/app/core/voucher.service.ts
+++ b/overlord/src/app/core/voucher.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal, ResourceRef } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from './error-logger.service';
 import { Voucher } from './voucher';
 
 const url = '/api';
-const serviceName = 'VoucherService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -31,46 +29,64 @@ export class VoucherService {
     return new Blob([ab], { type: mimeString });
   }
 
-  get(id: string, type: string): Observable<Voucher> {
-    const endpoint = type.replace(/ /g, '-').toLowerCase();
-    return this.http
-      .get<Voucher>(`${url}/${endpoint}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'Get Voucher'))) as Observable<Voucher>;
+  get(id: Signal<string | undefined>, type: Signal<string>): ResourceRef<Voucher | undefined> {
+    return httpResource<Voucher>(() => {
+      const i = id();
+      if (!i) return undefined;
+      const endpoint = type().replace(/ /g, '-').toLowerCase();
+      return `${url}/${endpoint}/${i}`;
+    });
   }
 
-  getOfType(type: string, account: string | null, date: string | null): Observable<Voucher> {
-    const endpoint = type.replace(/ /g, '-').toLowerCase();
-    const options = {
-      params: new HttpParams(),
-    };
-    if (account !== null) {
-      options.params = options.params.set('a', account);
-    }
-    if (date !== null) {
-      options.params = options.params.set('d', date);
-    }
-    return this.http
-      .get<Voucher>(`${url}/${endpoint}`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'Get Voucher of Type'))) as Observable<Voucher>;
+  getOfType(
+    type: Signal<string>,
+    account: Signal<string | null>,
+    date: Signal<string | null>,
+  ): ResourceRef<Voucher | undefined> {
+    return httpResource<Voucher>(() => {
+      const endpoint = type().replace(/ /g, '-').toLowerCase();
+      const params = new URLSearchParams();
+      if (account() !== null) params.set('a', account()!);
+      if (date() !== null) params.set('d', date()!);
+      const p = params.toString();
+      return p ? `${url}/${endpoint}?${p}` : `${url}/${endpoint}`;
+    });
   }
 
-  getIncentive(date: string): Observable<Voucher> {
-    const options = { params: new HttpParams().set('d', date) };
-    return this.http
-      .get<Voucher>(`${url}/incentive`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'Get Incentive'))) as Observable<Voucher>;
+  getVoucher(
+    id: Signal<string | null>,
+    type: Signal<string>,
+    account: Signal<string | null>,
+    date: Signal<string | null>,
+  ): ResourceRef<Voucher | undefined> {
+    return httpResource<Voucher>(() => {
+      const endpoint = type().replace(/ /g, '-').toLowerCase();
+      const i = id();
+      if (i) {
+        return `${url}/${endpoint}/${i}`;
+      }
+      const params = new URLSearchParams();
+      if (account() !== null) params.set('a', account()!);
+      if (date() !== null) params.set('d', date()!);
+      const p = params.toString();
+      return p ? `${url}/${endpoint}?${p}` : `${url}/${endpoint}`;
+    });
+  }
+
+  getIncentive(date: Signal<string>): ResourceRef<Voucher | undefined> {
+    return httpResource<Voucher>(() => `${url}/incentive?d=${date()}`);
   }
 
   post(id: string): Observable<Voucher> {
     return this.http
       .post<Voucher>(`${url}/post-voucher/${id}`, {})
-      .pipe(catchError(this.log.handleError(serviceName, 'Post Voucher'))) as Observable<Voucher>;
+      .pipe(catchError(this.log.handleError('VoucherService', 'Post Voucher'))) as Observable<Voucher>;
   }
 
   delete(id: string): Observable<Voucher> {
     return this.http
       .delete<Voucher>(`${url}/delete/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'Delete Voucher'))) as Observable<Voucher>;
+      .pipe(catchError(this.log.handleError('VoucherService', 'Delete Voucher'))) as Observable<Voucher>;
   }
 
   saveOrUpdate(voucher: Voucher): Observable<Voucher> {
@@ -93,7 +109,7 @@ export class VoucherService {
     fd.append('data', JSON.stringify(voucher));
     return this.http
       .post<Voucher>(`${url}/${endpoint}`, fd)
-      .pipe(catchError(this.log.handleError(serviceName, 'Save Voucher'))) as Observable<Voucher>;
+      .pipe(catchError(this.log.handleError('VoucherService', 'Save Voucher'))) as Observable<Voucher>;
   }
 
   update(voucher: Voucher, endpoint: string): Observable<Voucher> {
@@ -108,6 +124,6 @@ export class VoucherService {
     fd.append('data', JSON.stringify(voucher));
     return this.http
       .put<Voucher>(`${url}/${endpoint}/${voucher.id}`, fd)
-      .pipe(catchError(this.log.handleError(serviceName, 'Update Voucher'))) as Observable<Voucher>;
+      .pipe(catchError(this.log.handleError('VoucherService', 'Update Voucher'))) as Observable<Voucher>;
   }
 }
diff --git a/overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.html b/overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.html
index 16c2ee1b..7301c2f0 100644
--- a/overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.html
+++ b/overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.html
@@ -1,14 +1,21 @@
 <h2>Cost Center</h2>
 
-<form [formGroup]="form" class="flex-col wrapped">
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
-    </mat-form-field>
-  </div>
-</form>
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <form class="flex-col wrapped" [formRoot]="form">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput [formField]="form.name" (keyup.enter)="save()" />
+      </mat-form-field>
+    </div>
+  </form>
 
-<div class="row-container">
-  <button mat-raised-button (click)="save()" color="primary">Save</button>
-</div>
+  <div class="row-container">
+    <button mat-raised-button (click)="save()" color="primary">Save</button>
+  </div>
+}
diff --git a/overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.ts b/overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.ts
index d26a93b5..b7fde087 100644
--- a/overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.ts
+++ b/overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.ts
@@ -1,60 +1,60 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, afterNextRender, linkedSignal, input, computed } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { CostCentre } from '../../core/cost-centre';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { CostCentreService } from '../cost-centre.service';
 
+export interface CostCentreDetailFormData {
+  name: string;
+}
+
 @Component({
   selector: 'app-cost-centre-detail',
   templateUrl: './cost-centre-detail.component.html',
   styleUrls: ['./cost-centre-detail.component.css'],
-  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
+  imports: [
+    FormField,
+    FormRoot,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class CostCentreDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class CostCentreDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private ser = inject(CostCentreService);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    name: FormControl<string | null>;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  item: CostCentre = new CostCentre();
+  item = computed(() => this.itemResource.value() ?? new CostCentre());
+
+  model = linkedSignal({
+    source: this.item,
+    computation: (itemVal): CostCentreDetailFormData => ({
+      name: itemVal.name ?? '',
+    }),
+  });
+
+  form = createForm(this.model);
 
   constructor() {
-    this.form = new FormGroup({
-      name: new FormControl<string | null>(null),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: CostCentre };
-
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: CostCentre) {
-    this.item = item;
-    this.form.setValue({
-      name: this.item.name,
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
@@ -62,14 +62,15 @@ export class CostCentreDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/cost-centres');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   getItem(): CostCentre {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    return this.item;
+    const formModel = this.model();
+    const item = this.item();
+    item.name = formModel.name ?? '';
+    return item;
   }
 }
diff --git a/overlord/src/app/cost-centre/cost-centre-list.resolver.spec.ts b/overlord/src/app/cost-centre/cost-centre-list.resolver.spec.ts
deleted file mode 100644
index b7690c95..00000000
--- a/overlord/src/app/cost-centre/cost-centre-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { CostCentre } from '../core/cost-centre';
-import { costCentreListResolver } from './cost-centre-list.resolver';
-
-describe('costCentreListResolver', () => {
-  const executeResolver: ResolveFn<CostCentre[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => costCentreListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/cost-centre/cost-centre-list.resolver.ts b/overlord/src/app/cost-centre/cost-centre-list.resolver.ts
deleted file mode 100644
index 44bdcb93..00000000
--- a/overlord/src/app/cost-centre/cost-centre-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { CostCentre } from '../core/cost-centre';
-import { CostCentreService } from './cost-centre.service';
-
-export const costCentreListResolver: ResolveFn<CostCentre[]> = () => {
-  return inject(CostCentreService).list();
-};
diff --git a/overlord/src/app/cost-centre/cost-centre-list/cost-centre-list-datasource.ts b/overlord/src/app/cost-centre/cost-centre-list/cost-centre-list-datasource.ts
deleted file mode 100644
index 6ece1a9c..00000000
--- a/overlord/src/app/cost-centre/cost-centre-list/cost-centre-list-datasource.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { CostCentre } from '../../core/cost-centre';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class CostCentreListDataSource extends DataSource<CostCentre> {
-  constructor(
-    public data: CostCentre[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<CostCentre[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: CostCentre[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: CostCentre[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/cost-centre/cost-centre-list/cost-centre-list.component.html b/overlord/src/app/cost-centre/cost-centre-list/cost-centre-list.component.html
index df80f847..b5f05e8e 100644
--- a/overlord/src/app/cost-centre/cost-centre-list/cost-centre-list.component.html
+++ b/overlord/src/app/cost-centre/cost-centre-list/cost-centre-list.component.html
@@ -6,30 +6,36 @@
   </a>
 </h2>
 
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="['/cost-centres', row.id]">{{ row.name }}</a></mat-cell
-    >
-  </ng-container>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (listResource.error()) {
+  <app-error-state [message]="'Failed to load list.'" (retryAction)="listResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="['/cost-centres', row.id]">{{ row.name }}</a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Name Column -->
-  <ng-container matColumnDef="isFixture">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Is Fixture?</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
-  </ng-container>
+    <!-- Name Column -->
+    <ng-container matColumnDef="isFixture">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Is Fixture?</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="list().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/cost-centre/cost-centre-list/cost-centre-list.component.ts b/overlord/src/app/cost-centre/cost-centre-list/cost-centre-list.component.ts
index 9113eddf..5c80d4c8 100644
--- a/overlord/src/app/cost-centre/cost-centre-list/cost-centre-list.component.ts
+++ b/overlord/src/app/cost-centre/cost-centre-list/cost-centre-list.component.ts
@@ -1,36 +1,77 @@
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
-import { CostCentre } from '../../core/cost-centre';
-import { CostCentreListDataSource } from './cost-centre-list-datasource';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { CostCentreService } from '../cost-centre.service';
 
 @Component({
   selector: 'app-cost-centre-list',
   templateUrl: './cost-centre-list.component.html',
   styleUrls: ['./cost-centre-list.component.css'],
-  imports: [RouterModule, MatIconModule, MatTableModule, MatSortModule, MatPaginatorModule, MatButtonModule],
+  imports: [
+    RouterModule,
+    MatIconModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    MatButtonModule,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class CostCentreListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class CostCentreListComponent {
+  private ser = inject(CostCentreService);
+
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  listResource = this.ser.list();
+  list = computed(() => this.listResource.value() ?? []);
+  sortedList = computed(() => {
+    const data = this.list();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  list: CostCentre[] = [];
-  dataSource: CostCentreListDataSource = new CostCentreListDataSource(this.list, this.paginator, this.sort);
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'isFixture'];
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: CostCentre[] };
-
-      this.list = data.list;
-    });
-    this.dataSource = new CostCentreListDataSource(this.list, this.paginator, this.sort);
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/cost-centre/cost-centre.resolver.spec.ts b/overlord/src/app/cost-centre/cost-centre.resolver.spec.ts
deleted file mode 100644
index 9c2a42a2..00000000
--- a/overlord/src/app/cost-centre/cost-centre.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { CostCentre } from '../core/cost-centre';
-import { costCentreResolver } from './cost-centre.resolver';
-
-describe('costCentreResolver', () => {
-  const executeResolver: ResolveFn<CostCentre> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => costCentreResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/cost-centre/cost-centre.resolver.ts b/overlord/src/app/cost-centre/cost-centre.resolver.ts
deleted file mode 100644
index d0299538..00000000
--- a/overlord/src/app/cost-centre/cost-centre.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { CostCentre } from '../core/cost-centre';
-import { CostCentreService } from './cost-centre.service';
-
-export const costCentreResolver: ResolveFn<CostCentre> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(CostCentreService).get(id);
-};
diff --git a/overlord/src/app/cost-centre/cost-centre.routes.ts b/overlord/src/app/cost-centre/cost-centre.routes.ts
index 223fac2c..99d6c547 100644
--- a/overlord/src/app/cost-centre/cost-centre.routes.ts
+++ b/overlord/src/app/cost-centre/cost-centre.routes.ts
@@ -2,9 +2,7 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { CostCentreDetailComponent } from './cost-centre-detail/cost-centre-detail.component';
-import { costCentreListResolver } from './cost-centre-list.resolver';
 import { CostCentreListComponent } from './cost-centre-list/cost-centre-list.component';
-import { costCentreResolver } from './cost-centre.resolver';
 
 export const routes: Routes = [
   {
@@ -14,9 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Cost Centres',
     },
-    resolve: {
-      list: costCentreListResolver,
-    },
   },
   {
     path: 'new',
@@ -25,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Cost Centres',
     },
-    resolve: {
-      item: costCentreResolver,
-    },
   },
   {
     path: ':id',
@@ -36,8 +28,5 @@ export const routes: Routes = [
     data: {
       permission: 'Cost Centres',
     },
-    resolve: {
-      item: costCentreResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/cost-centre/cost-centre.service.ts b/overlord/src/app/cost-centre/cost-centre.service.ts
index 231aa33f..0e54ee6c 100644
--- a/overlord/src/app/cost-centre/cost-centre.service.ts
+++ b/overlord/src/app/cost-centre/cost-centre.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { CostCentre } from '../core/cost-centre';
 import { ErrorLoggerService } from '../core/error-logger.service';
 
 const url = '/api/cost-centres';
-const serviceName = 'CostCentreService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,29 +14,27 @@ export class CostCentreService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<CostCentre> {
-    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
-    return this.http
-      .get<CostCentre>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<CostCentre>;
+  get(id: Signal<string | null>) {
+    return httpResource<CostCentre>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<CostCentre[]> {
-    return this.http
-      .get<CostCentre[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<CostCentre[]>;
+  list() {
+    return httpResource<CostCentre[]>(() => `${url}/list`);
   }
 
   save(costCentre: CostCentre): Observable<CostCentre> {
     return this.http
       .post<CostCentre>(`${url}`, costCentre)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<CostCentre>;
+      .pipe(catchError(this.log.handleError('CostCentreService', 'save'))) as Observable<CostCentre>;
   }
 
   update(costCentre: CostCentre): Observable<CostCentre> {
     return this.http
       .put<CostCentre>(`${url}/${costCentre.id}`, costCentre)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<CostCentre>;
+      .pipe(catchError(this.log.handleError('CostCentreService', 'update'))) as Observable<CostCentre>;
   }
 
   saveOrUpdate(costCentre: CostCentre): Observable<CostCentre> {
@@ -51,6 +47,6 @@ export class CostCentreService {
   delete(id: string): Observable<CostCentre> {
     return this.http
       .delete<CostCentre>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<CostCentre>;
+      .pipe(catchError(this.log.handleError('CostCentreService', 'delete'))) as Observable<CostCentre>;
   }
 }
diff --git a/overlord/src/app/daybook/daybook-datasource.ts b/overlord/src/app/daybook/daybook-datasource.ts
deleted file mode 100644
index faf34d73..00000000
--- a/overlord/src/app/daybook/daybook-datasource.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { DaybookItem } from './daybook-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class DaybookDataSource extends DataSource<DaybookItem> {
-  constructor(
-    public data: DaybookItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<DaybookItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: DaybookItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: DaybookItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'date':
-          return compare(a.date, b.date, isAsc);
-        case 'debitAmount':
-          return compare(+a.debitAmount, +b.debitAmount, isAsc);
-        case 'creditAmount':
-          return compare(+a.creditAmount, +b.creditAmount, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/daybook/daybook.component.html b/overlord/src/app/daybook/daybook.component.html
index 970826a1..124f25e2 100644
--- a/overlord/src/app/daybook/daybook.component.html
+++ b/overlord/src/app/daybook/daybook.component.html
@@ -1,81 +1,87 @@
 <h2>Daybook</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
+      <input matInput [matDatepicker]="startDate" [formField]="form.startDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
       <mat-datepicker #startDate></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Date Column -->
-  <ng-container matColumnDef="date">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="row.url">{{ row.date }}</a></mat-cell
-    >
-  </ng-container>
+@if (infoResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (infoResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Date Column -->
+    <ng-container matColumnDef="date">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="row.url">{{ row.date }}</a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Type Column -->
-  <ng-container matColumnDef="type">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
-  </ng-container>
+    <!-- Type Column -->
+    <ng-container matColumnDef="type">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
+    </ng-container>
 
-  <!-- Narration Column -->
-  <ng-container matColumnDef="narration">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Narration</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.narration }}</mat-cell>
-  </ng-container>
+    <!-- Narration Column -->
+    <ng-container matColumnDef="narration">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Narration</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.narration }}</mat-cell>
+    </ng-container>
 
-  <!-- DebitText Column -->
-  <ng-container matColumnDef="debitText">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Debit Accounts</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.debitText }}</mat-cell>
-  </ng-container>
+    <!-- DebitText Column -->
+    <ng-container matColumnDef="debitText">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Debit Accounts</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.debitText }}</mat-cell>
+    </ng-container>
 
-  <!-- Debit Column -->
-  <ng-container matColumnDef="debitAmount">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.debitAmount | currency: 'INR' }}</mat-cell>
-  </ng-container>
+    <!-- Debit Column -->
+    <ng-container matColumnDef="debitAmount">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.debitAmount | currency: 'INR' }}</mat-cell>
+    </ng-container>
 
-  <!-- CreditText Column -->
-  <ng-container matColumnDef="creditText">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Credit Accounts</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.creditText }}</mat-cell>
-  </ng-container>
+    <!-- CreditText Column -->
+    <ng-container matColumnDef="creditText">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Credit Accounts</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.creditText }}</mat-cell>
+    </ng-container>
 
-  <!-- Credit Column -->
-  <ng-container matColumnDef="creditAmount">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.creditAmount | currency: 'INR' }}</mat-cell>
-  </ng-container>
+    <!-- Credit Column -->
+    <ng-container matColumnDef="creditAmount">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.creditAmount | currency: 'INR' }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row
-    *matRowDef="let row; columns: displayedColumns"
-    [class.selected]="selectedRowId === row.id"
-    [class.unposted]="!row.posted && selectedRowId !== row.id"
-    (click)="selectRow(row.id)"
-  ></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row
+      *matRowDef="let row; columns: displayedColumns"
+      [class.selected]="selectedRowId === row.id"
+      [class.unposted]="!row.posted && selectedRowId !== row.id"
+      (click)="selectRow(row.id)"
+    ></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="dataSource().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/daybook/daybook.component.ts b/overlord/src/app/daybook/daybook.component.ts
index a7f4d889..60b22b87 100644
--- a/overlord/src/app/daybook/daybook.component.ts
+++ b/overlord/src/app/daybook/daybook.component.ts
@@ -1,25 +1,32 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, linkedSignal, input, computed, afterNextRender, signal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
+export interface DaybookFormData {
+  startDate: Date;
+  finishDate: Date;
+}
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import moment from 'moment';
 
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { Daybook } from './daybook';
-import { DaybookDataSource } from './daybook-datasource';
+import { DaybookService } from './daybook.service';
 
 @Component({
   selector: 'app-daybook',
   templateUrl: './daybook.component.html',
   styleUrls: ['./daybook.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -29,21 +36,72 @@ import { DaybookDataSource } from './daybook-datasource';
     RouterModule,
     MatPaginatorModule,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class DaybookComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class DaybookComponent {
   private router = inject(Router);
+  private ser = inject(DaybookService);
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  pageSize = signal(50);
+  pageIndex = signal(0);
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  info: Daybook = new Daybook();
-  dataSource: DaybookDataSource = new DaybookDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-  }>;
+  sortActive = signal('');
+  sortDirection = signal('');
+  infoResource = this.ser.list(this.startDate, this.finishDate);
+  info = computed(() => this.infoResource.value() ?? new Daybook());
+
+  sortedList = computed(() => {
+    const data = this.info().body ?? [];
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'date':
+          return compare(a.date, b.date, isAsc);
+        case 'type':
+          return compare(a.type, b.type, isAsc);
+        case 'narration':
+          return compare(a.narration ?? '', b.narration ?? '', isAsc);
+        case 'debitText':
+          return compare(a.debitText ?? '', b.debitText ?? '', isAsc);
+        case 'debitAmount':
+          return compare(a.debitAmount ?? 0, b.debitAmount ?? 0, isAsc);
+        case 'creditText':
+          return compare(a.creditText ?? '', b.creditText ?? '', isAsc);
+        case 'creditAmount':
+          return compare(a.creditAmount ?? 0, b.creditAmount ?? 0, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  model = linkedSignal({
+    source: this.info,
+    computation: (info: Daybook): DaybookFormData => ({
+      startDate: info.startDate ? moment(info.startDate, 'DD-MMM-YYYY').toDate() : new Date(),
+      finishDate: info.finishDate ? moment(info.finishDate, 'DD-MMM-YYYY').toDate() : new Date(),
+    }),
+  });
+
+  form = createForm(this.model);
 
   selectedRowId = '';
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -52,27 +110,13 @@ export class DaybookComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
+    // TODO: Also select the text
+    this.form.startDate().focusBoundControl();
   }
 
   constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: Daybook };
-
-      this.info = data.info;
-      this.form.setValue({
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new DaybookDataSource(this.info.body, this.paginator, this.sort);
+    afterNextRender(() => {
+      this.form.startDate().focusBoundControl();
     });
   }
 
@@ -91,7 +135,7 @@ export class DaybookComponent implements OnInit {
   }
 
   prepareSubmit(): Daybook {
-    const formModel = this.form.value;
+    const formModel = this.model();
 
     return {
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
@@ -99,4 +143,16 @@ export class DaybookComponent implements OnInit {
       body: [],
     };
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/daybook/daybook.resolver.spec.ts b/overlord/src/app/daybook/daybook.resolver.spec.ts
deleted file mode 100644
index a64bdca1..00000000
--- a/overlord/src/app/daybook/daybook.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Daybook } from './daybook';
-import { daybookResolver } from './daybook.resolver';
-
-describe('daybookResolver', () => {
-  const executeResolver: ResolveFn<Daybook> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => daybookResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/daybook/daybook.resolver.ts b/overlord/src/app/daybook/daybook.resolver.ts
deleted file mode 100644
index ae8514ff..00000000
--- a/overlord/src/app/daybook/daybook.resolver.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Daybook } from './daybook';
-import { DaybookService } from './daybook.service';
-
-export const daybookResolver: ResolveFn<Daybook> = (route) => {
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(DaybookService).list(startDate, finishDate);
-};
diff --git a/overlord/src/app/daybook/daybook.routes.ts b/overlord/src/app/daybook/daybook.routes.ts
index f98a6d30..7b148d2d 100644
--- a/overlord/src/app/daybook/daybook.routes.ts
+++ b/overlord/src/app/daybook/daybook.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { DaybookComponent } from './daybook.component';
-import { daybookResolver } from './daybook.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Daybook',
     },
-    resolve: {
-      info: daybookResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/daybook/daybook.service.ts b/overlord/src/app/daybook/daybook.service.ts
index 277ca2e1..f7bcf75e 100644
--- a/overlord/src/app/daybook/daybook.service.ts
+++ b/overlord/src/app/daybook/daybook.service.ts
@@ -1,31 +1,21 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { httpResource } from '@angular/common/http';
+import { Injectable, Signal } from '@angular/core';
 
-import { ErrorLoggerService } from '../core/error-logger.service';
 import { Daybook } from './daybook';
 
 const url = '/api/daybook';
-const serviceName = 'DaybookService';
-
 @Injectable({
   providedIn: 'root',
 })
 export class DaybookService {
-  private http = inject(HttpClient);
-  private log = inject(ErrorLoggerService);
-
-  list(startDate: string | null, finishDate: string | null): Observable<Daybook> {
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    return this.http
-      .get<Daybook>(url, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Daybook>;
+  list(startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<Daybook>(() => {
+      const params: Record<string, string> = {};
+      const startDate_val = startDate();
+      if (startDate_val !== null) params['s'] = startDate_val;
+      const finishDate_val = finishDate();
+      if (finishDate_val !== null) params['f'] = finishDate_val;
+      return { url, params };
+    });
   }
 }
diff --git a/overlord/src/app/employee-attendance/employee-attendance-datasource.ts b/overlord/src/app/employee-attendance/employee-attendance-datasource.ts
deleted file mode 100644
index 0b0dd82d..00000000
--- a/overlord/src/app/employee-attendance/employee-attendance-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { EmployeeAttendanceItem } from './employee-attendance-item';
-
-export class EmployeeAttendanceDataSource extends DataSource<EmployeeAttendanceItem> {
-  constructor(private data: Observable<EmployeeAttendanceItem[]>) {
-    super();
-  }
-
-  connect(): Observable<EmployeeAttendanceItem[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/employee-attendance/employee-attendance.component.html b/overlord/src/app/employee-attendance/employee-attendance.component.html
index 790661e1..8c8aa33b 100644
--- a/overlord/src/app/employee-attendance/employee-attendance.component.html
+++ b/overlord/src/app/employee-attendance/employee-attendance.component.html
@@ -1,93 +1,112 @@
 <h2>Employee Attendance</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
-    <mat-form-field class="flex-auto">
+    <mat-form-field class="flex-auto basis-1-4">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
+      <input
+        matInput
+        #startDateElement
+        [matDatepicker]="startDate"
+        (focus)="startDateElement.select()"
+        [formField]="form.startDate"
+        autocomplete="off"
+      />
       <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
       <mat-datepicker #startDate></mat-datepicker>
     </mat-form-field>
-    <mat-form-field class="flex-auto">
+    <mat-form-field class="flex-auto basis-1-4">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input
+        matInput
+        #finishDateElement
+        [matDatepicker]="finishDate"
+        (focus)="finishDateElement.select()"
+        [formField]="form.finishDate"
+        autocomplete="off"
+      />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto basis-4-5">
+    <mat-form-field class="flex-auto basis-1-4">
       <mat-label>Employee</mat-label>
       <input
         type="text"
+        placeholder="Select Employee"
+        aria-label="Number"
         matInput
+        [formField]="form.employee"
+        [matAutocomplete]="autoEmployee"
         #employeeElement
-        [matAutocomplete]="auto"
-        formControlName="employee"
-        autocomplete="off"
       />
-      <mat-autocomplete
-        #auto="matAutocomplete"
-        autoActiveFirstOption
-        [displayWith]="displayFn"
-        (optionSelected)="selected($event)"
-      >
-        @for (employee of employees | async; track employee) {
-          <mat-option [value]="employee">{{ employee.name }}</mat-option>
+      <mat-autocomplete autoActiveFirstOption #autoEmployee="matAutocomplete" [displayWith]="displayFn">
+        @for (option of employees(); track option) {
+          <mat-option [value]="option">
+            {{ option.name }}
+          </mat-option>
         }
       </mat-autocomplete>
     </mat-form-field>
-    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
+
+    <button mat-raised-button color="primary" (click)="show()" class="flex-auto basis-1-5">Show</button>
   </div>
-  <mat-table #table [dataSource]="dataSource" formArrayName="attendances">
-    <!-- Date Column -->
-    <ng-container matColumnDef="date">
-      <mat-header-cell *matHeaderCellDef class="center">Date</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center">{{ row.date }}</mat-cell>
-    </ng-container>
+  @if (infoResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (infoResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+  } @else {
+    <mat-table #table [dataSource]="dataSource()">
+      <!-- Date Column -->
+      <ng-container matColumnDef="date">
+        <mat-header-cell *matHeaderCellDef class="right basis-1-5">Date</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right basis-1-5">{{ row.date }}</mat-cell>
+      </ng-container>
 
-    <!-- Status Column -->
-    <ng-container matColumnDef="status">
-      <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="flex-auto">
-        <mat-select formControlName="attendanceType" name="attendanceType">
-          @for (at of attendanceTypes; track at) {
-            <mat-option [value]="at.id">
-              {{ at.name }}
-            </mat-option>
+      <!-- Status Column -->
+      <ng-container matColumnDef="status">
+        <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="flex-auto basis-1-2">
+          @if (form.attendances[i]) {
+            <mat-select [formField]="form.attendances[i].attendanceType">
+              @for (at of attendanceTypes(); track at) {
+                <mat-option [value]="at.id">
+                  {{ at.name }}
+                </mat-option>
+              }
+            </mat-select>
           }
-        </mat-select>
-      </mat-cell>
-    </ng-container>
+        </mat-cell>
+      </ng-container>
 
-    <!-- Prints Column -->
-    <ng-container matColumnDef="prints">
-      <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" class="no-bg">
-        {{ row.prints }}
-        @if (!form.controls.attendances.controls[i].controls.attendanceType.pristine) {
-          <mat-icon class="no-bg">new_releases</mat-icon>
-        }
-        <mat-chip-set class="no-bg">
-          @if (row.hoursWorked.length) {
-            <mat-chip-option
-              class="no-bg"
-              selected
-              selectable="false"
-              [color]="row.fullDay === true ? 'primary' : 'warn'"
-            >
-              {{ row.hoursWorked }}
-            </mat-chip-option>
+      <!-- Prints Column -->
+      <ng-container matColumnDef="prints">
+        <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="no-bg">
+          {{ row.prints }}
+          @if (form.attendances[i] && form.attendances[i].attendanceType !== null) {
+            <mat-icon class="no-bg">new_releases</mat-icon>
           }
-        </mat-chip-set>
-      </mat-cell>
-    </ng-container>
+          <mat-chip-set class="no-bg">
+            @if (row.hoursWorked.length) {
+              <mat-chip-option
+                class="no-bg"
+                selected
+                selectable="false"
+                [color]="row.fullDay === true ? 'primary' : 'warn'"
+              >
+                {{ row.hoursWorked }}
+              </mat-chip-option>
+            }
+          </mat-chip-set>
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; let i = index; columns: displayedColumns" [class]="getClass(i)"></mat-row>
-  </mat-table>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; let i = index; columns: displayedColumns" [class]="getClass(i)"></mat-row>
+    </mat-table>
+  }
 </form>
 
 <div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
+  <button mat-raised-button color="primary" (click)="save()">Save</button>
 </div>
diff --git a/overlord/src/app/employee-attendance/employee-attendance.component.ts b/overlord/src/app/employee-attendance/employee-attendance.component.ts
index ca29f372..0c3703bb 100644
--- a/overlord/src/app/employee-attendance/employee-attendance.component.ts
+++ b/overlord/src/app/employee-attendance/employee-attendance.component.ts
@@ -1,38 +1,50 @@
-import { AsyncPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import {
+  computed,
+  Component,
+  HostListener,
+  inject,
+  debounced,
+  input,
+  linkedSignal,
+  afterNextRender,
+} from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
-import { AttendanceType } from '../attendance/attendance-type';
-import { AuthService } from '../auth/auth.service';
+import { AttendanceTypeService } from '../attendance/attendance-type.service';
 import { Employee } from '../employee/employee';
 import { EmployeeService } from '../employee/employee.service';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { EmployeeAttendance } from './employee-attendance';
-import { EmployeeAttendanceDataSource } from './employee-attendance-datasource';
-import { EmployeeAttendanceItem } from './employee-attendance-item';
 import { EmployeeAttendanceService } from './employee-attendance.service';
 
+export interface EmployeeAttendanceFormData {
+  startDate: Date;
+  finishDate: Date;
+  employee: string | Employee | null;
+  attendances: { attendanceType: number | null }[];
+}
+
 @Component({
   selector: 'app-employee-attendance',
   templateUrl: './employee-attendance.component.html',
   styleUrls: ['./employee-attendance.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -43,115 +55,89 @@ import { EmployeeAttendanceService } from './employee-attendance.service';
     MatSelectModule,
     MatIconModule,
     MatChipsModule,
-    AsyncPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class EmployeeAttendanceComponent {
   private router = inject(Router);
-  private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
-  private auth = inject(AuthService);
   private ser = inject(EmployeeAttendanceService);
   private employeeSer = inject(EmployeeService);
+  private attendanceTypeSer = inject(AttendanceTypeService);
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  infoResource = this.ser.get(this.id, this.startDate, this.finishDate);
+  info = computed(() => this.infoResource.value() ?? new EmployeeAttendance());
+  attendanceTypesResource = this.attendanceTypeSer.list();
+  attendanceTypes = computed(() => this.attendanceTypesResource.value() ?? []);
 
-  @ViewChild('employeeElement', { static: true }) employeeElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  public employeeAttendanceObservable = new BehaviorSubject<EmployeeAttendanceItem[]>([]);
-  dataSource: EmployeeAttendanceDataSource = new EmployeeAttendanceDataSource(this.employeeAttendanceObservable);
+  model = linkedSignal({
+    source: this.info,
+    computation: (info): EmployeeAttendanceFormData => ({
+      startDate: info.startDate ? moment(info.startDate, 'DD-MMM-YYYY').toDate() : new Date(),
+      finishDate: info.finishDate ? moment(info.finishDate, 'DD-MMM-YYYY').toDate() : new Date(),
+      employee: info.employee ?? null,
+      attendances: info.body.map((x) => ({
+        attendanceType: x.attendanceType.id,
+      })),
+    }),
+  });
 
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-    employee: FormControl<string | null>;
-    attendances: FormArray<
-      FormGroup<{
-        attendanceType: FormControl<number>;
-      }>
-    >;
-  }>;
+  form = createForm(this.model);
 
-  info: EmployeeAttendance = new EmployeeAttendance();
-  attendanceTypes: AttendanceType[] = [];
+  dataSource = computed(() => this.info().body);
 
   displayedColumns = ['date', 'status', 'prints'];
 
-  employees: Observable<Employee[]>;
+  employeesSearch = computed(() => {
+    const x = this.model().employee;
+    return typeof x === 'string' ? x : null;
+  });
+
+  debouncedEmployeeSearch = debounced(this.employeesSearch, 150);
+  employeesResource = this.employeeSer.autocomplete(computed(() => this.debouncedEmployeeSearch.value() ?? ''));
+  employees = computed(() => this.employeesResource.value() ?? []);
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
+    this.form().focusBoundControl();
   }
 
   constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      employee: new FormControl<string | null>(null),
-      attendances: new FormArray<FormGroup<{ attendanceType: FormControl<number> }>>([]),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
-    // Listen to Employee Value Changes
-    this.employees = this.form.controls.employee.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.employeeSer.autocomplete(x))),
-    );
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: EmployeeAttendance; attendanceTypes: AttendanceType[] };
-
-      this.info = data.info;
-      this.attendanceTypes = data.attendanceTypes;
-      this.form.controls.startDate.setValue(moment(this.info.startDate, 'DD-MMM-YYYY'));
-      this.form.controls.finishDate.setValue(moment(this.info.finishDate, 'DD-MMM-YYYY'));
-      this.form.controls.employee.setValue(this.info.employee?.name ?? '');
-      this.form.controls.attendances.clear();
-      this.info.body.forEach((x) =>
-        this.form.controls.attendances.push(
-          new FormGroup({
-            attendanceType: new FormControl(x.attendanceType.id, { nonNullable: true }),
-          }),
-        ),
-      );
-      this.dataSource = new EmployeeAttendanceDataSource(this.employeeAttendanceObservable);
-      this.employeeAttendanceObservable.next(this.info.body);
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.employeeElement.nativeElement.focus();
-    }, 0);
   }
 
   displayFn(employee?: Employee | string): string {
     return !employee ? '' : typeof employee === 'string' ? employee : employee.name;
   }
 
-  selected(event: MatAutocompleteSelectedEvent): void {
-    this.info.employee = event.option.value as Employee;
-  }
-
   getClass(index: number) {
-    const array = this.form.controls.attendances;
-    const id = array.controls[index].value.attendanceType;
-    const { name } = this.attendanceTypes.filter((x) => x.id === id)[0];
-    return name.toLowerCase().replace(/(\s+\+\s+)|(\s+)/g, '-');
+    const array = this.model().attendances;
+    if (!array || !array[index]) return '';
+    const id = array[index].attendanceType;
+    const typeObj = this.attendanceTypes().filter((x) => x.id === id)[0];
+    if (!typeObj) return '';
+    return typeObj.name.toLowerCase().replace(/(\s+\+\s+)|(\s+)/g, '-');
   }
 
   show() {
-    const formValue = this.form.value;
-    this.info.startDate = moment(formValue.startDate).format('DD-MMM-YYYY');
-    this.info.finishDate = moment(formValue.finishDate).format('DD-MMM-YYYY');
-    if (this.info.employee) {
-      this.router.navigate(['/employee-attendance', this.info.employee.id], {
+    const formValue = this.model();
+    const currentInfo = this.info();
+    currentInfo.startDate = moment(formValue.startDate).format('DD-MMM-YYYY');
+    currentInfo.finishDate = moment(formValue.finishDate).format('DD-MMM-YYYY');
+    currentInfo.employee =
+      typeof formValue.employee !== 'string' && formValue.employee ? formValue.employee : undefined;
+    if (currentInfo.employee) {
+      this.router.navigate(['/employee-attendance', currentInfo.employee.id], {
         queryParams: {
-          startDate: this.info.startDate,
-          finishDate: this.info.finishDate,
+          startDate: currentInfo.startDate,
+          finishDate: currentInfo.finishDate,
         },
       });
     }
@@ -163,21 +149,26 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
         this.snackBar.open('', 'Success');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   getEmployeeAttendance(): EmployeeAttendance {
-    const formValue = this.form.value;
-    this.info.startDate = moment(formValue.startDate).format('DD-MMM-YYYY');
-    this.info.finishDate = moment(formValue.finishDate).format('DD-MMM-YYYY');
-    const array = this.form.value.attendances;
+    const formValue = this.model();
+    const currentInfo = this.info();
+    currentInfo.startDate = moment(formValue.startDate).format('DD-MMM-YYYY');
+    currentInfo.finishDate = moment(formValue.finishDate).format('DD-MMM-YYYY');
+    currentInfo.employee =
+      typeof formValue.employee !== 'string' && formValue.employee ? formValue.employee : undefined;
+    const array = formValue.attendances;
     if (array) {
-      this.info.body.forEach((item, index) => {
-        item.attendanceType.id = array[index].attendanceType ?? 0;
+      currentInfo.body.forEach((item, index) => {
+        if (array[index]) {
+          item.attendanceType.id = array[index].attendanceType ?? 0;
+        }
       });
     }
-    return this.info;
+    return currentInfo;
   }
 }
diff --git a/overlord/src/app/employee-attendance/employee-attendance.resolver.ts b/overlord/src/app/employee-attendance/employee-attendance.resolver.ts
deleted file mode 100644
index 37d3d3e4..00000000
--- a/overlord/src/app/employee-attendance/employee-attendance.resolver.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { EmployeeAttendance } from './employee-attendance';
-import { EmployeeAttendanceService } from './employee-attendance.service';
-
-export const employeeAttendanceResolver: ResolveFn<EmployeeAttendance> = (route) => {
-  const id = route.paramMap.get('id');
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(EmployeeAttendanceService).get(id, startDate, finishDate);
-};
diff --git a/overlord/src/app/employee-attendance/employee-attendance.routes.ts b/overlord/src/app/employee-attendance/employee-attendance.routes.ts
index fadfeefe..3155f918 100644
--- a/overlord/src/app/employee-attendance/employee-attendance.routes.ts
+++ b/overlord/src/app/employee-attendance/employee-attendance.routes.ts
@@ -1,9 +1,7 @@
 import { Routes } from '@angular/router';
 
-import { attendanceTypeResolver } from '../attendance/attendance-type.resolver';
 import { authGuard } from '../auth/auth-guard.service';
 import { EmployeeAttendanceComponent } from './employee-attendance.component';
-import { employeeAttendanceResolver } from './employee-attendance.resolver';
 
 export const routes: Routes = [
   {
@@ -13,10 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Attendance',
     },
-    resolve: {
-      info: employeeAttendanceResolver,
-      attendanceTypes: attendanceTypeResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -26,10 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Attendance',
     },
-    resolve: {
-      info: employeeAttendanceResolver,
-      attendanceTypes: attendanceTypeResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/employee-attendance/employee-attendance.service.ts b/overlord/src/app/employee-attendance/employee-attendance.service.ts
index 383c9bce..247e3db6 100644
--- a/overlord/src/app/employee-attendance/employee-attendance.service.ts
+++ b/overlord/src/app/employee-attendance/employee-attendance.service.ts
@@ -1,40 +1,36 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable, of as observableOf } from 'rxjs';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
+import { Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { EmployeeAttendance } from './employee-attendance';
 
 const url = '/api/employee-attendance';
-const serviceName = 'EmployeeAttendanceService';
-
 @Injectable({ providedIn: 'root' })
 export class EmployeeAttendanceService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null, startDate: string | null, finishDate: string | null): Observable<EmployeeAttendance> {
-    const getUrl: string = id === null ? url : `${url}/${id}`;
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    return this.http
-      .get<EmployeeAttendance>(getUrl, options)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<EmployeeAttendance>;
+  get(id: Signal<string | null>, startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<EmployeeAttendance>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      const params: Record<string, string> = {};
+      const startDate_val = startDate();
+      if (startDate_val !== null) params['s'] = startDate_val;
+      const finishDate_val = finishDate();
+      if (finishDate_val !== null) params['f'] = finishDate_val;
+      return { url: getUrl, params };
+    });
   }
 
   save(employeeAttendance: EmployeeAttendance): Observable<EmployeeAttendance> {
-    if (!employeeAttendance.employee) {
-      return observableOf(new EmployeeAttendance());
+    const id = employeeAttendance.employee?.id;
+    if (!id) {
+      throw new Error('Employee not chosen');
     }
-    const { id } = employeeAttendance.employee;
     return this.http
       .post<EmployeeAttendance>(`${url}/${id}`, employeeAttendance)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<EmployeeAttendance>;
+      .pipe(catchError(this.log.handleError('EmployeeAttendanceService', 'save'))) as Observable<EmployeeAttendance>;
   }
 }
diff --git a/overlord/src/app/employee-benefits/employee-benefits-datasource.ts b/overlord/src/app/employee-benefits/employee-benefits-datasource.ts
deleted file mode 100644
index b04402ec..00000000
--- a/overlord/src/app/employee-benefits/employee-benefits-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { EmployeeBenefit } from '../core/employee-benefit';
-
-export class EmployeeBenefitsDataSource extends DataSource<EmployeeBenefit> {
-  constructor(private data: Observable<EmployeeBenefit[]>) {
-    super();
-  }
-
-  connect(): Observable<EmployeeBenefit[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/employee-benefits/employee-benefits.component.html b/overlord/src/app/employee-benefits/employee-benefits.component.html
index 2805c976..9ba4ee34 100644
--- a/overlord/src/app/employee-benefits/employee-benefits.component.html
+++ b/overlord/src/app/employee-benefits/employee-benefits.component.html
@@ -1,6 +1,6 @@
 <h2>Employee Benefits</h2>
 
-<form [formGroup]="form" class="flex-col wrapped">
+<form class="flex-col wrapped" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Date</mat-label>
@@ -9,14 +9,14 @@
         #dateElement
         [matDatepicker]="date"
         (focus)="dateElement.select()"
-        formControlName="date"
+        [formField]="form.date"
         autocomplete="off"
       />
       <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
       <mat-datepicker #date></mat-datepicker>
     </mat-form-field>
   </div>
-  <div formGroupName="addRow" class="row-container">
+  <div class="row-container">
     <mat-form-field class="flex-auto basis-3-5">
       <mat-label>Employee</mat-label>
       <input
@@ -24,32 +24,27 @@
         matInput
         #employeeElement
         [matAutocomplete]="auto"
-        formControlName="employee"
+        [formField]="form.addRow.employee"
         autocomplete="off"
       />
-      <mat-autocomplete
-        #auto="matAutocomplete"
-        autoActiveFirstOption
-        [displayWith]="displayFn"
-        (optionSelected)="employeeSelected($event)"
-      >
-        @for (employee of employees | async; track employee) {
+      <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+        @for (employee of employees(); track employee) {
           <mat-option [value]="employee">{{ employee.name }}</mat-option>
         }
       </mat-autocomplete>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-15">
       <mat-label>Gross Salary</mat-label>
-      <input type="text" matInput formControlName="grossSalary" autocomplete="off" />
+      <input type="text" matInput [formField]="form.addRow.grossSalary" autocomplete="off" />
     </mat-form-field>
     <mat-form-field class="flex-auto basis-15">
       <mat-label>Days Worked</mat-label>
-      <input type="text" matInput formControlName="daysWorked" autocomplete="off" />
+      <input type="text" matInput [formField]="form.addRow.daysWorked" autocomplete="off" />
     </mat-form-field>
 
     <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-10">Add</button>
   </div>
-  <mat-table #table [dataSource]="dataSource">
+  <mat-table #table [dataSource]="form.benefits().value() ?? []">
     <!-- Name Column -->
     <ng-container matColumnDef="name">
       <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
@@ -121,19 +116,19 @@
 
 <div class="row-container">
   <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
-    {{ voucher.id ? 'Update' : 'Save' }}
+    {{ id() ? 'Update' : 'Save' }}
   </button>
-  @if (voucher.id) {
-    <button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')">
-      {{ voucher.posted ? 'Posted' : 'Post' }}
+  @if (id()) {
+    <button mat-raised-button (click)="post()" [disabled]="item().posted || !auth.allowed('post-vouchers')">
+      {{ item().posted ? 'Posted' : 'Post' }}
     </button>
     <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
   }
 </div>
-@if (voucher.id) {
+@if (id()) {
   <div class="row-container">
-    Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
-    <strong>{{ voucher.lastEditDate | localTime }}</strong> by <strong>{{ voucher.user.name }}</strong
-    >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+    Created on <strong>{{ item().creationDate | localTime }}</strong> and Last Edited on
+    <strong>{{ item().lastEditDate | localTime }}</strong> by <strong>{{ item().user.name }}</strong
+    >. {{ item().poster ? 'Posted by ' + item().poster : '' }}
   </div>
 }
diff --git a/overlord/src/app/employee-benefits/employee-benefits.component.ts b/overlord/src/app/employee-benefits/employee-benefits.component.ts
index 4083d8c1..8cc9c8c2 100644
--- a/overlord/src/app/employee-benefits/employee-benefits.component.ts
+++ b/overlord/src/app/employee-benefits/employee-benefits.component.ts
@@ -1,7 +1,7 @@
-import { AsyncPipe, CurrencyPipe, DecimalPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { CurrencyPipe, DecimalPipe } from '@angular/common';
+import { afterNextRender, Component, computed, HostListener, inject, input, linkedSignal, signal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -11,13 +11,10 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
 import { AuthService } from '../auth/auth.service';
-import { AccountBalance } from '../core/account-balance';
 import { EmployeeBenefit } from '../core/employee-benefit';
 import { User } from '../core/user';
 import { Voucher } from '../core/voucher';
@@ -26,14 +23,34 @@ import { Employee } from '../employee/employee';
 import { EmployeeService } from '../employee/employee.service';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
 import { LocalTimePipe } from '../shared/local-time.pipe';
-import { EmployeeBenefitsDataSource } from './employee-benefits-datasource';
+
+export interface EmployeeBenefitRowFormData {
+  employee: Employee;
+  grossSalary: number;
+  daysWorked: number;
+  esiEmployee: number;
+  pfEmployee: number;
+  esiEmployer: number;
+  pfEmployer: number;
+}
+
+export interface EmployeeBenefitsFormData {
+  date: Date;
+  addRow: {
+    employee: string | Employee | null;
+    grossSalary: string;
+    daysWorked: string;
+  };
+  benefits: EmployeeBenefitRowFormData[];
+}
 
 @Component({
   selector: 'app-employee-benefits',
   templateUrl: './employee-benefits.component.html',
   styleUrls: ['./employee-benefits.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -42,14 +59,14 @@ import { EmployeeBenefitsDataSource } from './employee-benefits-datasource';
     MatButtonModule,
     MatTableModule,
     MatIconModule,
-    AsyncPipe,
     DecimalPipe,
     CurrencyPipe,
     LocalTimePipe,
   ],
 })
-export class EmployeeBenefitsComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class EmployeeBenefitsComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
@@ -57,22 +74,32 @@ export class EmployeeBenefitsComponent implements OnInit, AfterViewInit {
   private ser = inject(VoucherService);
   private employeeSer = inject(EmployeeService);
 
-  @ViewChild('employeeElement', { static: true }) employeeElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
-  public benefitsObservable = new BehaviorSubject<EmployeeBenefit[]>([]);
-  dataSource: EmployeeBenefitsDataSource = new EmployeeBenefitsDataSource(this.benefitsObservable);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    addRow: FormGroup<{
-      employee: FormControl<string | null>;
-      grossSalary: FormControl<string | null>;
-      daysWorked: FormControl<string | null>;
-    }>;
-  }>;
+  voucherResource = this.ser.getVoucher(this.id, signal('Employee Benefit'), signal(null), signal(null));
 
-  voucher: Voucher = new Voucher();
-  employee: Employee | null = null;
-  accBal: AccountBalance | null = null;
+  item = linkedSignal(() => this.voucherResource.value() ?? new Voucher());
+
+  formModel = linkedSignal<Voucher, EmployeeBenefitsFormData>({
+    source: this.item,
+    computation: (v): EmployeeBenefitsFormData => ({
+      date: v.date ? moment(v.date, 'DD-MMM-YYYY').toDate() : new Date(),
+      addRow: {
+        employee: null as Employee | string | null,
+        grossSalary: '',
+        daysWorked: '',
+      },
+      benefits: (v.employeeBenefits ?? []).map((eb) => ({
+        employee: eb.employee,
+        grossSalary: eb.grossSalary,
+        daysWorked: eb.daysWorked,
+        esiEmployee: eb.esiEmployee,
+        pfEmployee: eb.pfEmployee,
+        esiEmployer: eb.esiEmployer,
+        pfEmployer: eb.pfEmployer,
+      })),
+    }),
+  });
+
+  form = form(this.formModel);
 
   displayedColumns = [
     'name',
@@ -84,32 +111,27 @@ export class EmployeeBenefitsComponent implements OnInit, AfterViewInit {
     'pfEmployee',
     'esiEmployer',
     'pfEmployer',
+    'action',
   ];
 
-  employees: Observable<Employee[]>;
+  employeesSearch = computed(() => {
+    const x = this.form.addRow.employee().value();
+    return typeof x === 'string' ? x : null;
+  });
+
+  employeesResource = this.employeeSer.autocomplete(computed(() => this.employeesSearch() ?? ''));
+  employees = computed(() => this.employeesResource.value() ?? []);
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
+    this.form.date().focusBoundControl();
   }
 
   constructor() {
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      addRow: new FormGroup({
-        employee: new FormControl(''),
-        grossSalary: new FormControl(''),
-        daysWorked: new FormControl(''),
-      }),
+    afterNextRender(() => {
+      this.form.addRow.employee().focusBoundControl();
     });
-    // Setup Employee Autocomplete
-    this.employees = this.form.controls.addRow.controls.employee.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.employeeSer.autocomplete(x))),
-    );
   }
 
   static getPf(grossSalary: number, daysWorked: number, daysInMonth: number) {
@@ -130,148 +152,136 @@ export class EmployeeBenefitsComponent implements OnInit, AfterViewInit {
     return { ee: employee, er: employer, both: employee + employer };
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { voucher: Voucher };
-
-      this.loadVoucher(data.voucher);
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.employeeElement.nativeElement.focus();
-    }, 0);
-  }
-
-  loadVoucher(voucher: Voucher) {
-    this.voucher = voucher;
-    this.form.setValue({
-      date: moment(this.voucher.date, 'DD-MMM-YYYY'),
-      addRow: {
-        employee: '',
-        grossSalary: '',
-        daysWorked: '',
-      },
-    });
-    this.dataSource = new EmployeeBenefitsDataSource(this.benefitsObservable);
-    this.benefitsObservable.next(this.voucher.employeeBenefits);
-  }
-
   displayFn(employee?: Employee | string): string {
     return !employee ? '' : typeof employee === 'string' ? employee : employee.name;
   }
 
-  employeeSelected(event: MatAutocompleteSelectedEvent): void {
-    this.employee = event.option.value as Employee;
-  }
-
   addRow() {
-    const oldFiltered = this.voucher.employeeBenefits.filter((x) => x.employee.id === (this.employee as Employee).id);
-    if (oldFiltered.length) {
+    const formValue = this.form().value().addRow;
+    const employeeVal = formValue?.employee;
+    if (!employeeVal || typeof employeeVal === 'string') {
+      return;
+    }
+    const employee = employeeVal as Employee;
+    const alreadyAdded = this.formModel().benefits.some((x) => x.employee.id === employee.id);
+    if (alreadyAdded) {
       this.snackBar.open('Employee has already been added', 'Danger');
       return;
     }
-
-    const formValue = this.form.value.addRow;
-    if (formValue === undefined) {
-      return;
-    }
-    const grossSalary = Number(formValue.grossSalary);
-    const daysWorked = Number(formValue.daysWorked);
-    const date = this.form.value.date ?? new Date();
-    const daysInMonth = moment(date).daysInMonth();
+    const grossSalary = Number(formValue?.grossSalary ?? 0);
+    const daysWorked = Number(formValue?.daysWorked ?? 0);
+    const daysInMonth = moment(this.formModel().date).daysInMonth();
     const esi = EmployeeBenefitsComponent.getEsi(grossSalary, daysWorked, daysInMonth);
     const pf = EmployeeBenefitsComponent.getPf(grossSalary, daysWorked, daysInMonth);
 
-    this.voucher.employeeBenefits.push(
-      new EmployeeBenefit({
-        employee: this.employee as Employee,
-        grossSalary,
-        daysWorked,
-        esiEmployee: esi.ee,
-        pfEmployee: pf.ee,
-        esiEmployer: esi.er,
-        pfEmployer: pf.er,
-      }),
-    );
-    this.benefitsObservable.next(this.voucher.employeeBenefits);
-    this.resetAddRow();
+    const newRow: EmployeeBenefitRowFormData = {
+      employee,
+      grossSalary,
+      daysWorked,
+      esiEmployee: esi.ee,
+      pfEmployee: pf.ee,
+      esiEmployer: esi.er,
+      pfEmployer: pf.er,
+    };
+
+    this.formModel.update((m) => ({
+      ...m,
+      benefits: [...m.benefits, newRow],
+      addRow: { employee: null, grossSalary: '', daysWorked: '' },
+    }));
+    this.form.addRow.employee().focusBoundControl();
   }
 
-  resetAddRow() {
-    this.form.controls.addRow.reset();
-    this.employee = null;
-    setTimeout(() => {
-      this.employeeElement.nativeElement.focus();
-    }, 0);
-  }
-
-  deleteRow(row: EmployeeBenefit) {
-    this.voucher.employeeBenefits.splice(this.voucher.employeeBenefits.indexOf(row), 1);
-    this.benefitsObservable.next(this.voucher.employeeBenefits);
+  deleteRow(row: EmployeeBenefitRowFormData) {
+    const updatedBenefits = this.formModel().benefits.filter((b) => b !== row);
+    this.formModel.update((m) => ({
+      ...m,
+      benefits: updatedBenefits,
+    }));
+    this.form.addRow.employee().focusBoundControl();
   }
 
   canSave() {
-    if (!this.voucher.id) {
+    if (!this.id()) {
       return true;
     }
-    if (this.voucher.posted && this.auth.allowed('edit-posted-vouchers')) {
-      return true;
+    if (this.item().posted && !this.auth.allowed('edit-posted-vouchers')) {
+      return false;
     }
-    return this.voucher.user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
+    const user = this.auth.user as User;
+    return this.item().user?.id === user?.id || this.auth.allowed("edit-other-user's-vouchers");
   }
 
   post() {
-    this.ser.post(this.voucher.id as string).subscribe({
-      next: (result) => {
-        this.loadVoucher(result);
-        this.snackBar.open('Voucher Posted', 'Success');
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
+    const id = this.id();
+    if (id) {
+      this.ser.post(id).subscribe({
+        next: (result: Voucher) => {
+          this.snackBar.open('Voucher Posted', undefined, { duration: 2000 });
+          this.item.set(result);
+        },
+        error: (error: string) => {
+          this.snackBar.open(error as string, 'Danger');
+        },
+      });
+    }
   }
 
   save() {
-    const voucher: Voucher = this.getVoucher();
-    this.ser.saveOrUpdate(voucher).subscribe({
-      next: (result) => {
+    this.ser.saveOrUpdate(this.getVoucher()).subscribe({
+      next: (result: Voucher) => {
         this.snackBar.open('', 'Success');
-        if (voucher.id === result.id) {
-          this.loadVoucher(result);
+        if (this.item().id === result.id) {
+          this.item.set(result);
         } else {
           this.router.navigate(['/employee-benefits', result.id]);
         }
       },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
+      error: (error: string) => {
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   getVoucher(): Voucher {
-    const formModel = this.form.value;
-    this.voucher.date = moment(formModel.date).format('DD-MMM-YYYY');
-    return this.voucher;
+    const m = this.formModel();
+    const base = this.item();
+    const v = new Voucher({ ...base });
+    v.date = moment(m.date).format('DD-MMM-YYYY');
+    v.employeeBenefits = m.benefits.map(
+      (b) =>
+        new EmployeeBenefit({
+          employee: b.employee,
+          grossSalary: b.grossSalary,
+          daysWorked: b.daysWorked,
+          esiEmployee: b.esiEmployee,
+          pfEmployee: b.pfEmployee,
+          esiEmployer: b.esiEmployer,
+          pfEmployer: b.pfEmployer,
+        }),
+    );
+    return v;
   }
 
   delete() {
-    this.ser.delete(this.voucher.id as string).subscribe({
-      next: () => {
-        this.snackBar.open('', 'Success');
-        this.router.navigate(['/employee-benefits'], { replaceUrl: true });
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
+    const id = this.id();
+    if (id) {
+      this.ser.delete(id).subscribe({
+        next: () => {
+          this.snackBar.open('', 'Success');
+          this.router.navigate(['/employee-benefits'], { replaceUrl: true });
+        },
+        error: (error: string) => {
+          this.snackBar.open(error as string, 'Danger');
+        },
+      });
+    }
   }
 
   confirmDelete(): void {
+    const id = this.id();
+    if (!id) return;
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '250px',
       data: { title: 'Delete Voucher?', content: 'Are you sure? This cannot be undone.' },
     });
 
diff --git a/overlord/src/app/employee-benefits/employee-benefits.resolver.ts b/overlord/src/app/employee-benefits/employee-benefits.resolver.ts
deleted file mode 100644
index e92ffe0a..00000000
--- a/overlord/src/app/employee-benefits/employee-benefits.resolver.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { VoucherService } from '../core/voucher.service';
-
-export const employeeBenefitsResolver: ResolveFn<Voucher> = (route) => {
-  const id = route.paramMap.get('id');
-  const date = route.queryParamMap.get('d') || null;
-  if (id === null) {
-    return inject(VoucherService).getOfType('Employee Benefit', null, date);
-  }
-  return inject(VoucherService).get(id, 'Employee Benefit');
-};
diff --git a/overlord/src/app/employee-benefits/employee-benefits.routes.ts b/overlord/src/app/employee-benefits/employee-benefits.routes.ts
index 5906a2fb..17577718 100644
--- a/overlord/src/app/employee-benefits/employee-benefits.routes.ts
+++ b/overlord/src/app/employee-benefits/employee-benefits.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { EmployeeBenefitsComponent } from './employee-benefits.component';
-import { employeeBenefitsResolver } from './employee-benefits.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'employee-benefit',
     },
-    resolve: {
-      voucher: employeeBenefitsResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'employee-benefit',
     },
-    resolve: {
-      voucher: employeeBenefitsResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/employee-functions/employee-functions.component.html b/overlord/src/app/employee-functions/employee-functions.component.html
index b928abcc..80a6e88f 100644
--- a/overlord/src/app/employee-functions/employee-functions.component.html
+++ b/overlord/src/app/employee-functions/employee-functions.component.html
@@ -1,10 +1,10 @@
 <mat-tab-group>
   <mat-tab label="Credit Salary">
-    <form [formGroup]="creditSalaryForm" class="flex flex-col">
+    <form class="flex flex-col" [formRoot]="creditSalaryForm">
       <div class="row-container">
         <mat-form-field class="flex-auto basis-4-5">
           <mat-label>Date</mat-label>
-          <input matInput [matDatepicker]="creditSalaryMonth" formControlName="date" autocomplete="off" />
+          <input matInput [matDatepicker]="creditSalaryMonth" [formField]="creditSalaryForm.date" autocomplete="off" />
           <mat-datepicker-toggle matSuffix [for]="creditSalaryMonth"></mat-datepicker-toggle>
           <mat-datepicker
             #creditSalaryMonth
@@ -22,18 +22,28 @@
   </mat-tab>
   <mat-tab label="Download Attendance Record">
     <form
-      [formGroup]="attendanceRecordForm"
       class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
+      [formRoot]="attendanceRecordForm"
     >
       <mat-form-field class="flex-auto basis-35">
         <mat-label>Start Date</mat-label>
-        <input matInput [matDatepicker]="attendanceStartDate" formControlName="startDate" autocomplete="off" />
+        <input
+          matInput
+          [matDatepicker]="attendanceStartDate"
+          [formField]="attendanceRecordForm.startDate"
+          autocomplete="off"
+        />
         <mat-datepicker-toggle matSuffix [for]="attendanceStartDate"></mat-datepicker-toggle>
         <mat-datepicker #attendanceStartDate></mat-datepicker>
       </mat-form-field>
       <mat-form-field class="flex-auto basis-35">
         <mat-label>Finish Date</mat-label>
-        <input matInput [matDatepicker]="attendanceFinishDate" formControlName="finishDate" autocomplete="off" />
+        <input
+          matInput
+          [matDatepicker]="attendanceFinishDate"
+          [formField]="attendanceRecordForm.finishDate"
+          autocomplete="off"
+        />
         <mat-datepicker-toggle matSuffix [for]="attendanceFinishDate"></mat-datepicker-toggle>
         <mat-datepicker #attendanceFinishDate></mat-datepicker>
       </mat-form-field>
diff --git a/overlord/src/app/employee-functions/employee-functions.component.ts b/overlord/src/app/employee-functions/employee-functions.component.ts
index ae555606..a9ed0cee 100644
--- a/overlord/src/app/employee-functions/employee-functions.component.ts
+++ b/overlord/src/app/employee-functions/employee-functions.component.ts
@@ -1,5 +1,5 @@
-import { Component, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, signal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -16,8 +16,8 @@ import { EmployeeFunctionsService } from './employee-functions.service';
   styleUrls: ['./employee-functions.component.css'],
   imports: [
     MatTabsModule,
-
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -28,46 +28,44 @@ export class EmployeeFunctionsComponent {
   private snackBar = inject(MatSnackBar);
   private ser = inject(EmployeeFunctionsService);
 
-  creditSalaryForm: FormGroup<{
-    date: FormControl<moment.Moment>;
-  }>;
+  creditSalaryModel = signal({
+    date: moment().date(moment().daysInMonth()),
+  });
 
-  attendanceRecordForm: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-  }>;
+  creditSalaryForm = createForm(this.creditSalaryModel);
+
+  attendanceRecordModel = signal({
+    startDate: moment(),
+    finishDate: moment(),
+  });
+
+  attendanceRecordForm = createForm(this.attendanceRecordModel);
 
   fingerprintFile: File | null = null;
 
   constructor() {
     const startDate = moment().date(1);
     const finishDate = moment().date(startDate.daysInMonth());
-    this.creditSalaryForm = new FormGroup({
-      date: new FormControl(finishDate, { nonNullable: true }),
-    });
-    this.attendanceRecordForm = new FormGroup({
-      startDate: new FormControl(moment(), { nonNullable: true }),
-      finishDate: new FormControl(moment(), { nonNullable: true }),
-    });
+    this.creditSalaryModel.set({ date: finishDate });
   }
 
   chosenYearHandler(normalizedYear: moment.Moment) {
-    const ctrlValue = this.creditSalaryForm.value.date ?? moment();
+    const ctrlValue = this.creditSalaryModel().date ?? moment();
     ctrlValue.year(normalizedYear.year());
     ctrlValue.date(ctrlValue.daysInMonth());
-    this.creditSalaryForm.setValue({ date: ctrlValue });
+    this.creditSalaryModel.update((m) => ({ ...m, date: ctrlValue }));
   }
 
   chosenMonthHandler(normlizedMonth: moment.Moment, datepicker: MatDatepicker<moment.Moment>) {
-    const ctrlValue = this.creditSalaryForm.value.date ?? moment();
+    const ctrlValue = this.creditSalaryModel().date ?? moment();
     ctrlValue.month(normlizedMonth.month());
     ctrlValue.date(ctrlValue.daysInMonth());
-    this.creditSalaryForm.setValue({ date: ctrlValue });
+    this.creditSalaryModel.update((m) => ({ ...m, date: ctrlValue }));
     datepicker.close();
   }
 
   creditSalary() {
-    const date = (this.creditSalaryForm.value.date ?? moment()).format('DD-MMM-YYYY');
+    const date = (this.creditSalaryModel().date ?? moment()).format('DD-MMM-YYYY');
     if (!date) {
       this.snackBar.open('Please choose a valid date.', 'Danger');
       return;
@@ -77,14 +75,14 @@ export class EmployeeFunctionsComponent {
         this.snackBar.open('Salaries Credited', 'Success');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   attendanceRecordUrl() {
-    const startDate = (this.attendanceRecordForm.value.startDate ?? moment()).format('DD-MMM-YYYY');
-    const finishDate = (this.attendanceRecordForm.value.finishDate ?? moment()).format('DD-MMM-YYYY');
+    const startDate = (this.attendanceRecordModel().startDate ?? moment()).format('DD-MMM-YYYY');
+    const finishDate = (this.attendanceRecordModel().finishDate ?? moment()).format('DD-MMM-YYYY');
     if (!startDate || !finishDate) {
       // this.snackBar.open('Please choose a start and finish date.', 'Danger');
       return '';
@@ -93,8 +91,8 @@ export class EmployeeFunctionsComponent {
   }
 
   fingerPrintUrl() {
-    const startDate = (this.attendanceRecordForm.value.startDate ?? moment()).format('DD-MMM-YYYY');
-    const finishDate = (this.attendanceRecordForm.value.finishDate ?? moment()).format('DD-MMM-YYYY');
+    const startDate = (this.attendanceRecordModel().startDate ?? moment()).format('DD-MMM-YYYY');
+    const finishDate = (this.attendanceRecordModel().finishDate ?? moment()).format('DD-MMM-YYYY');
     if (!startDate || !finishDate) {
       // this.snackBar.open('Please choose a start and finish date.', 'Danger');
       return '';
@@ -116,7 +114,7 @@ export class EmployeeFunctionsComponent {
         this.snackBar.open('Fingerprints uploaded', 'Success');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
diff --git a/overlord/src/app/employee-functions/employee-functions.service.ts b/overlord/src/app/employee-functions/employee-functions.service.ts
index 874d4453..13e0c123 100644
--- a/overlord/src/app/employee-functions/employee-functions.service.ts
+++ b/overlord/src/app/employee-functions/employee-functions.service.ts
@@ -5,8 +5,6 @@ import { catchError } from 'rxjs/operators';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
 
-const serviceName = 'EmployeeFunctionsService';
-
 @Injectable({ providedIn: 'root' })
 export class EmployeeFunctionsService {
   private http = inject(HttpClient);
@@ -16,7 +14,7 @@ export class EmployeeFunctionsService {
     const url = '/api/credit-salary';
     return this.http
       .post<boolean>(url, { month })
-      .pipe(catchError(this.log.handleError(serviceName, 'creditSalary'))) as Observable<boolean>;
+      .pipe(catchError(this.log.handleError('EmployeeFunctionsService', 'creditSalary'))) as Observable<boolean>;
   }
 
   uploadFingerprints(fingerprintFile: File): Observable<boolean> {
@@ -25,6 +23,6 @@ export class EmployeeFunctionsService {
     fd.append('fingerprints', fingerprintFile);
     return this.http
       .post<boolean>(url, fd)
-      .pipe(catchError(this.log.handleError(serviceName, 'uploadFingerprints'))) as Observable<boolean>;
+      .pipe(catchError(this.log.handleError('EmployeeFunctionsService', 'uploadFingerprints'))) as Observable<boolean>;
   }
 }
diff --git a/overlord/src/app/employee/employee-detail/employee-detail.component.html b/overlord/src/app/employee/employee-detail/employee-detail.component.html
index f95e0644..1a160b0c 100644
--- a/overlord/src/app/employee/employee-detail/employee-detail.component.html
+++ b/overlord/src/app/employee/employee-detail/employee-detail.component.html
@@ -1,77 +1,84 @@
 <h2 class="row-container wrapped">
   <span>Employee</span>
-  <mat-icon matSuffix (click)="item.isStarred = !item.isStarred" class="pointer" [class.gold]="item.isStarred">
-    {{ item.isStarred ? 'star' : 'star_border' }}
+  <mat-icon (click)="item().isStarred = !item().isStarred" class="pointer" [class.gold]="item().isStarred">
+    {{ item().isStarred ? 'star' : 'star_border' }}
   </mat-icon>
 </h2>
 
-<form [formGroup]="form" class="flex-col wrapped">
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Code</mat-label>
-      <input matInput formControlName="code" />
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" />
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Designation</mat-label>
-      <input matInput formControlName="designation" />
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Salary</mat-label>
-      <input matInput formControlName="salary" />
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Points</mat-label>
-      <input matInput formControlName="points" />
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Cost Centre</mat-label>
-      <mat-select formControlName="costCentre" name="CostCentre">
-        @for (cs of costCentres; track cs) {
-          <mat-option [value]="cs.id">
-            {{ cs.name }}
-          </mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Joining Date</mat-label>
-      <input matInput [matDatepicker]="joiningDate" formControlName="joiningDate" autocomplete="off" />
-      <mat-datepicker-toggle matSuffix [for]="joiningDate"></mat-datepicker-toggle>
-      <mat-datepicker #joiningDate></mat-datepicker>
-    </mat-form-field>
-    @if (!item.isActive) {
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <form class="flex-col wrapped" [formRoot]="form">
+    <div class="row-container">
       <mat-form-field class="flex-auto">
-        <mat-label>Leaving Date</mat-label>
-        <input matInput [matDatepicker]="leavingDate" formControlName="leavingDate" autocomplete="off" />
-        <mat-datepicker-toggle matSuffix [for]="leavingDate"></mat-datepicker-toggle>
-        <mat-datepicker #leavingDate></mat-datepicker>
+        <mat-label>Code</mat-label>
+        <input matInput [formField]="form.code" />
       </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput [formField]="form.name" />
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Designation</mat-label>
+        <input matInput [formField]="form.designation" />
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Salary</mat-label>
+        <input type="number" matInput [formField]="form.salary" />
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Points</mat-label>
+        <input type="number" matInput [formField]="form.points" />
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-checkbox [formField]="form.isActive">Is Active?</mat-checkbox>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Cost Centre</mat-label>
+        <mat-select [formField]="form.costCentre">
+          @for (cs of costCentres(); track cs) {
+            <mat-option [value]="cs.id">
+              {{ cs.name }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Joining Date</mat-label>
+        <input matInput [matDatepicker]="joiningDate" [formField]="form.joiningDate" autocomplete="off" />
+        <mat-datepicker-toggle matSuffix [for]="joiningDate"></mat-datepicker-toggle>
+        <mat-datepicker #joiningDate></mat-datepicker>
+      </mat-form-field>
+      @if (!item().isActive) {
+        <mat-form-field class="flex-auto">
+          <mat-label>Leaving Date</mat-label>
+          <input matInput [matDatepicker]="leavingDate" [formField]="form.leavingDate" autocomplete="off" />
+          <mat-datepicker-toggle matSuffix [for]="leavingDate"></mat-datepicker-toggle>
+          <mat-datepicker #leavingDate></mat-datepicker>
+        </mat-form-field>
+      }
+    </div>
+  </form>
+
+  <div class="row-container">
+    <button mat-raised-button color="primary" (click)="save()">Save</button>
+    @if (!!item().id) {
+      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
     }
   </div>
-</form>
-
-<div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()">Save</button>
-  @if (!!item.id) {
-    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-  }
-</div>
+}
diff --git a/overlord/src/app/employee/employee-detail/employee-detail.component.ts b/overlord/src/app/employee/employee-detail/employee-detail.component.ts
index cac6e23d..49f1d549 100644
--- a/overlord/src/app/employee/employee-detail/employee-detail.component.ts
+++ b/overlord/src/app/employee/employee-detail/employee-detail.component.ts
@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, afterNextRender, linkedSignal, input, computed } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -10,21 +10,36 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
-import { CostCentre } from '../../core/cost-centre';
+import { CostCentreService } from '../../cost-centre/cost-centre.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { Employee } from '../employee';
 import { EmployeeService } from '../employee.service';
 
+export interface EmployeeDetailFormData {
+  code: string;
+  name: string;
+  designation: string;
+  salary: number;
+  points: number;
+  isActive: boolean;
+  costCentre: string;
+  joiningDate: string;
+  leavingDate: string | null;
+}
+
 @Component({
   selector: 'app-employee-detail',
   templateUrl: './employee-detail.component.html',
   styleUrls: ['./employee-detail.component.css'],
   imports: [
     MatIconModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatCheckboxModule,
@@ -32,77 +47,48 @@ import { EmployeeService } from '../employee.service';
     MatOptionModule,
     MatDatepickerModule,
     MatButtonModule,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class EmployeeDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class EmployeeDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private ser = inject(EmployeeService);
+  private costCentreService = inject(CostCentreService);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    code: FormControl<string | number>;
-    name: FormControl<string | null>;
-    designation: FormControl<string | null>;
-    salary: FormControl<number | string | null>;
-    points: FormControl<number | string | null>;
-    isActive: FormControl<boolean>;
-    costCentre: FormControl<string | null>;
-    joiningDate: FormControl<moment.Moment>;
-    leavingDate: FormControl<moment.Moment | null>;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  costCentres: CostCentre[] = [];
-  item: Employee = new Employee();
+  item = computed(() => this.itemResource.value() ?? new Employee());
+
+  model = linkedSignal({
+    source: this.item,
+    computation: (itemVal): EmployeeDetailFormData => ({
+      code: itemVal.code ? String(itemVal.code) : '(Auto)',
+      name: itemVal.name || '',
+      designation: itemVal.designation || '',
+      salary: itemVal.salary || 0,
+      points: itemVal.points || 0,
+      isActive: itemVal.isActive ?? true,
+      costCentre: itemVal.costCentre?.id ?? '',
+      joiningDate: itemVal.joiningDate,
+      leavingDate: itemVal.leavingDate,
+    }),
+  });
+
+  form = createForm(this.model);
+
+  costCentresResource = this.costCentreService.list();
+  costCentres = computed(() => this.costCentresResource.value() || []);
 
   constructor() {
-    this.form = new FormGroup({
-      code: new FormControl<string | number>({ value: 0, disabled: true }, { nonNullable: true }),
-      name: new FormControl<string | null>(null),
-      designation: new FormControl<string | null>(null),
-      salary: new FormControl<number | string | null>(null),
-      points: new FormControl<number | string | null>(null),
-      isActive: new FormControl<boolean>(true, { nonNullable: true }),
-      costCentre: new FormControl<string | null>(null),
-      joiningDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      leavingDate: new FormControl<moment.Moment | null>(null),
+    afterNextRender(() => {
+      this.form.name().focusBoundControl();
     });
-    // Listen to IsActive Changes
-    this.form.controls.isActive.valueChanges.subscribe((x) => {
-      this.item.isActive = x;
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: Employee; costCentres: CostCentre[] };
-
-      this.costCentres = data.costCentres;
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: Employee) {
-    this.item = item;
-    this.form.setValue({
-      code: this.item.code || '(Auto)',
-      name: this.item.name || '',
-      designation: this.item.designation || '',
-      salary: this.item.salary || '',
-      points: this.item.points || '',
-      isActive: this.item.isActive,
-      costCentre: this.item.costCentre.id ?? '',
-      joiningDate: this.item.joiningDate ? moment(this.item.joiningDate, 'DD-MMM-YYYY') : moment(new Date()),
-      leavingDate: this.item.isActive ? null : moment(this.item.leavingDate, 'DD-MMM-YYYY'),
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
   }
 
   save() {
@@ -112,19 +98,19 @@ export class EmployeeDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/employees');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
+    this.ser.delete(this.item().id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/employees');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -143,15 +129,16 @@ export class EmployeeDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): Employee {
-    const formValue = this.form.value;
-    this.item.name = formValue.name ?? '';
-    this.item.designation = formValue.designation ?? '';
-    this.item.salary = Number(formValue.salary);
-    this.item.points = Number(formValue.points);
-    this.item.isActive = formValue.isActive ?? true;
-    this.item.costCentre.id = formValue.costCentre ?? '';
-    this.item.joiningDate = moment(formValue.joiningDate).format('DD-MMM-YYYY');
-    this.item.leavingDate = this.item.isActive ? null : moment(formValue.leavingDate).format('DD-MMM-YYYY');
-    return this.item;
+    const formValue = this.model();
+    const item = this.item();
+    item.name = formValue.name ?? '';
+    item.designation = formValue.designation ?? '';
+    item.salary = Number(formValue.salary);
+    item.points = Number(formValue.points);
+    item.isActive = formValue.isActive;
+    item.costCentre.id = formValue.costCentre ?? '';
+    item.joiningDate = moment(formValue.joiningDate).format('DD-MMM-YYYY');
+    item.leavingDate = item.isActive ? null : moment(formValue.leavingDate).format('DD-MMM-YYYY');
+    return item;
   }
 }
diff --git a/overlord/src/app/employee/employee-list.resolver.spec.ts b/overlord/src/app/employee/employee-list.resolver.spec.ts
deleted file mode 100644
index 07e5d993..00000000
--- a/overlord/src/app/employee/employee-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Employee } from './employee';
-import { employeeListResolver } from './employee-list.resolver';
-
-describe('employeeListResolver', () => {
-  const executeResolver: ResolveFn<Employee[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => employeeListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/employee/employee-list.resolver.ts b/overlord/src/app/employee/employee-list.resolver.ts
deleted file mode 100644
index dcdcda85..00000000
--- a/overlord/src/app/employee/employee-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Employee } from './employee';
-import { EmployeeService } from './employee.service';
-
-export const employeeListResolver: ResolveFn<Employee[]> = () => {
-  return inject(EmployeeService).list();
-};
diff --git a/overlord/src/app/employee/employee-list/employee-list-datasource.ts b/overlord/src/app/employee/employee-list/employee-list-datasource.ts
deleted file mode 100644
index fd8a9922..00000000
--- a/overlord/src/app/employee/employee-list/employee-list-datasource.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-
-import { Employee } from '../employee';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class EmployeeListDataSource extends DataSource<Employee> {
-  private filterValue = '';
-
-  constructor(
-    public data: Employee[],
-    private filter: Observable<string>,
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-    this.filter = filter.pipe(
-      tap((x) => {
-        this.filterValue = x;
-      }),
-    );
-  }
-
-  connect(): Observable<Employee[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    return merge(observableOf(this.data), this.filter, ...dataMutations)
-      .pipe(
-        map(() => this.getFilteredData([...this.data])),
-        tap((x: Employee[]) => {
-          if (this.paginator) {
-            this.paginator.length = x.length;
-          }
-        }),
-      )
-      .pipe(map((x: Employee[]) => this.getPagedData(this.getSortedData(x))));
-  }
-
-  disconnect() {}
-
-  private getFilteredData(data: Employee[]): Employee[] {
-    return this.filterValue.split(' ').reduce(
-      (p: Employee[], c: string) =>
-        p.filter((x) => {
-          const employeeString = `${x.code} ${x.name} ${x.designation} ${x.costCentre}${
-            x.isActive ? ' active' : ' inactive'
-          }`.toLowerCase();
-          return employeeString.indexOf(c) !== -1;
-        }),
-      Object.assign([], data),
-    );
-  }
-
-  private getPagedData(data: Employee[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: Employee[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'code':
-          return compare(+a.code, +b.code, isAsc);
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        case 'designation':
-          return compare(a.designation, b.designation, isAsc);
-        case 'salary':
-          return compare(a.salary, b.salary, isAsc);
-        case 'points':
-          return compare(a.points, b.points, isAsc);
-        case 'department':
-          return compare(a.costCentre.name, b.costCentre.name, isAsc);
-        case 'joiningDate':
-          return compare(a.joiningDate, b.joiningDate, isAsc);
-        case 'leavingDate':
-          return compare(a.leavingDate || '', b.leavingDate || '', isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/employee/employee-list/employee-list.component.html b/overlord/src/app/employee/employee-list/employee-list.component.html
index 56200d66..593c47b5 100644
--- a/overlord/src/app/employee/employee-list/employee-list.component.html
+++ b/overlord/src/app/employee/employee-list/employee-list.component.html
@@ -1,9 +1,9 @@
 <h2 class="row-container space-between">
   <span>Employees</span>
-  @if (dataSource.data.length) {
-    <button mat-icon-button (click)="exportCsv()">
+  @if (filteredList().length) {
+    <!-- <button mat-icon-button (click)="exportCsv()">
       <mat-icon>save_alt</mat-icon>
-    </button>
+    </button> -->
   }
   <a mat-button [routerLink]="['/employees', 'new']">
     <mat-icon>add_box</mat-icon>
@@ -11,79 +11,85 @@
   </a>
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="employeeForm">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Filter</mat-label>
-      <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
+      <input type="text" matInput #filterElement [formField]="employeeForm.filter" autocomplete="off" />
     </mat-form-field>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Code Column -->
-  <ng-container matColumnDef="code">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Code</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.code }}</mat-cell>
-  </ng-container>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (listResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="listResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Code Column -->
+    <ng-container matColumnDef="code">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Code</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.code }}</mat-cell>
+    </ng-container>
 
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <a [routerLink]="['/employees', row.id]">
-        @if (row.isStarred) {
-          <mat-icon matSuffix class="gold">star </mat-icon>
-        }
-        {{ row.name }}
-      </a>
-    </mat-cell>
-  </ng-container>
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <a [routerLink]="['/employees', row.id]">
+          @if (row.isStarred) {
+            <mat-icon matSuffix class="gold">star </mat-icon>
+          }
+          {{ row.name }}
+        </a>
+      </mat-cell>
+    </ng-container>
 
-  <!-- Designation Column -->
-  <ng-container matColumnDef="designation">
-    <mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
-  </ng-container>
+    <!-- Designation Column -->
+    <ng-container matColumnDef="designation">
+      <mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.designation }}</mat-cell>
+    </ng-container>
 
-  <!-- Salary Column -->
-  <ng-container matColumnDef="salary">
-    <mat-header-cell *matHeaderCellDef class="right">Salary</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.salary | currency: 'INR' }}</mat-cell>
-  </ng-container>
+    <!-- Salary Column -->
+    <ng-container matColumnDef="salary">
+      <mat-header-cell *matHeaderCellDef class="right">Salary</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.salary | currency: 'INR' }}</mat-cell>
+    </ng-container>
 
-  <!-- Points Column -->
-  <ng-container matColumnDef="points">
-    <mat-header-cell *matHeaderCellDef class="right">Points</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.points | number: '1.2-2' }}</mat-cell>
-  </ng-container>
+    <!-- Points Column -->
+    <ng-container matColumnDef="points">
+      <mat-header-cell *matHeaderCellDef class="right">Points</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.points | number: '1.2-2' }}</mat-cell>
+    </ng-container>
 
-  <!-- Department Column -->
-  <ng-container matColumnDef="department">
-    <mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.costCentre.name }}</mat-cell>
-  </ng-container>
+    <!-- Department Column -->
+    <ng-container matColumnDef="department">
+      <mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.costCentre.name }}</mat-cell>
+    </ng-container>
 
-  <!-- JoiningDate Column -->
-  <ng-container matColumnDef="joiningDate">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Joining On</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.joiningDate }}</mat-cell>
-  </ng-container>
+    <!-- JoiningDate Column -->
+    <ng-container matColumnDef="joiningDate">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Joining On</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.joiningDate }}</mat-cell>
+    </ng-container>
 
-  <!-- LeavingDate Column -->
-  <ng-container matColumnDef="leavingDate">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Left On</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.leavingDate }}</mat-cell>
-  </ng-container>
+    <!-- LeavingDate Column -->
+    <ng-container matColumnDef="leavingDate">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Left On</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.leavingDate }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="filteredList().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/employee/employee-list/employee-list.component.ts b/overlord/src/app/employee/employee-list/employee-list.component.ts
index e2937490..075123f6 100644
--- a/overlord/src/app/employee/employee-list/employee-list.component.ts
+++ b/overlord/src/app/employee/employee-list/employee-list.component.ts
@@ -1,20 +1,30 @@
 import { CommonModule } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import {
+  Component,
+  inject,
+  signal,
+  computed,
+  debounced,
+  linkedSignal,
+  input,
+  afterNextRender,
+  effect,
+} from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
-import { Observable } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { ToCsvService } from '../../shared/to-csv.service';
 import { Employee } from '../employee';
-import { EmployeeListDataSource } from './employee-list-datasource';
+import { EmployeeService } from '../employee.service';
 
 @Component({
   selector: 'app-employee-list',
@@ -29,71 +39,124 @@ import { EmployeeListDataSource } from './employee-list-datasource';
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     RouterModule,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class EmployeeListComponent implements OnInit, AfterViewInit {
+export class EmployeeListComponent {
   private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private ser = inject(EmployeeService);
   private toCsv = inject(ToCsvService);
 
-  @ViewChild('filterElement', { static: true }) filterElement!: ElementRef<HTMLInputElement>;
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  dataSource: EmployeeListDataSource;
-  filter: Observable<string>;
-  form: FormGroup<{
-    filter: FormControl<string>;
-  }>;
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  q = input('', { transform: (v: string | null | undefined) => v ?? '' });
+  formModel = linkedSignal({
+    source: this.q,
+    computation: (qValue) => ({ filter: qValue }),
+  });
 
-  list: Employee[] = [];
+  filterSignal = computed(() => this.formModel().filter);
+  debouncedFilter = debounced(this.filterSignal, 150);
+
+  employeeForm = form(this.formModel);
+
+  listResource = this.ser.list();
+
+  filteredList = computed(() => {
+    const q = (this.debouncedFilter.value() ?? '').trim().toLowerCase();
+    const data = this.listResource.value() ?? [];
+    if (!q) {
+      return data;
+    }
+    return q.split(' ').reduce(
+      (p: Employee[], c: string) =>
+        p.filter((x) => {
+          const employeeString = `${x.code} ${x.name} ${x.designation} ${x.costCentre}${
+            x.isActive ? ' active' : ' inactive'
+          }`.toLowerCase();
+          return employeeString.indexOf(c) !== -1;
+        }),
+      [...data],
+    );
+  });
+
+  sortedList = computed(() => {
+    const data = this.filteredList();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'code':
+          return compare(+a.code, +b.code, isAsc);
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'designation':
+          return compare(a.designation, b.designation, isAsc);
+        case 'salary':
+          return compare(a.salary, b.salary, isAsc);
+        case 'points':
+          return compare(a.points, b.points, isAsc);
+        case 'department':
+          return compare(a.costCentre.name, b.costCentre.name, isAsc);
+        case 'joiningDate':
+          return compare(a.joiningDate, b.joiningDate, isAsc);
+        case 'leavingDate':
+          return compare(a.leavingDate || '', b.leavingDate || '', isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['code', 'name', 'designation', 'salary', 'points', 'department', 'joiningDate', 'leavingDate'];
 
   constructor() {
-    this.form = new FormGroup({
-      filter: new FormControl<string>('', { nonNullable: true }),
+    afterNextRender(() => {
+      this.employeeForm().focusBoundControl();
+    });
+    effect(() => {
+      const q = this.debouncedFilter.value() ?? '';
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: { q: q || null },
+        queryParamsHandling: 'merge',
+        replaceUrl: true,
+      });
     });
-    this.filter = this.form.controls.filter.valueChanges.pipe(debounceTime(150), distinctUntilChanged());
-    this.dataSource = new EmployeeListDataSource(this.list, this.filter, this.paginator, this.sort);
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: Employee[] };
-
-      this.list = data.list;
-    });
-    this.dataSource = new EmployeeListDataSource(this.list, this.filter, this.paginator, this.sort);
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.filterElement.nativeElement.focus();
-    }, 0);
-  }
-
-  exportCsv() {
-    const headers = {
-      Code: 'code',
-      Name: 'name',
-      Designation: 'designation',
-      Salary: 'salary',
-      Points: 'points',
-      Department: 'department',
-      JoiningDate: 'joiningDate',
-      LeavingDate: 'leavingDate',
-    };
-
-    const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource.data)], {
-      type: 'text/csv;charset=utf-8;',
-    });
-    const link = document.createElement('a');
-    link.href = window.URL.createObjectURL(csvData);
-    link.setAttribute('download', 'employees.csv');
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
+
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/employee/employee.resolver.spec.ts b/overlord/src/app/employee/employee.resolver.spec.ts
deleted file mode 100644
index 78bcb821..00000000
--- a/overlord/src/app/employee/employee.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Employee } from './employee';
-import { employeeResolver } from './employee.resolver';
-
-describe('employeeResolver', () => {
-  const executeResolver: ResolveFn<Employee> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => employeeResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/employee/employee.resolver.ts b/overlord/src/app/employee/employee.resolver.ts
deleted file mode 100644
index 92534942..00000000
--- a/overlord/src/app/employee/employee.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Employee } from './employee';
-import { EmployeeService } from './employee.service';
-
-export const employeeResolver: ResolveFn<Employee> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(EmployeeService).get(id);
-};
diff --git a/overlord/src/app/employee/employee.routes.ts b/overlord/src/app/employee/employee.routes.ts
index 626f3f1c..523a82dc 100644
--- a/overlord/src/app/employee/employee.routes.ts
+++ b/overlord/src/app/employee/employee.routes.ts
@@ -1,11 +1,8 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-import { costCentreListResolver } from '../cost-centre/cost-centre-list.resolver';
 import { EmployeeDetailComponent } from './employee-detail/employee-detail.component';
-import { employeeListResolver } from './employee-list.resolver';
 import { EmployeeListComponent } from './employee-list/employee-list.component';
-import { employeeResolver } from './employee.resolver';
 
 export const routes: Routes = [
   {
@@ -15,9 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Employees',
     },
-    resolve: {
-      list: employeeListResolver,
-    },
   },
   {
     path: 'new',
@@ -26,10 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Employees',
     },
-    resolve: {
-      item: employeeResolver,
-      costCentres: costCentreListResolver,
-    },
   },
   {
     path: ':id',
@@ -38,9 +28,5 @@ export const routes: Routes = [
     data: {
       permission: 'Employees',
     },
-    resolve: {
-      item: employeeResolver,
-      costCentres: costCentreListResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/employee/employee.service.ts b/overlord/src/app/employee/employee.service.ts
index 669c3d34..750c690a 100644
--- a/overlord/src/app/employee/employee.service.ts
+++ b/overlord/src/app/employee/employee.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,36 +7,32 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { Employee } from './employee';
 
 const url = '/api/employees';
-const serviceName = 'EmployeeService';
-
 @Injectable({ providedIn: 'root' })
 export class EmployeeService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<Employee> {
-    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
-    return this.http
-      .get<Employee>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Employee>;
+  get(id: Signal<string | null>) {
+    return httpResource<Employee>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<Employee[]> {
-    return this.http
-      .get<Employee[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Employee[]>;
+  list() {
+    return httpResource<Employee[]>(() => `${url}/list`);
   }
 
   save(employee: Employee): Observable<Employee> {
     return this.http
       .post<Employee>(`${url}`, employee)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<Employee>;
+      .pipe(catchError(this.log.handleError('EmployeeService', 'save'))) as Observable<Employee>;
   }
 
   update(employee: Employee): Observable<Employee> {
     return this.http
       .put<Employee>(`${url}/${employee.id}`, employee)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<Employee>;
+      .pipe(catchError(this.log.handleError('EmployeeService', 'update'))) as Observable<Employee>;
   }
 
   saveOrUpdate(employee: Employee): Observable<Employee> {
@@ -49,13 +45,10 @@ export class EmployeeService {
   delete(id: string): Observable<Employee> {
     return this.http
       .delete<Employee>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<Employee>;
+      .pipe(catchError(this.log.handleError('EmployeeService', 'delete'))) as Observable<Employee>;
   }
 
-  autocomplete(term: string): Observable<Employee[]> {
-    const options = { params: new HttpParams().set('q', term) };
-    return this.http
-      .get<Employee[]>(`${url}/query`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'autocomplete'))) as Observable<Employee[]>;
+  autocomplete(term: Signal<string>) {
+    return httpResource<Employee[]>(() => ({ url: `${url}/query`, params: { q: term() } }));
   }
 }
diff --git a/overlord/src/app/entries/entries-datasource.ts b/overlord/src/app/entries/entries-datasource.ts
deleted file mode 100644
index 9b3b1bf1..00000000
--- a/overlord/src/app/entries/entries-datasource.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort, SortDirection } from '@angular/material/sort';
-import { Observable, of as observableOf } from 'rxjs';
-
-import { Entries } from './entries';
-
-export class EntriesDatasource extends DataSource<Entries> {
-  constructor(
-    public data: Entries[],
-    public length: number,
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-    private pageSize?: number,
-    private pageIndex?: number,
-    private activeSort?: string,
-    private sortDirection?: SortDirection,
-  ) {
-    super();
-  }
-
-  connect(): Observable<Entries[]> {
-    if (this.paginator) {
-      this.paginator.length = this.length;
-      if (this.pageSize !== undefined) {
-        this.paginator.pageSize = this.pageSize;
-      }
-      if (this.pageIndex !== undefined) {
-        this.paginator.pageIndex = this.pageIndex;
-      }
-    }
-    if (this.sort) {
-      if (this.activeSort !== undefined) {
-        this.sort.active = this.activeSort;
-      }
-      if (this.sortDirection !== undefined) {
-        this.sort.direction = this.sortDirection;
-      }
-    }
-    return observableOf(this.data);
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/entries/entries.component.html b/overlord/src/app/entries/entries.component.html
index 957427e5..a23bf759 100644
--- a/overlord/src/app/entries/entries.component.html
+++ b/overlord/src/app/entries/entries.component.html
@@ -1,16 +1,22 @@
 <h2>Entries</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Create / Last Edit Date From</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
-      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-      <mat-datepicker #startDate></mat-datepicker>
+      <input
+        matInput
+        #startDateElement
+        [matDatepicker]="startDatePicker"
+        [formField]="form.startDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #startDatePicker></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Create / Last Edit Date Till</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
@@ -19,14 +25,15 @@
     </button>
   </div>
   <div class="row-container">
-    <mat-radio-group class="flex-auto basis-2-5" formControlName="posted" (change)="togglePosted($event)">
+    <mat-radio-group class="flex-auto basis-2-5" [formField]="form.posted" (change)="togglePosted($event)">
       <mat-radio-button class="my-margin" [value]="true"> Posted </mat-radio-button>
       <mat-radio-button class="my-margin" [value]="false"> Not Posted </mat-radio-button>
       <mat-radio-button class="my-margin" [value]="null"> All </mat-radio-button>
     </mat-radio-group>
     <mat-checkbox
       class="flex-auto basis-2-5"
-      formControlName="issue"
+      [formField]="form.issue"
+      [disabled]="posted !== null && !posted"
       class="my-margin"
       [checked]="issue"
       (change)="toggleIssue()"
@@ -35,81 +42,87 @@
     </mat-checkbox>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Date Column -->
-  <ng-container matColumnDef="date">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="row.url">{{ row.date }}</a></mat-cell
-    >
-  </ng-container>
+@if (infoResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (infoResource.error()) {
+  <app-error-state [message]="'Failed to load entries.'" (retryAction)="infoResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="info().report" matSort (matSortChange)="sortData($event)">
+    <!-- Date Column -->
+    <ng-container matColumnDef="date">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="row.url">{{ row.date }}</a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Type Column -->
-  <ng-container matColumnDef="voucherType">
-    <mat-header-cell *matHeaderCellDef>Type</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
-  </ng-container>
+    <!-- Type Column -->
+    <ng-container matColumnDef="voucherType">
+      <mat-header-cell *matHeaderCellDef>Type</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
+    </ng-container>
 
-  <!-- Narration Column -->
-  <ng-container matColumnDef="narration">
-    <mat-header-cell *matHeaderCellDef>Narration</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.narration }}</mat-cell>
-  </ng-container>
+    <!-- Narration Column -->
+    <ng-container matColumnDef="narration">
+      <mat-header-cell *matHeaderCellDef>Narration</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.narration }}</mat-cell>
+    </ng-container>
 
-  <!-- DebitName Column -->
-  <ng-container matColumnDef="debitNames">
-    <mat-header-cell *matHeaderCellDef>Debit</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        @for (item of row.debitNames; track item) {
-          <li>{{ item }}</li>
-        }
-      </ul>
-    </mat-cell>
-  </ng-container>
+    <!-- DebitName Column -->
+    <ng-container matColumnDef="debitNames">
+      <mat-header-cell *matHeaderCellDef>Debit</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <ul>
+          @for (item of row.debitNames; track item) {
+            <li>{{ item }}</li>
+          }
+        </ul>
+      </mat-cell>
+    </ng-container>
 
-  <!-- CreditName Column -->
-  <ng-container matColumnDef="creditNames">
-    <mat-header-cell *matHeaderCellDef>Credit</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        @for (item of row.creditNames; track item) {
-          <li>{{ item }}</li>
-        }
-      </ul>
-    </mat-cell>
-  </ng-container>
+    <!-- CreditName Column -->
+    <ng-container matColumnDef="creditNames">
+      <mat-header-cell *matHeaderCellDef>Credit</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <ul>
+          @for (item of row.creditNames; track item) {
+            <li>{{ item }}</li>
+          }
+        </ul>
+      </mat-cell>
+    </ng-container>
 
-  <!-- Amount Column -->
-  <ng-container matColumnDef="amount">
-    <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-  </ng-container>
+    <!-- Amount Column -->
+    <ng-container matColumnDef="amount">
+      <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+    </ng-container>
 
-  <!-- User Column -->
-  <ng-container matColumnDef="user">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">User</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        <li>{{ row.creationDate | localTime }}</li>
-        <li>{{ row.lastEditDate | localTime }}</li>
-        <li>{{ row.user.name }}</li>
-      </ul>
-    </mat-cell>
-  </ng-container>
+    <!-- User Column -->
+    <ng-container matColumnDef="user">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">User</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <ul>
+          <li>{{ row.creationDate | localTime }}</li>
+          <li>{{ row.lastEditDate | localTime }}</li>
+          <li>{{ row.user.name }}</li>
+        </ul>
+      </mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row
-    *matRowDef="let row; columns: displayedColumns"
-    [class.unposted]="!row.posted && posted !== false && row.type !== 'Issue'"
-  ></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row
+      *matRowDef="let row; columns: displayedColumns"
+      [class.unposted]="!row.posted && posted() !== false && row.type !== 'Issue'"
+    ></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="length()"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/entries/entries.component.ts b/overlord/src/app/entries/entries.component.ts
index 3de27259..e71f46eb 100644
--- a/overlord/src/app/entries/entries.component.ts
+++ b/overlord/src/app/entries/entries.component.ts
@@ -1,21 +1,39 @@
+/* eslint-disable @angular-eslint/no-input-rename */
 import { CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import {
+  Component,
+  HostListener,
+  inject,
+  input,
+  computed,
+  booleanAttribute,
+  afterNextRender,
+  linkedSignal,
+} from '@angular/core';
+export interface EntriesFormData {
+  startDate: Date;
+  finishDate: Date;
+  posted: boolean | null;
+  issue: boolean;
+}
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatRadioChange, MatRadioModule } from '@angular/material/radio';
-import { MatSort, MatSortModule, SortDirection } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import moment from 'moment';
 
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
 import { LocalTimePipe } from '../shared/local-time.pipe';
-import { EntriesDatasource } from './entries-datasource';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
+import { EntriesService } from './entries.service';
 import { Report } from './report';
 
 @Component({
@@ -23,7 +41,8 @@ import { Report } from './report';
   templateUrl: './entries.component.html',
   styleUrls: ['./entries.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -37,107 +56,84 @@ import { Report } from './report';
     MatPaginatorModule,
     CurrencyPipe,
     LocalTimePipe,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class EntriesComponent implements OnInit {
+export class EntriesComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  private ser = inject(EntriesService);
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  info: Report = new Report();
-  dataSource: EntriesDatasource;
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-    posted: FormControl<boolean | null>;
-    issue: FormControl<boolean>;
-  }>;
+  startDate = input<string>('', { alias: 's' });
+  finishDate = input<string>('', { alias: 'f' });
+  posted = input<boolean | null, string | boolean | null | undefined>(null, {
+    transform: (v: string | boolean | null | undefined): boolean | null =>
+      v === 'true' || v === true ? true : v === 'false' || v === false ? false : null,
+    alias: 'p',
+  });
+
+  pageSize = input(50, {
+    transform: (v: string | number | null | undefined): number => (v ? Number(v) : 50),
+    alias: 'ps',
+  });
+
+  pageIndex = input(0, {
+    transform: (v: string | number | null | undefined): number => (v ? Number(v) : 0),
+    alias: 'pi',
+  });
+
+  sortInput = input<string>('date', { alias: 'so' });
+  direction = input<string>('desc', { alias: 'd' });
+  issue = input<boolean>(false, { transform: booleanAttribute, alias: 'i' });
+
+  infoResource = this.ser.list(
+    this.startDate,
+    this.finishDate,
+    this.posted,
+    this.pageSize,
+    this.pageIndex,
+    this.sortInput,
+    this.direction,
+    this.issue,
+  );
+
+  info = computed(() => this.infoResource.value() ?? new Report());
+  length = computed(() => this.info().counts);
+
+  formModel = linkedSignal({
+    source: () => ({
+      startDate: this.startDate(),
+      finishDate: this.finishDate(),
+      posted: this.posted(),
+      issue: this.issue(),
+    }),
+    computation: (src): EntriesFormData => ({
+      startDate: src.startDate ? moment(src.startDate, 'DD-MMM-YYYY').toDate() : new Date(),
+      finishDate: src.finishDate ? moment(src.finishDate, 'DD-MMM-YYYY').toDate() : new Date(),
+      posted: src.posted,
+      issue: src.issue,
+    }),
+  });
+
+  form = createForm(this.formModel);
 
   displayedColumns = ['date', 'voucherType', 'narration', 'debitNames', 'creditNames', 'amount', 'user'];
 
-  posted: boolean | null = null;
-  issue = false;
-
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
+    this.form().focusBoundControl();
   }
 
   constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      posted: new FormControl<boolean | null>(null),
-      issue: new FormControl<boolean>(false, { nonNullable: true }),
-    });
-    this.dataSource = new EntriesDatasource(this.info.report, 0, this.paginator, this.sort);
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: Report };
-      this.info = data.info;
-      const queryMap = this.route.snapshot.queryParamMap;
-      const startDate = moment(queryMap.get('s') || undefined, 'DD-MMM-YYYY');
-      const finishDate = moment(queryMap.get('f') || undefined, 'DD-MMM-YYYY');
-      const postedO = queryMap.get('p');
-      this.posted = postedO !== null ? postedO === 'true' : null;
-      const pageSizeO = queryMap.get('ps');
-      const pageSize = pageSizeO !== null ? +pageSizeO : 50;
-      const pageIndexO = queryMap.get('pi');
-      const pageIndex = pageIndexO !== null ? +pageIndexO : 0;
-      const activeSortO = queryMap.get('a');
-      const activeSort = activeSortO !== null ? (activeSortO as string) : 'date';
-      const sortDirectionO = queryMap.get('d');
-      const sortDirection = sortDirectionO !== null ? (sortDirectionO as SortDirection) : 'desc';
-      const issueO = queryMap.get('i');
-      this.issue = issueO !== null ? issueO === 'true' : false;
-      this.form.setValue({
-        startDate: startDate,
-        finishDate: finishDate,
-        posted: this.posted,
-        issue: this.issue,
-      });
-      if (this.posted === null || this.posted) {
-        this.form.controls.issue.enable();
-      } else {
-        this.form.controls.issue.disable();
-      }
-      this.dataSource = new EntriesDatasource(
-        this.info.report,
-        this.info.counts,
-        this.paginator,
-        this.sort,
-        pageSize,
-        pageIndex,
-        activeSort,
-        sortDirection,
-      );
-    });
-    this.sort.sortChange.subscribe({
-      next: () =>
-        this.router.navigate([], {
-          relativeTo: this.route,
-          queryParams: { a: this.sort?.active ?? 'date', d: this.sort?.direction },
-          queryParamsHandling: 'merge',
-        }),
-    });
-    this.paginator.page.subscribe({
-      next: () =>
-        this.router.navigate([], {
-          relativeTo: this.route,
-          queryParams: { ps: this.paginator.pageSize, pi: this.paginator.pageIndex },
-          queryParamsHandling: 'merge',
-        }),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
   refresh() {
-    const formModel = this.form.value;
+    const formModel = this.formModel();
     const startDate = moment(formModel.startDate).format('DD-MMM-YYYY');
     const finishDate = moment(formModel.finishDate).format('DD-MMM-YYYY');
     this.router.navigate([], {
@@ -148,22 +144,38 @@ export class EntriesComponent implements OnInit {
   }
 
   togglePosted($event: MatRadioChange) {
-    this.posted = $event.value;
-    if (this.posted === false) {
-      this.issue = false;
-    }
+    const posted = $event.value;
+    const issue = posted === false ? false : this.issue();
     this.router.navigate([], {
       relativeTo: this.route,
-      queryParams: { p: this.posted, i: this.issue || null },
+      queryParams: { p: posted, i: issue || null },
       queryParamsHandling: 'merge',
     });
   }
 
   toggleIssue() {
-    this.issue = !this.issue;
+    const issue = !this.issue();
     this.router.navigate([], {
       relativeTo: this.route,
-      queryParams: { i: this.issue || null },
+      queryParams: { i: issue || null },
+      queryParamsHandling: 'merge',
+    });
+  }
+
+  handlePageEvent(e: PageEvent) {
+    if (e.pageSize !== this.pageSize() || e.pageIndex !== this.pageIndex()) {
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: { ps: e.pageSize, pi: e.pageIndex },
+        queryParamsHandling: 'merge',
+      });
+    }
+  }
+
+  sortData(sort: Sort) {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { so: sort.active || null, d: sort.direction || null },
       queryParamsHandling: 'merge',
     });
   }
diff --git a/overlord/src/app/entries/entries.resolver.spec.ts b/overlord/src/app/entries/entries.resolver.spec.ts
deleted file mode 100644
index a1190a0b..00000000
--- a/overlord/src/app/entries/entries.resolver.spec.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { entriesResolver } from './entries.resolver';
-
-describe('entriesResolver', () => {
-  const executeResolver: ResolveFn<Report> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => entriesResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/entries/entries.resolver.ts b/overlord/src/app/entries/entries.resolver.ts
deleted file mode 100644
index 48b5bc52..00000000
--- a/overlord/src/app/entries/entries.resolver.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { EntriesService } from './entries.service';
-import { Report } from './report';
-
-export const entriesResolver: ResolveFn<Report> = (route) => {
-  const start_date = route.queryParamMap.get('s');
-  const finish_date = route.queryParamMap.get('f');
-  const posted = route.queryParamMap.get('p') === null ? null : route.queryParamMap.get('p') === 'true';
-  const page_size = route.queryParamMap.get('ps') === null ? 50 : +(route.queryParamMap.get('ps') as string);
-  const page_index = route.queryParamMap.get('pi') === null ? 0 : +(route.queryParamMap.get('pi') as string);
-  const sort = route.queryParamMap.get('a') ?? 'date';
-  const direction = route.queryParamMap.get('d') ?? 'desc';
-  const issue_vouchers = route.queryParamMap.get('i') === null ? false : route.queryParamMap.get('i') === 'true';
-  return inject(EntriesService).list(
-    start_date,
-    finish_date,
-    posted,
-    page_size,
-    page_index,
-    sort,
-    direction,
-    issue_vouchers,
-  );
-};
diff --git a/overlord/src/app/entries/entries.routes.ts b/overlord/src/app/entries/entries.routes.ts
index 7e3b1687..f1a4b0c0 100644
--- a/overlord/src/app/entries/entries.routes.ts
+++ b/overlord/src/app/entries/entries.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { EntriesComponent } from './entries.component';
-import { entriesResolver } from './entries.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Ledger',
     },
-    resolve: {
-      info: entriesResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/entries/entries.service.ts b/overlord/src/app/entries/entries.service.ts
index d151b625..f3ebe29c 100644
--- a/overlord/src/app/entries/entries.service.ts
+++ b/overlord/src/app/entries/entries.service.ts
@@ -1,44 +1,43 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { HttpParams, httpResource } from '@angular/common/http';
+import { Injectable, Signal } from '@angular/core';
 
-import { ErrorLoggerService } from '../core/error-logger.service';
 import { Report } from './report';
 
 const url = '/api/entries';
-const serviceName = 'EntriesService';
-
 @Injectable({
   providedIn: 'root',
 })
 export class EntriesService {
-  private http = inject(HttpClient);
-  private log = inject(ErrorLoggerService);
-
   list(
-    start_date: string | null,
-    finish_date: string | null,
-    posted: boolean | null,
-    page_size: number,
-    page_index: number,
-    sort: string,
-    direction: string,
-    issue: boolean,
-  ): Observable<Report> {
-    let params = new HttpParams();
-    if (start_date !== null) params = params.set('s', start_date);
-    if (finish_date !== null) params = params.set('f', finish_date);
-    if (posted !== null) params = params.set('p', posted.toString());
-    params = params
-      .set('ps', page_size)
-      .set('pi', page_index)
-      .set('a', sort)
-      .set('d', direction)
-      .set('i', issue.toString());
+    startDate: Signal<string | null>,
+    finishDate: Signal<string | null>,
+    posted: Signal<boolean | null>,
+    pageSize: Signal<number>,
+    pageIndex: Signal<number>,
+    sort: Signal<string>,
+    direction: Signal<string>,
+    issue: Signal<boolean>,
+  ) {
+    return httpResource<Report>(() => {
+      let params = new HttpParams();
 
-    return this.http
-      .get<Report>(url, { params })
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Report>;
+      const s = startDate();
+      if (s) params = params.set('s', s);
+
+      const f = finishDate();
+      if (f) params = params.set('f', f);
+
+      const p = posted();
+      if (p !== null && p !== undefined) params = params.set('p', p.toString());
+
+      params = params
+        .set('ps', pageSize().toString())
+        .set('pi', pageIndex().toString())
+        .set('a', sort())
+        .set('d', direction())
+        .set('i', issue().toString());
+
+      return { url, params };
+    });
   }
 }
diff --git a/overlord/src/app/incentive/incentive-datasource.ts b/overlord/src/app/incentive/incentive-datasource.ts
deleted file mode 100644
index b00bc4b3..00000000
--- a/overlord/src/app/incentive/incentive-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { Incentive } from '../core/incentive';
-
-export class IncentiveDataSource extends DataSource<Incentive> {
-  constructor(private data: Observable<Incentive[]>) {
-    super();
-  }
-
-  connect(): Observable<Incentive[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/incentive/incentive.component.html b/overlord/src/app/incentive/incentive.component.html
index 9d88cfde..62df34d6 100644
--- a/overlord/src/app/incentive/incentive.component.html
+++ b/overlord/src/app/incentive/incentive.component.html
@@ -1,6 +1,6 @@
 <h2>Incentives</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Date</mat-label>
@@ -9,7 +9,7 @@
         #dateElement
         [matDatepicker]="date"
         (focus)="dateElement.select()"
-        formControlName="date"
+        [formField]="form.date"
         autocomplete="off"
       />
       <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
@@ -17,11 +17,11 @@
     </mat-form-field>
   </div>
   <div class="row-container">
-    Total Incentive: <strong>{{ voucher.incentive | number: '1.2-2' }}</strong> Total Points:
+    Total Incentive: <strong>{{ voucher().incentive | number: '1.2-2' }}</strong> Total Points:
     <strong>{{ totalPoints() | number: '1.2-2' }}</strong> Point Value:
     <strong>{{ pointValue() | number: '1.2-2' }}</strong>
   </div>
-  <mat-table #table [dataSource]="dataSource" formArrayName="incentives">
+  <mat-table #table [dataSource]="incentives()">
     <!-- Name Column -->
     <ng-container matColumnDef="name">
       <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
@@ -49,23 +49,31 @@
     <!-- Points Column -->
     <ng-container matColumnDef="points">
       <mat-header-cell *matHeaderCellDef class="center">Service Points</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i">
-        <mat-form-field class="flex-auto">
-          <button mat-icon-button color="warn" matPrefix (click)="less(row, i)">
-            <mat-icon>remove</mat-icon>
-          </button>
-          <input matInput formControlName="points" autocomplete="off" (change)="change(row, i)" class="flex-auto" />
-          <button mat-icon-button color="primary" matSuffix (click)="more(row, i)">
-            <mat-icon>add</mat-icon>
-          </button>
-        </mat-form-field>
+      <mat-cell *matCellDef="let row; let i = index" class="center">
+        @if (form.incentives[i]) {
+          <mat-form-field class="flex-auto">
+            <button mat-icon-button color="warn" matPrefix (click)="less(i)">
+              <mat-icon>remove</mat-icon>
+            </button>
+            <input
+              type="number"
+              matInput
+              [formField]="form.incentives[i].points"
+              autocomplete="off"
+              class="flex-auto"
+            />
+            <button mat-icon-button color="primary" matSuffix (click)="more(i)">
+              <mat-icon>add</mat-icon>
+            </button>
+          </mat-form-field>
+        }
       </mat-cell>
     </ng-container>
 
     <!-- Amount Column -->
     <ng-container matColumnDef="amount">
       <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ amount(row) | currency: 'INR' }}</mat-cell>
+      <mat-cell *matCellDef="let row; let i = index" class="right">{{ amount(row, i) | currency: 'INR' }}</mat-cell>
     </ng-container>
 
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
@@ -75,19 +83,19 @@
 
 <div class="row-container">
   <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
-    {{ voucher.id ? 'Update' : 'Save' }}
+    {{ voucher().id ? 'Update' : 'Save' }}
   </button>
-  @if (voucher.id) {
-    <button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')">
-      {{ voucher.posted ? 'Posted' : 'Post' }}
+  @if (voucher().id) {
+    <button mat-raised-button (click)="post()" [disabled]="voucher().posted || !auth.allowed('post-vouchers')">
+      {{ voucher().posted ? 'Posted' : 'Post' }}
     </button>
     <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
   }
 </div>
-@if (voucher.id) {
+@if (voucher().id) {
   <div class="row-container">
-    Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
-    <strong>{{ voucher.lastEditDate | localTime }}</strong> by <strong>{{ voucher.user.name }}</strong
-    >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+    Created on <strong>{{ voucher().creationDate | localTime }}</strong> and Last Edited on
+    <strong>{{ voucher().lastEditDate | localTime }}</strong> by <strong>{{ voucher().user.name }}</strong
+    >. {{ voucher().poster ? 'Posted by ' + voucher().poster : '' }}
   </div>
 }
diff --git a/overlord/src/app/incentive/incentive.component.ts b/overlord/src/app/incentive/incentive.component.ts
index aec1476d..392b41e0 100644
--- a/overlord/src/app/incentive/incentive.component.ts
+++ b/overlord/src/app/incentive/incentive.component.ts
@@ -1,6 +1,6 @@
 import { CurrencyPipe, DecimalPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { signal, Component, HostListener, inject, input, computed, linkedSignal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
@@ -9,10 +9,8 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject } from 'rxjs';
-import { map } from 'rxjs/operators';
 
 import { AuthService } from '../auth/auth.service';
 import { Account } from '../core/account';
@@ -23,14 +21,19 @@ import { Voucher } from '../core/voucher';
 import { VoucherService } from '../core/voucher.service';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
 import { LocalTimePipe } from '../shared/local-time.pipe';
-import { IncentiveDataSource } from './incentive-datasource';
+
+export interface IncentiveFormData {
+  date: moment.Moment;
+  incentives: { points: number }[];
+}
 
 @Component({
   selector: 'app-incentive',
   templateUrl: './incentive.component.html',
   styleUrls: ['./incentive.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -42,27 +45,31 @@ import { IncentiveDataSource } from './incentive-datasource';
     LocalTimePipe,
   ],
 })
-export class IncentiveComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class IncentiveComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   auth = inject(AuthService);
   private ser = inject(VoucherService);
 
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
-  public incentiveObservable = new BehaviorSubject<Incentive[]>([]);
-  dataSource: IncentiveDataSource = new IncentiveDataSource(this.incentiveObservable);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    incentives: FormArray<
-      FormGroup<{
-        points: FormControl<number>;
-      }>
-    >;
-  }>;
+  voucherResource = this.ser.getVoucher(this.id, signal('Incentive'), signal(null), signal(null));
+
+  voucher = computed(() => this.voucherResource.value() ?? new Voucher());
+
+  model = linkedSignal({
+    source: this.voucher,
+    computation: (v): IncentiveFormData => ({
+      date: moment(v.date, 'DD-MMM-YYYY'),
+      incentives: v.incentives.map((x) => ({ points: x.points })),
+    }),
+  });
+
+  form = createForm(this.model);
+
+  incentives = linkedSignal(() => this.voucher().incentives);
 
-  voucher: Voucher = new Voucher();
   account: Account = new Account();
   accBal: AccountBalance | null = null;
 
@@ -71,98 +78,68 @@ export class IncentiveComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
+    this.form().focusBoundControl();
   }
 
-  constructor() {
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      incentives: new FormArray<FormGroup<{ points: FormControl<number> }>>([]),
-    });
-    // Listen to Date Change
-    this.form.controls.date.valueChanges.pipe(map((x) => moment(x).format('DD-MMM-YYYY'))).subscribe((x) => {
-      if (x !== this.voucher.date && !this.voucher.id) {
-        return this.ser.getIncentive(x).subscribe((voucher: Voucher) => {
-          this.loadVoucher(voucher);
-        });
-      }
-      return '';
-    });
-  }
+  totalPoints = computed(() => {
+    return this.incentives()
+      .map((item: Incentive, i: number) => item.daysWorked * (this.model().incentives[i]?.points ?? 0))
+      .reduce((sum: number, item: number) => sum + item, 0);
+  });
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { voucher: Voucher };
+  pointValue = computed(() => {
+    const tp = this.totalPoints();
+    if (!tp) return 0;
+    return Math.round(((this.voucher().incentive as number) * 100) / tp) / 100;
+  });
 
-      this.loadVoucher(data.voucher);
-    });
-  }
-
-  loadVoucher(voucher: Voucher) {
-    this.voucher = voucher;
-    this.form.controls.date.setValue(moment(this.voucher.date, 'DD-MMM-YYYY'));
-    this.form.controls.incentives.clear();
-    this.voucher.incentives.forEach((x) =>
-      this.form.controls.incentives.push(
-        new FormGroup({
-          points: new FormControl(x.points, { nonNullable: true }),
-        }),
-      ),
-    );
-    this.dataSource = new IncentiveDataSource(this.incentiveObservable);
-    this.incentiveObservable.next(this.voucher.incentives);
-  }
-
-  totalPoints() {
-    return this.voucher.incentives.map((item) => item.daysWorked * item.points).reduce((sum, item) => sum + item);
-  }
-
-  pointValue() {
-    return Math.round(((this.voucher.incentive as number) * 100) / this.totalPoints()) / 100;
-  }
-
-  less(row: Incentive, i: number) {
-    if (row.points >= 1) {
-      row.points -= 1;
-      this.form.controls.incentives.controls[i].setValue({
-        points: row.points,
+  less(i: number) {
+    const currentPoints = this.model().incentives[i]?.points ?? 0;
+    if (currentPoints >= 1) {
+      this.model.update((m) => {
+        const arr = [...m.incentives];
+        if (arr[i]) {
+          arr[i] = { ...arr[i], points: currentPoints - 1 };
+        }
+        return { ...m, incentives: arr };
       });
     }
   }
 
-  change(row: Incentive, i: number) {
-    row.points = this.form.controls.incentives.controls[i].value.points ?? 0;
-    this.form.controls.incentives.controls[i].setValue({ points: row.points });
+  more(i: number) {
+    const currentPoints = this.model().incentives[i]?.points ?? 0;
+    this.model.update((m) => {
+      const arr = [...m.incentives];
+      if (arr[i]) {
+        arr[i] = { ...arr[i], points: currentPoints + 1 };
+      }
+      return { ...m, incentives: arr };
+    });
   }
 
-  more(row: Incentive, i: number) {
-    row.points += 1;
-    this.form.controls.incentives.controls[i].setValue({ points: row.points });
-  }
-
-  amount(row: Incentive) {
-    return row.points * row.daysWorked * this.pointValue();
+  amount(row: Incentive, i: number) {
+    const currentPoints = this.model().incentives[i]?.points ?? 0;
+    return currentPoints * row.daysWorked * this.pointValue();
   }
 
   canSave() {
-    if (!this.voucher.id) {
+    if (!this.voucher().id) {
       return true;
     }
-    if (this.voucher.posted && this.auth.allowed('edit-posted-vouchers')) {
+    if (this.voucher().posted && this.auth.allowed('edit-posted-vouchers')) {
       return true;
     }
-    return this.voucher.user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
+    return this.voucher().user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
   }
 
   post() {
-    this.ser.post(this.voucher.id as string).subscribe({
-      next: (result) => {
-        this.loadVoucher(result);
+    this.ser.post(this.voucher().id as string).subscribe({
+      next: (result: Voucher) => {
         this.snackBar.open('Voucher Posted', 'Success');
+        this.router.navigate(['/incentive', (result as Voucher).id], { replaceUrl: true });
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -170,38 +147,35 @@ export class IncentiveComponent implements OnInit {
   save() {
     const voucher: Voucher = this.getVoucher();
     this.ser.saveOrUpdate(voucher).subscribe({
-      next: (result) => {
-        if (voucher.id === result.id) {
-          this.loadVoucher(result);
-        } else {
-          this.router.navigate(['/incentive', result.id]);
-        }
+      next: (result: Voucher) => {
+        this.router.navigate(['/incentive', (result as Voucher).id], { replaceUrl: true });
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   getVoucher(): Voucher {
-    const formModel = this.form.value;
-    this.voucher.date = moment(formModel.date).format('DD-MMM-YYYY');
-    const array = this.form.controls.incentives;
+    const formModel = this.model();
+    const v = this.voucher();
+    v.date = formModel.date.format('DD-MMM-YYYY');
+    const array = formModel.incentives;
 
-    this.voucher.incentives.forEach((item, index) => {
-      item.points = array.controls[index].value.points ?? 0;
+    v.incentives.forEach((item: Incentive, index: number) => {
+      item.points = array[index]?.points ?? 0;
     });
-    return this.voucher;
+    return v;
   }
 
   delete() {
-    this.ser.delete(this.voucher.id as string).subscribe({
+    this.ser.delete(this.voucher().id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigate(['/incentive'], { replaceUrl: true });
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
diff --git a/overlord/src/app/incentive/incentive.resolver.spec.ts b/overlord/src/app/incentive/incentive.resolver.spec.ts
deleted file mode 100644
index 55c80c39..00000000
--- a/overlord/src/app/incentive/incentive.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { incentiveResolver } from './incentive.resolver';
-
-describe('incentiveResolver', () => {
-  const executeResolver: ResolveFn<Voucher> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => incentiveResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/incentive/incentive.resolver.ts b/overlord/src/app/incentive/incentive.resolver.ts
deleted file mode 100644
index 09144136..00000000
--- a/overlord/src/app/incentive/incentive.resolver.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { VoucherService } from '../core/voucher.service';
-
-export const incentiveResolver: ResolveFn<Voucher> = (route) => {
-  const id = route.paramMap.get('id');
-  const date = route.queryParamMap.get('d') || null;
-  if (id === null) {
-    return inject(VoucherService).getOfType('Incentive', null, date);
-  }
-  return inject(VoucherService).get(id, 'Incentive');
-};
diff --git a/overlord/src/app/incentive/incentive.routes.ts b/overlord/src/app/incentive/incentive.routes.ts
index 43032181..a6c38da5 100644
--- a/overlord/src/app/incentive/incentive.routes.ts
+++ b/overlord/src/app/incentive/incentive.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { IncentiveComponent } from './incentive.component';
-import { incentiveResolver } from './incentive.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'incentive',
     },
-    resolve: {
-      voucher: incentiveResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'incentive',
     },
-    resolve: {
-      voucher: incentiveResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/issue/issue-datasource.ts b/overlord/src/app/issue/issue-datasource.ts
deleted file mode 100644
index e1e1386a..00000000
--- a/overlord/src/app/issue/issue-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { Inventory } from '../core/inventory';
-
-export class IssueDataSource extends DataSource<Inventory> {
-  constructor(private data: Observable<Inventory[]>) {
-    super();
-  }
-
-  connect(): Observable<Inventory[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/issue/issue-dialog.component.html b/overlord/src/app/issue/issue-dialog.component.html
index 581268f8..e0c61901 100644
--- a/overlord/src/app/issue/issue-dialog.component.html
+++ b/overlord/src/app/issue/issue-dialog.component.html
@@ -1,6 +1,6 @@
 <h1 mat-dialog-title>Edit Issue Entry</h1>
 <div mat-dialog-content>
-  <form [formGroup]="form">
+  <form [formRoot]="form">
     <div class="row-container">
       <mat-form-field class="flex-auto basis-2-3">
         <mat-label>Product</mat-label>
@@ -9,23 +9,18 @@
           matInput
           #batchElement
           [matAutocomplete]="autoB"
-          formControlName="batch"
+          [formField]="form.batch"
           autocomplete="off"
         />
-        <mat-autocomplete
-          #autoB="matAutocomplete"
-          autoActiveFirstOption
-          [displayWith]="displayFn"
-          (optionSelected)="batchSelected($event)"
-        >
-          @for (batch of batches | async; track batch) {
+        <mat-autocomplete #autoB="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+          @for (batch of batches(); track batch) {
             <mat-option [value]="batch">{{ batch.name }}</mat-option>
           }
         </mat-autocomplete>
       </mat-form-field>
       <mat-form-field class="flex-auto basis-1-3">
         <mat-label>Quantity</mat-label>
-        <input type="text" matInput formControlName="quantity" autocomplete="off" />
+        <input type="text" matInput [formField]="form.quantity" autocomplete="off" />
       </mat-form-field>
     </div>
   </form>
diff --git a/overlord/src/app/issue/issue-dialog.component.ts b/overlord/src/app/issue/issue-dialog.component.ts
index 516acb8e..4d4f4899 100644
--- a/overlord/src/app/issue/issue-dialog.component.ts
+++ b/overlord/src/app/issue/issue-dialog.component.ts
@@ -1,21 +1,24 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { AsyncPipe } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { Component, computed, inject, linkedSignal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { round } from 'mathjs';
 
 import { Batch } from '../core/batch';
 import { BatchService } from '../core/batch.service';
 import { Inventory } from '../core/inventory';
 import { MathService } from '../shared/math.service';
 
+export interface IssueDialogFormData {
+  batch: Batch | string | null;
+  quantity: string;
+}
+
 @Component({
   selector: 'app-issue-dialog',
   templateUrl: './issue-dialog.component.html',
@@ -23,16 +26,16 @@ import { MathService } from '../shared/math.service';
   imports: [
     MatDialogModule,
     CdkScrollableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatAutocompleteModule,
     MatOptionModule,
     MatButtonModule,
-    AsyncPipe,
   ],
 })
-export class IssueDialogComponent implements OnInit {
+export class IssueDialogComponent {
   dialogRef = inject<MatDialogRef<IssueDialogComponent>>(MatDialogRef);
   data = inject<{
     inventory: Inventory;
@@ -42,52 +45,51 @@ export class IssueDialogComponent implements OnInit {
   private math = inject(MathService);
   private batchSer = inject(BatchService);
 
-  batches: Observable<Batch[]>;
-  form: FormGroup<{
-    batch: FormControl<string | null>;
-    quantity: FormControl<string>;
-  }>;
+  formModel = linkedSignal<
+    {
+      inventory: Inventory;
+      date: string;
+    },
+    IssueDialogFormData
+  >({
+    source: () => this.data,
+    computation: (data: { inventory: Inventory; date: string }): IssueDialogFormData => ({
+      batch: data.inventory.batch ?? null,
+      quantity: `${data.inventory.quantity}`,
+    }),
+  });
 
-  batch: Batch = new Batch();
+  form = form(this.formModel);
 
-  constructor() {
-    this.form = new FormGroup({
-      batch: new FormControl<string | null>(null),
-      quantity: new FormControl<string>('', { nonNullable: true }),
-    });
-    // Listen to Batch Autocomplete Change
-    this.batches = this.form.controls.batch.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.batchSer.autocomplete(this.data.date, x))),
-    );
-  }
+  batchSearch = computed(() => {
+    const v = this.form.batch().value();
+    return typeof v === 'string' ? v : null;
+  });
 
-  ngOnInit() {
-    this.form.setValue({
-      batch: this.data.inventory.batch.name,
-      quantity: `${this.data.inventory.quantity}`,
-    });
-    this.batch = this.data.inventory.batch;
-  }
+  batchesResource = this.batchSer.autocomplete(
+    computed(() => this.data.date),
+    this.batchSearch,
+  );
+
+  batches = computed(() => this.batchesResource.value() ?? []);
 
   displayFn(batch?: Batch | string): string {
     return !batch ? '' : typeof batch === 'string' ? batch : batch.name;
   }
 
-  batchSelected(event: MatAutocompleteSelectedEvent): void {
-    this.batch = event.option.value as Batch;
-  }
-
   accept(): void {
-    const formValue = this.form.value;
-    const quantity = this.math.parseAmount(formValue.quantity, 2);
-    this.data.inventory.batch = this.batch;
+    const formValue = this.form().value();
+    const batch = typeof formValue.batch === 'string' ? null : formValue.batch;
+    if (!batch || !batch.id) {
+      return;
+    }
+    const quantity = this.math.parseAmount(formValue.quantity ?? '0', 2);
+    this.data.inventory.batch = batch;
     this.data.inventory.quantity = quantity;
-    this.data.inventory.rate = this.batch.rate;
-    this.data.inventory.tax = this.batch.tax;
-    this.data.inventory.discount = this.batch.discount;
-    this.data.inventory.amount = quantity * this.batch.rate * (1 + this.batch.tax) * (1 - this.batch.discount);
+    this.data.inventory.rate = batch.rate;
+    this.data.inventory.tax = batch.tax;
+    this.data.inventory.discount = batch.discount;
+    this.data.inventory.amount = round(quantity * batch.rate * (1 + batch.tax) * (1 - batch.discount), 2);
     this.dialogRef.close(this.data.inventory);
   }
 }
diff --git a/overlord/src/app/issue/issue-grid-datasource.ts b/overlord/src/app/issue/issue-grid-datasource.ts
deleted file mode 100644
index 0730fb93..00000000
--- a/overlord/src/app/issue/issue-grid-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { IssueGridItem } from '../core/issue-grid-item';
-
-export class IssueGridDataSource extends DataSource<IssueGridItem> {
-  constructor(private data: Observable<IssueGridItem[]>) {
-    super();
-  }
-
-  connect(): Observable<IssueGridItem[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/issue/issue-grid.service.ts b/overlord/src/app/issue/issue-grid.service.ts
index 49846898..5d97d82f 100644
--- a/overlord/src/app/issue/issue-grid.service.ts
+++ b/overlord/src/app/issue/issue-grid.service.ts
@@ -1,24 +1,14 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { httpResource } from '@angular/common/http';
+import { Injectable, Signal } from '@angular/core';
 
-import { ErrorLoggerService } from '../core/error-logger.service';
 import { IssueGridItem } from '../core/issue-grid-item';
 
 const url = '/api/issue-grid';
-const serviceName = 'IssueGridService';
-
 @Injectable({
   providedIn: 'root',
 })
 export class IssueGridService {
-  private http = inject(HttpClient);
-  private log = inject(ErrorLoggerService);
-
-  issueGrid(date: string): Observable<IssueGridItem[]> {
-    return this.http
-      .get<IssueGridItem[]>(`${url}/${date}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'autocomplete'))) as Observable<IssueGridItem[]>;
+  issueGrid(date: Signal<string>) {
+    return httpResource<IssueGridItem[]>(() => `${url}/${date()}`);
   }
 }
diff --git a/overlord/src/app/issue/issue.component.html b/overlord/src/app/issue/issue.component.html
index 014fade7..091279ef 100644
--- a/overlord/src/app/issue/issue.component.html
+++ b/overlord/src/app/issue/issue.component.html
@@ -1,16 +1,16 @@
 <h2>Issue</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-28">
       <mat-label>Date</mat-label>
-      <input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
+      <input matInput [matDatepicker]="date" [formField]="form.date" autocomplete="off" #dateElement />
       <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
       <mat-datepicker #date></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-28">
-      <mat-select formControlName="source">
-        @for (costCentre of costCentres; track costCentre) {
+      <mat-select [formField]="form.source">
+        @for (costCentre of costCentres(); track costCentre) {
           <mat-option [value]="costCentre.id">
             {{ costCentre.name }}
           </mat-option>
@@ -18,8 +18,8 @@
       </mat-select>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-28">
-      <mat-select formControlName="destination">
-        @for (costCentre of costCentres; track costCentre) {
+      <mat-select [formField]="form.destination">
+        @for (costCentre of costCentres(); track costCentre) {
           <mat-option [value]="costCentre.id">
             {{ costCentre.name }}
           </mat-option>
@@ -28,103 +28,115 @@
     </mat-form-field>
     <mat-form-field class="flex-auto basis-16">
       <mat-label>Amount</mat-label>
-      <input type="text" matInput formControlName="amount" />
+      <input type="number" matInput [formField]="form.amount" />
       <span matTextPrefix>₹&nbsp;</span>
     </mat-form-field>
   </div>
 
-  <div formGroupName="addRow" class="row-container">
+  <div class="row-container">
     <mat-form-field class="flex-auto basis-55">
       <mat-label>Product</mat-label>
-      <input type="text" matInput #batchElement [matAutocomplete]="autoB" formControlName="batch" autocomplete="off" />
-      <mat-autocomplete
-        #autoB="matAutocomplete"
-        autoActiveFirstOption
-        [displayWith]="displayFn"
-        (optionSelected)="batchSelected($event)"
-      >
-        @for (batch of batches | async; track batch) {
+      <input
+        type="text"
+        matInput
+        #batchElement
+        [matAutocomplete]="autoB"
+        [formField]="form.addRow.batch"
+        autocomplete="off"
+      />
+      <mat-autocomplete #autoB="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+        @for (batch of batches(); track batch) {
           <mat-option [value]="batch">{{ batch.name }}</mat-option>
         }
       </mat-autocomplete>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-1-4">
       <mat-label>Quantity</mat-label>
-      <input type="text" matInput formControlName="quantity" autocomplete="off" />
+      <input type="text" matInput [formField]="form.addRow.quantity" autocomplete="off" />
     </mat-form-field>
 
     <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-2-5">Add</button>
   </div>
-  <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-    <!-- Product Column -->
-    <ng-container matColumnDef="product">
-      <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
-    </ng-container>
+  @if (itemResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (itemResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+  } @else {
+    <mat-table #table [dataSource]="form.inventories().value() ?? []" matSort (matSortChange)="sortData($event)">
+      <!-- Product Column -->
+      <ng-container matColumnDef="product">
+        <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
+      </ng-container>
 
-    <!-- Batch Column -->
-    <ng-container matColumnDef="batch">
-      <mat-header-cell *matHeaderCellDef>Batch</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.batch.name }}</mat-cell>
-    </ng-container>
+      <!-- Batch Column -->
+      <ng-container matColumnDef="batch">
+        <mat-header-cell *matHeaderCellDef>Batch</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.batch.name }}</mat-cell>
+      </ng-container>
 
-    <!-- Quantity Column -->
-    <ng-container matColumnDef="quantity">
-      <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Quantity Column -->
+      <ng-container matColumnDef="quantity">
+        <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
+      </ng-container>
 
-    <!-- Rate Column -->
-    <ng-container matColumnDef="rate">
-      <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Rate Column -->
+      <ng-container matColumnDef="rate">
+        <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Amount Column -->
-    <ng-container matColumnDef="amount">
-      <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Amount Column -->
+      <ng-container matColumnDef="amount">
+        <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Action Column -->
-    <ng-container matColumnDef="action">
-      <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center">
-        <button mat-icon-button tabindex="-1" (click)="editRow(row)">
-          <mat-icon>edit</mat-icon>
-        </button>
-        <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
+      <!-- Action Column -->
+      <ng-container matColumnDef="action">
+        <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="center">
+          <button mat-icon-button tabindex="-1" (click)="editRow(row)">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Narration</mat-label>
-      <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
-    </mat-form-field>
-  </div>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Narration</mat-label>
+        <textarea matInput matAutosizeMinRows="5" [formField]="form.narration"></textarea>
+      </mat-form-field>
+    </div>
+  }
 </form>
 
 <div class="row-container">
   <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="">
-    {{ voucher.id ? 'Update' : 'Save' }}
+    {{ id() ? 'Update' : 'Save' }}
   </button>
-  @if (voucher.id) {
+  @if (id()) {
+    <button mat-raised-button (click)="post()" [disabled]="form.posted().controlValue()" class="">
+      {{ form.posted().controlValue() ? 'Posted' : 'Post' }}
+    </button>
     <button mat-raised-button color="warn" (click)="newVoucher()" class="">New Entry</button>
     <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
   }
   <span class="spacer"></span>
-  @if (voucher.id) {
+  @if (id()) {
     <span class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      Created on&nbsp;<strong>{{ form.creationDate().value() | localTime }}</strong
+      >&nbsp;and Last Edited on&nbsp; <strong>{{ form.lastEditDate().value() | localTime }}</strong
+      >&nbsp;by&nbsp; <strong>{{ form.userName() }}</strong
+      >.
+      {{ form.posted() ? 'Posted by ' + form.poster() : '' }}
     </span>
   }
 </div>
@@ -132,7 +144,7 @@
 <h2>Other issues for the day</h2>
 
 <div class="row-container">
-  <mat-table #table [dataSource]="gridDataSource" matSort aria-label="Elements">
+  <mat-table #table [dataSource]="gridData()" matSort (matSortChange)="sortData($event)">
     <!-- Source Column -->
     <ng-container matColumnDef="source">
       <mat-header-cell *matHeaderCellDef class="right">Source</mat-header-cell>
diff --git a/overlord/src/app/issue/issue.component.ts b/overlord/src/app/issue/issue.component.ts
index 9032ca1c..80477595 100644
--- a/overlord/src/app/issue/issue.component.ts
+++ b/overlord/src/app/issue/issue.component.ts
@@ -1,7 +1,17 @@
-import { AsyncPipe, CurrencyPipe, DecimalPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { CurrencyPipe, DecimalPipe } from '@angular/common';
+import {
+  afterNextRender,
+  Component,
+  computed,
+  effect,
+  HostListener,
+  inject,
+  input,
+  linkedSignal,
+  signal,
+} from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -11,37 +21,64 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { round } from 'mathjs';
 import moment from 'moment';
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 
 import { AuthService } from '../auth/auth.service';
 import { Batch } from '../core/batch';
 import { BatchService } from '../core/batch.service';
 import { CostCentre } from '../core/cost-centre';
 import { Inventory } from '../core/inventory';
-import { IssueGridItem } from '../core/issue-grid-item';
 import { User } from '../core/user';
 import { Voucher } from '../core/voucher';
 import { VoucherService } from '../core/voucher.service';
+import { CostCentreService } from '../cost-centre/cost-centre.service';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
 import { LocalTimePipe } from '../shared/local-time.pipe';
 import { MathService } from '../shared/math.service';
-import { IssueDataSource } from './issue-datasource';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { IssueDialogComponent } from './issue-dialog.component';
-import { IssueGridDataSource } from './issue-grid-datasource';
 import { IssueGridService } from './issue-grid.service';
 
+export interface IssueItemFormData {
+  id: string | undefined;
+  quantity: number;
+  rate: number;
+  tax: number;
+  discount: number;
+  amount: number;
+  batch: Batch;
+}
+
+export interface IssueFormModel {
+  date: Date;
+  source: string;
+  destination: string;
+  amount: number;
+  addRow: {
+    batch: Batch | string | null;
+    quantity: string;
+  };
+  inventories: IssueItemFormData[];
+  narration: string;
+  posted: boolean;
+  creationDate: string;
+  lastEditDate: string;
+  userName: string;
+  poster: string;
+}
+
 @Component({
   selector: 'app-issue',
   templateUrl: './issue.component.html',
   styleUrls: ['./issue.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -52,31 +89,101 @@ import { IssueGridService } from './issue-grid.service';
     MatButtonModule,
     MatTableModule,
     MatSortModule,
-    AsyncPipe,
     DecimalPipe,
     CurrencyPipe,
     LocalTimePipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class IssueComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class IssueComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  d = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  type = signal('Issue');
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
-  private auth = inject(AuthService);
+  auth = inject(AuthService);
   private math = inject(MathService);
   private ser = inject(VoucherService);
   private batchSer = inject(BatchService);
   private issueGridSer = inject(IssueGridService);
+  private costCentreSer = inject(CostCentreService);
 
-  @ViewChild('batchElement', { static: true }) batchElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
+  sortActive = signal('');
+  sortDirection = signal('');
+
+  itemResource = this.ser.getVoucher(this.id, this.type, signal(null), this.d);
+  item = linkedSignal(() => this.itemResource.value() ?? new Voucher());
+
+  formModel = linkedSignal<Voucher, IssueFormModel>({
+    source: this.item,
+    computation: (voucher): IssueFormModel => {
+      const amount = round(
+        voucher.inventories.reduce((p, c) => p + c.amount, 0),
+        2,
+      );
+      return {
+        date: voucher.date ? moment(voucher.date, 'DD-MMM-YYYY').toDate() : new Date(),
+        source: (voucher.source as CostCentre)?.id ?? '',
+        destination: (voucher.destination as CostCentre)?.id ?? '',
+        amount,
+        addRow: {
+          batch: null as Batch | string | null,
+          quantity: '',
+        },
+        inventories: voucher.inventories.map((inv) => ({
+          id: inv.id,
+          quantity: inv.quantity,
+          rate: inv.rate,
+          tax: inv.tax,
+          discount: inv.discount,
+          amount: inv.amount,
+          batch: inv.batch,
+        })),
+        narration: voucher.narration ?? '',
+        posted: voucher.posted,
+        creationDate: voucher.creationDate,
+        lastEditDate: voucher.lastEditDate,
+        userName: voucher.user?.name ?? '',
+        poster: voucher.poster ?? '',
+      };
+    },
+  });
+
+  form = form(this.formModel);
+
+  displayedColumns = ['product', 'batch', 'quantity', 'rate', 'amount', 'action'];
+  gridColumns = ['source', 'destination', 'gridAmount', 'load'];
+
+  balanceDate = computed(() => moment(this.form.date().value()).format('DD-MMM-YYYY'));
+
+  batchSearch = computed(() => {
+    const v = this.form.addRow.batch().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  batchesResource = this.batchSer.autocomplete(this.balanceDate, this.batchSearch);
+  batches = computed(() => this.batchesResource.value() ?? []);
+
+  costCentresResource = this.costCentreSer.list();
+  costCentres = computed(() => this.costCentresResource.value() ?? []);
+
+  issueGridResource = this.issueGridSer.issueGrid(this.balanceDate);
+  gridData = computed(() => this.issueGridResource.value() ?? []);
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
+    this.form().focusBoundControl();
+  }
+
+  @HostListener('window:keydown.f3', ['$event'])
+  focusBatchHost(event: Event) {
+    event.preventDefault();
+    this.form.addRow.batch().focusBoundControl();
   }
 
   @HostListener('window:keydown.control.s', ['$event'])
@@ -87,194 +194,197 @@ export class IssueComponent implements OnInit, AfterViewInit {
     }
   }
 
-  public inventoryObservable = new BehaviorSubject<Inventory[]>([]);
-  public gridObservable = new BehaviorSubject<IssueGridItem[]>([]);
-  dataSource: IssueDataSource = new IssueDataSource(this.inventoryObservable);
-  gridDataSource: IssueGridDataSource = new IssueGridDataSource(this.gridObservable);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    source: FormControl<string | null>;
-    destination: FormControl<string | null>;
-    amount: FormControl<number>;
-    addRow: FormGroup<{
-      batch: FormControl<string | null>;
-      quantity: FormControl<string>;
-    }>;
-    narration: FormControl<string>;
-  }>;
-
-  voucher: Voucher = new Voucher();
-  costCentres: CostCentre[] = [];
-  batch: Batch | null = null;
-
-  displayedColumns = ['product', 'batch', 'quantity', 'rate', 'amount', 'action'];
-  gridColumns = ['source', 'destination', 'gridAmount', 'load'];
-
-  batches: Observable<Batch[]>;
+  @HostListener('window:keydown.control.p', ['$event'])
+  postListner(event: Event) {
+    event.preventDefault();
+    if (this.id() && !this.form.posted().controlValue() && this.auth.allowed('post-vouchers')) {
+      this.post();
+    }
+  }
 
   constructor() {
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      source: new FormControl<string | null>(null),
-      destination: new FormControl<string | null>(null),
-      amount: new FormControl({ value: 0, disabled: true }, { nonNullable: true }),
-      addRow: new FormGroup({
-        batch: new FormControl<string | null>(null),
-        quantity: new FormControl<string>('', { nonNullable: true }),
-      }),
-      narration: new FormControl('', { nonNullable: true }),
+    afterNextRender(() => {
+      this.form.addRow.batch().focusBoundControl();
     });
-    // Listen to Batch Autocomplete Change
-    this.batches = this.form.controls.addRow.controls.batch.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) =>
-        x === null
-          ? observableOf([])
-          : this.batchSer.autocomplete(moment(this.form.value.date).format('DD-MMM-YYYY'), x),
-      ),
-    );
-    // Listen to Date Change
-    this.form.controls.date.valueChanges
-      .pipe(map((x) => moment(x).format('DD-MMM-YYYY')))
-      .subscribe((x) => this.showGrid(x));
-  }
 
-  ngOnInit() {
-    this.gridDataSource = new IssueGridDataSource(this.gridObservable);
-    this.route.data.subscribe((value) => {
-      const data = value as { voucher: Voucher; costCentres: CostCentre[] };
+    effect(() => {
+      const d = this.formModel().date;
+      if (!d) return;
 
-      this.costCentres = data.costCentres;
-      this.loadVoucher(data.voucher);
+      const url = new URL(window.location.href);
+      url.searchParams.set('d', moment(d).format('DD-MMM-YYYY'));
+      window.history.replaceState({}, '', url.toString());
     });
   }
 
-  ngAfterViewInit() {
-    this.focusBatch();
-  }
-
-  loadVoucher(voucher: Voucher) {
-    this.voucher = voucher;
-    this.form.setValue({
-      date: moment(this.voucher.date, 'DD-MMM-YYYY'),
-      source: (this.voucher.source as CostCentre).id ?? '',
-      destination: (this.voucher.destination as CostCentre).id ?? '',
-      amount: Math.abs(this.voucher.inventories.map((x) => x.amount).reduce((p, c) => p + c, 0)),
-      addRow: {
-        batch: '',
-        quantity: '',
-      },
-      narration: this.voucher.narration,
-    });
-    this.dataSource = new IssueDataSource(this.inventoryObservable);
-    this.updateView();
-  }
-
-  focusBatch() {
-    setTimeout(() => {
-      this.batchElement.nativeElement.focus();
-    }, 0);
+  displayFn(batch?: Batch | string): string {
+    return !batch ? '' : typeof batch === 'string' ? batch : batch.name;
   }
 
   addRow() {
-    const formValue = this.form.value.addRow;
-    if (formValue === undefined) {
+    const formValue = this.form().value().addRow;
+    if (!formValue || !formValue.batch || typeof formValue.batch === 'string') {
       return;
     }
-    const quantity = this.math.parseAmount(formValue.quantity, 2);
-    const isConsumption = this.form.value.source === '7b845f95-dfef-fa4a-897c-f0baf15284a3';
-    if (this.batch === null || quantity <= 0) {
+    const batch = formValue.batch as Batch;
+    const quantity = this.math.parseAmount(formValue.quantity ?? '0', 2);
+    const isConsumption = this.formModel().source === '7b845f95-dfef-fa4a-897c-f0baf15284a3';
+    if (quantity <= 0) {
       return;
     }
-    const old = this.voucher.inventories.find((x) => x.batch.id === (this.batch as Batch).id);
-    if (old !== undefined) {
-      if (isConsumption && old.quantity + quantity > this.batch.quantityRemaining) {
+    const currentInventories = this.formModel().inventories;
+    const oldIndex = currentInventories.findIndex((x) => x.batch?.id === batch.id);
+    let updatedInventories: IssueItemFormData[];
+    if (oldIndex >= 0) {
+      const old = currentInventories[oldIndex];
+      if (isConsumption && old.quantity + quantity > batch.quantityRemaining) {
         this.snackBar.open('Quantity issued cannot be more than quantity available', 'Danger');
         return;
       }
-      old.quantity += quantity;
-    } else {
-      if (isConsumption && quantity > this.batch.quantityRemaining) {
-        this.snackBar.open('Quantity issued cannot be more than quantity available', 'Danger');
-        return;
-      }
-      this.voucher.inventories.push(
-        new Inventory({
-          quantity,
-          rate: this.batch.rate,
-          tax: this.batch.tax,
-          discount: this.batch.discount,
-          amount: quantity * this.batch.rate * (1 + this.batch.tax) * (1 - this.batch.discount),
-          batch: this.batch,
-        }),
+      const newQty = old.quantity + quantity;
+      const newAmount = round(newQty * batch.rate * (1 + batch.tax) * (1 - batch.discount), 2);
+      updatedInventories = currentInventories.map((inv, i) =>
+        i === oldIndex ? { ...inv, quantity: newQty, amount: newAmount } : inv,
       );
+    } else {
+      if (isConsumption && quantity > batch.quantityRemaining) {
+        this.snackBar.open('Quantity issued cannot be more than quantity available', 'Danger');
+        return;
+      }
+      const newRow: IssueItemFormData = {
+        id: undefined,
+        quantity,
+        rate: batch.rate,
+        tax: batch.tax,
+        discount: batch.discount,
+        amount: round(quantity * batch.rate * (1 + batch.tax) * (1 - batch.discount), 2),
+        batch,
+      };
+      updatedInventories = [...currentInventories, newRow];
     }
-    this.resetAddRow();
-    this.updateView();
+    const totalAmount = round(
+      updatedInventories.reduce((p, c) => p + c.amount, 0),
+      2,
+    );
+    this.formModel.update((m) => ({
+      ...m,
+      inventories: updatedInventories,
+      amount: totalAmount,
+    }));
+    this.form.addRow.batch().value.set(null);
+    this.form.addRow.quantity().value.set('');
+    this.form.addRow.batch().focusBoundControl();
   }
 
-  resetAddRow() {
-    this.form.controls.addRow.reset();
-    this.batch = null;
-    setTimeout(() => {
-      this.batchElement.nativeElement.focus();
-    }, 0);
+  deleteRow(row: IssueItemFormData) {
+    const updatedInventories = this.formModel().inventories.filter((j) => j !== row);
+    const totalAmount = round(
+      updatedInventories.reduce((p, c) => p + c.amount, 0),
+      2,
+    );
+    this.formModel.update((m) => ({
+      ...m,
+      inventories: updatedInventories,
+      amount: totalAmount,
+    }));
+    this.form.addRow.batch().focusBoundControl();
   }
 
-  updateView() {
-    this.inventoryObservable.next(this.voucher.inventories);
-    const amount = round(Math.abs(this.voucher.inventories.map((x) => x.amount).reduce((p, c) => p + c, 0)), 2);
-    this.form.controls.amount.setValue(amount);
-  }
-
-  editRow(row: Inventory) {
+  editRow(row: IssueItemFormData) {
     const dialogRef = this.dialog.open(IssueDialogComponent, {
       width: '750px',
       data: {
-        inventory: { ...row },
-        date: moment(this.form.value.date).format('DD-MMM-YYYY'),
+        inventory: new Inventory({
+          id: row.id,
+          quantity: row.quantity,
+          rate: row.rate,
+          tax: row.tax,
+          discount: row.discount,
+          amount: row.amount,
+          batch: row.batch,
+        }),
+        date: moment(this.formModel().date).format('DD-MMM-YYYY'),
       },
     });
 
     dialogRef.afterClosed().subscribe((result: boolean | Inventory) => {
-      if (!result) {
+      if (!result || typeof result === 'boolean') {
         return;
       }
-      const j = result as Inventory;
+      const j = result;
       if (
-        j.batch.sku.id !== row.batch.sku.id &&
-        this.voucher.inventories.filter((x) => x.batch.id === j.batch.id).length
+        j.batch?.sku.id !== row.batch?.sku.id &&
+        this.formModel().inventories.some((x) => x.batch?.id === j.batch?.id)
       ) {
+        this.snackBar.open('Product already added', 'Danger');
         return;
       }
-      Object.assign(row, j);
-      this.updateView();
+      const updatedInventories = this.formModel().inventories.map((item) =>
+        item === row
+          ? {
+              ...item,
+              quantity: j.quantity,
+              rate: j.rate,
+              tax: j.tax,
+              discount: j.discount,
+              amount: j.amount,
+              batch: j.batch,
+            }
+          : item,
+      );
+      const totalAmount = round(
+        updatedInventories.reduce((p, c) => p + c.amount, 0),
+        2,
+      );
+      this.formModel.update((m) => ({
+        ...m,
+        inventories: updatedInventories,
+        amount: totalAmount,
+      }));
+      this.form.addRow.batch().focusBoundControl();
     });
   }
 
-  deleteRow(row: Inventory) {
-    this.voucher.inventories.splice(this.voucher.inventories.indexOf(row), 1);
-    this.updateView();
+  getVoucher(): Voucher {
+    const m = this.formModel();
+    const base = this.item();
+    const v = new Voucher({ ...base });
+    v.date = moment(m.date).format('DD-MMM-YYYY');
+    v.source = new CostCentre({ id: m.source });
+    v.destination = new CostCentre({ id: m.destination });
+    v.narration = m.narration ?? '';
+    v.inventories = m.inventories.map(
+      (inv) =>
+        new Inventory({
+          id: inv.id,
+          quantity: inv.quantity,
+          rate: inv.rate,
+          tax: inv.tax,
+          discount: inv.discount,
+          amount: inv.amount,
+          batch: inv.batch,
+        }),
+    );
+    return v;
   }
 
   canSave() {
-    if (!this.voucher.id) {
+    if (!this.id()) {
       return true;
     }
-    if (this.voucher.posted && this.auth.allowed('edit-posted-vouchers')) {
-      return true;
+    if (this.form.posted().value() && !this.auth.allowed('edit-posted-vouchers')) {
+      return false;
     }
-    return this.voucher.user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
+    const user = this.auth.user as User;
+    return this.item().user?.id === user?.id || this.auth.allowed("edit-other-user's-vouchers");
   }
 
   save() {
-    const voucher: Voucher = this.getVoucher();
-    this.ser.saveOrUpdate(voucher).subscribe({
+    this.ser.saveOrUpdate(this.getVoucher()).subscribe({
       next: (result) => {
-        this.snackBar.open('', 'Success');
-        if (voucher.id === result.id) {
-          this.loadVoucher(result);
+        this.snackBar.open('Voucher Saved', undefined, { duration: 2000 });
+        if (this.item().id === result.id) {
+          this.item.set(result);
         } else {
           this.router.navigate(['/issue', result.id]);
         }
@@ -285,57 +395,60 @@ export class IssueComponent implements OnInit, AfterViewInit {
     });
   }
 
+  post() {
+    const id = this.id();
+    if (id) {
+      this.ser.post(id).subscribe({
+        next: (result) => {
+          this.snackBar.open('Voucher Posted', undefined, { duration: 2000 });
+          this.item.set(result);
+        },
+        error: (error) => {
+          this.snackBar.open(error, 'Danger');
+        },
+      });
+    }
+  }
+
   newVoucher() {
     this.router.navigate(['/issue']);
   }
 
-  getVoucher(): Voucher {
-    const formModel = this.form.value;
-    this.voucher.date = moment(formModel.date).format('DD-MMM-YYYY');
-    (this.voucher.source as CostCentre).id = formModel.source ?? '';
-    (this.voucher.destination as CostCentre).id = formModel.destination ?? '';
-    this.voucher.narration = formModel.narration ?? '';
-    return this.voucher;
-  }
-
-  delete() {
-    this.ser.delete(this.voucher.id as string).subscribe({
-      next: () => {
-        this.snackBar.open('', 'Success');
-        this.router.navigate(['/issue'], { replaceUrl: true });
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
-  }
-
   confirmDelete(): void {
+    const id = this.id();
+    if (!id) return;
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '250px',
       data: { title: 'Delete Voucher?', content: 'Are you sure? This cannot be undone.' },
     });
 
-    dialogRef.afterClosed().subscribe((result: boolean) => {
+    dialogRef.afterClosed().subscribe((result) => {
       if (result) {
         this.delete();
       }
     });
   }
 
-  showGrid(date: string) {
-    this.issueGridSer.issueGrid(date).subscribe((x) => this.gridObservable.next(x));
-  }
-
-  displayFn(batch?: Batch | string): string {
-    return !batch ? '' : typeof batch == 'string' ? batch : batch.name;
-  }
-
-  batchSelected(event: MatAutocompleteSelectedEvent): void {
-    this.batch = event.option.value as Batch;
+  delete() {
+    const id = this.id();
+    if (id) {
+      this.ser.delete(id).subscribe({
+        next: () => {
+          this.snackBar.open('Voucher Deleted', undefined, { duration: 2000 });
+          this.router.navigate(['/issue'], { replaceUrl: true });
+        },
+        error: (error) => {
+          this.snackBar.open(error, 'Danger');
+        },
+      });
+    }
   }
 
   goToVoucher(id: string) {
     this.router.navigate(['/issue', id]);
   }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
diff --git a/overlord/src/app/issue/issue.resolver.spec.ts b/overlord/src/app/issue/issue.resolver.spec.ts
deleted file mode 100644
index d521eed2..00000000
--- a/overlord/src/app/issue/issue.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { issueResolver } from './issue.resolver';
-
-describe('issueResolver', () => {
-  const executeResolver: ResolveFn<Voucher> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => issueResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/issue/issue.resolver.ts b/overlord/src/app/issue/issue.resolver.ts
deleted file mode 100644
index 1c65d96b..00000000
--- a/overlord/src/app/issue/issue.resolver.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { VoucherService } from '../core/voucher.service';
-
-export const issueResolver: ResolveFn<Voucher> = (route) => {
-  const id = route.paramMap.get('id');
-  const date = route.queryParamMap.get('d') || null;
-  if (id === null) {
-    return inject(VoucherService).getOfType('Issue', null, date);
-  }
-  return inject(VoucherService).get(id, 'Issue');
-};
diff --git a/overlord/src/app/issue/issue.routes.ts b/overlord/src/app/issue/issue.routes.ts
index e456eee2..51f90733 100644
--- a/overlord/src/app/issue/issue.routes.ts
+++ b/overlord/src/app/issue/issue.routes.ts
@@ -1,9 +1,7 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-import { costCentreListResolver } from '../cost-centre/cost-centre-list.resolver';
 import { IssueComponent } from './issue.component';
-import { issueResolver } from './issue.resolver';
 
 export const routes: Routes = [
   {
@@ -13,10 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Issue',
     },
-    resolve: {
-      voucher: issueResolver,
-      costCentres: costCentreListResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -26,10 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Issue',
     },
-    resolve: {
-      voucher: issueResolver,
-      costCentres: costCentreListResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/journal/journal-datasource.ts b/overlord/src/app/journal/journal-datasource.ts
deleted file mode 100644
index 8bb3a365..00000000
--- a/overlord/src/app/journal/journal-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { Journal } from '../core/journal';
-
-export class JournalDataSource extends DataSource<Journal> {
-  constructor(private data: Observable<Journal[]>) {
-    super();
-  }
-
-  connect(): Observable<Journal[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/journal/journal-dialog.component.html b/overlord/src/app/journal/journal-dialog.component.html
index 109dde56..2f06124e 100644
--- a/overlord/src/app/journal/journal-dialog.component.html
+++ b/overlord/src/app/journal/journal-dialog.component.html
@@ -1,9 +1,9 @@
 <h1 mat-dialog-title>Edit Journal Entry</h1>
 <div mat-dialog-content>
-  <form [formGroup]="form">
+  <form [formRoot]="form">
     <div class="row-container">
       <mat-form-field class="flex-auto basis-1-5">
-        <mat-select formControlName="debit">
+        <mat-select [formField]="form.debit">
           <mat-option [value]="1">Dr</mat-option>
           <mat-option [value]="-1">Cr</mat-option>
         </mat-select>
@@ -15,29 +15,24 @@
           matInput
           #accountElement
           [matAutocomplete]="auto"
-          formControlName="account"
+          [formField]="form.account"
           autocomplete="off"
         />
-        @if (accBal) {
+        @if (accBal()) {
           <mat-hint>
-            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+            Balance as on Date: <strong>{{ accBal()?.date | currency: 'INR' | accounting }}</strong> / Final balance:
+            <strong>{{ accBal()?.total | currency: 'INR' | accounting }}</strong>
           </mat-hint>
         }
+        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+          @for (account of accounts(); track account) {
+            <mat-option [value]="account">{{ account.name }}</mat-option>
+          }
+        </mat-autocomplete>
       </mat-form-field>
-      <mat-autocomplete
-        #auto="matAutocomplete"
-        autoActiveFirstOption
-        [displayWith]="displayFn"
-        (optionSelected)="accountSelected($event)"
-      >
-        @for (account of accounts | async; track account) {
-          <mat-option [value]="account">{{ account.name }}</mat-option>
-        }
-      </mat-autocomplete>
       <mat-form-field class="flex-auto basis-1-4">
         <mat-label>Amount</mat-label>
-        <input type="text" matInput formControlName="amount" autocomplete="off" />
+        <input type="text" matInput [formField]="form.amount" autocomplete="off" />
         <span matTextPrefix>₹&nbsp;</span>
       </mat-form-field>
     </div>
diff --git a/overlord/src/app/journal/journal-dialog.component.ts b/overlord/src/app/journal/journal-dialog.component.ts
index c8ddef08..9abefc16 100644
--- a/overlord/src/app/journal/journal-dialog.component.ts
+++ b/overlord/src/app/journal/journal-dialog.component.ts
@@ -1,24 +1,27 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { CurrencyPipe } from '@angular/common';
+import { Component, computed, inject, linkedSignal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
 import { Account } from '../core/account';
-import { AccountBalance } from '../core/account-balance';
 import { AccountService } from '../core/account.service';
 import { Journal } from '../core/journal';
 import { AccountingPipe } from '../shared/accounting.pipe';
 import { MathService } from '../shared/math.service';
 
+export interface JournalDialogFormData {
+  debit: number;
+  account: Account | string | null;
+  amount: string;
+}
+
 @Component({
   selector: 'app-journal-dialog',
   templateUrl: './journal-dialog.component.html',
@@ -26,81 +29,74 @@ import { MathService } from '../shared/math.service';
   imports: [
     MatDialogModule,
     CdkScrollableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatSelectModule,
     MatOptionModule,
     MatInputModule,
     MatAutocompleteModule,
     MatButtonModule,
-    AsyncPipe,
     CurrencyPipe,
     AccountingPipe,
   ],
 })
-export class JournalDialogComponent implements OnInit {
+export class JournalDialogComponent {
+  private math = inject(MathService);
+  private accountSer = inject(AccountService);
   dialogRef = inject<MatDialogRef<JournalDialogComponent>>(MatDialogRef);
   data = inject<{
     journal: Journal;
     date: string;
   }>(MAT_DIALOG_DATA);
 
-  private math = inject(MathService);
-  private accountSer = inject(AccountService);
-  private cd = inject(ChangeDetectorRef);
+  formModel = linkedSignal<
+    {
+      journal: Journal;
+      date: string;
+    },
+    JournalDialogFormData
+  >({
+    source: () => this.data,
+    computation: (data: { journal: Journal; date: string }) => ({
+      debit: data.journal.debit,
+      account: data.journal.account,
+      amount: `${data.journal.amount}`,
+    }),
+  });
 
-  accounts: Observable<Account[]>;
-  form: FormGroup<{
-    debit: FormControl<number>;
-    account: FormControl<string | null>;
-    amount: FormControl<string>;
-  }>;
+  form = form(this.formModel);
 
-  account: Account = new Account();
-  accBal: AccountBalance | null = null;
+  accountSearch = computed(() => {
+    const v = this.form.account().value();
+    return typeof v === 'string' ? v : null;
+  });
 
-  constructor() {
-    this.form = new FormGroup({
-      debit: new FormControl(1, { nonNullable: true }),
-      account: new FormControl(''),
-      amount: new FormControl('', { nonNullable: true }),
-    });
-    this.accBal = null;
-    // Setup Account Autocomplete
-    this.accounts = this.form.controls.account.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
-    );
-  }
+  accountsResource = this.accountSer.autocomplete(this.accountSearch);
+  accounts = computed(() => this.accountsResource.value() ?? []);
 
-  ngOnInit() {
-    this.form.setValue({
-      debit: this.data.journal.debit,
-      account: this.data.journal.account.name,
-      amount: `${this.data.journal.amount}`,
-    });
-    this.account = this.data.journal.account;
-  }
+  balanceDate = computed(() => this.data.date);
+  accountId = computed((): string | null => {
+    const account = this.form.account().value();
+    return typeof account === 'string' ? null : (account?.id ?? null);
+  });
 
-  displayFn(account?: Account | string): string {
-    return !account ? '' : typeof account === 'string' ? account : account.name;
-  }
+  accBalResource = this.accountSer.balance(this.accountId, this.balanceDate);
+  accBal = computed(() => this.accBalResource.value() ?? null);
 
-  accountSelected(event: MatAutocompleteSelectedEvent): void {
-    const account = event.option.value as Account;
-    this.account = account;
-    this.accountSer.balance(account.id as string, this.data.date).subscribe((v) => {
-      this.accBal = v;
-      this.cd.detectChanges();
-    });
+  displayFn(account?: Account): string {
+    return account ? account.name : '';
   }
 
   accept(): void {
-    const formValue = this.form.value;
-    const amount = this.math.journalAmount(formValue.amount, formValue.debit ?? 1);
+    const formValue = this.form().value();
+    const account = typeof formValue.account === 'string' ? null : formValue.account;
+    if (!account || !account.id) {
+      return;
+    }
+    const amount = this.math.journalAmount(formValue.amount ?? '', Number(formValue.debit) || 1);
     this.data.journal.debit = amount.debit;
-    this.data.journal.account = this.account;
+    this.data.journal.account = account;
     this.data.journal.amount = amount.amount;
     this.dialogRef.close(this.data.journal);
   }
diff --git a/overlord/src/app/journal/journal.component.html b/overlord/src/app/journal/journal.component.html
index c4014c95..51ea8b5a 100644
--- a/overlord/src/app/journal/journal.component.html
+++ b/overlord/src/app/journal/journal.component.html
@@ -1,22 +1,27 @@
 <h2 class="row-container space-between">
   <span>Journal</span>
-  <mat-icon matSuffix (click)="voucher.isStarred = !voucher.isStarred" class="pointer" [class.gold]="voucher.isStarred">
-    {{ voucher.isStarred ? 'star' : 'star_border' }}
+  <mat-icon
+    matSuffix
+    (click)="form.isStarred().value.set(!form.isStarred())"
+    class="pointer"
+    [class.gold]="form.isStarred()"
+  >
+    {{ form.isStarred() ? 'star' : 'star_border' }}
   </mat-icon>
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form [formRoot]="form" class="flex-col">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Date</mat-label>
-      <input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
+      <input matInput [matDatepicker]="date" [formField]="form.date" autocomplete="off" #dateElement />
       <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
       <mat-datepicker #date></mat-datepicker>
     </mat-form-field>
   </div>
-  <div formGroupName="addRow" class="row-container">
+  <div class="row-container">
     <mat-form-field class="flex-auto basis-1-6">
-      <mat-select formControlName="debit">
+      <mat-select [formField]="form.addRow.debit">
         <mat-option [value]="1">Dr</mat-option>
         <mat-option [value]="-1">Cr</mat-option>
       </mat-select>
@@ -28,149 +33,149 @@
         matInput
         #accountElement
         [matAutocomplete]="auto"
-        formControlName="account"
+        [formField]="form.addRow.account"
         autocomplete="off"
       />
-      @if (accBal) {
+      @if (accBal()) {
         <mat-hint>
-          Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-          <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+          Balance as on Date: <strong>{{ accBal()?.date | currency: 'INR' | accounting }}</strong> / Final balance:
+          <strong>{{ accBal()?.total | currency: 'INR' | accounting }}</strong>
         </mat-hint>
       }
+      <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+        @for (account of accounts(); track account) {
+          <mat-option [value]="account">{{ account.name }}</mat-option>
+        }
+      </mat-autocomplete>
     </mat-form-field>
-    <mat-autocomplete
-      #auto="matAutocomplete"
-      autoActiveFirstOption
-      [displayWith]="displayFn"
-      (optionSelected)="accountSelected($event)"
-    >
-      @for (account of accounts | async; track account) {
-        <mat-option [value]="account">{{ account.name }}</mat-option>
-      }
-    </mat-autocomplete>
     <mat-form-field class="flex-auto basis-1-6">
       <mat-label>Amount</mat-label>
-      <input type="text" matInput formControlName="amount" autocomplete="off" />
+      <input type="text" matInput [formField]="form.addRow.amount" autocomplete="off" />
       <span matTextPrefix>₹&nbsp;</span>
     </mat-form-field>
 
     <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1-6">Add</button>
   </div>
-  <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-    <!-- Debit Column -->
-    <ng-container matColumnDef="debit">
-      <mat-header-cell *matHeaderCellDef>Debit</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.debit === 1 ? 'Dr' : 'Cr' }}</mat-cell>
-    </ng-container>
+  @if (itemResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (itemResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+  } @else {
+    <mat-table #table [dataSource]="form.journals().value() ?? []" matSort (matSortChange)="sortData($event)">
+      <!-- Debit Column -->
+      <ng-container matColumnDef="debit">
+        <mat-header-cell *matHeaderCellDef>Debit</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.debit === 1 ? 'Dr' : 'Cr' }}</mat-cell>
+      </ng-container>
 
-    <!-- Account Column -->
-    <ng-container matColumnDef="account">
-      <mat-header-cell *matHeaderCellDef>Account</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.account.name }}</mat-cell>
-    </ng-container>
+      <!-- Account Column -->
+      <ng-container matColumnDef="account">
+        <mat-header-cell *matHeaderCellDef>Account</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.account.name }}</mat-cell>
+      </ng-container>
 
-    <!-- Amount Column -->
-    <ng-container matColumnDef="amount">
-      <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Amount Column -->
+      <ng-container matColumnDef="amount">
+        <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Action Column -->
-    <ng-container matColumnDef="action">
-      <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center">
-        <button mat-icon-button tabindex="-1" (click)="editRow(row)">
-          <mat-icon>edit</mat-icon>
-        </button>
-        <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
+      <!-- Action Column -->
+      <ng-container matColumnDef="action">
+        <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="center">
+          <button mat-icon-button tabindex="-1" (click)="editRow(row)">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Narration</mat-label>
-      <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Tags</mat-label>
-      <mat-chip-grid #chipGrid aria-label="Tag selection">
-        @for (tag of voucher.tags; track tag) {
-          <mat-chip-row (removed)="removeTag(tag)">
-            {{ tag.name }}
-            <button matChipRemove [attr.aria-label]="'remove ' + tag.name">
-              <mat-icon>cancel</mat-icon>
-            </button>
-          </mat-chip-row>
-        }
-      </mat-chip-grid>
-      <input
-        placeholder="New Tag..."
-        #tagInput
-        formControlName="tags"
-        [matChipInputFor]="chipGrid"
-        [matAutocomplete]="autoTag"
-        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-        (matChipInputTokenEnd)="addTag($event)"
-      />
-      <mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
-        @for (tag of tags | async; track tag) {
-          <mat-option [value]="tag">{{ tag.name }}</mat-option>
-        }
-      </mat-autocomplete>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    @for (item of voucher.files; track item) {
-      <div class="img-container" class="flex-auto basis-1-5">
-        <img [src]="item.thumbnail" alt="img" (click)="zoomImage(item)" (keyup.enter)="zoomImage(item)" tabindex="0" />
-        <button mat-icon-button class="overlay" (click)="deleteImage(item)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
-    }
-    <div class="img-container" class="flex flex-auto basis-1-5">
-      <label ng-href for="fileUp">
-        <img
-          alt="add"
-          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
-        />
-      </label>
-      <input
-        type="file"
-        id="fileUp"
-        multiple
-        accept="image/*"
-        style="display: none"
-        (change)="image.detectFiles($event, voucher)"
-      />
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Narration</mat-label>
+        <textarea matInput matAutosizeMinRows="5" [formField]="form.narration"></textarea>
+      </mat-form-field>
     </div>
-  </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Tags</mat-label>
+        <mat-chip-grid #chipGrid aria-label="Tag selection">
+          @for (tag of form.tagList().value(); track tag) {
+            <mat-chip-row (removed)="removeTag(tag)">
+              {{ tag.name }}
+              <button matChipRemove [attr.aria-label]="'remove ' + tag.name">
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip-row>
+          }
+        </mat-chip-grid>
+        <input
+          placeholder="New Tag..."
+          #tagInput
+          [formField]="form.tagInput"
+          [matChipInputFor]="chipGrid"
+          [matAutocomplete]="autoTag"
+          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+          (matChipInputTokenEnd)="addTag()"
+        />
+        <mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
+          @for (tag of tags(); track tag) {
+            <mat-option [value]="tag">{{ tag.name }}</mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      @for (item of form.files().value(); track item) {
+        <div class="img-container" class="flex-auto basis-1-5">
+          <img
+            [src]="item.thumbnail"
+            alt="img"
+            (click)="zoomImage(item)"
+            (keyup.enter)="zoomImage(item)"
+            tabindex="0"
+          />
+          <button mat-icon-button class="overlay" (click)="deleteImage(item)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+      }
+      <div class="img-container" class="flex flex-auto basis-1-5">
+        <label ng-href for="fileUp">
+          <img
+            alt="add"
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
+          />
+        </label>
+        <input type="file" id="fileUp" multiple accept="image/*" style="display: none" (change)="detectFiles($event)" />
+      </div>
+    </div>
+  }
 </form>
 
 <div class="row-container">
   <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="">
-    {{ voucher.id ? 'Update' : 'Save' }}
+    {{ id() ? 'Update' : 'Save' }}
   </button>
-  @if (voucher.id) {
-    <button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')" class="">
-      {{ voucher.posted ? 'Posted' : 'Post' }}
+  @if (id()) {
+    <button mat-raised-button (click)="post()" [disabled]="form.posted().controlValue()" class="">
+      {{ form.posted().controlValue() ? 'Posted' : 'Post' }}
     </button>
     <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
   }
   <span class="spacer"></span>
-  @if (voucher.id) {
+  @if (id()) {
     <span class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      Created on&nbsp;<strong>{{ form.creationDate().value() | localTime }}</strong
+      >&nbsp;and Last Edited on&nbsp; <strong>{{ form.lastEditDate().value() | localTime }}</strong
+      >&nbsp;by&nbsp; <strong>{{ form.userName() }}</strong
+      >. {{ form.posted() ? 'Posted by ' + form.poster() : '' }}
     </span>
   }
 </div>
diff --git a/overlord/src/app/journal/journal.component.ts b/overlord/src/app/journal/journal.component.ts
index e3b9c624..fe557354 100644
--- a/overlord/src/app/journal/journal.component.ts
+++ b/overlord/src/app/journal/journal.component.ts
@@ -1,19 +1,10 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostListener,
-  inject,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CurrencyPipe } from '@angular/common';
+import { Component, HostListener, inject, input, computed, signal, linkedSignal, afterNextRender } from '@angular/core';
+import { FormField, FormRoot, form } from '@angular/forms/signals';
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
@@ -22,41 +13,67 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { round } from 'mathjs';
 import moment from 'moment';
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
+import { zip } from 'rxjs';
 
 import { AuthService } from '../auth/auth.service';
 import { Account } from '../core/account';
-import { AccountBalance } from '../core/account-balance';
 import { AccountService } from '../core/account.service';
+import { CostCentre } from '../core/cost-centre';
 import { DbFile } from '../core/db-file';
 import { Journal } from '../core/journal';
-import { User } from '../core/user';
 import { Voucher } from '../core/voucher';
 import { VoucherService } from '../core/voucher.service';
 import { AccountingPipe } from '../shared/accounting.pipe';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
 import { ImageDialogComponent } from '../shared/image-dialog/image-dialog.component';
 import { ImageService } from '../shared/image.service';
 import { LocalTimePipe } from '../shared/local-time.pipe';
 import { MathService } from '../shared/math.service';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { Tag } from '../tag/tag';
 import { TagService } from '../tag/tag.service';
-import { JournalDataSource } from './journal-datasource';
 import { JournalDialogComponent } from './journal-dialog.component';
 
+export interface JournalItemFormData {
+  id: string | undefined;
+  debit: number;
+  amount: number;
+  account: Account;
+  costCentre: CostCentre | null;
+}
+
+export interface JournalFormModel {
+  isStarred: boolean;
+  date: Date;
+  addRow: {
+    debit: number;
+    account: Account | string | null;
+    amount: string;
+  };
+  journals: JournalItemFormData[];
+  narration: string;
+  tagInput: string | Tag | null;
+  tagList: Tag[];
+  files: DbFile[];
+  posted: boolean;
+  creationDate: string;
+  lastEditDate: string;
+  userName: string;
+  poster: string;
+}
+
 @Component({
   selector: 'app-journal',
   templateUrl: './journal.component.html',
   styleUrls: ['./journal.component.css'],
   imports: [
     MatIconModule,
-    ReactiveFormsModule,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -67,14 +84,17 @@ import { JournalDialogComponent } from './journal-dialog.component';
     MatTableModule,
     MatSortModule,
     MatChipsModule,
-    AsyncPipe,
     CurrencyPipe,
     AccountingPipe,
     LocalTimePipe,
+    FormRoot,
+    FormField,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class JournalComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class JournalComponent {
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
@@ -84,17 +104,24 @@ export class JournalComponent implements OnInit, AfterViewInit {
   private ser = inject(VoucherService);
   private accountSer = inject(AccountService);
   private tagSer = inject(TagService);
-  private cd = inject(ChangeDetectorRef);
-
-  @ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('dateElement', { static: false }) dateElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('tagInput') tagInput?: ElementRef<HTMLInputElement>;
+  sortActive = signal('');
+  sortDirection = signal('');
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  d = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  type = signal('Journal');
+  itemResource = this.ser.getVoucher(this.id, this.type, signal(null), this.d);
+  item = linkedSignal(() => this.itemResource.value() ?? new Voucher());
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
+    this.form().focusBoundControl();
+  }
+
+  @HostListener('window:keydown.f3', ['$event'])
+  focusAccountHost(event: Event) {
+    event.preventDefault();
+    this.form.addRow.account().focusBoundControl();
   }
 
   @HostListener('window:keydown.f5', ['$event'])
@@ -102,7 +129,7 @@ export class JournalComponent implements OnInit, AfterViewInit {
     event.preventDefault();
     this.router.navigate(['payment'], {
       queryParams: {
-        d: this.form.controls.date.value.format('DD-MMM-YYYY'),
+        d: moment(this.formModel().date).format('DD-MMM-YYYY'),
       },
       queryParamsHandling: 'merge',
     });
@@ -113,7 +140,7 @@ export class JournalComponent implements OnInit, AfterViewInit {
     event.preventDefault();
     this.router.navigate(['receipt'], {
       queryParams: {
-        d: this.form.controls.date.value.format('DD-MMM-YYYY'),
+        d: moment(this.formModel().date).format('DD-MMM-YYYY'),
       },
       queryParamsHandling: 'merge',
     });
@@ -135,211 +162,186 @@ export class JournalComponent implements OnInit, AfterViewInit {
   @HostListener('window:keydown.control.p', ['$event'])
   postListner(event: Event) {
     event.preventDefault();
-    if (this.voucher.id && !this.voucher.posted && this.auth.allowed('post-vouchers')) {
+    if (this.id() && !this.form.posted() && this.auth.allowed('post-vouchers')) {
       this.post();
     }
   }
 
   separatorKeysCodes: number[] = [ENTER, COMMA];
-  public journalObservable = new BehaviorSubject<Journal[]>([]);
-  dataSource: JournalDataSource = new JournalDataSource(this.journalObservable);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    addRow: FormGroup<{
-      debit: FormControl<number>;
-      account: FormControl<string | null>;
-      amount: FormControl<string>;
-    }>;
-    narration: FormControl<string>;
-    tags: FormControl<string | null>;
-  }>;
 
-  voucher: Voucher = new Voucher();
-  tags: Observable<Tag[]>;
-  account: Account | null;
-  accBal: AccountBalance | null = null;
+  formModel = linkedSignal<Voucher, JournalFormModel>({
+    source: this.item,
+    computation: (voucher): JournalFormModel => ({
+      isStarred: voucher.isStarred,
+      date: moment(voucher.date, 'DD-MMM-YYYY').toDate(),
+      addRow: {
+        debit: 1,
+        account: null as Account | string | null,
+        amount: '',
+      },
+      journals: voucher.journals.map((j) => ({
+        id: j.id,
+        debit: j.debit,
+        amount: j.amount,
+        account: j.account,
+        costCentre: j.costCentre,
+      })),
+      narration: voucher.narration,
+      tagInput: null as string | Tag | null,
+      tagList: [...voucher.tags],
+      files: [...voucher.files],
+      posted: voucher.posted,
+      creationDate: voucher.creationDate,
+      lastEditDate: voucher.lastEditDate,
+      userName: voucher.user?.name ?? '',
+      poster: voucher.poster,
+    }),
+  });
+
+  form = form(this.formModel);
+
+  private accountSearch = computed(() => {
+    const v = this.form.addRow.account().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  private accountsResource = this.accountSer.autocomplete(this.accountSearch);
+  accounts = computed(() => this.accountsResource.value() ?? []);
+
+  tagQuery = computed(() => {
+    const tag = this.form.tagInput().value();
+    return tag === null ? '' : typeof tag !== 'string' ? tag.name.toLowerCase() : tag;
+  });
+
+  tagsResource = this.tagSer.autocomplete(this.tagQuery);
+  tags = computed(() => this.tagsResource.value() ?? []);
+
+  balanceDate = computed(() => moment(this.form.date().value()).format('DD-MMM-YYYY'));
+  accountId = computed((): string | null => {
+    const account = this.form.addRow.account().value();
+    return typeof account === 'string' ? null : (account?.id ?? null);
+  });
+
+  accBalResource = this.accountSer.balance(this.accountId, this.balanceDate);
+  accBal = computed(() => this.accBalResource.value() ?? null);
 
   displayedColumns = ['debit', 'account', 'amount', 'action'];
 
-  accounts: Observable<Account[]>;
-
   constructor() {
-    this.account = null;
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      addRow: new FormGroup({
-        debit: new FormControl(1, { nonNullable: true }),
-        account: new FormControl(''),
-        amount: new FormControl('', { nonNullable: true }),
-      }),
-      narration: new FormControl('', { nonNullable: true }),
-      tags: new FormControl(''),
-    });
-    this.accBal = null;
-    // Setup Account Autocomplete
-    this.accounts = this.form.controls.addRow.controls.account.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
-    );
-    this.tags = this.form.controls.tags.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      map((tag: string | Tag | null) => (tag === null ? '' : typeof tag !== 'string' ? tag.name.toLowerCase() : tag)),
-      switchMap((tag: string) => this.tagSer.autocomplete(tag)),
-    );
-    // Listen to Date Change
-    this.form.controls.date.valueChanges.subscribe((x) =>
-      this.router.navigate([], {
-        relativeTo: this.route,
-        queryParams: { d: moment(x).format('DD-MMM-YYYY') },
-        replaceUrl: true,
-        queryParamsHandling: 'merge',
-      }),
-    );
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { voucher: Voucher };
-
-      this.loadVoucher(data.voucher);
+    afterNextRender(() => {
+      this.form.addRow.account().focusBoundControl();
     });
   }
 
-  ngAfterViewInit() {
-    this.focusAccount();
-  }
-
-  loadVoucher(voucher: Voucher) {
-    this.voucher = voucher;
-    this.form.setValue({
-      date: moment(this.voucher.date, 'DD-MMM-YYYY'),
-      addRow: {
-        debit: 1,
-        account: null,
-        amount: '',
-      },
-      narration: this.voucher.narration,
-      tags: '',
+  dateChanged(newDate: moment.Moment) {
+    this.router.navigate([], {
+      queryParams: { d: newDate.format('DD-MMM-YYYY') },
+      replaceUrl: true,
+      queryParamsHandling: 'merge',
     });
-    this.dataSource = new JournalDataSource(this.journalObservable);
-    this.journalObservable.next(this.voucher.journals);
-  }
-
-  focusAccount() {
-    setTimeout(() => {
-      this.accountElement.nativeElement.focus();
-    }, 0);
   }
 
   addRow() {
-    const formValue = this.form.value.addRow;
-    if (formValue === undefined) {
+    const formValue = this.form().value().addRow;
+    if (!formValue) return;
+    const amount = this.math.journalAmount(formValue.amount ?? '', formValue.debit ?? 1);
+    const account = formValue.account as Account;
+
+    if (!account || typeof account === 'string' || amount.amount === 0) {
       return;
     }
-    const amount = this.math.journalAmount(formValue.amount, formValue.debit ?? 1);
-    if (this.account === null || amount.amount === 0) {
-      return;
-    }
-    const oldFiltered = this.voucher.journals.filter((x) => x.account.id === (this.account as Account).id);
-    const old = oldFiltered.length ? oldFiltered[0] : null;
-    if (old) {
+    const currentJournals = this.formModel().journals;
+    const oldIndex = currentJournals.findIndex((x) => x.account.id === account.id);
+    let updatedJournals: JournalItemFormData[];
+    if (oldIndex >= 0) {
+      const old = currentJournals[oldIndex];
       const a = old.debit * old.amount + amount.debit * amount.amount;
-      old.debit = a < 0 ? -1 : 1;
-      old.amount = Math.abs(a);
-    } else {
-      this.voucher.journals.push(
-        new Journal({
-          debit: amount.debit,
-          amount: amount.amount,
-          account: this.account,
-          costCentre: null,
-        }),
+      updatedJournals = currentJournals.map((j, i) =>
+        i === oldIndex ? { ...j, debit: a >= 0 ? 1 : -1, amount: round(Math.abs(a), 2) } : j,
       );
+    } else {
+      updatedJournals = [
+        ...currentJournals,
+        { id: undefined, account, debit: amount.debit, amount: amount.amount, costCentre: null },
+      ];
     }
-    this.journalObservable.next(this.voucher.journals);
-    this.resetAddRow();
+    this.formModel.update((m) => ({ ...m, journals: updatedJournals }));
+    const balAmount = updatedJournals.length
+      ? round(Math.abs(updatedJournals.map((x) => x.debit * x.amount).reduce((p, c) => p + c)), 2)
+      : 0;
+    this.form.addRow.amount().value.set(`${balAmount}`);
+    this.form.addRow.account().value.set(null);
+    this.form.addRow.account().focusBoundControl();
   }
 
-  resetAddRow() {
-    const amount = round(Math.abs(this.voucher.journals.map((x) => x.debit * x.amount).reduce((p, c) => p + c)), 2);
-    this.form.controls.addRow.reset({
-      debit: this.form.value.addRow?.debit ?? 1,
-      account: null,
-      amount: `${amount}`,
-    });
-    this.account = null;
-    this.accBal = null;
-    setTimeout(() => {
-      this.accountElement.nativeElement.focus();
-    }, 0);
+  deleteRow(row: JournalItemFormData) {
+    const updatedJournals = this.formModel().journals.filter((j) => j !== row);
+    this.formModel.update((m) => ({ ...m, journals: updatedJournals }));
+    const amount = updatedJournals.length
+      ? round(Math.abs(updatedJournals.map((x) => x.debit * x.amount).reduce((p, c) => p + c)), 2)
+      : 0;
+    this.form.addRow.amount().value.set(`${amount}`);
+    this.form.addRow.account().value.set(null);
+    this.form.addRow.account().focusBoundControl();
   }
 
-  editRow(row: Journal) {
+  editRow(row: JournalItemFormData) {
     const dialogRef = this.dialog.open(JournalDialogComponent, {
       width: '750px',
       data: {
-        journal: { ...row },
-        date: moment(this.form.value.date).format('DD-MMM-YYYY'),
+        journal: new Journal({ ...row }),
+        date: moment(this.formModel().date).format('DD-MMM-YYYY'),
       },
     });
 
     dialogRef.afterClosed().subscribe((result: boolean | Journal) => {
-      if (!result) {
+      if (!result || typeof result === 'boolean') {
         return;
       }
-      const j = result as Journal;
-      if (
-        j.account.id !== row.account.id &&
-        this.voucher.journals.filter((x) => x.account.id === j.account.id).length
-      ) {
+      const j = result;
+      if (j.account.id !== row.account.id && this.formModel().journals.some((x) => x.account.id === j.account.id)) {
+        this.snackBar.open('Account already exists in journals', 'Danger');
         return;
       }
-      Object.assign(row, j);
-      this.journalObservable.next(this.voucher.journals);
-      this.resetAddRow();
+      const updatedJournals = this.formModel().journals.map((item) =>
+        item === row
+          ? {
+              ...item,
+              debit: j.debit,
+              account: j.account,
+              amount: j.amount,
+            }
+          : item,
+      );
+      this.formModel.update((m) => ({ ...m, journals: updatedJournals }));
+      const amount = updatedJournals.length
+        ? round(Math.abs(updatedJournals.map((x) => x.debit * x.amount).reduce((p, c) => p + c)), 2)
+        : 0;
+      this.form.addRow.amount().value.set(`${amount}`);
+      this.form.addRow.account().focusBoundControl();
     });
   }
 
-  deleteRow(row: Journal) {
-    this.voucher.journals.splice(this.voucher.journals.indexOf(row), 1);
-    this.journalObservable.next(this.voucher.journals);
-    const amount = Math.abs(this.voucher.journals.map((x) => x.debit * x.amount).reduce((p, c) => p + c, 0));
-    this.form.controls.addRow.patchValue({
-      amount: `${amount}`,
-    });
-  }
-
-  canSave() {
-    if (!this.voucher.id) {
-      return true;
-    }
-    if (this.voucher.posted && this.auth.allowed('edit-posted-vouchers')) {
-      return true;
-    }
-    return this.voucher.user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
-  }
-
-  post() {
-    this.ser.post(this.voucher.id as string).subscribe({
-      next: (result) => {
-        this.loadVoucher(result);
-        this.snackBar.open('Voucher Posted', 'Success');
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
+  getItem(): Voucher {
+    const m = this.formModel();
+    const base = this.item();
+    const v = new Voucher({ ...base });
+    v.date = moment(m.date).format('DD-MMM-YYYY');
+    v.narration = m.narration ?? '';
+    v.journals = m.journals.map(
+      (j) => new Journal({ id: j.id, debit: j.debit, amount: j.amount, account: j.account, costCentre: j.costCentre }),
+    );
+    v.tags = [...m.tagList];
+    v.files = [...m.files];
+    return v;
   }
 
   save() {
-    const voucher: Voucher = this.getVoucher();
-    this.ser.saveOrUpdate(voucher).subscribe({
+    this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: (result) => {
-        this.snackBar.open('', 'Success');
-        if (voucher.id === result.id) {
-          this.loadVoucher(result);
+        this.snackBar.open('Voucher Saved', undefined, { duration: 2000 });
+        if (this.item().id === result.id) {
+          this.item.set(result);
         } else {
           this.router.navigate(['/journal', result.id]);
         }
@@ -350,95 +352,124 @@ export class JournalComponent implements OnInit, AfterViewInit {
     });
   }
 
-  getVoucher(): Voucher {
-    const formModel = this.form.value;
-    this.voucher.date = moment(formModel.date).format('DD-MMM-YYYY');
-    this.voucher.narration = formModel.narration ?? '';
-    return this.voucher;
+  post() {
+    const id = this.id();
+    if (id) {
+      this.ser.post(id).subscribe((res) => {
+        this.snackBar.open('Voucher Posted', undefined, { duration: 2000 });
+        this.item.set(res);
+      });
+    }
   }
 
-  delete() {
-    this.ser.delete(this.voucher.id as string).subscribe({
-      next: () => {
-        this.snackBar.open('', 'Success');
-        this.router.navigate(['/journal'], { replaceUrl: true });
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
-  }
-
-  confirmDelete(): void {
+  confirmDelete() {
+    const id = this.id();
+    if (!id) return;
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '250px',
-      data: { title: 'Delete Voucher?', content: 'Are you sure? This cannot be undone.' },
+      data: { title: 'Confirm Delete', text: `Delete Voucher ${id}?` },
     });
-
-    dialogRef.afterClosed().subscribe((result: boolean) => {
+    dialogRef.afterClosed().subscribe((result) => {
       if (result) {
         this.delete();
       }
     });
   }
 
-  displayFn(account?: Account | string): string {
-    return !account ? '' : typeof account === 'string' ? account : account.name;
+  delete() {
+    const id = this.id();
+    if (id) {
+      this.ser.delete(id).subscribe(() => {
+        this.snackBar.open('Voucher Deleted', undefined, { duration: 2000 });
+        this.router.navigate(['/journal'], {
+          replaceUrl: true,
+        });
+      });
+    }
   }
 
-  accountSelected(event: MatAutocompleteSelectedEvent): void {
-    const account = event.option.value as Account;
-    this.account = account;
-    const date = moment(this.form.value.date).format('DD-MMM-YYYY');
-    this.accountSer.balance(account.id as string, date).subscribe((v) => {
-      this.accBal = v;
-      this.cd.detectChanges();
-    });
+  canSave() {
+    if (!this.id()) {
+      return true;
+    }
+    if (this.form.posted().value() && !this.auth.allowed('edit-posted-vouchers')) return false;
+    let sum = 0;
+    this.form
+      .journals()
+      .value()
+      .forEach((x) => (sum = round(sum + x.amount * x.debit, 2)));
+    return sum === 0 && this.form.journals().value().length >= 2;
+  }
+
+  displayFn(account?: Account): string {
+    return account ? account.name : '';
+  }
+
+  removeTag(tag: Tag) {
+    this.formModel.update((m) => ({
+      ...m,
+      tagList: m.tagList.filter((t) => t !== tag),
+    }));
+  }
+
+  addTag() {
+    const query = this.form.tagInput().value();
+    if (!query) return;
+    const val = (query as string).trim().toLowerCase();
+    if (!val) return;
+    const existing = this.formModel().tagList;
+    const old = existing.find((t) => t.name.toLowerCase() === val);
+    if (!old) {
+      this.formModel.update((m) => ({ ...m, tagList: [...m.tagList, { id: null, name: val }] }));
+    }
+    this.form.tagInput().value.set(null);
+  }
+
+  selectedTag(event: MatAutocompleteSelectedEvent) {
+    const tag = event.option.value as Tag;
+    const existing = this.formModel().tagList;
+    const old = existing.find((t) => t.name.toLowerCase() === tag.name.toLowerCase());
+    if (!old) {
+      this.formModel.update((m) => ({ ...m, tagList: [...m.tagList, tag] }));
+    }
+    this.form.tagInput().value.set(null);
+  }
+
+  deleteImage(file: DbFile) {
+    this.formModel.update((m) => ({
+      ...m,
+      files: m.files.filter((f) => f !== file),
+    }));
+  }
+
+  detectFiles(event: Event) {
+    const fileList = (event.target as HTMLInputElement).files;
+    if (!fileList) return;
+    for (const file of Array.from(fileList)) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const src = (e.target as FileReader).result as string;
+        zip(this.image.resizeImage(src, 100, 150), this.image.resizeImage(src, 825, 1170)).subscribe(
+          ([thumbnail, resized]) => {
+            this.formModel.update((m) => ({
+              ...m,
+              files: [...m.files, new DbFile({ thumbnail, resized })],
+            }));
+          },
+        );
+      };
+      reader.readAsDataURL(file);
+    }
   }
 
   zoomImage(file: DbFile) {
     this.dialog.open(ImageDialogComponent, {
-      width: '750px',
-      data: file.resized,
+      data: file,
+      panelClass: 'full-picture',
     });
   }
 
-  deleteImage(file: DbFile) {
-    const index = this.voucher.files.indexOf(file);
-    this.voucher.files.splice(index, 1);
-  }
-
-  removeTag(tag: Tag): void {
-    const index = this.voucher.tags.indexOf(tag);
-
-    if (index >= 0) {
-      this.voucher.tags.splice(index, 1);
-    }
-  }
-
-  addTag(event: MatChipInputEvent): void {
-    const value = (event.value || '').trim();
-
-    // Add our tag
-    if (value) {
-      this.voucher.tags.push(new Tag({ name: value }));
-    }
-
-    // Clear the input value
-    event.chipInput!.clear();
-
-    this.form.controls.tags.setValue(null);
-  }
-
-  selectedTag(event: MatAutocompleteSelectedEvent): void {
-    const tag = event.option.value as Tag;
-    const index = this.voucher.tags.findIndex((t) => (tag.id === null ? t.name === tag.name : t.id === tag.id));
-    if (index === -1) {
-      this.voucher.tags.push(tag);
-    }
-    if (this.tagInput) {
-      this.tagInput.nativeElement.value = '';
-    }
-    this.form.controls.tags.setValue(null);
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
diff --git a/overlord/src/app/journal/journal.resolver.spec.ts b/overlord/src/app/journal/journal.resolver.spec.ts
deleted file mode 100644
index 4277a222..00000000
--- a/overlord/src/app/journal/journal.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { journalResolver } from './journal.resolver';
-
-describe('journalResolver', () => {
-  const executeResolver: ResolveFn<Voucher> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => journalResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/journal/journal.resolver.ts b/overlord/src/app/journal/journal.resolver.ts
deleted file mode 100644
index 7c42b5ea..00000000
--- a/overlord/src/app/journal/journal.resolver.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { VoucherService } from '../core/voucher.service';
-
-export const journalResolver: ResolveFn<Voucher> = (route) => {
-  const id = route.paramMap.get('id');
-  const date = route.queryParamMap.get('d') || null;
-  if (id === null) {
-    return inject(VoucherService).getOfType('Journal', null, date);
-  }
-  return inject(VoucherService).get(id, 'Journal');
-};
diff --git a/overlord/src/app/journal/journal.routes.ts b/overlord/src/app/journal/journal.routes.ts
index 6952a3a3..00576fbb 100644
--- a/overlord/src/app/journal/journal.routes.ts
+++ b/overlord/src/app/journal/journal.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { JournalComponent } from './journal.component';
-import { journalResolver } from './journal.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Journal',
     },
-    resolve: {
-      voucher: journalResolver,
-    },
     runGuardsAndResolvers: 'paramsChange',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Journal',
     },
-    resolve: {
-      voucher: journalResolver,
-    },
     runGuardsAndResolvers: 'paramsChange',
   },
 ];
diff --git a/overlord/src/app/ledger/ledger-datasource.ts b/overlord/src/app/ledger/ledger-datasource.ts
deleted file mode 100644
index 436a003c..00000000
--- a/overlord/src/app/ledger/ledger-datasource.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-
-import { LedgerItem } from './ledger-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class LedgerDataSource extends DataSource<LedgerItem> {
-  public data: LedgerItem[] = [];
-  private tags: string[] = [];
-  public paginator?: MatPaginator;
-  public sort?: MatSort;
-  public debit = 0;
-  public credit = 0;
-  public running = 0;
-
-  constructor(
-    public dataObs: Observable<LedgerItem[]>,
-    public filter: Observable<string[]>,
-  ) {
-    super();
-  }
-
-  connect(): Observable<LedgerItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    const d = this.dataObs.pipe(
-      tap((x) => {
-        this.data = x;
-      }),
-    );
-    const f = this.filter.pipe(
-      tap((x) => {
-        this.tags = x;
-      }),
-    );
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    return merge(d, f, ...dataMutations)
-      .pipe(
-        map(() => this.getFilteredData()),
-        tap((x: LedgerItem[]) => {
-          if (this.paginator) {
-            this.paginator.length = x.length;
-          }
-        }),
-      )
-      .pipe(map((x: LedgerItem[]) => this.getPagedData(this.getSortedData(x))));
-  }
-
-  disconnect() {}
-
-  calculateTotals(data: LedgerItem[]) {
-    this.debit = 0;
-    this.credit = 0;
-    this.running = 0;
-    data.forEach((item) => {
-      if (item.type !== 'Opening Balance') {
-        this.debit += item.debit;
-        this.credit += item.credit;
-        if (item.posted) {
-          this.running += item.debit - item.credit;
-        }
-      } else {
-        this.running += item.debit - item.credit;
-      }
-      item.running = this.running;
-    });
-  }
-
-  private getFilteredData(): LedgerItem[] {
-    const fData = this.data.filter(
-      (x) =>
-        (x.tags.length === 0 && this.tags.indexOf('(None)') !== -1) ||
-        x.tags.filter((t) => this.tags.includes(t)).length > 0,
-    );
-    this.calculateTotals(fData);
-    return fData;
-  }
-
-  private getPagedData(data: LedgerItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: LedgerItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'date':
-          return compare(a.date, b.date, isAsc);
-        case 'debit':
-          return compare(+a.debit, +b.debit, isAsc);
-        case 'credit':
-          return compare(+a.credit, +b.credit, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/ledger/ledger.component.html b/overlord/src/app/ledger/ledger.component.html
index 881afd27..a8276a5d 100644
--- a/overlord/src/app/ledger/ledger.component.html
+++ b/overlord/src/app/ledger/ledger.component.html
@@ -1,23 +1,23 @@
 <h2 class="row-container space-between">
   <span>Ledger</span>
-  @if (dataSource.data.length) {
+  @if (dataSource().length) {
     <button mat-icon-button (click)="exportCsv()">
       <mat-icon>save_alt</mat-icon>
     </button>
   }
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
+      <input matInput #startDateElement [matDatepicker]="startDate" [formField]="form.startDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
       <mat-datepicker #startDate></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
@@ -30,7 +30,7 @@
         matInput
         #accountElement
         [matAutocomplete]="auto"
-        formControlName="account"
+        [formField]="form.account"
         autocomplete="off"
       />
       <mat-autocomplete
@@ -39,18 +39,18 @@
         [displayWith]="displayFn"
         (optionSelected)="selected($event)"
       >
-        @for (account of accounts | async; track account) {
+        @for (account of accounts(); track account) {
           <mat-option [value]="account">{{ account.name }}</mat-option>
         }
       </mat-autocomplete>
     </mat-form-field>
-    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
+    <button mat-raised-button type="button" class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
   <div class="row-container">
     <mat-form-field class="flex-auto basis-4-5">
       <mat-label>Tags</mat-label>
-      <mat-select formControlName="tags" multiple (selectionChange)="tagChanges($event.value)">
-        @for (tag of tags; track tag) {
+      <mat-select [formField]="form.tags" multiple>
+        @for (tag of tags(); track tag) {
           <mat-option [value]="tag">{{ tag }}</mat-option>
         }
       </mat-select>
@@ -61,98 +61,102 @@
     </button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Date Column -->
-  <ng-container matColumnDef="date">
-    <mat-header-cell *matHeaderCellDef>
-      <mat-checkbox
-        (change)="$event ? toggleAllRows() : null"
-        [checked]="selection.hasValue() && isAllSelected()"
-        [indeterminate]="selection.hasValue() && !isAllSelected()"
+@if (infoResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (infoResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Date Column -->
+    <ng-container matColumnDef="date">
+      <mat-header-cell *matHeaderCellDef>
+        <mat-checkbox
+          (change)="$event ? toggleAllRows() : null"
+          [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()"
+        >
+        </mat-checkbox>
+        Date
+      </mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <mat-checkbox
+          (click)="$event.stopPropagation()"
+          (change)="$event ? selection.toggle(row) : null"
+          [checked]="selection.isSelected(row)"
+        >
+        </mat-checkbox>
+        {{ row.date }}
+      </mat-cell>
+      <mat-footer-cell *matFooterCellDef></mat-footer-cell>
+    </ng-container>
+
+    <!-- Particulars Column -->
+    <ng-container matColumnDef="particulars">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Particulars</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="row.url">{{ row.name }}</a></mat-cell
       >
-      </mat-checkbox>
-      Date
-    </mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <mat-checkbox
-        (click)="$event.stopPropagation()"
-        (change)="$event ? selection.toggle(row) : null"
-        [checked]="selection.isSelected(row)"
+      <mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
+    </ng-container>
+
+    <!-- Type Column -->
+    <ng-container matColumnDef="type">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
+    </ng-container>
+
+    <!-- Narration Column -->
+    <ng-container matColumnDef="narration">
+      <mat-header-cell *matHeaderCellDef>Narration</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        >{{ row.narration }}
+        <mat-chip-set>
+          @for (tag of row.tags; track tag) {
+            <mat-chip>{{ tag }}</mat-chip>
+          }
+        </mat-chip-set></mat-cell
       >
-      </mat-checkbox>
-      {{ row.date }}
-    </mat-cell>
-    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
-  </ng-container>
+      <mat-footer-cell *matFooterCellDef></mat-footer-cell>
+    </ng-container>
 
-  <!-- Particulars Column -->
-  <ng-container matColumnDef="particulars">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Particulars</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="row.url">{{ row.name }}</a></mat-cell
-    >
-    <mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
-  </ng-container>
+    <!-- Debit Column -->
+    <ng-container matColumnDef="debit">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | clear }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">{{ debit() | currency: 'INR' }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Type Column -->
-  <ng-container matColumnDef="type">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
-  </ng-container>
+    <!-- Credit Column -->
+    <ng-container matColumnDef="credit">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | clear }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">{{ credit() | currency: 'INR' }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Narration Column -->
-  <ng-container matColumnDef="narration">
-    <mat-header-cell *matHeaderCellDef>Narration</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      >{{ row.narration }}
-      <mat-chip-set>
-        @for (tag of row.tags; track tag) {
-          <mat-chip>{{ tag }}</mat-chip>
-        }
-      </mat-chip-set></mat-cell
-    >
-    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
-  </ng-container>
+    <!-- Running Column -->
+    <ng-container matColumnDef="running">
+      <mat-header-cell *matHeaderCellDef class="right">Running</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.running | currency: 'INR' | accounting }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">{{ running() | currency: 'INR' | accounting }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Debit Column -->
-  <ng-container matColumnDef="debit">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | clear }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">{{ dataSource.debit | currency: 'INR' }}</mat-footer-cell>
-  </ng-container>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row
+      *matRowDef="let row; columns: displayedColumns"
+      [class.selected]="selectedRowId === row.id"
+      [class.unposted]="!row.posted && selectedRowId !== row.id"
+      (click)="selectRow(row.id)"
+    ></mat-row>
+    <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
+  </mat-table>
 
-  <!-- Credit Column -->
-  <ng-container matColumnDef="credit">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | clear }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">{{ dataSource.credit | currency: 'INR' }}</mat-footer-cell>
-  </ng-container>
-
-  <!-- Running Column -->
-  <ng-container matColumnDef="running">
-    <mat-header-cell *matHeaderCellDef class="right">Running</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.running | currency: 'INR' | accounting }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">{{
-      dataSource.running | currency: 'INR' | accounting
-    }}</mat-footer-cell>
-  </ng-container>
-
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row
-    *matRowDef="let row; columns: displayedColumns"
-    [class.selected]="selectedRowId === row.id"
-    [class.unposted]="!row.posted && selectedRowId !== row.id"
-    (click)="selectRow(row.id)"
-  ></mat-row>
-  <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
-</mat-table>
-
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="filteredList().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/ledger/ledger.component.ts b/overlord/src/app/ledger/ledger.component.ts
index b34c7acb..ebcc95eb 100644
--- a/overlord/src/app/ledger/ledger.component.ts
+++ b/overlord/src/app/ledger/ledger.component.ts
@@ -1,16 +1,7 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  HostListener,
-  inject,
-  OnInit,
-  ViewChild,
-  ChangeDetectorRef,
-} from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CurrencyPipe } from '@angular/common';
+import { Component, inject, input, linkedSignal, computed, signal, afterNextRender, HostListener } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -21,14 +12,12 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatSelectModule } from '@angular/material/select';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
 import { Account } from '../core/account';
 import { AccountService } from '../core/account.service';
@@ -36,11 +25,18 @@ import { AccountingPipe } from '../shared/accounting.pipe';
 import { ClearPipe } from '../shared/clear.pipe';
 import { ToCsvService } from '../shared/to-csv.service';
 import { TagDialogComponent } from '../tag-dialog/tag-dialog.component';
-import { Tag } from '../tag/tag';
 import { TagService } from '../tag/tag.service';
+export interface LedgerFormData {
+  startDate: moment.Moment;
+  finishDate: moment.Moment;
+  account: string | Account | null;
+  tags: string[];
+}
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { Ledger } from './ledger';
-import { LedgerDataSource } from './ledger-datasource';
 import { LedgerItem } from './ledger-item';
+import { LedgerService } from './ledger.service';
 
 @Component({
   selector: 'app-ledger',
@@ -50,7 +46,8 @@ import { LedgerItem } from './ledger-item';
     MatCheckboxModule,
     MatChipsModule,
     MatIconModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -62,136 +59,155 @@ import { LedgerItem } from './ledger-item';
     MatSortModule,
     RouterModule,
     MatPaginatorModule,
-    AsyncPipe,
     CurrencyPipe,
     AccountingPipe,
     ClearPipe,
+    ClearPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class LedgerComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class LedgerComponent {
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private toCsv = inject(ToCsvService);
   private accountSer = inject(AccountService);
   private tagSer = inject(TagService);
-  private cd = inject(ChangeDetectorRef);
+  private ser = inject(LedgerService);
+
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  tagsResource = this.tagSer.list();
+
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  infoResource = this.ser.list(this.id, this.startDate, this.finishDate);
+  info = computed(() => this.infoResource.value() ?? new Ledger());
+  allTags = computed(() => this.tagsResource.value() ?? []);
+  tags = computed(() => {
+    const data = this.info().body;
+    return ['(None)', ...Array.from(new Set(data.map((x) => x.tags).reduce((list, t) => list.concat(t), [])))];
+  });
+
+  tagsSignal = computed(() => this.model().tags);
+
+  filteredList = computed(() => {
+    const data = this.info().body ?? [];
+    const tags = this.tagsSignal();
+    return data.filter(
+      (x) =>
+        (x.tags.length === 0 && tags.indexOf('(None)') !== -1) || x.tags.filter((t) => tags.includes(t)).length > 0,
+    );
+  });
+
+  length = computed(() => this.filteredList().length);
+
+  sortedList = computed(() => {
+    const data = this.filteredList();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'particulars':
+          return compare(a.name ?? '', b.name ?? '', isAsc);
+        case 'type':
+          return compare(a.type ?? '', b.type ?? '', isAsc);
+        case 'debit':
+          return compare(a.debit ?? 0, b.debit ?? 0, isAsc);
+        case 'credit':
+          return compare(a.credit ?? 0, b.credit ?? 0, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
-  @ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  info: Ledger = new Ledger();
-  body = new BehaviorSubject<LedgerItem[]>([]);
-  filter = new BehaviorSubject<string[]>([]);
-  dataSource: LedgerDataSource = new LedgerDataSource(this.body, this.filter);
   selection = new SelectionModel<LedgerItem>(true, []);
 
-  allTags: Tag[] = [];
-  tags: string[] = [];
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-    account: FormControl<string | null>;
-    tags: FormControl<string[]>;
-  }>;
+  model = linkedSignal<import('./ledger').Ledger, LedgerFormData>({
+    source: this.info,
+    computation: (info: Ledger): LedgerFormData => ({
+      startDate: info.startDate ? moment(info.startDate, 'DD-MMM-YYYY') : moment(new Date()),
+      finishDate: info.finishDate ? moment(info.finishDate, 'DD-MMM-YYYY') : moment(new Date()),
+      account: info.account?.name ?? '',
+      tags: this.tags(),
+    }),
+  });
+
+  form = createForm(this.model);
 
   selectedRowId = '';
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['date', 'particulars', 'type', 'narration', 'debit', 'credit', 'running'];
 
-  accounts: Observable<Account[]>;
+  private accountSearch = computed(() => {
+    const v = this.form.account().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  private accountsResource = this.accountSer.autocomplete(this.accountSearch);
+  accounts = computed(() => this.accountsResource.value() ?? []);
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
+    this.form().focusBoundControl();
   }
 
   constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      account: new FormControl<string | null>(null),
-      tags: new FormControl<string[]>([], { nonNullable: true }),
+    afterNextRender(() => {
+      this.form.account().focusBoundControl();
     });
-
-    this.accounts = this.form.controls.account.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
-    );
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { tags: Tag[]; info: Ledger };
-
-      this.allTags = data.tags;
-      this.info = data.info;
-      this.tags = [
-        '(None)',
-        ...Array.from(new Set(this.info.body.map((x) => x.tags).reduce((list, tags) => list.concat(tags), []))),
-      ];
-      this.form.setValue({
-        account: this.info.account?.name ?? '',
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
-        tags: this.tags,
-      });
-      this.body.next(this.info.body);
-      this.filter.next(this.tags);
-      if (!this.dataSource.paginator) {
-        this.dataSource.paginator = this.paginator;
-      }
-      if (!this.dataSource.sort) {
-        this.dataSource.sort = this.sort;
-      }
-      this.selection.clear();
-      this.cd.detectChanges();
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      if (this.accountElement) {
-        this.accountElement.nativeElement.focus();
-      }
-    }, 0);
   }
 
   displayFn(account?: Account | string): string {
     return !account ? '' : typeof account === 'string' ? account : account.name;
   }
 
-  tagChanges(value: string[]) {
-    this.filter.next(value);
-  }
-
   selected(event: MatAutocompleteSelectedEvent): void {
-    this.info.account = event.option.value as Account;
+    this.info().account = event.option.value as Account;
   }
 
   selectRow(id: string): void {
     this.selectedRowId = id;
   }
 
-  /** Whether the number of selected elements matches the total number of rows. */
+  debit = computed(() => this.filteredList().reduce((acc, row) => acc + row.debit, 0));
+
+  credit = computed(() => this.filteredList().reduce((acc, row) => acc + row.credit, 0));
+
+  running = computed(() => this.filteredList().reduce((acc, row) => acc + row.debit - row.credit, 0));
+
   isAllSelected() {
     const numSelected = this.selection.selected.length;
-    const numRows = this.dataSource.data.length;
+    const numRows = this.dataSource().length;
     return numSelected === numRows;
   }
 
-  /** Selects all rows if they are not all selected; otherwise clear selection. */
   toggleAllRows() {
     if (this.isAllSelected()) {
       this.selection.clear();
       return;
     }
 
-    this.selection.select(...this.dataSource.data);
+    this.selection.select(...this.dataSource());
   }
 
   labels() {
@@ -203,7 +219,7 @@ export class LedgerComponent implements OnInit, AfterViewInit {
       .open(TagDialogComponent, {
         width: '750px',
         data: {
-          tags: this.allTags,
+          tags: this.allTags(),
           vouchers: this.selection.selected,
         },
       })
@@ -230,10 +246,10 @@ export class LedgerComponent implements OnInit, AfterViewInit {
   }
 
   getInfo(): Ledger {
-    const formModel = this.form.value;
+    const formModel = this.model();
 
     return new Ledger({
-      account: this.info.account,
+      account: this.info().account,
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
       finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
     });
@@ -250,7 +266,7 @@ export class LedgerComponent implements OnInit, AfterViewInit {
       Running: 'running',
       Posted: 'posted',
     };
-    const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource.data)], {
+    const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource())], {
       type: 'text/csv;charset=utf-8;',
     });
     const link = document.createElement('a');
@@ -260,4 +276,16 @@ export class LedgerComponent implements OnInit, AfterViewInit {
     link.click();
     document.body.removeChild(link);
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/ledger/ledger.resolver.spec.ts b/overlord/src/app/ledger/ledger.resolver.spec.ts
deleted file mode 100644
index 875a42e2..00000000
--- a/overlord/src/app/ledger/ledger.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Ledger } from './ledger';
-import { ledgerResolver } from './ledger.resolver';
-
-describe('ledgerResolver', () => {
-  const executeResolver: ResolveFn<Ledger> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => ledgerResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/ledger/ledger.resolver.ts b/overlord/src/app/ledger/ledger.resolver.ts
deleted file mode 100644
index 4db44161..00000000
--- a/overlord/src/app/ledger/ledger.resolver.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Ledger } from './ledger';
-import { LedgerService } from './ledger.service';
-
-export const ledgerResolver: ResolveFn<Ledger> = (route) => {
-  const id = route.paramMap.get('id');
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(LedgerService).list(id, startDate, finishDate);
-};
diff --git a/overlord/src/app/ledger/ledger.routes.ts b/overlord/src/app/ledger/ledger.routes.ts
index da47536c..cddaf5e1 100644
--- a/overlord/src/app/ledger/ledger.routes.ts
+++ b/overlord/src/app/ledger/ledger.routes.ts
@@ -1,9 +1,7 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-import { tagListResolver } from '../tag/tag-list.resolver';
 import { LedgerComponent } from './ledger.component';
-import { ledgerResolver } from './ledger.resolver';
 
 export const routes: Routes = [
   {
@@ -13,10 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Ledger',
     },
-    resolve: {
-      tags: tagListResolver,
-      info: ledgerResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -26,10 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Ledger',
     },
-    resolve: {
-      tags: tagListResolver,
-      info: ledgerResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/ledger/ledger.service.ts b/overlord/src/app/ledger/ledger.service.ts
index 5343d4ed..73bd53a7 100644
--- a/overlord/src/app/ledger/ledger.service.ts
+++ b/overlord/src/app/ledger/ledger.service.ts
@@ -1,32 +1,22 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { httpResource } from '@angular/common/http';
+import { Injectable, Signal } from '@angular/core';
 
-import { ErrorLoggerService } from '../core/error-logger.service';
 import { Ledger } from './ledger';
 
 const url = '/api/ledger';
-const serviceName = 'LedgerService';
-
 @Injectable({
   providedIn: 'root',
 })
 export class LedgerService {
-  private http = inject(HttpClient);
-  private log = inject(ErrorLoggerService);
-
-  list(id: string | null, startDate: string | null, finishDate: string | null): Observable<Ledger> {
-    const listUrl = id === null ? url : `${url}/${id}`;
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    return this.http
-      .get<Ledger>(listUrl, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Ledger>;
+  list(id: Signal<string | null>, startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<Ledger>(() => {
+      const listUrl = id() === null ? url : `${url}/${id()}`;
+      const params: Record<string, string> = {};
+      const startDate_val = startDate();
+      if (startDate_val !== null) params['s'] = startDate_val;
+      const finishDate_val = finishDate();
+      if (finishDate_val !== null) params['f'] = finishDate_val;
+      return { url: listUrl, params };
+    });
   }
 }
diff --git a/overlord/src/app/mozimo-daily-register/mozimo-daily-register-datasource.ts b/overlord/src/app/mozimo-daily-register/mozimo-daily-register-datasource.ts
deleted file mode 100644
index ba13ee0a..00000000
--- a/overlord/src/app/mozimo-daily-register/mozimo-daily-register-datasource.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { merge, Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-
-import { MozimoDailyRegisterItem } from './mozimo-daily-register-item';
-
-export class MozimoDailyRegisterDataSource extends DataSource<MozimoDailyRegisterItem> {
-  public data: MozimoDailyRegisterItem[] = [];
-  public paginator?: MatPaginator;
-  constructor(public dataObs: Observable<MozimoDailyRegisterItem[]>) {
-    super();
-  }
-
-  connect(): Observable<MozimoDailyRegisterItem[]> {
-    const dataMutations: EventEmitter<PageEvent>[] = [];
-    const d = this.dataObs.pipe(
-      tap((x) => {
-        this.data = x;
-      }),
-    );
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-
-    return merge(d, ...dataMutations).pipe(
-      map(() => this.calculate([...this.data])),
-      tap(() => {
-        if (this.paginator) {
-          this.paginator.length = this.data.length;
-        }
-      }),
-      map((x: MozimoDailyRegisterItem[]) => this.getPagedData(x)),
-    );
-  }
-
-  disconnect() {}
-
-  private calculate(data: MozimoDailyRegisterItem[]): MozimoDailyRegisterItem[] {
-    if (data.length === 0) {
-      return data;
-    }
-    data.forEach((item) => {
-      if (item.ageing !== null || item.display !== null) {
-        item.closing = (item.ageing ?? 0) + (item.display ?? 0);
-        item.variance = item.opening + item.received - item.sale - item.nc - item.closing;
-      } else {
-        item.closing = item.opening + item.received - item.sale - item.nc;
-        item.variance = 0;
-      }
-    });
-    return data;
-  }
-
-  private getPagedData(data: MozimoDailyRegisterItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-}
diff --git a/overlord/src/app/mozimo-daily-register/mozimo-daily-register.component.html b/overlord/src/app/mozimo-daily-register/mozimo-daily-register.component.html
index 5dae6234..080886cb 100644
--- a/overlord/src/app/mozimo-daily-register/mozimo-daily-register.component.html
+++ b/overlord/src/app/mozimo-daily-register/mozimo-daily-register.component.html
@@ -1,13 +1,13 @@
 <h2 class="row-container space-between">
   <span>Mozimo Product Register</span>
-  @if (dataSource.data.length) {
+  @if ((this.info().body ?? []).length) {
     <button mat-icon-button (click)="exportCsv()">
       <mat-icon>save_alt</mat-icon>
     </button>
   }
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-4-5">
       <mat-label>Date</mat-label>
@@ -16,7 +16,7 @@
         #dateElement
         [matDatepicker]="date"
         (focus)="dateElement.select()"
-        formControlName="date"
+        [formField]="form.date"
         autocomplete="off"
       />
       <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
@@ -24,109 +24,130 @@
     </mat-form-field>
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
-  <mat-table #table [dataSource]="dataSource" aria-label="Elements" formArrayName="items">
-    <!-- Product Column -->
-    <ng-container matColumnDef="product">
-      <mat-header-cell *matHeaderCellDef class="center first">Product</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center first">
-        <span
-          matBadge="1"
-          matBadgeSize="small"
-          [matBadgeHidden]="!row.lastEditDate"
-          matTooltip="{{ row.lastEditDate | localTime }}"
-          [matTooltipDisabled]="!row.lastEditDate"
-          >{{ row.product.name }}</span
-        >
-      </mat-cell>
-    </ng-container>
+  @if (infoResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (infoResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+  } @else {
+    <mat-table #table [dataSource]="dataSource()">
+      <!-- Product Column -->
+      <ng-container matColumnDef="product">
+        <mat-header-cell *matHeaderCellDef class="center first">Product</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="center first">
+          <span
+            matBadge="1"
+            matBadgeSize="small"
+            [matBadgeHidden]="!row.lastEditDate"
+            matTooltip="{{ row.lastEditDate | localTime }}"
+            [matTooltipDisabled]="!row.lastEditDate"
+            >{{ row.product.name }}</span
+          >
+        </mat-cell>
+      </ng-container>
 
-    <!-- Opening Column -->
-    <ng-container matColumnDef="opening">
-      <mat-header-cell *matHeaderCellDef class="right middle">Opening</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right middle">{{ row.opening | number: '0.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Opening Column -->
+      <ng-container matColumnDef="opening">
+        <mat-header-cell *matHeaderCellDef class="right middle">Opening</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right middle">{{ row.opening | number: '0.2-2' }}</mat-cell>
+      </ng-container>
 
-    <!-- Received Column -->
-    <ng-container matColumnDef="received">
-      <mat-header-cell *matHeaderCellDef class="middle">Received</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-        <mat-form-field class="flex-auto">
-          <mat-label>Received</mat-label>
-          <input matInput type="number" formControlName="received" (change)="updateReceived($event, row)" />
-        </mat-form-field>
-      </mat-cell>
-    </ng-container>
+      <!-- Received Column -->
+      <ng-container matColumnDef="received">
+        <mat-header-cell *matHeaderCellDef class="middle">Received</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="middle">
+          @if (form.items[i]) {
+            <mat-form-field class="flex-auto">
+              <mat-label>Received</mat-label>
+              <input
+                matInput
+                type="number"
+                [formField]="form.items[i].received"
+                (change)="updateReceived($event, row)"
+              />
+            </mat-form-field>
+          }
+        </mat-cell>
+      </ng-container>
 
-    <!-- Sale Column -->
-    <ng-container matColumnDef="sale">
-      <mat-header-cell *matHeaderCellDef class="middle">Sale</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-        <mat-form-field class="flex-auto">
-          <mat-label>Sale</mat-label>
-          <input matInput type="number" formControlName="sale" (change)="updateSale($event, row)" />
-        </mat-form-field>
-      </mat-cell>
-    </ng-container>
+      <!-- Sale Column -->
+      <ng-container matColumnDef="sale">
+        <mat-header-cell *matHeaderCellDef class="middle">Sale</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="middle">
+          @if (form.items[i]) {
+            <mat-form-field class="flex-auto">
+              <mat-label>Sale</mat-label>
+              <input matInput type="number" [formField]="form.items[i].sale" (change)="updateSale($event, row)" />
+            </mat-form-field>
+          }
+        </mat-cell>
+      </ng-container>
 
-    <!-- Nc Column -->
-    <ng-container matColumnDef="nc">
-      <mat-header-cell *matHeaderCellDef class="middle">Nc</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-        <mat-form-field class="flex-auto">
-          <mat-label>Nc</mat-label>
-          <input matInput type="number" formControlName="nc" (change)="updateNc($event, row)" />
-        </mat-form-field>
-      </mat-cell>
-    </ng-container>
+      <!-- Nc Column -->
+      <ng-container matColumnDef="nc">
+        <mat-header-cell *matHeaderCellDef class="middle">Nc</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="middle">
+          @if (form.items[i]) {
+            <mat-form-field class="flex-auto">
+              <mat-label>Nc</mat-label>
+              <input matInput type="number" [formField]="form.items[i].nc" (change)="updateNc($event, row)" />
+            </mat-form-field>
+          }
+        </mat-cell>
+      </ng-container>
 
-    <!-- Display Column -->
-    <ng-container matColumnDef="display">
-      <mat-header-cell *matHeaderCellDef class="middle">Display</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-        <mat-form-field class="flex-auto">
-          <mat-label>Display</mat-label>
-          <input matInput type="number" formControlName="display" (change)="updateDisplay($event, row)" />
-        </mat-form-field>
-      </mat-cell>
-    </ng-container>
+      <!-- Display Column -->
+      <ng-container matColumnDef="display">
+        <mat-header-cell *matHeaderCellDef class="middle">Display</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="middle">
+          @if (form.items[i]) {
+            <mat-form-field class="flex-auto">
+              <mat-label>Display</mat-label>
+              <input matInput type="number" [formField]="form.items[i].display" (change)="updateDisplay($event, row)" />
+            </mat-form-field>
+          }
+        </mat-cell>
+      </ng-container>
 
-    <!-- Ageing Column -->
-    <ng-container matColumnDef="ageing">
-      <mat-header-cell *matHeaderCellDef class="middle">Ageing</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-        <mat-form-field class="flex-auto">
-          <mat-label>Ageing</mat-label>
-          <input matInput type="number" formControlName="ageing" (change)="updateAgeing($event, row)" />
-        </mat-form-field>
-      </mat-cell>
-    </ng-container>
+      <!-- Ageing Column -->
+      <ng-container matColumnDef="ageing">
+        <mat-header-cell *matHeaderCellDef class="middle">Ageing</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="middle">
+          @if (form.items[i]) {
+            <mat-form-field class="flex-auto">
+              <mat-label>Ageing</mat-label>
+              <input matInput type="number" [formField]="form.items[i].ageing" (change)="updateAgeing($event, row)" />
+            </mat-form-field>
+          }
+        </mat-cell>
+      </ng-container>
 
-    <!-- Variance Column -->
-    <ng-container matColumnDef="variance">
-      <mat-header-cell *matHeaderCellDef class="right middle">Variance</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right middle">{{ row.variance | number: '0.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Variance Column -->
+      <ng-container matColumnDef="variance">
+        <mat-header-cell *matHeaderCellDef class="right middle">Variance</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right middle">{{ row.variance | number: '0.2-2' }}</mat-cell>
+      </ng-container>
 
-    <!-- Closing Column -->
-    <ng-container matColumnDef="closing">
-      <mat-header-cell *matHeaderCellDef class="right last">Closing</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right last">{{ row.closing | number: '0.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Closing Column -->
+      <ng-container matColumnDef="closing">
+        <mat-header-cell *matHeaderCellDef class="right last">Closing</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right last">{{ row.closing | number: '0.2-2' }}</mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
 
-  <mat-paginator
-    #paginator
-    [length]="dataSource.data.length"
-    [pageIndex]="0"
-    [pageSize]="50"
-    [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
-  >
-  </mat-paginator>
+    <mat-paginator
+      (page)="handlePageEvent($event)"
+      [length]="(this.info().body ?? []).length"
+      [pageIndex]="pageIndex()"
+      [pageSize]="pageSize()"
+      [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
+    >
+    </mat-paginator>
+  }
 </form>
 
 <div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
+  <button mat-raised-button color="primary" (click)="save()">Save</button>
 </div>
diff --git a/overlord/src/app/mozimo-daily-register/mozimo-daily-register.component.ts b/overlord/src/app/mozimo-daily-register/mozimo-daily-register.component.ts
index 6cfb131e..a756c6cc 100644
--- a/overlord/src/app/mozimo-daily-register/mozimo-daily-register.component.ts
+++ b/overlord/src/app/mozimo-daily-register/mozimo-daily-register.component.ts
@@ -1,6 +1,6 @@
 import { DecimalPipe } from '@angular/common';
-import { Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Component, inject, input, computed, afterNextRender, linkedSignal, signal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
@@ -8,22 +8,33 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject } from 'rxjs';
 
 import { AuthService } from '../auth/auth.service';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
 import { LocalTimePipe } from '../shared/local-time.pipe';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { ToCsvService } from '../shared/to-csv.service';
 import { MozimoDailyRegister } from './mozimo-daily-register';
-import { MozimoDailyRegisterDataSource } from './mozimo-daily-register-datasource';
 import { MozimoDailyRegisterItem } from './mozimo-daily-register-item';
 import { MozimoDailyRegisterService } from './mozimo-daily-register.service';
 
+export interface MozimoDailyRegisterFormData {
+  date: moment.Moment;
+  items: {
+    received: number;
+    sale: number;
+    nc: number;
+    display: number | null;
+    ageing: number | null;
+  }[];
+}
+
 @Component({
   selector: 'app-mozimo-daily-register',
   templateUrl: './mozimo-daily-register.component.html',
@@ -34,7 +45,6 @@ import { MozimoDailyRegisterService } from './mozimo-daily-register.service';
     MatAutocompleteModule,
     MatBadgeModule,
     MatButtonModule,
-
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
@@ -42,84 +52,66 @@ import { MozimoDailyRegisterService } from './mozimo-daily-register.service';
     MatPaginatorModule,
     MatTableModule,
     MatTooltipModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
   providers: [LocalTimePipe],
 })
-export class MozimoDailyRegisterComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class MozimoDailyRegisterComponent {
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   private localTimePipe = inject(LocalTimePipe);
   private snackBar = inject(MatSnackBar);
   auth = inject(AuthService);
   private ser = inject(MozimoDailyRegisterService);
+  date = input(null, { transform: (v: string | null | undefined) => v ?? null });
 
-  @ViewChild('dateElement', { static: false }) dateElement!: ElementRef<HTMLInputElement>;
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  info: MozimoDailyRegister = new MozimoDailyRegister();
-  body = new BehaviorSubject<MozimoDailyRegisterItem[]>([]);
-  dataSource: MozimoDailyRegisterDataSource = new MozimoDailyRegisterDataSource(this.body);
+  pageSize = signal(50);
+  pageIndex = signal(0);
+
+  infoResource = this.ser.list(this.date);
+
+  info = computed(() => this.infoResource.value() ?? new MozimoDailyRegister());
+
+  model = linkedSignal({
+    source: this.info,
+    computation: (v): MozimoDailyRegisterFormData => ({
+      date: moment(v.date, 'DD-MMM-YYYY'),
+      items: v.body.map((x) => ({
+        received: x.received,
+        sale: x.sale,
+        nc: x.nc,
+        display: x.display,
+        ageing: x.ageing,
+      })),
+    }),
+  });
+
+  body = linkedSignal(() => this.info().body);
+
+  dataSource = computed(() => {
+    const data = this.info().body ?? [];
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  form = createForm(this.model);
 
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    items: FormArray<
-      FormGroup<{
-        received: FormControl<number>;
-        sale: FormControl<number>;
-        nc: FormControl<number>;
-        display: FormControl<number | null>;
-        ageing: FormControl<number | null>;
-      }>
-    >;
-  }>;
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-
   displayedColumns = ['product', 'opening', 'received', 'sale', 'nc', 'display', 'ageing', 'variance', 'closing'];
 
   constructor() {
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      items: new FormArray<
-        FormGroup<{
-          received: FormControl<number>;
-          sale: FormControl<number>;
-          nc: FormControl<number>;
-          display: FormControl<number | null>;
-          ageing: FormControl<number | null>;
-        }>
-      >([]),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: MozimoDailyRegister };
-      this.info = data.info;
-      this.form.patchValue({
-        date: moment(this.info.date, 'DD-MMM-YYYY'),
-      });
-      this.form.controls.items.clear();
-      this.info.body.forEach((x) =>
-        this.form.controls.items.push(
-          new FormGroup({
-            received: new FormControl(x.received, { nonNullable: true, validators: [Validators.min(0)] }),
-            sale: new FormControl(x.sale, { nonNullable: true, validators: [Validators.min(0)] }),
-            nc: new FormControl(x.nc, { nonNullable: true, validators: [Validators.min(0)] }),
-            display: new FormControl(x.display, { nonNullable: false, validators: [Validators.min(0)] }),
-            ageing: new FormControl(x.ageing, { nonNullable: false, validators: [Validators.min(0)] }),
-          }),
-        ),
-      );
-      if (!this.dataSource.paginator) {
-        this.dataSource.paginator = this.paginator;
-      }
-      this.body.next(this.info.body);
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
   show() {
-    const date = moment(this.form.value.date).format('DD-MMM-YYYY');
+    const date = moment(this.model().date).format('DD-MMM-YYYY');
     this.router.navigate(['/mozimo-daily-register', date]);
   }
 
@@ -129,26 +121,29 @@ export class MozimoDailyRegisterComponent implements OnInit {
         this.snackBar.open('', 'Success');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   getMozimoDailyRegister(): MozimoDailyRegister {
-    const formModel = this.form.value;
-    this.info.date = moment(formModel.date).format('DD-MMM-YYYY');
+    const formModel = this.model();
+    const info = this.info();
+    info.date = formModel.date.format('DD-MMM-YYYY');
 
-    const array = this.form.controls.items;
-    this.info.body.forEach((item, index) => {
-      item.received = +(array.controls[index].value.received ?? 0);
-      item.sale = +(array.controls[index].value.sale ?? 0);
-      item.nc = +(array.controls[index].value.nc ?? 0);
-      const display = array.controls[index].value.display ?? null;
-      const ageing = array.controls[index].value.ageing ?? null;
-      item.display = display == null ? null : +display;
-      item.ageing = ageing == null ? null : +ageing;
-    });
-    return this.info;
+    const array = formModel.items;
+    if (array) {
+      info.body.forEach((item, index) => {
+        if (array[index]) {
+          item.received = array[index].received ?? 0;
+          item.sale = array[index].sale ?? 0;
+          item.nc = array[index].nc ?? 0;
+          item.display = array[index].display ?? null;
+          item.ageing = array[index].ageing ?? null;
+        }
+      });
+    }
+    return info;
   }
 
   exportCsv() {
@@ -164,7 +159,7 @@ export class MozimoDailyRegisterComponent implements OnInit {
       Closing: 'closing',
       'Last Edit Date': 'lastEditDate',
     };
-    const d = JSON.parse(JSON.stringify(this.dataSource.data)).map((x: MozimoDailyRegisterItem) => ({
+    const d = JSON.parse(JSON.stringify(this.info().body ?? [])).map((x: MozimoDailyRegisterItem) => ({
       id: x.id,
       product: x.product.name,
       opening: x.opening,
@@ -191,28 +186,33 @@ export class MozimoDailyRegisterComponent implements OnInit {
 
   updateReceived($event: Event, row: MozimoDailyRegisterItem) {
     row.received = +($event.target as HTMLInputElement).value;
-    this.body.next(this.info.body);
+    this.body.set([...this.info().body]);
   }
 
   updateSale($event: Event, row: MozimoDailyRegisterItem) {
     row.sale = +($event.target as HTMLInputElement).value;
-    this.body.next(this.info.body);
+    this.body.set([...this.info().body]);
   }
 
   updateNc($event: Event, row: MozimoDailyRegisterItem) {
     row.nc = +($event.target as HTMLInputElement).value;
-    this.body.next(this.info.body);
+    this.body.set([...this.info().body]);
   }
 
   updateDisplay($event: Event, row: MozimoDailyRegisterItem) {
     const val = ($event.target as HTMLInputElement).value;
     row.display = val === '' ? null : +val;
-    this.body.next(this.info.body);
+    this.body.set([...this.info().body]);
   }
 
   updateAgeing($event: Event, row: MozimoDailyRegisterItem) {
     const val = ($event.target as HTMLInputElement).value;
     row.ageing = val === '' ? null : +val;
-    this.body.next(this.info.body);
+    this.body.set([...this.info().body]);
+  }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
   }
 }
diff --git a/overlord/src/app/mozimo-daily-register/mozimo-daily-register.resolver.spec.ts b/overlord/src/app/mozimo-daily-register/mozimo-daily-register.resolver.spec.ts
deleted file mode 100644
index 0bc1b5c3..00000000
--- a/overlord/src/app/mozimo-daily-register/mozimo-daily-register.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { MozimoDailyRegister } from './mozimo-daily-register';
-import { mozimoDailyRegisterResolver } from './mozimo-daily-register.resolver';
-
-describe('mozimoProductRegisterResolver', () => {
-  const executeResolver: ResolveFn<MozimoDailyRegister> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => mozimoDailyRegisterResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/mozimo-daily-register/mozimo-daily-register.resolver.ts b/overlord/src/app/mozimo-daily-register/mozimo-daily-register.resolver.ts
deleted file mode 100644
index bde661f5..00000000
--- a/overlord/src/app/mozimo-daily-register/mozimo-daily-register.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { MozimoDailyRegister } from './mozimo-daily-register';
-import { MozimoDailyRegisterService } from './mozimo-daily-register.service';
-
-export const mozimoDailyRegisterResolver: ResolveFn<MozimoDailyRegister> = (route) => {
-  const date = route.paramMap.get('date');
-  return inject(MozimoDailyRegisterService).list(date);
-};
diff --git a/overlord/src/app/mozimo-daily-register/mozimo-daily-register.routes.ts b/overlord/src/app/mozimo-daily-register/mozimo-daily-register.routes.ts
index 54a752d7..2a0379da 100644
--- a/overlord/src/app/mozimo-daily-register/mozimo-daily-register.routes.ts
+++ b/overlord/src/app/mozimo-daily-register/mozimo-daily-register.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { MozimoDailyRegisterComponent } from './mozimo-daily-register.component';
-import { mozimoDailyRegisterResolver } from './mozimo-daily-register.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Product Ledger',
     },
-    resolve: {
-      info: mozimoDailyRegisterResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Product Ledger',
     },
-    resolve: {
-      info: mozimoDailyRegisterResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/mozimo-daily-register/mozimo-daily-register.service.ts b/overlord/src/app/mozimo-daily-register/mozimo-daily-register.service.ts
index f34de8a9..2db6392d 100644
--- a/overlord/src/app/mozimo-daily-register/mozimo-daily-register.service.ts
+++ b/overlord/src/app/mozimo-daily-register/mozimo-daily-register.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { MozimoDailyRegister } from './mozimo-daily-register';
 
 const url = '/api/mozimo-daily-register';
-const serviceName = 'MozimoDailyRegisterService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,16 +14,16 @@ export class MozimoDailyRegisterService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(date: string | null): Observable<MozimoDailyRegister> {
-    const listUrl: string = date === null ? url : `${url}/${date}`;
-    return this.http
-      .get<MozimoDailyRegister>(listUrl)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<MozimoDailyRegister>;
+  list(date: Signal<string | null>) {
+    return httpResource<MozimoDailyRegister>(() => {
+      const listUrl: string = date() === null ? url : `${url}/${date()}`;
+      return listUrl;
+    });
   }
 
   save(mozimoProductRegister: MozimoDailyRegister): Observable<MozimoDailyRegister> {
     return this.http
       .post<MozimoDailyRegister>(`${url}/${mozimoProductRegister.date}`, mozimoProductRegister)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<MozimoDailyRegister>;
+      .pipe(catchError(this.log.handleError('MozimoDailyRegisterService', 'save'))) as Observable<MozimoDailyRegister>;
   }
 }
diff --git a/overlord/src/app/mozimo-product-register/mozimo-product-register-datasource.ts b/overlord/src/app/mozimo-product-register/mozimo-product-register-datasource.ts
deleted file mode 100644
index 645bc494..00000000
--- a/overlord/src/app/mozimo-product-register/mozimo-product-register-datasource.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { merge, Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-
-import { MozimoProductRegisterItem } from './mozimo-product-register-item';
-
-export class MozimoProductRegisterDataSource extends DataSource<MozimoProductRegisterItem> {
-  public data: MozimoProductRegisterItem[] = [];
-  public paginator?: MatPaginator;
-  constructor(public dataObs: Observable<MozimoProductRegisterItem[]>) {
-    super();
-  }
-
-  connect(): Observable<MozimoProductRegisterItem[]> {
-    const dataMutations: EventEmitter<PageEvent>[] = [];
-    const d = this.dataObs.pipe(
-      tap((x) => {
-        this.data = x;
-      }),
-    );
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-
-    return merge(d, ...dataMutations).pipe(
-      map(() => this.calculate([...this.data])),
-      tap(() => {
-        if (this.paginator) {
-          this.paginator.length = this.data.length;
-        }
-      }),
-      map((x: MozimoProductRegisterItem[]) => this.getPagedData(x)),
-    );
-  }
-
-  disconnect() {}
-
-  private calculate(data: MozimoProductRegisterItem[]): MozimoProductRegisterItem[] {
-    if (data.length === 0) {
-      return data;
-    }
-    let ob = data[0].opening;
-    data.forEach((item) => {
-      item.opening = ob;
-      if (item.ageing !== null || item.display !== null) {
-        item.closing = (item.ageing ?? 0) + (item.display ?? 0);
-        item.variance = item.opening + item.received - item.sale - item.nc - item.closing;
-      } else {
-        item.closing = item.opening + item.received - item.sale - item.nc;
-        item.variance = 0;
-      }
-      ob = item.closing;
-    });
-    return data;
-  }
-
-  private getPagedData(data: MozimoProductRegisterItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-}
diff --git a/overlord/src/app/mozimo-product-register/mozimo-product-register.component.html b/overlord/src/app/mozimo-product-register/mozimo-product-register.component.html
index 2dba6d84..2e49a27f 100644
--- a/overlord/src/app/mozimo-product-register/mozimo-product-register.component.html
+++ b/overlord/src/app/mozimo-product-register/mozimo-product-register.component.html
@@ -1,23 +1,23 @@
 <h2 class="row-container space-between">
   <span>Mozimo Product Register</span>
-  @if (dataSource.data.length) {
+  @if ((this.info().body ?? []).length) {
     <button mat-icon-button (click)="exportCsv()">
       <mat-icon>save_alt</mat-icon>
     </button>
   }
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
+      <input matInput #startDateElement [matDatepicker]="startDate" [formField]="form.startDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
       <mat-datepicker #startDate></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
@@ -30,7 +30,7 @@
         matInput
         #productElement
         [matAutocomplete]="auto"
-        formControlName="product"
+        [formField]="form.product"
         autocomplete="off"
       />
       <mat-autocomplete
@@ -39,116 +39,137 @@
         [displayWith]="displayFn"
         (optionSelected)="selected($event)"
       >
-        @for (product of products | async; track product) {
+        @for (product of products(); track product) {
           <mat-option [value]="product">{{ product.name }}</mat-option>
         }
       </mat-autocomplete>
     </mat-form-field>
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
-  <mat-table #table [dataSource]="dataSource" aria-label="Elements" formArrayName="items">
-    <!-- Date Column -->
-    <ng-container matColumnDef="date">
-      <mat-header-cell *matHeaderCellDef class="center first">Date</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center first">
-        <span
-          matBadge="1"
-          matBadgeSize="small"
-          [matBadgeHidden]="!row.lastEditDate"
-          matTooltip="{{ row.lastEditDate | localTime }}"
-          [matTooltipDisabled]="!row.lastEditDate"
-          >{{ row.date }}</span
-        >
-      </mat-cell>
-    </ng-container>
+  @if (infoResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (infoResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+  } @else {
+    <mat-table #table [dataSource]="dataSource()">
+      <!-- Date Column -->
+      <ng-container matColumnDef="date">
+        <mat-header-cell *matHeaderCellDef class="center first">Date</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="center first">
+          <span
+            matBadge="1"
+            matBadgeSize="small"
+            [matBadgeHidden]="!row.lastEditDate"
+            matTooltip="{{ row.lastEditDate | localTime }}"
+            [matTooltipDisabled]="!row.lastEditDate"
+            >{{ row.date }}</span
+          >
+        </mat-cell>
+      </ng-container>
 
-    <!-- Opening Column -->
-    <ng-container matColumnDef="opening">
-      <mat-header-cell *matHeaderCellDef class="right middle">Opening</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right middle">{{ row.opening | number: '0.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Opening Column -->
+      <ng-container matColumnDef="opening">
+        <mat-header-cell *matHeaderCellDef class="right middle">Opening</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right middle">{{ row.opening | number: '0.2-2' }}</mat-cell>
+      </ng-container>
 
-    <!-- Received Column -->
-    <ng-container matColumnDef="received">
-      <mat-header-cell *matHeaderCellDef class="middle">Received</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-        <mat-form-field class="flex-auto">
-          <mat-label>Received</mat-label>
-          <input matInput type="number" formControlName="received" (change)="updateReceived($event, row)" />
-        </mat-form-field>
-      </mat-cell>
-    </ng-container>
+      <!-- Received Column -->
+      <ng-container matColumnDef="received">
+        <mat-header-cell *matHeaderCellDef class="middle">Received</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="middle">
+          @if (form.items[i]) {
+            <mat-form-field class="flex-auto">
+              <mat-label>Received</mat-label>
+              <input
+                matInput
+                type="number"
+                [formField]="form.items[i].received"
+                (change)="updateReceived($event, row)"
+              />
+            </mat-form-field>
+          }
+        </mat-cell>
+      </ng-container>
 
-    <!-- Sale Column -->
-    <ng-container matColumnDef="sale">
-      <mat-header-cell *matHeaderCellDef class="middle">Sale</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-        <mat-form-field class="flex-auto">
-          <mat-label>Sale</mat-label>
-          <input matInput type="number" formControlName="sale" (change)="updateSale($event, row)" />
-        </mat-form-field>
-      </mat-cell>
-    </ng-container>
+      <!-- Sale Column -->
+      <ng-container matColumnDef="sale">
+        <mat-header-cell *matHeaderCellDef class="middle">Sale</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="middle">
+          @if (form.items[i]) {
+            <mat-form-field class="flex-auto">
+              <mat-label>Sale</mat-label>
+              <input matInput type="number" [formField]="form.items[i].sale" (change)="updateSale($event, row)" />
+            </mat-form-field>
+          }
+        </mat-cell>
+      </ng-container>
 
-    <!-- Nc Column -->
-    <ng-container matColumnDef="nc">
-      <mat-header-cell *matHeaderCellDef class="middle">Nc</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-        <mat-form-field class="flex-auto">
-          <mat-label>Nc</mat-label>
-          <input matInput type="number" formControlName="nc" (change)="updateNc($event, row)" />
-        </mat-form-field>
-      </mat-cell>
-    </ng-container>
+      <!-- Nc Column -->
+      <ng-container matColumnDef="nc">
+        <mat-header-cell *matHeaderCellDef class="middle">Nc</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="middle">
+          @if (form.items[i]) {
+            <mat-form-field class="flex-auto">
+              <mat-label>Nc</mat-label>
+              <input matInput type="number" [formField]="form.items[i].nc" (change)="updateNc($event, row)" />
+            </mat-form-field>
+          }
+        </mat-cell>
+      </ng-container>
 
-    <!-- Display Column -->
-    <ng-container matColumnDef="display">
-      <mat-header-cell *matHeaderCellDef class="middle">Display</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-        <mat-form-field class="flex-auto">
-          <mat-label>Display</mat-label>
-          <input matInput type="number" formControlName="display" (change)="updateDisplay($event, row)" />
-        </mat-form-field>
-      </mat-cell>
-    </ng-container>
+      <!-- Display Column -->
+      <ng-container matColumnDef="display">
+        <mat-header-cell *matHeaderCellDef class="middle">Display</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="middle">
+          @if (form.items[i]) {
+            <mat-form-field class="flex-auto">
+              <mat-label>Display</mat-label>
+              <input matInput type="number" [formField]="form.items[i].display" (change)="updateDisplay($event, row)" />
+            </mat-form-field>
+          }
+        </mat-cell>
+      </ng-container>
 
-    <!-- Ageing Column -->
-    <ng-container matColumnDef="ageing">
-      <mat-header-cell *matHeaderCellDef class="middle">Ageing</mat-header-cell>
-      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="middle">
-        <mat-form-field class="flex-auto">
-          <mat-label>Ageing</mat-label>
-          <input matInput type="number" formControlName="ageing" (change)="updateAgeing($event, row)" />
-        </mat-form-field>
-      </mat-cell>
-    </ng-container>
+      <!-- Ageing Column -->
+      <ng-container matColumnDef="ageing">
+        <mat-header-cell *matHeaderCellDef class="middle">Ageing</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="middle">
+          @if (form.items[i]) {
+            <mat-form-field class="flex-auto">
+              <mat-label>Ageing</mat-label>
+              <input matInput type="number" [formField]="form.items[i].ageing" (change)="updateAgeing($event, row)" />
+            </mat-form-field>
+          }
+        </mat-cell>
+      </ng-container>
 
-    <!-- Variance Column -->
-    <ng-container matColumnDef="variance">
-      <mat-header-cell *matHeaderCellDef class="right middle">Variance</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right middle">{{ row.variance | number: '0.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Variance Column -->
+      <ng-container matColumnDef="variance">
+        <mat-header-cell *matHeaderCellDef class="right middle">Variance</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right middle">{{ row.variance | number: '0.2-2' }}</mat-cell>
+      </ng-container>
 
-    <!-- Closing Column -->
-    <ng-container matColumnDef="closing">
-      <mat-header-cell *matHeaderCellDef class="right last">Closing</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right last">{{ row.closing | number: '0.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Closing Column -->
+      <ng-container matColumnDef="closing">
+        <mat-header-cell *matHeaderCellDef class="right last">Closing</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right last">{{ row.closing | number: '0.2-2' }}</mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
 
-  <mat-paginator
-    #paginator
-    [length]="dataSource.data.length"
-    [pageIndex]="0"
-    [pageSize]="50"
-    [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
-  >
-  </mat-paginator>
+    <mat-paginator
+      (page)="handlePageEvent($event)"
+      [length]="(this.info().body ?? []).length"
+      [pageIndex]="pageIndex()"
+      [pageSize]="pageSize()"
+      [pageSizeOptions]="[25, 50, 100, 250, 300, 5000]"
+    >
+    </mat-paginator>
+  }
 </form>
 
 <div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
+  <button mat-raised-button color="primary" (click)="save()">Save</button>
 </div>
diff --git a/overlord/src/app/mozimo-product-register/mozimo-product-register.component.ts b/overlord/src/app/mozimo-product-register/mozimo-product-register.component.ts
index 5d958d6c..20aa3a70 100644
--- a/overlord/src/app/mozimo-product-register/mozimo-product-register.component.ts
+++ b/overlord/src/app/mozimo-product-register/mozimo-product-register.component.ts
@@ -1,6 +1,6 @@
-import { AsyncPipe, DecimalPipe } from '@angular/common';
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { DecimalPipe } from '@angular/common';
+import { signal, computed, Component, inject, input, linkedSignal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
@@ -8,37 +8,48 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject, debounceTime, distinctUntilChanged, Observable, of as observableOf, switchMap } from 'rxjs';
 
 import { AuthService } from '../auth/auth.service';
 import { Product } from '../core/product';
-import { ProductSku } from '../core/product-sku';
 import { ProductService } from '../product/product.service';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
 import { LocalTimePipe } from '../shared/local-time.pipe';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { ToCsvService } from '../shared/to-csv.service';
 import { MozimoProductRegister } from './mozimo-product-register';
-import { MozimoProductRegisterDataSource } from './mozimo-product-register-datasource';
 import { MozimoProductRegisterItem } from './mozimo-product-register-item';
 import { MozimoProductRegisterService } from './mozimo-product-register.service';
 
+export interface MozimoProductRegisterFormData {
+  startDate: moment.Moment;
+  finishDate: moment.Moment;
+  product: Product | string | null;
+  items: {
+    received: number;
+    sale: number;
+    nc: number;
+    display: number | null;
+    ageing: number | null;
+  }[];
+}
+
 @Component({
   selector: 'app-mozimo-product-register',
   templateUrl: './mozimo-product-register.component.html',
   styleUrls: ['./mozimo-product-register.component.css'],
+
   imports: [
-    AsyncPipe,
     DecimalPipe,
     LocalTimePipe,
     MatAutocompleteModule,
     MatBadgeModule,
     MatButtonModule,
-
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
@@ -46,12 +57,15 @@ import { MozimoProductRegisterService } from './mozimo-product-register.service'
     MatPaginatorModule,
     MatTableModule,
     MatTooltipModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
   providers: [LocalTimePipe],
 })
-export class MozimoProductRegisterComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class MozimoProductRegisterComponent {
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   private localTimePipe = inject(LocalTimePipe);
@@ -60,88 +74,64 @@ export class MozimoProductRegisterComponent implements OnInit {
   private ser = inject(MozimoProductRegisterService);
   private productSer = inject(ProductService);
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  info: MozimoProductRegister = new MozimoProductRegister();
-  body = new BehaviorSubject<MozimoProductRegisterItem[]>([]);
-  dataSource: MozimoProductRegisterDataSource = new MozimoProductRegisterDataSource(this.body);
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  infoResource = this.ser.list(this.id, this.startDate, this.finishDate);
+  info = computed(() => this.infoResource.value() ?? new MozimoProductRegister());
+
+  model = linkedSignal({
+    source: this.info,
+    computation: (v): MozimoProductRegisterFormData => ({
+      startDate: moment(v.startDate, 'DD-MMM-YYYY'),
+      finishDate: moment(v.finishDate, 'DD-MMM-YYYY'),
+      product: v.product ?? '',
+      items: v.body.map((x) => ({
+        received: x.received,
+        sale: x.sale,
+        nc: x.nc,
+        display: x.display,
+        ageing: x.ageing,
+      })),
+    }),
+  });
+
+  body = linkedSignal(() => this.info().body);
+
+  dataSource = computed(() => {
+    const data = this.info().body ?? [];
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  form = createForm(this.model);
 
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-    product: FormControl<string | null>;
-    items: FormArray<
-      FormGroup<{
-        received: FormControl<number>;
-        sale: FormControl<number>;
-        nc: FormControl<number>;
-        display: FormControl<number | null>;
-        ageing: FormControl<number | null>;
-      }>
-    >;
-  }>;
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-
   displayedColumns = ['date', 'opening', 'received', 'sale', 'nc', 'display', 'ageing', 'variance', 'closing'];
 
-  products: Observable<ProductSku[]>;
+  productSearch = computed(() => {
+    const v = this.model().product;
+    return typeof v === 'string' ? v : null;
+  });
 
-  constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      product: new FormControl<string | null>(null),
-      items: new FormArray<
-        FormGroup<{
-          received: FormControl<number>;
-          sale: FormControl<number>;
-          nc: FormControl<number>;
-          display: FormControl<number | null>;
-          ageing: FormControl<number | null>;
-        }>
-      >([]),
-    });
+  productsResource = this.productSer.autocompleteSku(
+    this.productSearch,
+    signal(null),
+    signal<string | null>(null),
+    signal<string | null>(null),
+  );
 
-    this.products = this.form.controls.product.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.productSer.autocompleteSku(x, null))),
-    );
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: MozimoProductRegister };
-      this.info = data.info;
-      this.form.patchValue({
-        product: this.info.product?.name ?? '',
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
-      });
-      this.form.controls.items.clear();
-      this.info.body.forEach((x) =>
-        this.form.controls.items.push(
-          new FormGroup({
-            received: new FormControl(x.received, { nonNullable: true, validators: [Validators.min(0)] }),
-            sale: new FormControl(x.sale, { nonNullable: true, validators: [Validators.min(0)] }),
-            nc: new FormControl(x.nc, { nonNullable: true, validators: [Validators.min(0)] }),
-            display: new FormControl(x.display, { nonNullable: false, validators: [Validators.min(0)] }),
-            ageing: new FormControl(x.ageing, { nonNullable: false, validators: [Validators.min(0)] }),
-          }),
-        ),
-      );
-      if (!this.dataSource.paginator) {
-        this.dataSource.paginator = this.paginator;
-      }
-      this.body.next(this.info.body);
-    });
-  }
+  products = computed(() => this.productsResource.value() ?? []);
 
   displayFn(product?: Product | string): string {
     return !product ? '' : typeof product === 'string' ? product : product.name;
   }
 
   selected(event: MatAutocompleteSelectedEvent): void {
-    this.info.product = event.option.value;
+    this.model.update((m) => ({ ...m, product: event.option.value }));
   }
 
   show() {
@@ -162,36 +152,39 @@ export class MozimoProductRegisterComponent implements OnInit {
         this.snackBar.open('', 'Success');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   getMozimoProductRegister(): MozimoProductRegister {
-    const formModel = this.form.value;
-    this.info.startDate = moment(formModel.startDate).format('DD-MMM-YYYY');
-    this.info.finishDate = moment(formModel.finishDate).format('DD-MMM-YYYY');
+    const formModel = this.model();
+    const info = this.info();
+    info.startDate = formModel.startDate.format('DD-MMM-YYYY');
+    info.finishDate = formModel.finishDate.format('DD-MMM-YYYY');
 
-    const array = this.form.controls.items;
-    this.info.body.forEach((item, index) => {
-      item.received = +(array.controls[index].value.received ?? 0);
-      item.sale = +(array.controls[index].value.sale ?? 0);
-      item.nc = +(array.controls[index].value.nc ?? 0);
-      const display = array.controls[index].value.display ?? null;
-      const ageing = array.controls[index].value.ageing ?? null;
-      item.display = display == null ? null : +display;
-      item.ageing = ageing == null ? null : +ageing;
-    });
-    return this.info;
+    const array = formModel.items;
+    if (array) {
+      info.body.forEach((item, index) => {
+        if (array[index]) {
+          item.received = array[index].received ?? 0;
+          item.sale = array[index].sale ?? 0;
+          item.nc = array[index].nc ?? 0;
+          item.display = array[index].display ?? null;
+          item.ageing = array[index].ageing ?? null;
+        }
+      });
+    }
+    return info;
   }
 
   getInfo(): MozimoProductRegister {
-    const formModel = this.form.value;
+    const formModel = this.model();
 
     return new MozimoProductRegister({
-      product: this.info.product,
-      startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
-      finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
+      product: formModel.product as Product,
+      startDate: formModel.startDate.format('DD-MMM-YYYY'),
+      finishDate: formModel.finishDate.format('DD-MMM-YYYY'),
     });
   }
 
@@ -209,7 +202,7 @@ export class MozimoProductRegisterComponent implements OnInit {
       'Last Edit Date': 'lastEditDate',
     };
 
-    const d = JSON.parse(JSON.stringify(this.dataSource.data));
+    const d = JSON.parse(JSON.stringify(this.info().body ?? []));
     d.forEach(
       (x: MozimoProductRegisterItem) =>
         (x.lastEditDate = x.lastEditDate ? this.localTimePipe.transform(x.lastEditDate ?? '') : 'Unsaved'),
@@ -228,28 +221,33 @@ export class MozimoProductRegisterComponent implements OnInit {
 
   updateReceived($event: Event, row: MozimoProductRegisterItem) {
     row.received = +($event.target as HTMLInputElement).value;
-    this.body.next(this.info.body);
+    this.body.set([...this.info().body]);
   }
 
   updateSale($event: Event, row: MozimoProductRegisterItem) {
     row.sale = +($event.target as HTMLInputElement).value;
-    this.body.next(this.info.body);
+    this.body.set([...this.info().body]);
   }
 
   updateNc($event: Event, row: MozimoProductRegisterItem) {
     row.nc = +($event.target as HTMLInputElement).value;
-    this.body.next(this.info.body);
+    this.body.set([...this.info().body]);
   }
 
   updateDisplay($event: Event, row: MozimoProductRegisterItem) {
     const val = ($event.target as HTMLInputElement).value;
     row.display = val === '' ? null : +val;
-    this.body.next(this.info.body);
+    this.body.set([...this.info().body]);
   }
 
   updateAgeing($event: Event, row: MozimoProductRegisterItem) {
     const val = ($event.target as HTMLInputElement).value;
     row.ageing = val === '' ? null : +val;
-    this.body.next(this.info.body);
+    this.body.set([...this.info().body]);
+  }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
   }
 }
diff --git a/overlord/src/app/mozimo-product-register/mozimo-product-register.resolver.spec.ts b/overlord/src/app/mozimo-product-register/mozimo-product-register.resolver.spec.ts
deleted file mode 100644
index d7750b7e..00000000
--- a/overlord/src/app/mozimo-product-register/mozimo-product-register.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { MozimoProductRegister } from './mozimo-product-register';
-import { mozimoProductRegisterResolver } from './mozimo-product-register.resolver';
-
-describe('mozimoProductRegisterResolver', () => {
-  const executeResolver: ResolveFn<MozimoProductRegister> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => mozimoProductRegisterResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/mozimo-product-register/mozimo-product-register.resolver.ts b/overlord/src/app/mozimo-product-register/mozimo-product-register.resolver.ts
deleted file mode 100644
index 8a9b9ddd..00000000
--- a/overlord/src/app/mozimo-product-register/mozimo-product-register.resolver.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { MozimoProductRegister } from './mozimo-product-register';
-import { MozimoProductRegisterService } from './mozimo-product-register.service';
-
-export const mozimoProductRegisterResolver: ResolveFn<MozimoProductRegister> = (route) => {
-  const id = route.paramMap.get('id');
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(MozimoProductRegisterService).list(id, startDate, finishDate);
-};
diff --git a/overlord/src/app/mozimo-product-register/mozimo-product-register.routes.ts b/overlord/src/app/mozimo-product-register/mozimo-product-register.routes.ts
index 2f87e301..69ae81fe 100644
--- a/overlord/src/app/mozimo-product-register/mozimo-product-register.routes.ts
+++ b/overlord/src/app/mozimo-product-register/mozimo-product-register.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { MozimoProductRegisterComponent } from './mozimo-product-register.component';
-import { mozimoProductRegisterResolver } from './mozimo-product-register.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Product Ledger',
     },
-    resolve: {
-      info: mozimoProductRegisterResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Product Ledger',
     },
-    resolve: {
-      info: mozimoProductRegisterResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/mozimo-product-register/mozimo-product-register.service.ts b/overlord/src/app/mozimo-product-register/mozimo-product-register.service.ts
index e89da508..d83ba7c2 100644
--- a/overlord/src/app/mozimo-product-register/mozimo-product-register.service.ts
+++ b/overlord/src/app/mozimo-product-register/mozimo-product-register.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, HttpParams, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { MozimoProductRegister } from './mozimo-product-register';
 
 const url = '/api/mozimo-product-register';
-const serviceName = 'MozimoProductRegisterService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,37 +14,41 @@ export class MozimoProductRegisterService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(id: string | null, startDate: string | null, finishDate: string | null): Observable<MozimoProductRegister> {
-    const listUrl = id === null ? url : `${url}/${id}`;
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    return this.http
-      .get<MozimoProductRegister>(listUrl, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<MozimoProductRegister>;
+  list(id: Signal<string | null>, startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<MozimoProductRegister>(() => {
+      const listUrl = id() === null ? url : `${url}/${id()}`;
+      const params: Record<string, string> = {};
+      const startDate_val = startDate();
+      if (startDate_val !== null) params['s'] = startDate_val;
+      const finishDate_val = finishDate();
+      if (finishDate_val !== null) params['f'] = finishDate_val;
+      return { url: listUrl, params };
+    });
   }
 
   save(mozimoProductRegister: MozimoProductRegister): Observable<MozimoProductRegister> {
     return this.http
       .post<MozimoProductRegister>(url, mozimoProductRegister)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<MozimoProductRegister>;
+      .pipe(
+        catchError(this.log.handleError('MozimoProductRegisterService', 'save')),
+      ) as Observable<MozimoProductRegister>;
   }
 
   post(date: string, costCentre: string): Observable<MozimoProductRegister> {
     const options = { params: new HttpParams().set('d', costCentre) };
     return this.http
       .post<MozimoProductRegister>(`${url}/${date}`, {}, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'Post Voucher'))) as Observable<MozimoProductRegister>;
+      .pipe(
+        catchError(this.log.handleError('MozimoProductRegisterService', 'Post Voucher')),
+      ) as Observable<MozimoProductRegister>;
   }
 
   delete(date: string, costCentre: string): Observable<MozimoProductRegister> {
     const options = { params: new HttpParams().set('d', costCentre) };
     return this.http
       .delete<MozimoProductRegister>(`${url}/${date}`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'Delete Voucher'))) as Observable<MozimoProductRegister>;
+      .pipe(
+        catchError(this.log.handleError('MozimoProductRegisterService', 'Delete Voucher')),
+      ) as Observable<MozimoProductRegister>;
   }
 }
diff --git a/overlord/src/app/net-transactions/net-transactions-datasource.ts b/overlord/src/app/net-transactions/net-transactions-datasource.ts
deleted file mode 100644
index 86528951..00000000
--- a/overlord/src/app/net-transactions/net-transactions-datasource.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { NetTransactionsItem } from './net-transactions-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class NetTransactionsDataSource extends DataSource<NetTransactionsItem> {
-  constructor(
-    public data: NetTransactionsItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<NetTransactionsItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: NetTransactionsItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: NetTransactionsItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        case 'type':
-          return compare(a.type, b.type, isAsc);
-        case 'debit':
-          return compare(+a.debit, +b.debit, isAsc);
-        case 'credit':
-          return compare(+a.credit, +b.credit, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/net-transactions/net-transactions.component.html b/overlord/src/app/net-transactions/net-transactions.component.html
index de4b660f..6431d7b5 100644
--- a/overlord/src/app/net-transactions/net-transactions.component.html
+++ b/overlord/src/app/net-transactions/net-transactions.component.html
@@ -1,56 +1,62 @@
 <h2>Net Transactions</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
-      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-      <mat-datepicker #startDate></mat-datepicker>
+      <input matInput [matDatepicker]="startDatePicker" [formField]="form.startDate" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #startDatePicker></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Type Column -->
-  <ng-container matColumnDef="type">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
-  </ng-container>
+@if (infoResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (infoResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Type Column -->
+    <ng-container matColumnDef="type">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
+    </ng-container>
 
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-  </ng-container>
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+    </ng-container>
 
-  <!-- Debit Column -->
-  <ng-container matColumnDef="debit">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | accounting }}</mat-cell>
-  </ng-container>
+    <!-- Debit Column -->
+    <ng-container matColumnDef="debit">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | accounting }}</mat-cell>
+    </ng-container>
 
-  <!-- Credit Column -->
-  <ng-container matColumnDef="credit">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | accounting }}</mat-cell>
-  </ng-container>
+    <!-- Credit Column -->
+    <ng-container matColumnDef="credit">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | accounting }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="(this.info().body ?? []).length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/net-transactions/net-transactions.component.ts b/overlord/src/app/net-transactions/net-transactions.component.ts
index ab82b988..c0e314d0 100644
--- a/overlord/src/app/net-transactions/net-transactions.component.ts
+++ b/overlord/src/app/net-transactions/net-transactions.component.ts
@@ -1,26 +1,33 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, input, linkedSignal, computed, afterNextRender, signal } from '@angular/core';
+export interface NetTransactionsFormData {
+  startDate: Date;
+  finishDate: Date;
+}
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { AccountingPipe } from '../shared/accounting.pipe';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { NetTransactions } from './net-transactions';
-import { NetTransactionsDataSource } from './net-transactions-datasource';
+import { NetTransactionsService } from './net-transactions.service';
 
 @Component({
   selector: 'app-net-transactions',
   templateUrl: './net-transactions.component.html',
   styleUrls: ['./net-transactions.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -30,21 +37,67 @@ import { NetTransactionsDataSource } from './net-transactions-datasource';
     MatPaginatorModule,
     CurrencyPipe,
     AccountingPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class NetTransactionsComponent implements OnInit {
-  private route = inject(ActivatedRoute);
-  private router = inject(Router);
+export class NetTransactionsComponent {
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  info: NetTransactions = new NetTransactions();
-  dataSource: NetTransactionsDataSource = new NetTransactionsDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-  }>;
+  private router = inject(Router);
+  private ser = inject(NetTransactionsService);
+
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  infoResource = this.ser.list(this.startDate, this.finishDate);
+
+  info = computed(() => this.infoResource.value() ?? new NetTransactions());
+  sortedList = computed(() => {
+    const data = this.info().body ?? [];
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'type':
+          return compare(a.type, b.type, isAsc);
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'debit':
+          return compare(a.debit, b.debit, isAsc);
+        case 'credit':
+          return compare(a.credit, b.credit, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  model = linkedSignal<import('./net-transactions').NetTransactions, NetTransactionsFormData>({
+    source: this.info,
+    computation: (info: NetTransactions): NetTransactionsFormData => ({
+      startDate: info.startDate ? moment(info.startDate, 'DD-MMM-YYYY').toDate() : new Date(),
+      finishDate: info.finishDate ? moment(info.finishDate, 'DD-MMM-YYYY').toDate() : new Date(),
+    }),
+  });
+
+  form = createForm(this.model);
 
   selectedRowId = '';
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -53,27 +106,13 @@ export class NetTransactionsComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
+    // TODO: Also select the text
+    this.form.startDate().focusBoundControl();
   }
 
   constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: NetTransactions };
-
-      this.info = data.info;
-      this.form.setValue({
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new NetTransactionsDataSource(this.info.body, this.paginator, this.sort);
+    afterNextRender(() => {
+      this.form.startDate().focusBoundControl();
     });
   }
 
@@ -88,11 +127,23 @@ export class NetTransactionsComponent implements OnInit {
   }
 
   prepareSubmit(): NetTransactions {
-    const formModel = this.form.value;
+    const formModel = this.model();
 
     return new NetTransactions({
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
       finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
     });
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/net-transactions/net-transactions.resolver.spec.ts b/overlord/src/app/net-transactions/net-transactions.resolver.spec.ts
deleted file mode 100644
index a491b386..00000000
--- a/overlord/src/app/net-transactions/net-transactions.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { NetTransactions } from './net-transactions';
-import { netTransactionsResolver } from './net-transactions.resolver';
-
-describe('netTransactionsResolver', () => {
-  const executeResolver: ResolveFn<NetTransactions> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => netTransactionsResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/net-transactions/net-transactions.resolver.ts b/overlord/src/app/net-transactions/net-transactions.resolver.ts
deleted file mode 100644
index 70c8a4be..00000000
--- a/overlord/src/app/net-transactions/net-transactions.resolver.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { NetTransactions } from './net-transactions';
-import { NetTransactionsService } from './net-transactions.service';
-
-export const netTransactionsResolver: ResolveFn<NetTransactions> = (route) => {
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(NetTransactionsService).list(startDate, finishDate);
-};
diff --git a/overlord/src/app/net-transactions/net-transactions.routes.ts b/overlord/src/app/net-transactions/net-transactions.routes.ts
index 8545452c..6c17d5b1 100644
--- a/overlord/src/app/net-transactions/net-transactions.routes.ts
+++ b/overlord/src/app/net-transactions/net-transactions.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { NetTransactionsComponent } from './net-transactions.component';
-import { netTransactionsResolver } from './net-transactions.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Net Transactions',
     },
-    resolve: {
-      info: netTransactionsResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/net-transactions/net-transactions.service.ts b/overlord/src/app/net-transactions/net-transactions.service.ts
index 4afcdfd6..6046966d 100644
--- a/overlord/src/app/net-transactions/net-transactions.service.ts
+++ b/overlord/src/app/net-transactions/net-transactions.service.ts
@@ -1,31 +1,21 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { httpResource } from '@angular/common/http';
+import { Injectable, Signal } from '@angular/core';
 
-import { ErrorLoggerService } from '../core/error-logger.service';
 import { NetTransactions } from './net-transactions';
 
 const url = '/api/net-transactions';
-const serviceName = 'NetTransactionsService';
-
 @Injectable({
   providedIn: 'root',
 })
 export class NetTransactionsService {
-  private http = inject(HttpClient);
-  private log = inject(ErrorLoggerService);
-
-  list(startDate: string | null, finishDate: string | null): Observable<NetTransactions> {
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    return this.http
-      .get<NetTransactions>(url, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<NetTransactions>;
+  list(startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<NetTransactions>(() => {
+      const params: Record<string, string> = {};
+      const startDate_val = startDate();
+      if (startDate_val !== null) params['s'] = startDate_val;
+      const finishDate_val = finishDate();
+      if (finishDate_val !== null) params['f'] = finishDate_val;
+      return { url, params };
+    });
   }
 }
diff --git a/overlord/src/app/non-contact-purchase/non-contract-purchase-datasource.ts b/overlord/src/app/non-contact-purchase/non-contract-purchase-datasource.ts
deleted file mode 100644
index 93dd01b2..00000000
--- a/overlord/src/app/non-contact-purchase/non-contract-purchase-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable, of as observableOf } from 'rxjs';
-
-import { NonContractPurchase } from './non-contract-purchase';
-
-export class NonContractPurchaseDatasource extends DataSource<NonContractPurchase> {
-  constructor(public data: NonContractPurchase[]) {
-    super();
-  }
-
-  connect(): Observable<NonContractPurchase[]> {
-    return observableOf(this.data);
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/non-contact-purchase/non-contract-purchase.component.html b/overlord/src/app/non-contact-purchase/non-contract-purchase.component.html
index 5aed6333..e109cf5b 100644
--- a/overlord/src/app/non-contact-purchase/non-contract-purchase.component.html
+++ b/overlord/src/app/non-contact-purchase/non-contract-purchase.component.html
@@ -1,38 +1,44 @@
 <h2>Non Contract Purchases</h2>
 
-<mat-table [dataSource]="dataSource" aria-label="Elements">
-  <!-- Date Column -->
-  <ng-container matColumnDef="date">
-    <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
-  </ng-container>
+@if (infoResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (infoResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+} @else {
+  <mat-table [dataSource]="dataSource()">
+    <!-- Date Column -->
+    <ng-container matColumnDef="date">
+      <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
+    </ng-container>
 
-  <!-- Vendor Column -->
-  <ng-container matColumnDef="vendor">
-    <mat-header-cell *matHeaderCellDef>Vendor</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="row.url">{{ row.vendor }}</a></mat-cell
-    >
-  </ng-container>
+    <!-- Vendor Column -->
+    <ng-container matColumnDef="vendor">
+      <mat-header-cell *matHeaderCellDef>Vendor</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="row.url">{{ row.vendor }}</a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Product Column -->
-  <ng-container matColumnDef="product">
-    <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.product }}</mat-cell>
-  </ng-container>
+    <!-- Product Column -->
+    <ng-container matColumnDef="product">
+      <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.product }}</mat-cell>
+    </ng-container>
 
-  <!-- Contract Price Column -->
-  <ng-container matColumnDef="contractPrice">
-    <mat-header-cell *matHeaderCellDef class="right">Contract</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.contractPrice | currency: 'INR' }}</mat-cell>
-  </ng-container>
+    <!-- Contract Price Column -->
+    <ng-container matColumnDef="contractPrice">
+      <mat-header-cell *matHeaderCellDef class="right">Contract</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.contractPrice | currency: 'INR' }}</mat-cell>
+    </ng-container>
 
-  <!-- Purchase Price Column -->
-  <ng-container matColumnDef="purchasePrice">
-    <mat-header-cell *matHeaderCellDef class="right">Purchase</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.purchasePrice | currency: 'INR' }}</mat-cell>
-  </ng-container>
+    <!-- Purchase Price Column -->
+    <ng-container matColumnDef="purchasePrice">
+      <mat-header-cell *matHeaderCellDef class="right">Purchase</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.purchasePrice | currency: 'INR' }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
+}
diff --git a/overlord/src/app/non-contact-purchase/non-contract-purchase.component.ts b/overlord/src/app/non-contact-purchase/non-contract-purchase.component.ts
index 24ff3705..ead3767a 100644
--- a/overlord/src/app/non-contact-purchase/non-contract-purchase.component.ts
+++ b/overlord/src/app/non-contact-purchase/non-contract-purchase.component.ts
@@ -1,33 +1,30 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, inject, computed } from '@angular/core';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 
-import { NonContractPurchase } from './non-contract-purchase';
-import { NonContractPurchaseDatasource } from './non-contract-purchase-datasource';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
+import { NonContractPurchaseService } from './non-contract-purchase.service';
 
 @Component({
   selector: 'app-non-contract-purchase',
   templateUrl: './non-contract-purchase.component.html',
   styleUrls: ['./non-contract-purchase.component.css'],
-  imports: [MatTableModule, RouterModule, CurrencyPipe],
+  imports: [MatTableModule, RouterModule, CurrencyPipe, SkeletonLoaderComponent, ErrorStateComponent],
 })
-export class NonContractPurchaseComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class NonContractPurchaseComponent {
   private router = inject(Router);
+  private nonContractSer = inject(NonContractPurchaseService);
+
+  infoResource = this.nonContractSer.nonContractPurchase();
+
+  dataSource = computed(() => {
+    return this.infoResource.value() ?? [];
+  });
 
-  info: NonContractPurchase[] = [];
-  dataSource: NonContractPurchaseDatasource = new NonContractPurchaseDatasource(this.info);
   displayedColumns = ['date', 'vendor', 'product', 'contractPrice', 'purchasePrice'];
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: NonContractPurchase[] };
-      this.info = data.info;
-      this.dataSource = new NonContractPurchaseDatasource(this.info);
-    });
-  }
-
   refresh() {
     this.router.navigate([]);
   }
diff --git a/overlord/src/app/non-contact-purchase/non-contract-purchase.resolver.spec.ts b/overlord/src/app/non-contact-purchase/non-contract-purchase.resolver.spec.ts
deleted file mode 100644
index ece1807a..00000000
--- a/overlord/src/app/non-contact-purchase/non-contract-purchase.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { NonContractPurchase } from './non-contract-purchase';
-import { nonContractPurchaseResolver } from './non-contract-purchase.resolver';
-
-describe('nonContractPurchaseResolver', () => {
-  const executeResolver: ResolveFn<NonContractPurchase[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => nonContractPurchaseResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/non-contact-purchase/non-contract-purchase.resolver.ts b/overlord/src/app/non-contact-purchase/non-contract-purchase.resolver.ts
deleted file mode 100644
index 8c003b21..00000000
--- a/overlord/src/app/non-contact-purchase/non-contract-purchase.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { NonContractPurchase } from './non-contract-purchase';
-import { NonContractPurchaseService } from './non-contract-purchase.service';
-
-export const nonContractPurchaseResolver: ResolveFn<NonContractPurchase[]> = () => {
-  return inject(NonContractPurchaseService).nonContractPurchase();
-};
diff --git a/overlord/src/app/non-contact-purchase/non-contract-purchase.routes.ts b/overlord/src/app/non-contact-purchase/non-contract-purchase.routes.ts
index ffb89dd7..19454f30 100644
--- a/overlord/src/app/non-contact-purchase/non-contract-purchase.routes.ts
+++ b/overlord/src/app/non-contact-purchase/non-contract-purchase.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { NonContractPurchaseComponent } from './non-contract-purchase.component';
-import { nonContractPurchaseResolver } from './non-contract-purchase.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Product Ledger',
     },
-    resolve: {
-      info: nonContractPurchaseResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/non-contact-purchase/non-contract-purchase.service.ts b/overlord/src/app/non-contact-purchase/non-contract-purchase.service.ts
index c6cdb7b4..a2573dfd 100644
--- a/overlord/src/app/non-contact-purchase/non-contract-purchase.service.ts
+++ b/overlord/src/app/non-contact-purchase/non-contract-purchase.service.ts
@@ -1,24 +1,18 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { httpResource } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 
-import { ErrorLoggerService } from '../core/error-logger.service';
 import { NonContractPurchase } from './non-contract-purchase';
 
 const url = '/api/non-contract-purchase';
-const serviceName = 'NonContractPurchaseService';
-
 @Injectable({
   providedIn: 'root',
 })
 export class NonContractPurchaseService {
-  private http = inject(HttpClient);
-  private log = inject(ErrorLoggerService);
-
-  nonContractPurchase(): Observable<NonContractPurchase[]> {
-    return this.http
-      .post<NonContractPurchase[]>(url, {})
-      .pipe(catchError(this.log.handleError(serviceName, 'nonContractPurchase'))) as Observable<NonContractPurchase[]>;
+  nonContractPurchase() {
+    return httpResource<NonContractPurchase[]>(() => ({
+      url: url,
+      method: 'POST',
+      body: {},
+    }));
   }
 }
diff --git a/overlord/src/app/payment/payment-accounts.resolver.spec.ts b/overlord/src/app/payment/payment-accounts.resolver.spec.ts
deleted file mode 100644
index 82e1d710..00000000
--- a/overlord/src/app/payment/payment-accounts.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Account } from '../core/account';
-import { paymentAccountsResolver } from './payment-accounts.resolver';
-
-describe('paymentAccountsResolver', () => {
-  const executeResolver: ResolveFn<Account[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => paymentAccountsResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/payment/payment-accounts.resolver.ts b/overlord/src/app/payment/payment-accounts.resolver.ts
deleted file mode 100644
index 047f7527..00000000
--- a/overlord/src/app/payment/payment-accounts.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Account } from '../core/account';
-import { AccountService } from '../core/account.service';
-
-export const paymentAccountsResolver: ResolveFn<Account[]> = () => {
-  return inject(AccountService).paymentAutocomplete('');
-};
diff --git a/overlord/src/app/payment/payment-datasource.ts b/overlord/src/app/payment/payment-datasource.ts
deleted file mode 100644
index 68e6e948..00000000
--- a/overlord/src/app/payment/payment-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { Journal } from '../core/journal';
-
-export class PaymentDataSource extends DataSource<Journal> {
-  constructor(private data: Observable<Journal[]>) {
-    super();
-  }
-
-  connect(): Observable<Journal[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/payment/payment-dialog.component.html b/overlord/src/app/payment/payment-dialog.component.html
index 19777607..8717e978 100644
--- a/overlord/src/app/payment/payment-dialog.component.html
+++ b/overlord/src/app/payment/payment-dialog.component.html
@@ -1,6 +1,6 @@
 <h1 mat-dialog-title>Edit Payment Entry</h1>
 <div mat-dialog-content>
-  <form [formGroup]="form">
+  <form [formRoot]="form">
     <div class="row-container">
       <mat-form-field class="flex-auto basis-2-3">
         <mat-label>Account</mat-label>
@@ -9,29 +9,27 @@
           matInput
           #accountElement
           [matAutocomplete]="auto"
-          formControlName="account"
+          [formField]="form.account"
           autocomplete="off"
         />
-        @if (accBal) {
+        @if (accBal()) {
           <mat-hint>
-            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+            <div class="balance">
+              Balance as on Date: <strong>{{ accBal()?.date | currency: 'INR' | accounting }}</strong
+              ><br />
+              Total Balance: <strong>{{ accBal()?.total | currency: 'INR' | accounting }}</strong>
+            </div>
           </mat-hint>
         }
+        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+          @for (account of accounts(); track account.id) {
+            <mat-option [value]="account">{{ account.name }}</mat-option>
+          }
+        </mat-autocomplete>
       </mat-form-field>
-      <mat-autocomplete
-        #auto="matAutocomplete"
-        autoActiveFirstOption
-        (optionSelected)="accountSelected($event)"
-        [displayWith]="displayFn"
-      >
-        @for (account of accounts | async; track account) {
-          <mat-option [value]="account">{{ account.name }}</mat-option>
-        }
-      </mat-autocomplete>
       <mat-form-field class="flex-auto basis-1-3">
         <mat-label>Amount</mat-label>
-        <input type="text" matInput formControlName="amount" autocomplete="off" />
+        <input type="text" matInput [formField]="form.amount" autocomplete="off" />
         <span matTextPrefix>₹&nbsp;</span>
       </mat-form-field>
     </div>
diff --git a/overlord/src/app/payment/payment-dialog.component.ts b/overlord/src/app/payment/payment-dialog.component.ts
index 6ef4af9f..5dac219f 100644
--- a/overlord/src/app/payment/payment-dialog.component.ts
+++ b/overlord/src/app/payment/payment-dialog.component.ts
@@ -1,23 +1,24 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { CurrencyPipe } from '@angular/common';
+import { Component, computed, inject, linkedSignal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatOptionModule } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
 import { Account } from '../core/account';
-import { AccountBalance } from '../core/account-balance';
 import { AccountService } from '../core/account.service';
 import { Journal } from '../core/journal';
 import { AccountingPipe } from '../shared/accounting.pipe';
 import { MathService } from '../shared/math.service';
 
+export interface PaymentDialogFormData {
+  account: Account | string | null;
+  amount: string;
+}
+
 @Component({
   selector: 'app-payment-dialog',
   templateUrl: './payment-dialog.component.html',
@@ -25,18 +26,17 @@ import { MathService } from '../shared/math.service';
   imports: [
     MatDialogModule,
     CdkScrollableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatAutocompleteModule,
-    MatOptionModule,
     MatButtonModule,
-    AsyncPipe,
     CurrencyPipe,
     AccountingPipe,
   ],
 })
-export class PaymentDialogComponent implements OnInit {
+export class PaymentDialogComponent {
   dialogRef = inject<MatDialogRef<PaymentDialogComponent>>(MatDialogRef);
   data = inject<{
     journal: Journal;
@@ -45,56 +45,52 @@ export class PaymentDialogComponent implements OnInit {
 
   private math = inject(MathService);
   private accountSer = inject(AccountService);
-  private cd = inject(ChangeDetectorRef);
 
-  accounts: Observable<Account[]>;
-  form: FormGroup<{
-    account: FormControl<string | null>;
-    amount: FormControl<string>;
-  }>;
+  formModel = linkedSignal<
+    {
+      journal: Journal;
+      date: string;
+    },
+    PaymentDialogFormData
+  >({
+    source: () => this.data,
+    computation: (data: { journal: Journal; date: string }) => ({
+      account: data.journal.account,
+      amount: `${data.journal.amount}`,
+    }),
+  });
 
-  account: Account = new Account();
-  accBal: AccountBalance | null = null;
+  form = form(this.formModel);
 
-  constructor() {
-    this.form = new FormGroup({
-      account: new FormControl(''),
-      amount: new FormControl('', { nonNullable: true }),
-    });
-    this.accBal = null;
-    // Setup Account Autocomplete
-    this.accounts = this.form.controls.account.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
-    );
-  }
+  accountSearch = computed(() => {
+    const v = this.form.account().value();
+    return typeof v === 'string' ? v : null;
+  });
 
-  ngOnInit() {
-    this.form.setValue({
-      account: this.data.journal.account.name,
-      amount: `${this.data.journal.amount}`,
-    });
-    this.account = this.data.journal.account;
-  }
+  accountsResource = this.accountSer.autocomplete(this.accountSearch);
+  accounts = computed(() => this.accountsResource.value() ?? []);
 
-  displayFn(account?: Account | string): string {
-    return !account ? '' : typeof account === 'string' ? account : account.name;
-  }
+  balanceDate = computed(() => this.data.date);
+  accountId = computed((): string | null => {
+    const account = this.form.account().value();
+    return typeof account === 'string' ? null : (account?.id ?? null);
+  });
 
-  accountSelected(event: MatAutocompleteSelectedEvent): void {
-    const account = event.option.value;
-    this.account = account;
-    this.accountSer.balance(account.id as string, this.data.date).subscribe((v) => {
-      this.accBal = v;
-      this.cd.detectChanges();
-    });
+  accBalResource = this.accountSer.balance(this.accountId, this.balanceDate);
+  accBal = computed(() => this.accBalResource.value() ?? null);
+
+  displayFn(account?: Account): string {
+    return account ? account.name : '';
   }
 
   accept(): void {
-    const formValue = this.form.value;
-    const amount = this.math.parseAmount(formValue.amount, 2);
-    this.data.journal.account = this.account;
+    const formValue = this.form().value();
+    const account = typeof formValue.account === 'string' ? null : formValue.account;
+    if (!account || !account.id) {
+      return;
+    }
+    const amount = this.math.parseAmount(formValue.amount ?? '0', 2);
+    this.data.journal.account = account;
     this.data.journal.amount = amount;
     this.dialogRef.close(this.data.journal);
   }
diff --git a/overlord/src/app/payment/payment.component.html b/overlord/src/app/payment/payment.component.html
index c73a9626..d0917563 100644
--- a/overlord/src/app/payment/payment.component.html
+++ b/overlord/src/app/payment/payment.component.html
@@ -1,21 +1,26 @@
 <h2 class="row-container space-between">
   <span>Payment</span>
-  <mat-icon matSuffix (click)="voucher.isStarred = !voucher.isStarred" class="pointer" [class.gold]="voucher.isStarred">
-    {{ voucher.isStarred ? 'star' : 'star_border' }}
+  <mat-icon
+    matSuffix
+    (click)="form.isStarred().value.set(!form.isStarred())"
+    class="pointer"
+    [class.gold]="form.isStarred()"
+  >
+    {{ form.isStarred() ? 'star' : 'star_border' }}
   </mat-icon>
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Date</mat-label>
-      <input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
+      <input matInput [matDatepicker]="date" [formField]="form.date" autocomplete="off" #dateElement />
       <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
       <mat-datepicker #date></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
-      <mat-select formControlName="paymentAccount">
-        @for (account of paymentAccounts; track account) {
+      <mat-select [formField]="form.paymentAccount">
+        @for (account of paymentAccounts(); track account.id) {
           <mat-option [value]="account.id">
             {{ account.name }}
           </mat-option>
@@ -24,12 +29,12 @@
     </mat-form-field>
     <mat-form-field class="flex-auto basis-1-5">
       <mat-label>Payment Amount</mat-label>
-      <input type="text" matInput formControlName="paymentAmount" />
+      <input type="number" matInput [formField]="form.paymentAmount" />
       <span matTextPrefix>₹&nbsp;</span>
     </mat-form-field>
   </div>
 
-  <div formGroupName="addRow" class="row-container">
+  <div class="row-container">
     <mat-form-field class="flex-auto basis-55">
       <mat-label>Account</mat-label>
       <input
@@ -37,143 +42,149 @@
         matInput
         #accountElement
         [matAutocomplete]="auto"
-        formControlName="account"
+        [formField]="form.addRow.account"
         autocomplete="off"
       />
-      @if (accBal) {
+      @if (accBal()) {
         <mat-hint>
-          Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-          <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+          Balance as on Date: <strong>{{ accBal()?.date | currency: 'INR' | accounting }}</strong> / Final balance:
+          <strong>{{ accBal()?.total | currency: 'INR' | accounting }}</strong>
         </mat-hint>
       }
+      <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+        @for (account of accounts(); track account.id) {
+          <mat-option [value]="account">{{ account.name }}</mat-option>
+        }
+      </mat-autocomplete>
     </mat-form-field>
-    <mat-autocomplete
-      #auto="matAutocomplete"
-      autoActiveFirstOption
-      [displayWith]="displayFn"
-      (optionSelected)="accountSelected($event)"
-    >
-      @for (account of accounts | async; track account) {
-        <mat-option [value]="account">{{ account.name }}</mat-option>
-      }
-    </mat-autocomplete>
     <mat-form-field class="flex-auto basis-1-4">
       <mat-label>Amount</mat-label>
-      <input type="text" matInput formControlName="amount" autocomplete="off" />
+      <input type="text" matInput [formField]="form.addRow.amount" autocomplete="off" />
       <span matTextPrefix>₹&nbsp;</span>
     </mat-form-field>
 
     <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1-5">Add</button>
   </div>
-  <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-    <!-- Account Column -->
-    <ng-container matColumnDef="account">
-      <mat-header-cell *matHeaderCellDef>Account</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.account.name }}</mat-cell>
-    </ng-container>
+  @if (itemResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (itemResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+  } @else {
+    <mat-table #table [dataSource]="form.journals().value() ?? []" matSort (matSortChange)="sortData($event)">
+      <!-- Account Column -->
+      <ng-container matColumnDef="account">
+        <mat-header-cell *matHeaderCellDef>Account</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.account.name }}</mat-cell>
+      </ng-container>
 
-    <!-- Amount Column -->
-    <ng-container matColumnDef="amount">
-      <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Amount Column -->
+      <ng-container matColumnDef="amount">
+        <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Action Column -->
-    <ng-container matColumnDef="action">
-      <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center">
-        <button mat-icon-button tabindex="-1" (click)="editRow(row)">
-          <mat-icon>edit</mat-icon>
-        </button>
-        <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
+      <!-- Action Column -->
+      <ng-container matColumnDef="action">
+        <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="center">
+          <button mat-icon-button tabindex="-1" (click)="editRow(row)">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Narration</mat-label>
-      <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Tags</mat-label>
-      <mat-chip-grid #chipGrid aria-label="Tag selection">
-        @for (tag of voucher.tags; track tag) {
-          <mat-chip-row (removed)="removeTag(tag)">
-            {{ tag.name }}
-            <button matChipRemove [attr.aria-label]="'remove ' + tag.name">
-              <mat-icon>cancel</mat-icon>
-            </button>
-          </mat-chip-row>
-        }
-      </mat-chip-grid>
-      <input
-        placeholder="New Tag..."
-        #tagInput
-        formControlName="tags"
-        [matChipInputFor]="chipGrid"
-        [matAutocomplete]="autoTag"
-        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-        (matChipInputTokenEnd)="addTag($event)"
-      />
-      <mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
-        @for (tag of tags | async; track tag) {
-          <mat-option [value]="tag">{{ tag.name }}</mat-option>
-        }
-      </mat-autocomplete>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    @for (item of voucher.files; track item) {
-      <div class="img-container" class="flex-auto basis-1-5">
-        <img [src]="item.thumbnail" alt="img" (click)="zoomImage(item)" (keyup.enter)="zoomImage(item)" tabindex="0" />
-        <button mat-icon-button class="overlay" (click)="deleteImage(item)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
-    }
-    <div class="img-container" class="flex flex-auto basis-1-5">
-      <label ng-href for="fileUp">
-        <img
-          alt="add"
-          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
-        />
-      </label>
-      <input
-        type="file"
-        id="fileUp"
-        multiple
-        accept="image/*"
-        style="display: none"
-        (change)="image.detectFiles($event, voucher)"
-      />
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Narration</mat-label>
+        <textarea matInput matAutosizeMinRows="5" [formField]="form.narration"></textarea>
+      </mat-form-field>
     </div>
-  </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Tags</mat-label>
+        <mat-chip-grid #chipGrid aria-label="Tag selection">
+          @for (tag of form.tagList().value(); track tag) {
+            <mat-chip-row (removed)="removeTag(tag)">
+              {{ tag.name }}
+              <button matChipRemove [attr.aria-label]="'remove ' + tag.name">
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip-row>
+          }
+        </mat-chip-grid>
+        <input
+          placeholder="New Tag..."
+          #tagInput
+          [formField]="form.tagInput"
+          [matChipInputFor]="chipGrid"
+          [matAutocomplete]="autoTag"
+          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+          (matChipInputTokenEnd)="addTag()"
+        />
+        <mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
+          @for (tag of tags(); track tag.id) {
+            <mat-option [value]="tag">{{ tag.name }}</mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      @for (item of form.files().value(); track item) {
+        <div class="img-container" class="flex-auto basis-1-5">
+          <img
+            [src]="item.thumbnail"
+            alt="img"
+            (click)="zoomImage(item)"
+            (keyup.enter)="zoomImage(item)"
+            tabindex="0"
+          />
+          <button mat-icon-button class="overlay" (click)="deleteImage(item)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+      }
+      <div class="img-container" class="flex flex-auto basis-1-5">
+        <label ng-href for="fileUp">
+          <img
+            alt="add"
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
+          />
+        </label>
+        <input type="file" id="fileUp" multiple accept="image/*" style="display: none" (change)="detectFiles($event)" />
+      </div>
+    </div>
+  }
 </form>
 
 <div class="row-container">
   <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="">
-    {{ voucher.id ? 'Update' : 'Save' }}
+    {{ id() ? 'Update' : 'Save' }}
   </button>
-  @if (voucher.id) {
-    <button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')" class="">
-      {{ voucher.posted ? 'Posted' : 'Post' }}
+  @if (id()) {
+    <button
+      mat-raised-button
+      (click)="post()"
+      [disabled]="form.posted().controlValue() || !auth.allowed('post-vouchers')"
+      class=""
+    >
+      {{ form.posted().controlValue() ? 'Posted' : 'Post' }}
     </button>
     <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
   }
   <span class="spacer"></span>
-  @if (voucher.id) {
+  @if (id()) {
     <span class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      Created on&nbsp;<strong>{{ form.creationDate().value() | localTime }}</strong
+      >&nbsp;and Last Edited on&nbsp; <strong>{{ form.lastEditDate().value() | localTime }}</strong
+      >&nbsp;by&nbsp; <strong>{{ form.userName() }}</strong
+      >.
+      {{ form.posted() ? 'Posted by ' + form.poster() : '' }}
     </span>
   }
 </div>
diff --git a/overlord/src/app/payment/payment.component.ts b/overlord/src/app/payment/payment.component.ts
index 1fb72537..8792bf47 100644
--- a/overlord/src/app/payment/payment.component.ts
+++ b/overlord/src/app/payment/payment.component.ts
@@ -1,19 +1,20 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { AsyncPipe, CurrencyPipe } from '@angular/common';
+import { CurrencyPipe } from '@angular/common';
 import {
-  AfterViewInit,
-  ChangeDetectorRef,
   Component,
-  ElementRef,
   HostListener,
   inject,
-  OnInit,
-  ViewChild,
+  computed,
+  effect,
+  signal,
+  input,
+  linkedSignal,
+  afterNextRender,
 } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
@@ -22,18 +23,17 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { round } from 'mathjs';
 import moment from 'moment';
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
+import { zip } from 'rxjs';
 
 import { AuthService } from '../auth/auth.service';
 import { Account } from '../core/account';
-import { AccountBalance } from '../core/account-balance';
 import { AccountService } from '../core/account.service';
+import { CostCentre } from '../core/cost-centre';
 import { DbFile } from '../core/db-file';
 import { Journal } from '../core/journal';
 import { User } from '../core/user';
@@ -41,22 +41,52 @@ import { Voucher } from '../core/voucher';
 import { VoucherService } from '../core/voucher.service';
 import { AccountingPipe } from '../shared/accounting.pipe';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
 import { ImageDialogComponent } from '../shared/image-dialog/image-dialog.component';
 import { ImageService } from '../shared/image.service';
 import { LocalTimePipe } from '../shared/local-time.pipe';
 import { MathService } from '../shared/math.service';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { Tag } from '../tag/tag';
 import { TagService } from '../tag/tag.service';
-import { PaymentDataSource } from './payment-datasource';
 import { PaymentDialogComponent } from './payment-dialog.component';
 
+export interface PaymentItemFormData {
+  id: string | undefined;
+  amount: number;
+  account: Account;
+  costCentre: CostCentre | null;
+}
+
+export interface PaymentFormModel {
+  isStarred: boolean;
+  date: Date;
+  paymentAccount: string;
+  paymentAmount: number;
+  addRow: {
+    account: Account | string | null;
+    amount: string;
+  };
+  journals: PaymentItemFormData[];
+  narration: string;
+  tagInput: string | Tag | null;
+  tagList: Tag[];
+  files: DbFile[];
+  posted: boolean;
+  creationDate: string;
+  lastEditDate: string;
+  userName: string;
+  poster: string;
+}
+
 @Component({
   selector: 'app-payment',
   templateUrl: './payment.component.html',
   styleUrls: ['./payment.component.css'],
   imports: [
+    FormField,
+    FormRoot,
     MatIconModule,
-    ReactiveFormsModule,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -67,14 +97,20 @@ import { PaymentDialogComponent } from './payment-dialog.component';
     MatTableModule,
     MatSortModule,
     MatChipsModule,
-    AsyncPipe,
     CurrencyPipe,
     AccountingPipe,
     LocalTimePipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class PaymentComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class PaymentComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  d = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  a = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  type = signal('Payment');
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
@@ -84,17 +120,89 @@ export class PaymentComponent implements OnInit, AfterViewInit {
   private ser = inject(VoucherService);
   private accountSer = inject(AccountService);
   private tagSer = inject(TagService);
-  private cd = inject(ChangeDetectorRef);
 
-  @ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('tagInput') tagInput?: ElementRef<HTMLInputElement>;
+  sortActive = signal('');
+  sortDirection = signal('');
+
+  itemResource = this.ser.getVoucher(this.id, this.type, this.a, this.d);
+  item = linkedSignal(() => this.itemResource.value() ?? new Voucher());
+
+  formModel = linkedSignal<Voucher, PaymentFormModel>({
+    source: this.item,
+    computation: (voucher): PaymentFormModel => {
+      const pj = voucher.journals.find((x) => x.debit === -1);
+      const debitJournals = voucher.journals.filter((x) => x.debit === 1);
+      const paymentAmount =
+        pj?.amount ??
+        round(
+          debitJournals.reduce((acc, j) => acc + j.amount, 0),
+          2,
+        );
+      return {
+        isStarred: voucher.isStarred,
+        date: voucher.date ? moment(voucher.date, 'DD-MMM-YYYY').toDate() : new Date(),
+        paymentAccount: pj?.account?.id ?? this.a() ?? '',
+        paymentAmount,
+        addRow: {
+          account: null as Account | string | null,
+          amount: '',
+        },
+        journals: debitJournals.map((j) => ({
+          id: j.id,
+          amount: j.amount,
+          account: j.account,
+          costCentre: j.costCentre,
+        })),
+        narration: voucher.narration ?? '',
+        tagInput: null as string | Tag | null,
+        tagList: [...voucher.tags],
+        files: [...voucher.files],
+        posted: voucher.posted,
+        creationDate: voucher.creationDate,
+        lastEditDate: voucher.lastEditDate,
+        userName: voucher.user?.name ?? '',
+        poster: voucher.poster ?? '',
+      };
+    },
+  });
+
+  form = form(this.formModel);
+
+  displayedColumns = ['account', 'amount', 'action'];
+  separatorKeysCodes: number[] = [ENTER, COMMA];
+
+  accountSearch = computed(() => {
+    const v = this.form.addRow.account().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  accountsResource = this.accountSer.autocomplete(this.accountSearch);
+  accounts = computed(() => this.accountsResource.value() ?? []);
+
+  tagQuery = computed(() => {
+    const tag = this.form.tagInput().value();
+    return tag === null ? '' : typeof tag !== 'string' ? tag.name.toLowerCase() : tag;
+  });
+
+  tagsResource = this.tagSer.autocomplete(this.tagQuery);
+  tags = computed(() => this.tagsResource.value() ?? []);
+
+  balanceDate = computed(() => moment(this.form.date().value()).format('DD-MMM-YYYY'));
+  accountId = computed((): string | null => {
+    const account = this.form.addRow.account().value();
+    return typeof account === 'string' ? null : (account?.id ?? null);
+  });
+
+  accBalResource = this.accountSer.balance(this.accountId, this.balanceDate);
+  accBal = computed(() => this.accBalResource.value() ?? null);
+
+  paymentAccountsResource = this.accountSer.paymentAutocomplete(signal(''));
+  paymentAccounts = computed(() => this.paymentAccountsResource.value() ?? []);
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
+    this.form().focusBoundControl();
   }
 
   @HostListener('window:keydown.f5', ['$event'])
@@ -107,8 +215,8 @@ export class PaymentComponent implements OnInit, AfterViewInit {
     event.preventDefault();
     this.router.navigate(['receipt'], {
       queryParams: {
-        a: this.form.controls.paymentAccount.value,
-        d: this.form.controls.date.value.format('DD-MMM-YYYY'),
+        a: this.formModel().paymentAccount,
+        d: moment(this.formModel().date).format('DD-MMM-YYYY'),
       },
       queryParamsHandling: 'merge',
     });
@@ -119,8 +227,7 @@ export class PaymentComponent implements OnInit, AfterViewInit {
     event.preventDefault();
     this.router.navigate(['journal'], {
       queryParams: {
-        a: this.form.controls.paymentAccount.value,
-        d: this.form.controls.date.value.format('DD-MMM-YYYY'),
+        d: moment(this.formModel().date).format('DD-MMM-YYYY'),
       },
       queryParamsHandling: 'merge',
     });
@@ -137,222 +244,174 @@ export class PaymentComponent implements OnInit, AfterViewInit {
   @HostListener('window:keydown.control.p', ['$event'])
   postListner(event: Event) {
     event.preventDefault();
-    if (this.voucher.id && !this.voucher.posted && this.auth.allowed('post-vouchers')) {
+    if (this.id() && !this.form.posted().controlValue() && this.auth.allowed('post-vouchers')) {
       this.post();
     }
   }
 
-  separatorKeysCodes: number[] = [ENTER, COMMA];
-  public journalObservable = new BehaviorSubject<Journal[]>([]);
-  dataSource: PaymentDataSource = new PaymentDataSource(this.journalObservable);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    paymentAccount: FormControl<string>;
-    paymentAmount: FormControl<number>;
-    addRow: FormGroup<{
-      account: FormControl<string | null>;
-      amount: FormControl<string>;
-    }>;
-    narration: FormControl<string>;
-    tags: FormControl<string | null>;
-  }>;
-
-  paymentAccounts: Account[] = [];
-  paymentJournal: Journal = new Journal();
-  voucher: Voucher = new Voucher();
-  account: Account | null;
-  accBal: AccountBalance | null = null;
-
-  displayedColumns = ['account', 'amount', 'action'];
-
-  accounts: Observable<Account[]>;
-  tags: Observable<Tag[]>;
-
   constructor() {
-    this.account = null;
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      paymentAccount: new FormControl('', { nonNullable: true }),
-      paymentAmount: new FormControl({ value: 0, disabled: true }, { nonNullable: true }),
-      addRow: new FormGroup({
-        account: new FormControl(''),
-        amount: new FormControl('', { nonNullable: true }),
-      }),
-      narration: new FormControl('', { nonNullable: true }),
-      tags: new FormControl(''),
+    afterNextRender(() => {
+      this.form.addRow.account().focusBoundControl();
     });
-    this.accBal = null;
-    // Listen to Account Autocomplete Change
-    this.accounts = this.form.controls.addRow.controls.account.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
-    );
-    this.tags = this.form.controls.tags.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      map((tag: string | Tag | null) => (tag === null ? '' : typeof tag !== 'string' ? tag.name.toLowerCase() : tag)),
-      switchMap((tag: string) => this.tagSer.autocomplete(tag)),
-    );
-    // Listen to Date Change
-    this.form.controls.date.valueChanges.subscribe((x) =>
-      this.router.navigate([], {
-        relativeTo: this.route,
-        queryParams: { d: x.format('DD-MMM-YYYY') },
-        replaceUrl: true,
-        queryParamsHandling: 'merge',
-      }),
-    );
-    // Listen to Payment Account Change
-    this.form.controls.paymentAccount.valueChanges.subscribe((x) =>
-      this.router.navigate([], {
-        relativeTo: this.route,
-        queryParams: { a: x },
-        replaceUrl: true,
-        queryParamsHandling: 'merge',
-      }),
-    );
-  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { voucher: Voucher; paymentAccounts: Account[] };
+    effect(() => {
+      const d = this.formModel().date;
+      if (!d) return;
 
-      this.paymentAccounts = data.paymentAccounts;
-      this.loadVoucher(data.voucher);
+      const url = new URL(window.location.href);
+      url.searchParams.set('d', moment(d).format('DD-MMM-YYYY'));
+      window.history.replaceState({}, '', url.toString());
     });
-  }
 
-  ngAfterViewInit() {
-    this.focusAccount();
-  }
+    effect(() => {
+      const a = this.formModel().paymentAccount;
+      if (!a) return;
 
-  loadVoucher(voucher: Voucher) {
-    this.voucher = voucher;
-    [this.paymentJournal] = this.voucher.journals.filter((x) => x.debit === -1);
-    this.form.setValue({
-      date: moment(this.voucher.date, 'DD-MMM-YYYY'),
-      paymentAccount: this.paymentJournal.account.id ?? '',
-      paymentAmount: this.paymentJournal.amount,
-      addRow: {
-        account: '',
-        amount: '',
-      },
-      narration: this.voucher.narration,
-      tags: '',
+      const url = new URL(window.location.href);
+      url.searchParams.set('a', a);
+      window.history.replaceState({}, '', url.toString());
     });
-    this.dataSource = new PaymentDataSource(this.journalObservable);
-    this.updateView();
-  }
-
-  focusAccount() {
-    setTimeout(() => {
-      this.accountElement.nativeElement.focus();
-    }, 0);
   }
 
   addRow() {
-    const amount = this.math.parseAmount(this.form.value.addRow?.amount ?? '0', 2);
-    const debit = 1;
-    if (this.account === null || amount <= 0) {
+    const formValue = this.form().value().addRow;
+    if (!formValue) return;
+    const amount = this.math.parseAmount(formValue.amount ?? '0', 2);
+    const account = formValue.account as Account;
+
+    if (!account || typeof account === 'string' || amount <= 0) {
       return;
     }
-    const oldFiltered = this.voucher.journals.filter((x) => x.account.id === (this.account as Account).id);
-    const old = oldFiltered.length ? oldFiltered[0] : null;
-    if (old && (old.debit === -1 || old.id === this.paymentJournal.id)) {
-      return;
-    }
-    if (old) {
-      old.amount += amount;
-    } else {
-      this.voucher.journals.push(
-        new Journal({
-          debit,
-          amount,
-          account: this.account,
-          costCentre: null,
-        }),
+    const currentJournals = this.formModel().journals;
+    const oldIndex = currentJournals.findIndex((x) => x.account.id === account.id);
+    let updatedJournals: PaymentItemFormData[];
+    if (oldIndex >= 0) {
+      updatedJournals = currentJournals.map((j, i) =>
+        i === oldIndex ? { ...j, amount: round(j.amount + amount, 2) } : j,
       );
+    } else {
+      updatedJournals = [...currentJournals, { id: undefined, account, amount, costCentre: null }];
     }
-    this.resetAddRow();
-    this.updateView();
+    const totalPaymentAmount = round(
+      updatedJournals.reduce((acc, j) => acc + j.amount, 0),
+      2,
+    );
+    this.formModel.update((m) => ({
+      ...m,
+      journals: updatedJournals,
+      paymentAmount: totalPaymentAmount,
+    }));
+    this.form.addRow.account().value.set(null);
+    this.form.addRow.amount().value.set('');
+    this.form.addRow.account().focusBoundControl();
   }
 
-  resetAddRow() {
-    this.form.controls.addRow.reset({ account: null, amount: '' });
-    this.account = null;
-    this.accBal = null;
-    setTimeout(() => {
-      this.accountElement.nativeElement.focus();
-    }, 0);
+  deleteRow(row: PaymentItemFormData) {
+    const updatedJournals = this.formModel().journals.filter((j) => j !== row);
+    const totalPaymentAmount = round(
+      updatedJournals.reduce((acc, j) => acc + j.amount, 0),
+      2,
+    );
+    this.formModel.update((m) => ({
+      ...m,
+      journals: updatedJournals,
+      paymentAmount: totalPaymentAmount,
+    }));
+    this.form.addRow.account().value.set(null);
+    this.form.addRow.account().focusBoundControl();
   }
 
-  updateView() {
-    const journals = this.voucher.journals.filter((x) => x.debit === 1);
-    this.journalObservable.next(journals);
-    this.paymentJournal.amount = round(Math.abs(journals.map((x) => x.amount).reduce((p, c) => p + c, 0)), 2);
-    this.form.controls.paymentAmount.setValue(this.paymentJournal.amount);
-  }
-
-  editRow(row: Journal) {
+  editRow(row: PaymentItemFormData) {
     const dialogRef = this.dialog.open(PaymentDialogComponent, {
       width: '750px',
       data: {
-        journal: { ...row },
-        date: moment(this.form.value.date).format('DD-MMM-YYYY'),
+        journal: new Journal({
+          id: row.id,
+          debit: 1,
+          amount: row.amount,
+          account: row.account,
+          costCentre: row.costCentre,
+        }),
+        date: moment(this.formModel().date).format('DD-MMM-YYYY'),
       },
     });
 
     dialogRef.afterClosed().subscribe((result: boolean | Journal) => {
-      if (!result) {
+      if (!result || typeof result === 'boolean') {
         return;
       }
-      const j = result as Journal;
-      if (
-        j.account.id !== row.account.id &&
-        this.voucher.journals.filter((x) => x.account.id === j.account.id).length
-      ) {
+      const j = result;
+      if (j.account.id !== row.account.id && this.formModel().journals.some((x) => x.account.id === j.account.id)) {
+        this.snackBar.open('Account already exists in journals', 'Danger');
         return;
       }
-      Object.assign(row, j);
-      this.updateView();
+      const updatedJournals = this.formModel().journals.map((item) =>
+        item === row
+          ? {
+              ...item,
+              account: j.account,
+              amount: j.amount,
+            }
+          : item,
+      );
+      const totalPaymentAmount = round(
+        updatedJournals.reduce((acc, jItem) => acc + jItem.amount, 0),
+        2,
+      );
+      this.formModel.update((m) => ({
+        ...m,
+        journals: updatedJournals,
+        paymentAmount: totalPaymentAmount,
+      }));
+      this.form.addRow.account().focusBoundControl();
     });
   }
 
-  deleteRow(row: Journal) {
-    this.voucher.journals.splice(this.voucher.journals.indexOf(row), 1);
-    this.updateView();
+  getVoucher(): Voucher {
+    const m = this.formModel();
+    const base = this.item();
+    const v = new Voucher({ ...base });
+    v.date = moment(m.date).format('DD-MMM-YYYY');
+    v.narration = m.narration ?? '';
+
+    const existingPj = base.journals.find((x) => x.debit === -1);
+    const paymentAccountObj =
+      this.paymentAccounts().find((a) => a.id === m.paymentAccount) ?? new Account({ id: m.paymentAccount });
+    const pj = new Journal({
+      id: existingPj?.id,
+      debit: -1,
+      amount: m.paymentAmount,
+      account: paymentAccountObj,
+      costCentre: existingPj?.costCentre ?? null,
+    });
+
+    const debitJournals = m.journals.map(
+      (j) => new Journal({ id: j.id, debit: 1, amount: j.amount, account: j.account, costCentre: j.costCentre }),
+    );
+
+    v.journals = [pj, ...debitJournals];
+    v.tags = [...m.tagList];
+    v.files = [...m.files];
+    return v;
   }
 
   canSave() {
-    if (!this.voucher.id) {
+    if (!this.id()) {
       return true;
     }
-    if (this.voucher.posted && this.auth.allowed('edit-posted-vouchers')) {
-      return true;
+    if (this.form.posted().value() && !this.auth.allowed('edit-posted-vouchers')) {
+      return false;
     }
-    return this.voucher.user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
-  }
-
-  post() {
-    this.ser.post(this.voucher.id as string).subscribe({
-      next: (result) => {
-        this.loadVoucher(result);
-        this.snackBar.open('Voucher Posted', 'Success');
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
+    const user = this.auth.user as User;
+    return this.item().user?.id === user?.id || this.auth.allowed("edit-other-user's-vouchers");
   }
 
   save() {
-    const voucher: Voucher = this.getVoucher();
-    this.ser.saveOrUpdate(voucher).subscribe({
+    this.ser.saveOrUpdate(this.getVoucher()).subscribe({
       next: (result) => {
-        this.snackBar.open('', 'Success');
-        if (voucher.id === result.id) {
-          this.loadVoucher(result);
+        this.snackBar.open('Voucher Saved', undefined, { duration: 2000 });
+        if (this.item().id === result.id) {
+          this.item.set(result);
         } else {
           this.router.navigate(['/payment', result.id]);
         }
@@ -363,96 +422,120 @@ export class PaymentComponent implements OnInit, AfterViewInit {
     });
   }
 
-  getVoucher(): Voucher {
-    const formModel = this.form.value;
-    this.voucher.date = moment(formModel.date).format('DD-MMM-YYYY');
-    this.paymentJournal.account.id = formModel.paymentAccount;
-    this.voucher.narration = formModel.narration ?? '';
-    return this.voucher;
-  }
-
-  delete() {
-    this.ser.delete(this.voucher.id as string).subscribe({
-      next: () => {
-        this.snackBar.open('', 'Success');
-        this.router.navigate(['/payment'], { replaceUrl: true });
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
+  post() {
+    const id = this.id();
+    if (id) {
+      this.ser.post(id).subscribe({
+        next: (result) => {
+          this.snackBar.open('Voucher Posted', undefined, { duration: 2000 });
+          this.item.set(result);
+        },
+        error: (error) => {
+          this.snackBar.open(error, 'Danger');
+        },
+      });
+    }
   }
 
   confirmDelete(): void {
+    const id = this.id();
+    if (!id) return;
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '250px',
       data: { title: 'Delete Voucher?', content: 'Are you sure? This cannot be undone.' },
     });
 
-    dialogRef.afterClosed().subscribe((result: boolean) => {
+    dialogRef.afterClosed().subscribe((result) => {
       if (result) {
         this.delete();
       }
     });
   }
 
-  displayFn(account?: Account | string): string {
-    return !account ? '' : typeof account === 'string' ? account : account.name;
+  delete() {
+    const id = this.id();
+    if (id) {
+      this.ser.delete(id).subscribe({
+        next: () => {
+          this.snackBar.open('Voucher Deleted', undefined, { duration: 2000 });
+          this.router.navigate(['/payment'], { replaceUrl: true });
+        },
+        error: (error) => {
+          this.snackBar.open(error, 'Danger');
+        },
+      });
+    }
   }
 
-  accountSelected(event: MatAutocompleteSelectedEvent): void {
-    const account = event.option.value;
-    this.account = account;
-    const date = moment(this.form.value.date).format('DD-MMM-YYYY');
-    this.accountSer.balance(account.id as string, date).subscribe((v) => {
-      this.accBal = v;
-      this.cd.detectChanges();
-    });
+  displayFn(account?: Account): string {
+    return account ? account.name : '';
   }
 
   zoomImage(file: DbFile) {
     this.dialog.open(ImageDialogComponent, {
-      width: '750px',
-      data: file.resized,
+      data: file,
+      panelClass: 'full-picture',
     });
   }
 
   deleteImage(file: DbFile) {
-    const index = this.voucher.files.indexOf(file);
-    this.voucher.files.splice(index, 1);
+    this.formModel.update((m) => ({
+      ...m,
+      files: m.files.filter((f) => f !== file),
+    }));
+  }
+
+  detectFiles(event: Event) {
+    const fileList = (event.target as HTMLInputElement).files;
+    if (!fileList) return;
+    for (const file of Array.from(fileList)) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const src = (e.target as FileReader).result as string;
+        zip(this.image.resizeImage(src, 100, 150), this.image.resizeImage(src, 825, 1170)).subscribe(
+          ([thumbnail, resized]) => {
+            this.formModel.update((m) => ({
+              ...m,
+              files: [...m.files, new DbFile({ thumbnail, resized })],
+            }));
+          },
+        );
+      };
+      reader.readAsDataURL(file);
+    }
   }
 
   removeTag(tag: Tag): void {
-    const index = this.voucher.tags.indexOf(tag);
-
-    if (index >= 0) {
-      this.voucher.tags.splice(index, 1);
-    }
+    this.formModel.update((m) => ({
+      ...m,
+      tagList: m.tagList.filter((t) => t !== tag),
+    }));
   }
 
-  addTag(event: MatChipInputEvent): void {
-    const value = (event.value || '').trim();
-
-    // Add our tag
-    if (value) {
-      this.voucher.tags.push(new Tag({ name: value }));
+  addTag(): void {
+    const query = this.form.tagInput().value();
+    if (!query) return;
+    const val = (query as string).trim().toLowerCase();
+    if (!val) return;
+    const existing = this.formModel().tagList;
+    const old = existing.find((t) => t.name.toLowerCase() === val);
+    if (!old) {
+      this.formModel.update((m) => ({ ...m, tagList: [...m.tagList, { id: null, name: val }] }));
     }
-
-    // Clear the input value
-    event.chipInput!.clear();
-
-    this.form.controls.tags.setValue(null);
+    this.form.tagInput().value.set(null);
   }
 
   selectedTag(event: MatAutocompleteSelectedEvent): void {
     const tag = event.option.value as Tag;
-    const index = this.voucher.tags.findIndex((t) => (tag.id === null ? t.name === tag.name : t.id === tag.id));
-    if (index === -1) {
-      this.voucher.tags.push(tag);
+    const existing = this.formModel().tagList;
+    const old = existing.find((t) => t.name.toLowerCase() === tag.name.toLowerCase());
+    if (!old) {
+      this.formModel.update((m) => ({ ...m, tagList: [...m.tagList, tag] }));
     }
-    if (this.tagInput) {
-      this.tagInput.nativeElement.value = '';
-    }
-    this.form.controls.tags.setValue(null);
+    this.form.tagInput().value.set(null);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
diff --git a/overlord/src/app/payment/payment.resolver.spec.ts b/overlord/src/app/payment/payment.resolver.spec.ts
deleted file mode 100644
index 8a7c9e5c..00000000
--- a/overlord/src/app/payment/payment.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { paymentResolver } from './payment.resolver';
-
-describe('paymentResolver', () => {
-  const executeResolver: ResolveFn<Voucher> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => paymentResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/payment/payment.resolver.ts b/overlord/src/app/payment/payment.resolver.ts
deleted file mode 100644
index a7827c18..00000000
--- a/overlord/src/app/payment/payment.resolver.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { VoucherService } from '../core/voucher.service';
-
-export const paymentResolver: ResolveFn<Voucher> = (route) => {
-  const id = route.paramMap.get('id');
-  const account = route.queryParamMap.get('a') || null;
-  const date = route.queryParamMap.get('d') || null;
-  if (id !== null) {
-    return inject(VoucherService).get(id, 'Payment');
-  }
-  return inject(VoucherService).getOfType('Payment', account, date);
-};
diff --git a/overlord/src/app/payment/payment.routes.ts b/overlord/src/app/payment/payment.routes.ts
index c47d5247..55b47495 100644
--- a/overlord/src/app/payment/payment.routes.ts
+++ b/overlord/src/app/payment/payment.routes.ts
@@ -1,9 +1,7 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-import { paymentAccountsResolver } from './payment-accounts.resolver';
 import { PaymentComponent } from './payment.component';
-import { paymentResolver } from './payment.resolver';
 
 export const routes: Routes = [
   {
@@ -13,10 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'journal',
     },
-    resolve: {
-      paymentAccounts: paymentAccountsResolver,
-      voucher: paymentResolver,
-    },
     runGuardsAndResolvers: 'paramsChange',
   },
   {
@@ -26,10 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'journal',
     },
-    resolve: {
-      paymentAccounts: paymentAccountsResolver,
-      voucher: paymentResolver,
-    },
     runGuardsAndResolvers: 'paramsChange',
   },
 ];
diff --git a/overlord/src/app/period/period-detail/period-detail.component.html b/overlord/src/app/period/period-detail/period-detail.component.html
index 535c8fe9..d933fe9a 100644
--- a/overlord/src/app/period/period-detail/period-detail.component.html
+++ b/overlord/src/app/period/period-detail/period-detail.component.html
@@ -1,26 +1,33 @@
 <h2>Period</h2>
-<form [formGroup]="form" class="flex-col wrapped">
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Valid From</mat-label>
-      <input matInput #validFromElement [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
-      <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
-      <mat-datepicker #validFrom></mat-datepicker>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Valid Till</mat-label>
-      <input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
-      <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
-      <mat-datepicker #validTill></mat-datepicker>
-    </mat-form-field>
-  </div>
-</form>
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <form class="flex-col wrapped" [formRoot]="form">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Valid From</mat-label>
+        <input matInput #validFromElement [matDatepicker]="validFrom" [formField]="form.validFrom" autocomplete="off" />
+        <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
+        <mat-datepicker #validFrom></mat-datepicker>
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Valid Till</mat-label>
+        <input matInput [matDatepicker]="validTill" [formField]="form.validTill" autocomplete="off" />
+        <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
+        <mat-datepicker #validTill></mat-datepicker>
+      </mat-form-field>
+    </div>
+  </form>
 
-<div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()" class="">Save</button>
-  @if (!!item.id) {
-    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-  }
-</div>
+  <div class="row-container">
+    <button mat-raised-button color="primary" (click)="save()" class="">Save</button>
+    @if (!!item().id) {
+      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+    }
+  </div>
+}
diff --git a/overlord/src/app/period/period-detail/period-detail.component.ts b/overlord/src/app/period/period-detail/period-detail.component.ts
index 1bb2af39..f0ce7485 100644
--- a/overlord/src/app/period/period-detail/period-detail.component.ts
+++ b/overlord/src/app/period/period-detail/period-detail.component.ts
@@ -1,15 +1,21 @@
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, linkedSignal, input, computed } from '@angular/core';
+export interface PeriodFormData {
+  validFrom: moment.Moment;
+  validTill: moment.Moment;
+}
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { Period } from '../period';
 import { PeriodService } from '../period.service';
 
@@ -17,51 +23,43 @@ import { PeriodService } from '../period.service';
   selector: 'app-period-detail',
   templateUrl: './period-detail.component.html',
   styleUrls: ['./period-detail.component.css'],
-  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule],
+  imports: [
+    FormField,
+    FormRoot,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+    MatButtonModule,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class PeriodDetailComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class PeriodDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private ser = inject(PeriodService);
 
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    validFrom: FormControl<moment.Moment>;
-    validTill: FormControl<moment.Moment>;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  item: Period = new Period();
+  item = computed(() => this.itemResource.value() ?? new Period());
+
+  model = linkedSignal({
+    source: this.item,
+    computation: (item): PeriodFormData => ({
+      validFrom: item.validFrom ? moment(item.validFrom, 'DD-MMM-YYYY') : moment(new Date()),
+      validTill: item.validTill ? moment(item.validTill, 'DD-MMM-YYYY') : moment(new Date()),
+    }),
+  });
+
+  form = createForm(this.model);
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
-  }
-
-  constructor() {
-    this.form = new FormGroup({
-      validFrom: new FormControl(moment(new Date()), { nonNullable: true }),
-      validTill: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: Period };
-
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: Period) {
-    this.item = item;
-    this.form.setValue({
-      validFrom: moment(this.item.validFrom, 'DD-MMM-YYYY'),
-      validTill: moment(this.item.validTill, 'DD-MMM-YYYY'),
-    });
+    this.form().focusBoundControl();
   }
 
   save() {
@@ -71,19 +69,19 @@ export class PeriodDetailComponent implements OnInit {
         this.router.navigateByUrl('/periods');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
+    this.ser.delete(this.item().id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/periods');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -102,9 +100,10 @@ export class PeriodDetailComponent implements OnInit {
   }
 
   getItem(): Period {
-    const formValue = this.form.value;
-    this.item.validFrom = moment(formValue.validFrom).format('DD-MMM-YYYY');
-    this.item.validTill = moment(formValue.validTill).format('DD-MMM-YYYY');
-    return this.item;
+    const formValue = this.model();
+    const item = this.item();
+    item.validFrom = moment(formValue.validFrom).format('DD-MMM-YYYY');
+    item.validTill = moment(formValue.validTill).format('DD-MMM-YYYY');
+    return item;
   }
 }
diff --git a/overlord/src/app/period/period-list.resolver.spec.ts b/overlord/src/app/period/period-list.resolver.spec.ts
deleted file mode 100644
index 9cecfd52..00000000
--- a/overlord/src/app/period/period-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Period } from './period';
-import { periodListResolver } from './period-list.resolver';
-
-describe('periodListResolver', () => {
-  const executeResolver: ResolveFn<Period[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => periodListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/period/period-list.resolver.ts b/overlord/src/app/period/period-list.resolver.ts
deleted file mode 100644
index b092bd9d..00000000
--- a/overlord/src/app/period/period-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Period } from './period';
-import { PeriodService } from './period.service';
-
-export const periodListResolver: ResolveFn<Period[]> = () => {
-  return inject(PeriodService).list();
-};
diff --git a/overlord/src/app/period/period-list/period-list-datasource.ts b/overlord/src/app/period/period-list/period-list-datasource.ts
deleted file mode 100644
index ad3afc7c..00000000
--- a/overlord/src/app/period/period-list/period-list-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable, of as observableOf } from 'rxjs';
-
-import { Period } from '../period';
-
-export class PeriodListDataSource extends DataSource<Period> {
-  constructor(public data: Period[]) {
-    super();
-  }
-
-  connect(): Observable<Period[]> {
-    return observableOf(this.data);
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/period/period-list/period-list.component.html b/overlord/src/app/period/period-list/period-list.component.html
index 663c009b..63a561c2 100644
--- a/overlord/src/app/period/period-list/period-list.component.html
+++ b/overlord/src/app/period/period-list/period-list.component.html
@@ -6,23 +6,29 @@
   </a>
 </h2>
 
-<mat-table #table [dataSource]="dataSource" aria-label="Elements">
-  <!-- Valid From Column -->
-  <ng-container matColumnDef="validFrom">
-    <mat-header-cell *matHeaderCellDef>Valid From</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <a [routerLink]="['/periods', row.id]">
-        {{ row.validFrom }}
-      </a>
-    </mat-cell>
-  </ng-container>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (listResource.error()) {
+  <app-error-state [message]="'Failed to load list.'" (retryAction)="listResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()">
+    <!-- Valid From Column -->
+    <ng-container matColumnDef="validFrom">
+      <mat-header-cell *matHeaderCellDef>Valid From</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <a [routerLink]="['/periods', row.id]">
+          {{ row.validFrom }}
+        </a>
+      </mat-cell>
+    </ng-container>
 
-  <!-- Valid Till Column -->
-  <ng-container matColumnDef="validTill">
-    <mat-header-cell *matHeaderCellDef>Valid Till</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.validTill }}</mat-cell>
-  </ng-container>
+    <!-- Valid Till Column -->
+    <ng-container matColumnDef="validTill">
+      <mat-header-cell *matHeaderCellDef>Valid Till</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.validTill }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
+}
diff --git a/overlord/src/app/period/period-list/period-list.component.ts b/overlord/src/app/period/period-list/period-list.component.ts
index 1b2ba5de..a9726480 100644
--- a/overlord/src/app/period/period-list/period-list.component.ts
+++ b/overlord/src/app/period/period-list/period-list.component.ts
@@ -1,38 +1,27 @@
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
-import { Period } from '../period';
-import { PeriodListDataSource } from './period-list-datasource';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { PeriodService } from '../period.service';
 
 @Component({
   selector: 'app-period-list',
   templateUrl: './period-list.component.html',
   styleUrls: ['./period-list.component.css'],
-  imports: [RouterModule, MatIconModule, MatTableModule, MatButtonModule],
+
+  imports: [RouterModule, MatIconModule, MatTableModule, MatButtonModule, SkeletonLoaderComponent, ErrorStateComponent],
 })
-export class PeriodListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class PeriodListComponent {
+  private ser = inject(PeriodService);
+  listResource = this.ser.list();
+  list = computed(() => this.listResource.value() ?? []);
 
-  dataSource: PeriodListDataSource;
-
-  list: Period[] = [];
+  dataSource = this.list;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['validFrom', 'validTill'];
-
-  constructor() {
-    this.dataSource = new PeriodListDataSource(this.list);
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: Period[] };
-
-      this.list = data.list;
-    });
-    this.dataSource = new PeriodListDataSource(this.list);
-  }
 }
diff --git a/overlord/src/app/period/period.resolver.spec.ts b/overlord/src/app/period/period.resolver.spec.ts
deleted file mode 100644
index 4e7788b7..00000000
--- a/overlord/src/app/period/period.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Period } from './period';
-import { periodResolver } from './period.resolver';
-
-describe('periodResolver', () => {
-  const executeResolver: ResolveFn<Period> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => periodResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/period/period.resolver.ts b/overlord/src/app/period/period.resolver.ts
deleted file mode 100644
index 9c41d359..00000000
--- a/overlord/src/app/period/period.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Period } from './period';
-import { PeriodService } from './period.service';
-
-export const periodResolver: ResolveFn<Period> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(PeriodService).get(id);
-};
diff --git a/overlord/src/app/period/period.routes.ts b/overlord/src/app/period/period.routes.ts
index 72caa2e0..6402daa4 100644
--- a/overlord/src/app/period/period.routes.ts
+++ b/overlord/src/app/period/period.routes.ts
@@ -1,11 +1,8 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-import { costCentreListResolver } from '../cost-centre/cost-centre-list.resolver';
 import { PeriodDetailComponent } from './period-detail/period-detail.component';
-import { periodListResolver } from './period-list.resolver';
 import { PeriodListComponent } from './period-list/period-list.component';
-import { periodResolver } from './period.resolver';
 
 export const routes: Routes = [
   {
@@ -15,9 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Recipes',
     },
-    resolve: {
-      list: periodListResolver,
-    },
   },
   {
     path: 'new',
@@ -26,10 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Recipes',
     },
-    resolve: {
-      item: periodResolver,
-      costCentres: costCentreListResolver,
-    },
   },
   {
     path: ':id',
@@ -38,9 +28,5 @@ export const routes: Routes = [
     data: {
       permission: 'Recipes',
     },
-    resolve: {
-      item: periodResolver,
-      costCentres: costCentreListResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/period/period.service.ts b/overlord/src/app/period/period.service.ts
index 823962e4..c57517ed 100644
--- a/overlord/src/app/period/period.service.ts
+++ b/overlord/src/app/period/period.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,36 +7,32 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { Period } from './period';
 
 const url = '/api/periods';
-const serviceName = 'PeriodService';
-
 @Injectable({ providedIn: 'root' })
 export class PeriodService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<Period> {
-    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
-    return this.http
-      .get<Period>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Period>;
+  get(id: Signal<string | null>) {
+    return httpResource<Period>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<Period[]> {
-    return this.http
-      .get<Period[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Period[]>;
+  list() {
+    return httpResource<Period[]>(() => `${url}/list`);
   }
 
   save(period: Period): Observable<Period> {
     return this.http
       .post<Period>(`${url}`, period)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<Period>;
+      .pipe(catchError(this.log.handleError('PeriodService', 'save'))) as Observable<Period>;
   }
 
   update(period: Period): Observable<Period> {
     return this.http
       .put<Period>(`${url}/${period.id}`, period)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<Period>;
+      .pipe(catchError(this.log.handleError('PeriodService', 'update'))) as Observable<Period>;
   }
 
   saveOrUpdate(period: Period): Observable<Period> {
@@ -49,6 +45,6 @@ export class PeriodService {
   delete(id: string): Observable<Period> {
     return this.http
       .delete<Period>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<Period>;
+      .pipe(catchError(this.log.handleError('PeriodService', 'delete'))) as Observable<Period>;
   }
 }
diff --git a/overlord/src/app/product-group/product-group-detail/product-group-detail.component.html b/overlord/src/app/product-group/product-group-detail/product-group-detail.component.html
index 3a80ebe4..8b9c2cac 100644
--- a/overlord/src/app/product-group/product-group-detail/product-group-detail.component.html
+++ b/overlord/src/app/product-group/product-group-detail/product-group-detail.component.html
@@ -1,18 +1,25 @@
 <h2>Product Group</h2>
 
-<form [formGroup]="form" class="flex-col wrapped">
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-checkbox formControlName="nutritional" class="flex-auto">Nutritional Information?</mat-checkbox>
-    <mat-checkbox formControlName="iceCream" class="flex-auto">Ice Cream?</mat-checkbox>
-  </div>
-</form>
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <form class="flex-col wrapped" [formRoot]="form">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput [formField]="form.name" (keyup.enter)="save()" />
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-checkbox [formField]="form.nutritional" class="flex-auto">Nutritional Information?</mat-checkbox>
+      <mat-checkbox [formField]="form.iceCream" class="flex-auto">Ice Cream?</mat-checkbox>
+    </div>
+  </form>
 
-<div class="row-container">
-  <button mat-raised-button (click)="save()" color="primary">Save</button>
-</div>
+  <div class="row-container">
+    <button mat-raised-button (click)="save()" color="primary">Save</button>
+  </div>
+}
diff --git a/overlord/src/app/product-group/product-group-detail/product-group-detail.component.ts b/overlord/src/app/product-group/product-group-detail/product-group-detail.component.ts
index a82800cc..68594f34 100644
--- a/overlord/src/app/product-group/product-group-detail/product-group-detail.component.ts
+++ b/overlord/src/app/product-group/product-group-detail/product-group-detail.component.ts
@@ -1,67 +1,66 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, afterNextRender, linkedSignal, input, computed } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { ProductGroup } from '../../core/product-group';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { ProductGroupService } from '../product-group.service';
 
+export interface ProductGroupDetailFormData {
+  name: string;
+  nutritional: boolean;
+  iceCream: boolean;
+}
+
 @Component({
   selector: 'app-product-group-detail',
   templateUrl: './product-group-detail.component.html',
   styleUrls: ['./product-group-detail.component.css'],
-  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatCheckboxModule, MatButtonModule],
+  imports: [
+    FormField,
+    FormRoot,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class ProductGroupDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class ProductGroupDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private ser = inject(ProductGroupService);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    name: FormControl<string | null>;
-    nutritional: FormControl<boolean>;
-    iceCream: FormControl<boolean>;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  item: ProductGroup = new ProductGroup();
+  item = computed(() => this.itemResource.value() ?? new ProductGroup());
+
+  model = linkedSignal({
+    source: this.item,
+    computation: (itemVal): ProductGroupDetailFormData => ({
+      name: itemVal.name ?? '',
+      nutritional: itemVal.nutritional ?? false,
+      iceCream: itemVal.iceCream ?? false,
+    }),
+  });
+
+  form = createForm(this.model);
 
   constructor() {
-    this.form = new FormGroup({
-      name: new FormControl<string | null>(null),
-      nutritional: new FormControl<boolean>(false, { nonNullable: true }),
-      iceCream: new FormControl<boolean>(false, { nonNullable: true }),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: ProductGroup };
-
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: ProductGroup) {
-    this.item = item;
-    this.form.setValue({
-      name: this.item.name,
-      nutritional: this.item.nutritional,
-      iceCream: this.item.iceCream,
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
@@ -69,16 +68,17 @@ export class ProductGroupDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/product-groups');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   getItem(): ProductGroup {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    this.item.nutritional = formModel.nutritional ?? false;
-    this.item.iceCream = formModel.iceCream ?? false;
-    return this.item;
+    const formModel = this.model();
+    const item = this.item();
+    item.name = formModel.name ?? '';
+    item.nutritional = formModel.nutritional ?? false;
+    item.iceCream = formModel.iceCream ?? false;
+    return item;
   }
 }
diff --git a/overlord/src/app/product-group/product-group-list.resolver.spec.ts b/overlord/src/app/product-group/product-group-list.resolver.spec.ts
deleted file mode 100644
index a5650248..00000000
--- a/overlord/src/app/product-group/product-group-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { ProductGroup } from '../core/product-group';
-import { productGroupListResolver } from './product-group-list.resolver';
-
-describe('productGroupListResolver', () => {
-  const executeResolver: ResolveFn<ProductGroup[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => productGroupListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/product-group/product-group-list.resolver.ts b/overlord/src/app/product-group/product-group-list.resolver.ts
deleted file mode 100644
index 6c70c535..00000000
--- a/overlord/src/app/product-group/product-group-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { ProductGroup } from '../core/product-group';
-import { ProductGroupService } from './product-group.service';
-
-export const productGroupListResolver: ResolveFn<ProductGroup[]> = () => {
-  return inject(ProductGroupService).list();
-};
diff --git a/overlord/src/app/product-group/product-group-list/product-group-list-datasource.ts b/overlord/src/app/product-group/product-group-list/product-group-list-datasource.ts
deleted file mode 100644
index 7d053950..00000000
--- a/overlord/src/app/product-group/product-group-list/product-group-list-datasource.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { ProductGroup } from '../../core/product-group';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class ProductGroupListDataSource extends DataSource<ProductGroup> {
-  constructor(
-    public data: ProductGroup[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<ProductGroup[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: ProductGroup[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: ProductGroup[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/product-group/product-group-list/product-group-list.component.html b/overlord/src/app/product-group/product-group-list/product-group-list.component.html
index 25f87e78..f4616894 100644
--- a/overlord/src/app/product-group/product-group-list/product-group-list.component.html
+++ b/overlord/src/app/product-group/product-group-list/product-group-list.component.html
@@ -6,30 +6,36 @@
   </a>
 </h2>
 
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="['/product-groups', row.id]">{{ row.name }}</a></mat-cell
-    >
-  </ng-container>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (listResource.error()) {
+  <app-error-state [message]="'Failed to load list.'" (retryAction)="listResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="['/product-groups', row.id]">{{ row.name }}</a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Is Fixture Column -->
-  <ng-container matColumnDef="isFixture">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Is Fixture?</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
-  </ng-container>
+    <!-- Is Fixture Column -->
+    <ng-container matColumnDef="isFixture">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Is Fixture?</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="list().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/product-group/product-group-list/product-group-list.component.ts b/overlord/src/app/product-group/product-group-list/product-group-list.component.ts
index aa550a0f..271c3ba3 100644
--- a/overlord/src/app/product-group/product-group-list/product-group-list.component.ts
+++ b/overlord/src/app/product-group/product-group-list/product-group-list.component.ts
@@ -1,36 +1,77 @@
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
-import { ProductGroup } from '../../core/product-group';
-import { ProductGroupListDataSource } from './product-group-list-datasource';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { ProductGroupService } from '../product-group.service';
 
 @Component({
   selector: 'app-product-group-list',
   templateUrl: './product-group-list.component.html',
   styleUrls: ['./product-group-list.component.css'],
-  imports: [RouterModule, MatIconModule, MatTableModule, MatSortModule, MatPaginatorModule, MatButtonModule],
+  imports: [
+    RouterModule,
+    MatIconModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    MatButtonModule,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class ProductGroupListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class ProductGroupListComponent {
+  private ser = inject(ProductGroupService);
+
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  listResource = this.ser.list();
+  list = computed(() => this.listResource.value() ?? []);
+  sortedList = computed(() => {
+    const data = this.list();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  list: ProductGroup[] = [];
-  dataSource: ProductGroupListDataSource = new ProductGroupListDataSource(this.list, this.paginator, this.sort);
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'isFixture'];
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: ProductGroup[] };
-
-      this.list = data.list;
-    });
-    this.dataSource = new ProductGroupListDataSource(this.list, this.paginator, this.sort);
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/product-group/product-group.resolver.spec.ts b/overlord/src/app/product-group/product-group.resolver.spec.ts
deleted file mode 100644
index 4f5b5a86..00000000
--- a/overlord/src/app/product-group/product-group.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { ProductGroup } from '../core/product-group';
-import { productGroupResolver } from './product-group.resolver';
-
-describe('productGroupResolver', () => {
-  const executeResolver: ResolveFn<ProductGroup> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => productGroupResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/product-group/product-group.resolver.ts b/overlord/src/app/product-group/product-group.resolver.ts
deleted file mode 100644
index 57742f52..00000000
--- a/overlord/src/app/product-group/product-group.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { ProductGroup } from '../core/product-group';
-import { ProductGroupService } from './product-group.service';
-
-export const productGroupResolver: ResolveFn<ProductGroup> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(ProductGroupService).get(id);
-};
diff --git a/overlord/src/app/product-group/product-group.routes.ts b/overlord/src/app/product-group/product-group.routes.ts
index de7f7113..3d392f8b 100644
--- a/overlord/src/app/product-group/product-group.routes.ts
+++ b/overlord/src/app/product-group/product-group.routes.ts
@@ -2,9 +2,7 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { ProductGroupDetailComponent } from './product-group-detail/product-group-detail.component';
-import { productGroupListResolver } from './product-group-list.resolver';
 import { ProductGroupListComponent } from './product-group-list/product-group-list.component';
-import { productGroupResolver } from './product-group.resolver';
 
 export const routes: Routes = [
   {
@@ -14,9 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Cost Centres',
     },
-    resolve: {
-      list: productGroupListResolver,
-    },
   },
   {
     path: 'new',
@@ -25,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Cost Centres',
     },
-    resolve: {
-      item: productGroupResolver,
-    },
   },
   {
     path: ':id',
@@ -36,8 +28,5 @@ export const routes: Routes = [
     data: {
       permission: 'Cost Centres',
     },
-    resolve: {
-      item: productGroupResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/product-group/product-group.service.ts b/overlord/src/app/product-group/product-group.service.ts
index 2649f7c2..5581faef 100644
--- a/overlord/src/app/product-group/product-group.service.ts
+++ b/overlord/src/app/product-group/product-group.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { ProductGroup } from '../core/product-group';
 
 const url = '/api/product-groups';
-const serviceName = 'ProductGroupService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,29 +14,27 @@ export class ProductGroupService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<ProductGroup> {
-    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
-    return this.http
-      .get<ProductGroup>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<ProductGroup>;
+  get(id: Signal<string | null>) {
+    return httpResource<ProductGroup>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<ProductGroup[]> {
-    return this.http
-      .get<ProductGroup[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<ProductGroup[]>;
+  list() {
+    return httpResource<ProductGroup[]>(() => `${url}/list`);
   }
 
   save(productGroup: ProductGroup): Observable<ProductGroup> {
     return this.http
       .post<ProductGroup>(`${url}`, productGroup)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<ProductGroup>;
+      .pipe(catchError(this.log.handleError('ProductGroupService', 'save'))) as Observable<ProductGroup>;
   }
 
   update(productGroup: ProductGroup): Observable<ProductGroup> {
     return this.http
       .put<ProductGroup>(`${url}/${productGroup.id}`, productGroup)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<ProductGroup>;
+      .pipe(catchError(this.log.handleError('ProductGroupService', 'update'))) as Observable<ProductGroup>;
   }
 
   saveOrUpdate(productGroup: ProductGroup): Observable<ProductGroup> {
@@ -51,6 +47,6 @@ export class ProductGroupService {
   delete(id: string): Observable<ProductGroup> {
     return this.http
       .delete<ProductGroup>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<ProductGroup>;
+      .pipe(catchError(this.log.handleError('ProductGroupService', 'delete'))) as Observable<ProductGroup>;
   }
 }
diff --git a/overlord/src/app/product-ledger/product-ledger-datasource.ts b/overlord/src/app/product-ledger/product-ledger-datasource.ts
deleted file mode 100644
index fe97453d..00000000
--- a/overlord/src/app/product-ledger/product-ledger-datasource.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { ProductLedgerItem } from './product-ledger-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class ProductLedgerDataSource extends DataSource<ProductLedgerItem> {
-  constructor(
-    public data: ProductLedgerItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<ProductLedgerItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-    const a = merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-    return a;
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: ProductLedgerItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: ProductLedgerItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'date':
-          return compare(a.date, b.date, isAsc);
-        case 'debitQuantity':
-          return compare(Number(a.debitQuantity), Number(b.debitQuantity), isAsc);
-        case 'debitAmount':
-          return compare(Number(a.debitAmount), Number(b.debitAmount), isAsc);
-        case 'creditQuantity':
-          return compare(Number(a.creditQuantity), Number(b.creditQuantity), isAsc);
-        case 'creditAmount':
-          return compare(Number(a.creditAmount), Number(b.creditAmount), isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/product-ledger/product-ledger.component.html b/overlord/src/app/product-ledger/product-ledger.component.html
index 3fe1f112..b09b149f 100644
--- a/overlord/src/app/product-ledger/product-ledger.component.html
+++ b/overlord/src/app/product-ledger/product-ledger.component.html
@@ -1,23 +1,23 @@
 <h2 class="row-container space-between">
   <span>Product Ledger</span>
-  @if (dataSource.data.length) {
+  @if (dataSource().length) {
     <button mat-icon-button (click)="exportCsv()">
       <mat-icon>save_alt</mat-icon>
     </button>
   }
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
+      <input matInput #startDateElement [matDatepicker]="startDate" [formField]="form.startDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
       <mat-datepicker #startDate></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
@@ -30,7 +30,7 @@
         matInput
         #productElement
         [matAutocomplete]="auto"
-        formControlName="product"
+        [formField]="form.product"
         autocomplete="off"
       />
       <mat-autocomplete
@@ -39,7 +39,7 @@
         [displayWith]="displayFn"
         (optionSelected)="selected($event)"
       >
-        @for (product of products | async; track product) {
+        @for (product of products(); track product.id) {
           <mat-option [value]="product">{{ product.name }}</mat-option>
         }
       </mat-autocomplete>
@@ -47,97 +47,105 @@
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Date Column -->
-  <ng-container matColumnDef="date">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
-  </ng-container>
+@if (infoResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (infoResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Date Column -->
+    <ng-container matColumnDef="date">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef></mat-footer-cell>
+    </ng-container>
 
-  <!-- Particulars Column -->
-  <ng-container matColumnDef="particulars">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Particulars</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="row.url">{{ row.name }}</a></mat-cell
-    >
-    <mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
-  </ng-container>
+    <!-- Particulars Column -->
+    <ng-container matColumnDef="particulars">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Particulars</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="row.url">{{ row.name }}</a></mat-cell
+      >
+      <mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
+    </ng-container>
 
-  <!-- Type Column -->
-  <ng-container matColumnDef="type">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
-  </ng-container>
+    <!-- Type Column -->
+    <ng-container matColumnDef="type">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef>Closing Balance</mat-footer-cell>
+    </ng-container>
 
-  <!-- Narration Column -->
-  <ng-container matColumnDef="narration">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Narration</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.narration }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
-  </ng-container>
+    <!-- Narration Column -->
+    <ng-container matColumnDef="narration">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Narration</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.narration }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef></mat-footer-cell>
+    </ng-container>
 
-  <!-- Debit Column -->
-  <ng-container matColumnDef="debitQuantity">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Dr. Quantity</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right"
-      >{{ row.debitQuantity | number: '1.2-2' }} {{ row.debitUnit }}</mat-cell
-    >
-    <mat-footer-cell *matFooterCellDef class="right">{{ debitQuantity | number: '1.2-2' }}</mat-footer-cell>
-  </ng-container>
+    <!-- Debit Column -->
+    <ng-container matColumnDef="debitQuantity">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Dr. Quantity</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right"
+        >{{ row.debitQuantity | number: '1.2-2' }} {{ row.debitUnit }}</mat-cell
+      >
+      <mat-footer-cell *matFooterCellDef class="right">{{ totals().debitQuantity | number: '1.2-2' }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Debit Column -->
-  <ng-container matColumnDef="debitAmount">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Dr. Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.debitAmount | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">{{ debitAmount | currency: 'INR' }}</mat-footer-cell>
-  </ng-container>
+    <!-- Debit Column -->
+    <ng-container matColumnDef="debitAmount">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Dr. Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.debitAmount | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">{{ totals().debitAmount | currency: 'INR' }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Credit Column -->
-  <ng-container matColumnDef="creditQuantity">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Cr. Quantity</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right"
-      >{{ row.creditQuantity | number: '1.2-2' }} {{ row.creditUnit }}</mat-cell
-    >
-    <mat-footer-cell *matFooterCellDef class="right">{{ creditQuantity | number: '1.2-2' }}</mat-footer-cell>
-  </ng-container>
+    <!-- Credit Column -->
+    <ng-container matColumnDef="creditQuantity">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Cr. Quantity</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right"
+        >{{ row.creditQuantity | number: '1.2-2' }} {{ row.creditUnit }}</mat-cell
+      >
+      <mat-footer-cell *matFooterCellDef class="right">{{ totals().creditQuantity | number: '1.2-2' }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Credit Column -->
-  <ng-container matColumnDef="creditAmount">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Cr. Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.creditAmount | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">{{ creditAmount | currency: 'INR' }}</mat-footer-cell>
-  </ng-container>
+    <!-- Credit Column -->
+    <ng-container matColumnDef="creditAmount">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Cr. Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.creditAmount | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">{{ totals().creditAmount | currency: 'INR' }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Running Column -->
-  <ng-container matColumnDef="runningQuantity">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Quantity</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.runningQuantity | number: '1.2-2' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">{{ runningQuantity | number: '1.2-2' }}</mat-footer-cell>
-  </ng-container>
+    <!-- Running Column -->
+    <ng-container matColumnDef="runningQuantity">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Quantity</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.runningQuantity | number: '1.2-2' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">{{
+        totals().runningQuantity | number: '1.2-2'
+      }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Running Column -->
-  <ng-container matColumnDef="runningAmount">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.runningAmount | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">{{ runningAmount | currency: 'INR' }}</mat-footer-cell>
-  </ng-container>
+    <!-- Running Column -->
+    <ng-container matColumnDef="runningAmount">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.runningAmount | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">{{ totals().runningAmount | currency: 'INR' }}</mat-footer-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row
-    *matRowDef="let row; columns: displayedColumns"
-    [class.selected]="selectedRowId === row.id"
-    (click)="selectRow(row.id)"
-  ></mat-row>
-  <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row
+      *matRowDef="let row; columns: displayedColumns"
+      [class.selected]="selectedRowId === row.id"
+      (click)="selectRow(row.id)"
+    ></mat-row>
+    <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="(this.info().body ?? []).length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/product-ledger/product-ledger.component.ts b/overlord/src/app/product-ledger/product-ledger.component.ts
index fef057e0..37191a6b 100644
--- a/overlord/src/app/product-ledger/product-ledger.component.ts
+++ b/overlord/src/app/product-ledger/product-ledger.component.ts
@@ -1,6 +1,17 @@
-import { AsyncPipe, CurrencyPipe, DecimalPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CurrencyPipe, DecimalPipe } from '@angular/common';
+import {
+  Component,
+  HostListener,
+  inject,
+  computed,
+  signal,
+  linkedSignal,
+  ResourceRef,
+  Signal,
+  input,
+  afterNextRender,
+} from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
@@ -8,29 +19,35 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import moment from 'moment';
-import { Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
 import { Product } from '../core/product';
 import { ProductSku } from '../core/product-sku';
 import { ProductService } from '../product/product.service';
 import { ToCsvService } from '../shared/to-csv.service';
+export interface ProductLedgerFormData {
+  startDate: moment.Moment;
+  finishDate: moment.Moment;
+  product: string;
+}
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { ProductLedger } from './product-ledger';
-import { ProductLedgerDataSource } from './product-ledger-datasource';
 import { ProductLedgerService } from './product-ledger.service';
 
 @Component({
   selector: 'app-product-ledger',
   templateUrl: './product-ledger.component.html',
   styleUrls: ['./product-ledger.component.css'],
+
   imports: [
     MatIconModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -41,37 +58,119 @@ import { ProductLedgerService } from './product-ledger.service';
     MatSortModule,
     RouterModule,
     MatPaginatorModule,
-    AsyncPipe,
     DecimalPipe,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class ProductLedgerComponent implements OnInit, AfterViewInit {
+export class ProductLedgerComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
   private ser = inject(ProductLedgerService);
   private productSer = inject(ProductService);
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  infoResource = this.ser.list(this.id, this.startDate, this.finishDate);
+  info = computed(() => this.infoResource.value() ?? new ProductLedger());
 
-  @ViewChild('productElement', { static: true }) productElement!: ElementRef<HTMLInputElement>;
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  info: ProductLedger = new ProductLedger();
-  dataSource: ProductLedgerDataSource = new ProductLedgerDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-    product: FormControl<string | null>;
-  }>;
+  sortedList = computed(() => {
+    this.totals();
+    const data = this.info().body ?? [];
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'date':
+          return compare(a.date ?? '', b.date ?? '', isAsc);
+        case 'particulars':
+          return compare(a.name ?? '', b.name ?? '', isAsc);
+        case 'type':
+          return compare(a.type ?? '', b.type ?? '', isAsc);
+        case 'narration':
+          return compare(a.narration ?? '', b.narration ?? '', isAsc);
+        case 'debitQuantity':
+          return compare(a.debitQuantity ?? 0, b.debitQuantity ?? 0, isAsc);
+        case 'debitAmount':
+          return compare(a.debitAmount ?? 0, b.debitAmount ?? 0, isAsc);
+        case 'creditQuantity':
+          return compare(a.creditQuantity ?? 0, b.creditQuantity ?? 0, isAsc);
+        case 'creditAmount':
+          return compare(a.creditAmount ?? 0, b.creditAmount ?? 0, isAsc);
+        case 'runningQuantity':
+          return compare(a.runningQuantity ?? 0, b.runningQuantity ?? 0, isAsc);
+        case 'runningAmount':
+          return compare(a.runningAmount ?? 0, b.runningAmount ?? 0, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  totals = computed(() => {
+    let debitQuantity = 0;
+    let debitAmount = 0;
+    let creditQuantity = 0;
+    let creditAmount = 0;
+    let runningQuantity = 0;
+    let runningAmount = 0;
+
+    this.info().body.forEach((item) => {
+      if (item.type !== 'Opening Balance') {
+        debitQuantity += Number(item.debitQuantity);
+        debitAmount += Number(item.debitAmount);
+        creditQuantity += Number(item.creditQuantity);
+        creditAmount += Number(item.creditAmount);
+      }
+      runningQuantity += Number(item.debitQuantity) - Number(item.creditQuantity);
+      runningAmount += Number(item.debitAmount) - Number(item.creditAmount);
+      item.runningQuantity = runningQuantity;
+      item.runningAmount = runningAmount;
+    });
+
+    return {
+      debitQuantity,
+      debitAmount,
+      creditQuantity,
+      creditAmount,
+      runningQuantity,
+      runningAmount,
+    };
+  });
+
+  model = linkedSignal({
+    source: this.info,
+    computation: (info: ProductLedger): ProductLedgerFormData => ({
+      startDate: info.startDate ? moment(info.startDate, 'DD-MMM-YYYY') : moment(new Date()),
+      finishDate: info.finishDate ? moment(info.finishDate, 'DD-MMM-YYYY') : moment(new Date()),
+      product: info.product?.name ?? '',
+    }),
+  });
+
+  form = createForm(this.model);
 
   selectedRowId = '';
-  debitQuantity = 0;
-  debitAmount = 0;
-  creditQuantity = 0;
-  creditAmount = 0;
-  runningQuantity = 0;
-  runningAmount = 0;
+
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = [
     'date',
@@ -86,76 +185,35 @@ export class ProductLedgerComponent implements OnInit, AfterViewInit {
     'runningAmount',
   ];
 
-  products: Observable<ProductSku[]>;
+  productSearch!: Signal<string | null>;
+  productsResource!: ResourceRef<ProductSku[] | undefined>;
+  products!: Signal<ProductSku[]>;
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
+    this.form().focusBoundControl();
   }
 
   constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      product: new FormControl<string | null>(null),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
-
-    this.products = this.form.controls.product.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.productSer.autocompleteProduct(x, null))),
-    );
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: ProductLedger };
-
-      this.info = data.info;
-      this.calculateTotals();
-      this.form.setValue({
-        product: this.info.product?.name ?? '',
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new ProductLedgerDataSource(this.info.body, this.paginator, this.sort);
+    this.productSearch = computed(() => {
+      const v = this.model().product;
+      return typeof v === 'string' ? v : null;
     });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.productElement.nativeElement.focus();
-    }, 0);
+    this.productsResource = this.productSer.autocompleteProduct(this.productSearch, signal(null));
+    this.products = computed(() => this.productsResource.value() ?? []);
   }
 
   displayFn(product?: Product | string): string {
     return !product ? '' : typeof product === 'string' ? product : product.name;
   }
 
-  calculateTotals() {
-    this.debitQuantity = 0;
-    this.debitAmount = 0;
-    this.creditQuantity = 0;
-    this.creditAmount = 0;
-    this.runningQuantity = 0;
-    this.runningAmount = 0;
-    this.info.body.forEach((item) => {
-      if (item.type !== 'Opening Balance') {
-        this.debitAmount += Number(item.debitAmount);
-        this.creditQuantity += Number(item.creditQuantity);
-        this.creditAmount += Number(item.creditAmount);
-      }
-      this.runningQuantity += Number(item.debitQuantity) - Number(item.creditQuantity);
-      this.runningAmount += Number(item.debitAmount) - Number(item.creditAmount);
-      item.runningQuantity = this.runningQuantity;
-      item.runningAmount = this.runningAmount;
-    });
-  }
-
   selected(event: MatAutocompleteSelectedEvent): void {
-    this.info.product = event.option.value;
+    const p = event.option.value;
+    this.model.update((m) => ({ ...m, product: p.name }));
   }
 
   selectRow(id: string): void {
@@ -175,10 +233,10 @@ export class ProductLedgerComponent implements OnInit, AfterViewInit {
   }
 
   getInfo(): ProductLedger {
-    const formModel = this.form.value;
+    const formModel = this.model();
 
     return new ProductLedger({
-      product: this.info.product,
+      product: this.info().product,
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
       finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
     });
@@ -195,14 +253,26 @@ export class ProductLedgerComponent implements OnInit, AfterViewInit {
       Running: 'running',
       Posted: 'posted',
     };
-    const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource.data)], {
+    const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource())], {
       type: 'text/csv;charset=utf-8;',
     });
     const link = document.createElement('a');
     link.href = window.URL.createObjectURL(csvData);
-    link.setAttribute('download', 'ledger.csv');
+    link.setAttribute('download', 'product-ledger.csv');
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/product-ledger/product-ledger.resolver.spec.ts b/overlord/src/app/product-ledger/product-ledger.resolver.spec.ts
deleted file mode 100644
index 44559bb0..00000000
--- a/overlord/src/app/product-ledger/product-ledger.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { ProductLedger } from './product-ledger';
-import { productLedgerResolver } from './product-ledger.resolver';
-
-describe('productLedgerResolver', () => {
-  const executeResolver: ResolveFn<ProductLedger> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => productLedgerResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/product-ledger/product-ledger.resolver.ts b/overlord/src/app/product-ledger/product-ledger.resolver.ts
deleted file mode 100644
index 7da09c9c..00000000
--- a/overlord/src/app/product-ledger/product-ledger.resolver.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { ProductLedger } from './product-ledger';
-import { ProductLedgerService } from './product-ledger.service';
-
-export const productLedgerResolver: ResolveFn<ProductLedger> = (route) => {
-  const id = route.paramMap.get('id');
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(ProductLedgerService).list(id, startDate, finishDate);
-};
diff --git a/overlord/src/app/product-ledger/product-ledger.routes.ts b/overlord/src/app/product-ledger/product-ledger.routes.ts
index dfb4947b..758b4fb2 100644
--- a/overlord/src/app/product-ledger/product-ledger.routes.ts
+++ b/overlord/src/app/product-ledger/product-ledger.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { ProductLedgerComponent } from './product-ledger.component';
-import { productLedgerResolver } from './product-ledger.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Product Ledger',
     },
-    resolve: {
-      info: productLedgerResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Product Ledger',
     },
-    resolve: {
-      info: productLedgerResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/product-ledger/product-ledger.service.ts b/overlord/src/app/product-ledger/product-ledger.service.ts
index 50d3765c..22edff1a 100644
--- a/overlord/src/app/product-ledger/product-ledger.service.ts
+++ b/overlord/src/app/product-ledger/product-ledger.service.ts
@@ -1,14 +1,10 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { HttpClient, httpResource, HttpParams } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { ProductLedger } from './product-ledger';
 
 const url = '/api/product-ledger';
-const serviceName = 'ProductLedgerService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,17 +12,16 @@ export class ProductLedgerService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(id: string | null, startDate: string | null, finishDate: string | null): Observable<ProductLedger> {
-    const listUrl = id === null ? url : `${url}/${id}`;
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    return this.http
-      .get<ProductLedger>(listUrl, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<ProductLedger>;
+  list(id: Signal<string | null>, startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<ProductLedger>(() => {
+      const v = id();
+      const listUrl = v === null ? url : `${url}/${v}`;
+      let params = new HttpParams();
+      const s = startDate();
+      if (s !== null) params = params.set('s', s);
+      const f = finishDate();
+      if (f !== null) params = params.set('f', f);
+      return { url: listUrl, params };
+    });
   }
 }
diff --git a/overlord/src/app/product/product-detail/product-detail-datasource.ts b/overlord/src/app/product/product-detail/product-detail-datasource.ts
deleted file mode 100644
index fbaafeb8..00000000
--- a/overlord/src/app/product/product-detail/product-detail-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { StockKeepingUnit } from '../../core/product';
-
-export class ProductDetailDatasource extends DataSource<StockKeepingUnit> {
-  constructor(private data: Observable<StockKeepingUnit[]>) {
-    super();
-  }
-
-  connect(): Observable<StockKeepingUnit[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/product/product-detail/product-detail-dialog.component.html b/overlord/src/app/product/product-detail/product-detail-dialog.component.html
index 3948944f..c10356bb 100644
--- a/overlord/src/app/product/product-detail/product-detail-dialog.component.html
+++ b/overlord/src/app/product/product-detail/product-detail-dialog.component.html
@@ -1,26 +1,26 @@
 <h1 mat-dialog-title>Edit Product SKU</h1>
 <div mat-dialog-content>
-  <form [formGroup]="form">
+  <form [formRoot]="form">
     <div class="flex flex-row flex-wrap justify-around content-start items-start sm:max-lg:flex-col">
       <mat-form-field class="flex-auto">
         <mat-label>Units</mat-label>
-        <input matInput formControlName="units" />
+        <input matInput [formField]="form.units" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Fraction</mat-label>
-        <input matInput type="number" formControlName="fraction" />
+        <input matInput type="number" [formField]="form.fraction" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Yield</mat-label>
-        <input matInput type="number" formControlName="productYield" />
+        <input matInput type="number" [formField]="form.productYield" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>{{ data.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
-        <input matInput type="number" formControlName="costPrice" />
+        <input matInput type="number" [formField]="form.costPrice" />
       </mat-form-field>
       <mat-form-field class="flex-auto" [hidden]="!data.isSold">
         <mat-label>Sale Price</mat-label>
-        <input matInput type="number" formControlName="salePrice" />
+        <input matInput type="number" [formField]="form.salePrice" />
       </mat-form-field>
     </div>
   </form>
diff --git a/overlord/src/app/product/product-detail/product-detail-dialog.component.ts b/overlord/src/app/product/product-detail/product-detail-dialog.component.ts
index ac022494..eb3859fe 100644
--- a/overlord/src/app/product/product-detail/product-detail-dialog.component.ts
+++ b/overlord/src/app/product/product-detail/product-detail-dialog.component.ts
@@ -1,6 +1,6 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { Component, inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, linkedSignal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -8,20 +8,30 @@ import { MatInputModule } from '@angular/material/input';
 
 import { StockKeepingUnit } from '../../core/product';
 
+export interface ProductDetailDialogFormData {
+  id: string | null;
+  units: string;
+  fraction: string;
+  productYield: string;
+  costPrice: string;
+  salePrice: string;
+}
+
 @Component({
-  selector: 'app-journal-dialog',
+  selector: 'app-product-detail-dialog',
   templateUrl: './product-detail-dialog.component.html',
   styleUrls: ['./product-detail-dialog.component.css'],
   imports: [
     MatDialogModule,
     CdkScrollableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatButtonModule,
   ],
 })
-export class ProductDetailDialogComponent implements OnInit {
+export class ProductDetailDialogComponent {
   dialogRef = inject<MatDialogRef<ProductDetailDialogComponent>>(MatDialogRef);
   data = inject<{
     item: StockKeepingUnit;
@@ -29,52 +39,46 @@ export class ProductDetailDialogComponent implements OnInit {
     isPurchased: boolean;
   }>(MAT_DIALOG_DATA);
 
-  form: FormGroup<{
-    units: FormControl<string>;
-    fraction: FormControl<number>;
-    productYield: FormControl<number>;
-    costPrice: FormControl<number>;
-    salePrice: FormControl<number>;
-  }>;
+  formModel = linkedSignal<
+    {
+      item: StockKeepingUnit;
+      isSold: boolean;
+      isPurchased: boolean;
+    },
+    ProductDetailDialogFormData
+  >({
+    source: () => this.data,
+    computation: (data): ProductDetailDialogFormData => ({
+      id: data.item.id,
+      units: data.item.units ?? '',
+      fraction: `${data.item.fraction ?? 1}`,
+      productYield: `${data.item.productYield ?? 1}`,
+      costPrice: `${data.item.costPrice ?? 0}`,
+      salePrice: `${data.item.salePrice ?? 0}`,
+    }),
+  });
 
-  constructor() {
-    this.form = new FormGroup({
-      units: new FormControl('', { nonNullable: true }),
-      fraction: new FormControl(1, { nonNullable: true }),
-      productYield: new FormControl(1, { nonNullable: true }),
-      costPrice: new FormControl(0, { nonNullable: true }),
-      salePrice: new FormControl(0, { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.form.setValue({
-      units: this.data.item.units,
-      fraction: this.data.item.fraction,
-      productYield: this.data.item.productYield,
-      costPrice: this.data.item.costPrice,
-      salePrice: this.data.item.salePrice,
-    });
-  }
+  form = form(this.formModel);
 
   accept(): void {
-    const formValue = this.form.value;
-    const fraction = formValue.fraction ?? 0;
+    const formValue = this.form().value();
+    const fraction = Number(formValue.fraction ?? 0);
     if (fraction < 1) {
       return;
     }
-    const productYield = formValue.productYield ?? 0;
+    const productYield = Number(formValue.productYield ?? 0);
     if (productYield < 0 || productYield > 1) {
       return;
     }
-    const costPrice = formValue.costPrice ?? 0;
+    const costPrice = Number(formValue.costPrice ?? 0);
     if (costPrice < 0) {
       return;
     }
-    const salePrice = formValue.salePrice ?? 0;
+    const salePrice = Number(formValue.salePrice ?? 0);
     if (salePrice < 0) {
       return;
     }
+    this.data.item.id = formValue.id;
     this.data.item.units = formValue.units ?? '';
     this.data.item.fraction = fraction;
     this.data.item.productYield = productYield;
diff --git a/overlord/src/app/product/product-detail/product-detail.component.html b/overlord/src/app/product/product-detail/product-detail.component.html
index 71c84154..3ac27dc7 100644
--- a/overlord/src/app/product/product-detail/product-detail.component.html
+++ b/overlord/src/app/product/product-detail/product-detail.component.html
@@ -1,37 +1,37 @@
 <h2>Product</h2>
-<form [formGroup]="form" class="flex-col wrapped">
+<form class="flex-col wrapped" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Handle</mat-label>
-      <input matInput formControlName="handle" />
+      <input matInput [formField]="form.handle" />
     </mat-form-field>
   </div>
   <div class="row-container">
     <mat-form-field class="flex-auto basis-4-5">
       <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" />
+      <input matInput #nameElement [formField]="form.name" />
     </mat-form-field>
     <mat-form-field class="flex-auto basis-1-5">
       <mat-label>Fraction Units</mat-label>
-      <input matInput formControlName="fractionUnits" />
+      <input matInput [formField]="form.fractionUnits" />
     </mat-form-field>
   </div>
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Description</mat-label>
-      <input matInput #nameElement formControlName="description" />
+      <input matInput [formField]="form.description" />
     </mat-form-field>
   </div>
   <div class="row-container">
-    <mat-checkbox formControlName="isPurchased" class="flex-auto">Is Purchased?</mat-checkbox>
-    <mat-checkbox formControlName="isSold" class="flex-auto">Is Sold?</mat-checkbox>
-    <mat-checkbox formControlName="isActive" class="flex-auto">Is Active?</mat-checkbox>
+    <mat-checkbox [formField]="form.isPurchased" class="flex-auto">Is Purchased?</mat-checkbox>
+    <mat-checkbox [formField]="form.isSold" class="flex-auto">Is Sold?</mat-checkbox>
+    <mat-checkbox [formField]="form.isActive" class="flex-auto">Is Active?</mat-checkbox>
   </div>
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Product Type</mat-label>
-      <mat-select formControlName="productGroup" (selectionChange)="updatePG($event.value)">
-        @for (pg of productGroups; track pg) {
+      <mat-select [formField]="form.productGroup">
+        @for (pg of productGroups(); track pg) {
           <mat-option [value]="pg.id">
             {{ pg.name }}
           </mat-option>
@@ -42,148 +42,154 @@
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Allergen</mat-label>
-      <input matInput #nameElement formControlName="allergen" />
+      <input matInput [formField]="form.allergen" />
     </mat-form-field>
   </div>
-  @if (item.productGroup?.nutritional ?? false) {
+  @if (selectedProductGroup()?.nutritional ?? false) {
     <h2>Nutritional Information</h2>
     <div class="nutrition-grid">
       <mat-form-field class="flex-auto">
         <mat-label>Protein</mat-label>
-        <input matInput formControlName="protein" />
+        <input matInput type="number" [formField]="form.protein" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Carbohydrate</mat-label>
-        <input matInput formControlName="carbohydrate" />
+        <input matInput type="number" [formField]="form.carbohydrate" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Total Sugar</mat-label>
-        <input matInput formControlName="totalSugar" />
+        <input matInput type="number" [formField]="form.totalSugar" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Added Sugar</mat-label>
-        <input matInput formControlName="addedSugar" />
+        <input matInput type="number" [formField]="form.addedSugar" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Total Fat</mat-label>
-        <input matInput formControlName="totalFat" />
+        <input matInput type="number" [formField]="form.totalFat" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Saturated Fat</mat-label>
-        <input matInput formControlName="saturatedFat" />
+        <input matInput type="number" [formField]="form.saturatedFat" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Trans Fat</mat-label>
-        <input matInput formControlName="transFat" />
+        <input matInput type="number" [formField]="form.transFat" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Cholestrol</mat-label>
-        <input matInput formControlName="cholestrol" />
+        <input matInput type="number" [formField]="form.cholestrol" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Sodium</mat-label>
-        <input matInput formControlName="sodium" />
+        <input matInput type="number" [formField]="form.sodium" />
       </mat-form-field>
     </div>
   }
-  @if (item.productGroup?.iceCream ?? false) {
+  @if (selectedProductGroup()?.iceCream ?? false) {
     <h2>Ice Cream Information</h2>
     <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>MSNF</mat-label>
-        <input matInput formControlName="msnf" />
+        <input matInput type="number" [formField]="form.msnf" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Other Solids</mat-label>
-        <input matInput formControlName="otherSolids" />
+        <input matInput type="number" [formField]="form.otherSolids" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Total Solids</mat-label>
-        <input matInput formControlName="totalSolids" />
+        <input matInput type="number" [formField]="form.totalSolids" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Water</mat-label>
-        <input matInput formControlName="water" />
+        <input matInput type="number" [formField]="form.water" />
       </mat-form-field>
     </div>
   }
   <h2>Stock Keeping Units</h2>
-  <div formGroupName="addRow" class="nutrition-grid">
+  <div class="nutrition-grid">
     <mat-form-field class="flex-auto">
       <mat-label>Units</mat-label>
-      <input matInput formControlName="units" />
+      <input matInput [formField]="form.addRow.units" />
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Fraction</mat-label>
-      <input matInput type="number" formControlName="fraction" />
+      <input matInput type="number" [formField]="form.addRow.fraction" />
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Yield</mat-label>
-      <input matInput type="number" formControlName="productYield" />
+      <input matInput type="number" [formField]="form.addRow.productYield" />
     </mat-form-field>
     <mat-form-field class="flex-auto">
-      <mat-label>{{ item.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
-      <input matInput type="number" formControlName="costPrice" />
+      <mat-label>{{ form.isPurchased().value() ? 'Purchase Price' : 'Cost Price' }}</mat-label>
+      <input matInput type="number" [formField]="form.addRow.costPrice" />
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Sale Price</mat-label>
-      <input matInput type="number" formControlName="salePrice" />
+      <input matInput type="number" [formField]="form.addRow.salePrice" />
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto">Add</button>
   </div>
 </form>
 <div class="row-container wrapped">
-  <mat-table [dataSource]="dataSource" aria-label="Elements" class="flex-auto">
-    <!-- Units Column -->
-    <ng-container matColumnDef="units">
-      <mat-header-cell *matHeaderCellDef>Units</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.units }}</mat-cell>
-    </ng-container>
+  @if (itemResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (itemResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+  } @else {
+    <mat-table [dataSource]="form.skus().value() ?? []" class="flex-auto">
+      <!-- Units Column -->
+      <ng-container matColumnDef="units">
+        <mat-header-cell *matHeaderCellDef>Units</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.units }}</mat-cell>
+      </ng-container>
 
-    <!-- Fraction Column -->
-    <ng-container matColumnDef="fraction">
-      <mat-header-cell *matHeaderCellDef>Fraction</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.fraction }}</mat-cell>
-    </ng-container>
+      <!-- Fraction Column -->
+      <ng-container matColumnDef="fraction">
+        <mat-header-cell *matHeaderCellDef>Fraction</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.fraction }}</mat-cell>
+      </ng-container>
 
-    <!-- Yield Column -->
-    <ng-container matColumnDef="yield">
-      <mat-header-cell *matHeaderCellDef class="right">Yield</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.productYield }}</mat-cell>
-    </ng-container>
+      <!-- Yield Column -->
+      <ng-container matColumnDef="yield">
+        <mat-header-cell *matHeaderCellDef class="right">Yield</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.productYield }}</mat-cell>
+      </ng-container>
 
-    <!-- Cost Price Column -->
-    <ng-container matColumnDef="costPrice">
-      <mat-header-cell *matHeaderCellDef class="right">Cost Price</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.costPrice | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Cost Price Column -->
+      <ng-container matColumnDef="costPrice">
+        <mat-header-cell *matHeaderCellDef class="right">Cost Price</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.costPrice | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Sale Price Column -->
-    <ng-container matColumnDef="salePrice">
-      <mat-header-cell *matHeaderCellDef class="right">Sale Price</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.salePrice | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Sale Price Column -->
+      <ng-container matColumnDef="salePrice">
+        <mat-header-cell *matHeaderCellDef class="right">Sale Price</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.salePrice | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Action Column -->
-    <ng-container matColumnDef="action">
-      <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center">
-        <button mat-icon-button tabindex="-1" (click)="editRow(row)">
-          <mat-icon>edit</mat-icon>
-        </button>
-        <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
+      <!-- Action Column -->
+      <ng-container matColumnDef="action">
+        <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="center">
+          <button mat-icon-button tabindex="-1" (click)="editRow(row)">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
+  }
 </div>
 <div class="row-container">
   <button mat-raised-button color="primary" (click)="save()" class="">Save</button>
-  @if (!!item.id) {
+  @if (id()) {
     <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
   }
 </div>
diff --git a/overlord/src/app/product/product-detail/product-detail.component.ts b/overlord/src/app/product/product-detail/product-detail.component.ts
index a55675af..2ac3820b 100644
--- a/overlord/src/app/product/product-detail/product-detail.component.ts
+++ b/overlord/src/app/product/product-detail/product-detail.component.ts
@@ -1,6 +1,6 @@
 import { CurrencyPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { afterNextRender, Component, computed, inject, input, linkedSignal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -11,22 +11,65 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject } from 'rxjs';
+import { Router } from '@angular/router';
 
 import { Product, StockKeepingUnit } from '../../core/product';
-import { ProductGroup } from '../../core/product-group';
+import { ProductGroupService } from '../../product-group/product-group.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { ProductService } from '../product.service';
-import { ProductDetailDatasource } from './product-detail-datasource';
 import { ProductDetailDialogComponent } from './product-detail-dialog.component';
 
+export interface ProductSkuFormData {
+  id: string | null;
+  units: string;
+  fraction: number;
+  productYield: number;
+  costPrice: number;
+  salePrice: number;
+}
+
+export interface ProductDetailFormModel {
+  handle: string;
+  name: string;
+  description: string;
+  fractionUnits: string;
+  addRow: {
+    units: string;
+    fraction: string;
+    productYield: string;
+    costPrice: string;
+    salePrice: string;
+  };
+  skus: ProductSkuFormData[];
+  isPurchased: boolean;
+  isSold: boolean;
+  isActive: boolean;
+  productGroup: string;
+  allergen: string;
+  protein: number;
+  carbohydrate: number;
+  totalSugar: number;
+  addedSugar: number;
+  totalFat: number;
+  saturatedFat: number;
+  transFat: number;
+  cholestrol: number;
+  sodium: number;
+  msnf: number;
+  otherSolids: number;
+  totalSolids: number;
+  water: number;
+}
+
 @Component({
   selector: 'app-product-detail',
   templateUrl: './product-detail.component.html',
   styleUrls: ['./product-detail.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatCheckboxModule,
@@ -36,112 +79,30 @@ import { ProductDetailDialogComponent } from './product-detail-dialog.component'
     MatTableModule,
     MatIconModule,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class ProductDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class ProductDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private ser = inject(ProductService);
+  private pgSer = inject(ProductGroupService);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    handle: FormControl<string>;
-    name: FormControl<string | null>;
-    description: FormControl<string | null>;
-    fractionUnits: FormControl<string | null>;
-    addRow: FormGroup<{
-      units: FormControl<string | null>;
-      fraction: FormControl<string | null>;
-      productYield: FormControl<string | null>;
-      costPrice: FormControl<string | null>;
-      salePrice: FormControl<string | null>;
-    }>;
-    isPurchased: FormControl<boolean>;
-    isSold: FormControl<boolean>;
-    isActive: FormControl<boolean>;
-    productGroup: FormControl<string | null>;
+  itemResource = this.ser.get(this.id);
+  item = linkedSignal(() => this.itemResource.value() ?? new Product());
 
-    allergen: FormControl<string | null>;
-    protein: FormControl<number>;
-    carbohydrate: FormControl<number>;
-    totalSugar: FormControl<number>;
-    addedSugar: FormControl<number>;
-    totalFat: FormControl<number>;
-    saturatedFat: FormControl<number>;
-    transFat: FormControl<number>;
-    cholestrol: FormControl<number>;
-    sodium: FormControl<number>;
-
-    msnf: FormControl<number>;
-    otherSolids: FormControl<number>;
-    totalSolids: FormControl<number>;
-    water: FormControl<number>;
-  }>;
-
-  productGroups: ProductGroup[] = [];
-  public skus = new BehaviorSubject<StockKeepingUnit[]>([]);
-  dataSource: ProductDetailDatasource = new ProductDetailDatasource(this.skus);
-  item: Product = new Product();
-
-  displayedColumns = ['units', 'fraction', 'yield', 'costPrice', 'salePrice', 'action'];
-
-  constructor() {
-    this.form = new FormGroup({
-      handle: new FormControl<string>({ value: '', disabled: true }, { nonNullable: true }),
-      name: new FormControl<string | null>(null),
-      description: new FormControl<string | null>(null),
-      fractionUnits: new FormControl<string | null>(null),
-      addRow: new FormGroup({
-        units: new FormControl<string | null>(null),
-        fraction: new FormControl<string | null>(null),
-        productYield: new FormControl<string | null>(null),
-        costPrice: new FormControl<string | null>(null),
-        salePrice: new FormControl<string | null>(null),
-      }),
-      isPurchased: new FormControl<boolean>(true, { nonNullable: true }),
-      isSold: new FormControl<boolean>(true, { nonNullable: true }),
-      isActive: new FormControl<boolean>(true, { nonNullable: true }),
-      productGroup: new FormControl<string | null>(null),
-
-      allergen: new FormControl<string | null>(null),
-      protein: new FormControl<number>(0, { nonNullable: true }),
-      carbohydrate: new FormControl<number>(0, { nonNullable: true }),
-      totalSugar: new FormControl<number>(0, { nonNullable: true }),
-      addedSugar: new FormControl<number>(0, { nonNullable: true }),
-      totalFat: new FormControl<number>(0, { nonNullable: true }),
-      saturatedFat: new FormControl<number>(0, { nonNullable: true }),
-      transFat: new FormControl<number>(0, { nonNullable: true }),
-      cholestrol: new FormControl<number>(0, { nonNullable: true }),
-      sodium: new FormControl<number>(0, { nonNullable: true }),
-
-      msnf: new FormControl<number>(0, { nonNullable: true }),
-      otherSolids: new FormControl<number>(0, { nonNullable: true }),
-      totalSolids: new FormControl<number>(0, { nonNullable: true }),
-      water: new FormControl<number>(0, { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: Product; productGroups: ProductGroup[] };
-
-      this.productGroups = data.productGroups;
-      this.showItem(data.item);
-    });
-    this.dataSource = new ProductDetailDatasource(this.skus);
-    this.skus.next(this.item.skus);
-  }
-
-  showItem(item: Product) {
-    item.productGroup = this.productGroups.find((x) => x.id === item.productGroup?.id);
-    this.item = item;
-    this.form.setValue({
-      handle: this.item.handle || '',
-      name: this.item.name,
-      description: this.item.description || '',
-      fractionUnits: this.item.fractionUnits ?? '',
+  formModel = linkedSignal<Product, ProductDetailFormModel>({
+    source: this.item,
+    computation: (itemVal): ProductDetailFormModel => ({
+      handle: itemVal.handle || '',
+      name: itemVal.name || '',
+      description: itemVal.description || '',
+      fractionUnits: itemVal.fractionUnits ?? '',
       addRow: {
         units: '',
         fraction: '',
@@ -149,42 +110,58 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
         costPrice: '',
         salePrice: '',
       },
-      isPurchased: this.item.isPurchased,
-      isSold: this.item.isSold,
-      isActive: this.item.isActive,
-      productGroup: this.item.productGroup ? (this.item.productGroup.id ?? '') : '',
+      skus: (itemVal.skus || []).map((s) => ({
+        id: s.id,
+        units: s.units,
+        fraction: s.fraction,
+        productYield: s.productYield,
+        costPrice: s.costPrice,
+        salePrice: s.salePrice,
+      })),
+      isPurchased: itemVal.isPurchased ?? true,
+      isSold: itemVal.isSold ?? true,
+      isActive: itemVal.isActive ?? true,
+      productGroup: itemVal.productGroup ? (itemVal.productGroup.id ?? '') : '',
 
-      allergen: this.item.allergen ?? '',
-      protein: this.item.protein,
-      carbohydrate: this.item.carbohydrate,
-      totalSugar: this.item.totalSugar,
-      addedSugar: this.item.addedSugar,
-      totalFat: this.item.totalFat,
-      saturatedFat: this.item.saturatedFat,
-      transFat: this.item.transFat,
-      cholestrol: this.item.cholestrol,
-      sodium: this.item.sodium,
+      allergen: itemVal.allergen ?? '',
+      protein: itemVal.protein || 0,
+      carbohydrate: itemVal.carbohydrate || 0,
+      totalSugar: itemVal.totalSugar || 0,
+      addedSugar: itemVal.addedSugar || 0,
+      totalFat: itemVal.totalFat || 0,
+      saturatedFat: itemVal.saturatedFat || 0,
+      transFat: itemVal.transFat || 0,
+      cholestrol: itemVal.cholestrol || 0,
+      sodium: itemVal.sodium || 0,
 
-      msnf: this.item.msnf,
-      otherSolids: this.item.otherSolids,
-      totalSolids: this.item.totalSolids,
-      water: this.item.water,
+      msnf: itemVal.msnf || 0,
+      otherSolids: itemVal.otherSolids || 0,
+      totalSolids: itemVal.totalSolids || 0,
+      water: itemVal.water || 0,
+    }),
+  });
+
+  form = form(this.formModel);
+
+  productGroupsResource = this.pgSer.list();
+  productGroups = computed(() => this.productGroupsResource.value() ?? []);
+
+  selectedProductGroup = computed(() => {
+    const pgId = this.form.productGroup().value();
+    return this.productGroups().find((x) => x.id === pgId);
+  });
+
+  displayedColumns = ['units', 'fraction', 'yield', 'costPrice', 'salePrice', 'action'];
+
+  constructor() {
+    afterNextRender(() => {
+      this.form.name().focusBoundControl();
     });
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
-  updatePG(id: string) {
-    this.item.productGroup = this.productGroups.find((x) => x.id == id);
-  }
-
   addRow() {
-    const formValue = this.form.value.addRow;
-    if (formValue === undefined) {
+    const formValue = this.form().value().addRow;
+    if (!formValue) {
       return;
     }
     const fraction = Number(formValue.fraction);
@@ -207,47 +184,69 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
       this.snackBar.open('Sale Price has to be >= 0', 'Danger');
       return;
     }
-    this.item.skus.push(
-      new StockKeepingUnit({
-        units: formValue.units ?? '',
-        fraction,
-        productYield,
-        costPrice,
-        salePrice,
-      }),
-    );
-    this.skus.next(this.item.skus);
+    const newSku: ProductSkuFormData = {
+      id: null,
+      units: formValue.units ?? '',
+      fraction,
+      productYield,
+      costPrice,
+      salePrice,
+    };
+    this.formModel.update((m) => ({
+      ...m,
+      skus: [...m.skus, newSku],
+    }));
     this.resetAddRow();
   }
 
   resetAddRow() {
-    this.form.controls.addRow.reset();
+    this.formModel.update((m) => ({
+      ...m,
+      addRow: { units: '', fraction: '', productYield: '', costPrice: '', salePrice: '' },
+    }));
   }
 
-  editRow(row: StockKeepingUnit) {
+  editRow(row: ProductSkuFormData) {
     const dialogRef = this.dialog.open(ProductDetailDialogComponent, {
       width: '750px',
       data: {
-        item: { ...row },
-        isSold: this.item.isSold,
-        isPurchased: this.item.isPurchased,
+        item: new StockKeepingUnit({ ...row }),
+        isSold: this.form.isSold().value(),
+        isPurchased: this.form.isPurchased().value(),
       },
     });
 
     dialogRef.afterClosed().subscribe((result: boolean | StockKeepingUnit) => {
-      if (!result) {
+      if (!result || typeof result === 'boolean') {
         return;
       }
-      const j = result as StockKeepingUnit;
-      Object.assign(row, j);
-      this.skus.next(this.item.skus);
+      const j = result;
+      const updatedSkus = this.formModel().skus.map((item) =>
+        item === row
+          ? {
+              id: j.id,
+              units: j.units,
+              fraction: j.fraction,
+              productYield: j.productYield,
+              costPrice: j.costPrice,
+              salePrice: j.salePrice,
+            }
+          : item,
+      );
+      this.formModel.update((m) => ({
+        ...m,
+        skus: updatedSkus,
+      }));
       this.resetAddRow();
     });
   }
 
-  deleteRow(row: StockKeepingUnit) {
-    this.item.skus.splice(this.item.skus.indexOf(row), 1);
-    this.skus.next(this.item.skus);
+  deleteRow(row: ProductSkuFormData) {
+    const updatedSkus = this.formModel().skus.filter((item) => item !== row);
+    this.formModel.update((m) => ({
+      ...m,
+      skus: updatedSkus,
+    }));
   }
 
   save() {
@@ -257,26 +256,30 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/products');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
-      next: () => {
-        this.snackBar.open('', 'Success');
-        this.router.navigateByUrl('/products');
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
+    const id = this.id();
+    if (id) {
+      this.ser.delete(id).subscribe({
+        next: () => {
+          this.snackBar.open('', 'Success');
+          this.router.navigateByUrl('/products');
+        },
+        error: (error) => {
+          this.snackBar.open(error as string, 'Danger');
+        },
+      });
+    }
   }
 
   confirmDelete(): void {
+    const id = this.id();
+    if (!id) return;
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '250px',
       data: { title: 'Delete Product?', content: 'Are you sure? This cannot be undone.' },
     });
 
@@ -288,30 +291,36 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): Product {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    this.item.description = formModel.description ?? '';
-    this.item.fractionUnits = formModel.fractionUnits ?? '';
-    this.item.isPurchased = formModel.isPurchased ?? true;
-    this.item.isSold = formModel.isSold ?? false;
-    this.item.isActive = formModel.isActive ?? true;
+    const formModel = this.formModel();
+    const base = this.item();
+    const item = new Product({ ...base });
+    item.handle = formModel.handle ?? '';
+    item.name = formModel.name ?? '';
+    item.description = formModel.description ?? '';
+    item.fractionUnits = formModel.fractionUnits ?? '';
+    item.isPurchased = formModel.isPurchased;
+    item.isSold = formModel.isSold;
+    item.isActive = formModel.isActive;
+    item.productGroup = this.productGroups().find((x) => x.id === formModel.productGroup);
 
-    this.item.allergen = formModel.allergen ?? '';
-    this.item.protein = formModel.protein ?? 0;
-    this.item.carbohydrate = formModel.carbohydrate ?? 0;
-    this.item.totalSugar = formModel.totalSugar ?? 0;
-    this.item.addedSugar = formModel.addedSugar ?? 0;
-    this.item.totalFat = formModel.totalFat ?? 0;
-    this.item.saturatedFat = formModel.saturatedFat ?? 0;
-    this.item.transFat = formModel.transFat ?? 0;
-    this.item.cholestrol = formModel.cholestrol ?? 0;
-    this.item.sodium = formModel.sodium ?? 0;
+    item.allergen = formModel.allergen ?? '';
+    item.protein = formModel.protein || 0;
+    item.carbohydrate = formModel.carbohydrate || 0;
+    item.totalSugar = formModel.totalSugar || 0;
+    item.addedSugar = formModel.addedSugar || 0;
+    item.totalFat = formModel.totalFat || 0;
+    item.saturatedFat = formModel.saturatedFat || 0;
+    item.transFat = formModel.transFat || 0;
+    item.cholestrol = formModel.cholestrol || 0;
+    item.sodium = formModel.sodium || 0;
 
-    this.item.msnf = formModel.msnf ?? 0;
-    this.item.otherSolids = formModel.otherSolids ?? 0;
-    this.item.totalSolids = formModel.totalSolids ?? 0;
-    this.item.water = formModel.water ?? 0;
+    item.msnf = formModel.msnf || 0;
+    item.otherSolids = formModel.otherSolids || 0;
+    item.totalSolids = formModel.totalSolids || 0;
+    item.water = formModel.water || 0;
 
-    return this.item;
+    item.skus = formModel.skus.map((s) => new StockKeepingUnit({ ...s }));
+
+    return item;
   }
 }
diff --git a/overlord/src/app/product/product-list.resolver.spec.ts b/overlord/src/app/product/product-list.resolver.spec.ts
deleted file mode 100644
index eaeff3e7..00000000
--- a/overlord/src/app/product/product-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Product } from '../core/product';
-import { productListResolver } from './product-list.resolver';
-
-describe('productListResolver', () => {
-  const executeResolver: ResolveFn<Product[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => productListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/product/product-list.resolver.ts b/overlord/src/app/product/product-list.resolver.ts
deleted file mode 100644
index 6746a82b..00000000
--- a/overlord/src/app/product/product-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Product } from '../core/product';
-import { ProductService } from './product.service';
-
-export const productListResolver: ResolveFn<Product[]> = () => {
-  return inject(ProductService).list();
-};
diff --git a/overlord/src/app/product/product-list/product-list-datasource.ts b/overlord/src/app/product/product-list/product-list-datasource.ts
deleted file mode 100644
index 4d94c5b4..00000000
--- a/overlord/src/app/product/product-list/product-list-datasource.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-
-import { Product } from '../../core/product';
-import { ProductGroup } from '../../core/product-group';
-
-export class ProductListDataSource extends DataSource<Product> {
-  private filterValue = '';
-
-  constructor(
-    public data: Product[],
-    private readonly filter: Observable<string>,
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-    this.filter = filter.pipe(
-      tap((x) => {
-        this.filterValue = x;
-      }),
-    );
-  }
-
-  connect(): Observable<Product[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    return merge(observableOf(this.data), this.filter, ...dataMutations).pipe(
-      map(() => this.getFilteredData([...this.data])),
-      tap((x: Product[]) => {
-        if (this.paginator) {
-          this.paginator.length = x.length;
-        }
-      }),
-      map((x: Product[]) => this.getPagedData(this.getSortedData(x))),
-    );
-  }
-
-  disconnect() {}
-
-  private getFilteredData(data: Product[]): Product[] {
-    return this.filterValue.split(' ').reduce(
-      (p: Product[], c: string) =>
-        p.filter((x) => {
-          const productString =
-            `${x.handle} ${x.name} ${x.productGroup?.name}${x.isPurchased ? ' purchased' : ' made'}${
-              x.isSold ? 'sold' : 'used'
-            }${x.isActive ? 'active' : 'deactive'}`.toLowerCase();
-          return productString.indexOf(c) !== -1;
-        }),
-      Object.assign([], data),
-    );
-  }
-
-  private getPagedData(data: Product[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: Product[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        case 'productGroup':
-          return compare((a.productGroup as ProductGroup).name, (b.productGroup as ProductGroup).name, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/product/product-list/product-list.component.html b/overlord/src/app/product/product-list/product-list.component.html
index 15ecca22..c863854f 100644
--- a/overlord/src/app/product/product-list/product-list.component.html
+++ b/overlord/src/app/product/product-list/product-list.component.html
@@ -1,6 +1,6 @@
 <h2 class="row-container space-between">
   <span>Products</span>
-  @if (dataSource.data.length) {
+  @if (list().length) {
     <button mat-icon-button (click)="exportCsv()">
       <mat-icon>save_alt</mat-icon>
     </button>
@@ -11,102 +11,108 @@
   </a>
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="productForm">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Filter</mat-label>
-      <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
+      <input type="text" matInput #filterElement [formField]="productForm.filter" autocomplete="off" />
     </mat-form-field>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        @for (sku of row.skus; track sku) {
-          <li>
-            <a [routerLink]="['/products', row.id]"
-              >{{ row.name }} ({{ showExtended ? sku.fraction + ' ' + row.fractionUnits + ' = 1 ' : ''
-              }}{{ sku.units }})</a
-            >
-          </li>
-        }
-      </ul>
-    </mat-cell>
-  </ng-container>
+@if (resource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (resource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="resource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <ul>
+          @for (sku of row.skus; track sku) {
+            <li>
+              <a [routerLink]="['/products', row.id]"
+                >{{ row.name }} ({{ showExtended() ? sku.fraction + ' ' + row.fractionUnits + ' = 1 ' : ''
+                }}{{ sku.units }})</a
+              >
+            </li>
+          }
+        </ul>
+      </mat-cell>
+    </ng-container>
 
-  <!-- Cost Price Column -->
-  <ng-container matColumnDef="costPrice">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Cost Price</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        @for (sku of row.skus; track sku) {
-          <li>
-            {{ sku.costPrice | currency: 'INR' }}
-          </li>
-        }
-      </ul>
-    </mat-cell>
-  </ng-container>
+    <!-- Cost Price Column -->
+    <ng-container matColumnDef="costPrice">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Cost Price</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <ul>
+          @for (sku of row.skus; track sku) {
+            <li>
+              {{ sku.costPrice | currency: 'INR' }}
+            </li>
+          }
+        </ul>
+      </mat-cell>
+    </ng-container>
 
-  <!-- Yield Column -->
-  <ng-container matColumnDef="productYield">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Yield</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        @for (sku of row.skus; track sku) {
-          <li>
-            {{ sku.productYield | percent: '1.2-2' }}
-          </li>
-        }
-      </ul>
-    </mat-cell>
-  </ng-container>
+    <!-- Yield Column -->
+    <ng-container matColumnDef="productYield">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Yield</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <ul>
+          @for (sku of row.skus; track sku) {
+            <li>
+              {{ sku.productYield | percent: '1.2-2' }}
+            </li>
+          }
+        </ul>
+      </mat-cell>
+    </ng-container>
 
-  <!-- Product Group Column -->
-  <ng-container matColumnDef="productGroup">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Product Group</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.productGroup?.name }}</mat-cell>
-  </ng-container>
+    <!-- Product Group Column -->
+    <ng-container matColumnDef="productGroup">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Product Group</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.productGroup?.name }}</mat-cell>
+    </ng-container>
 
-  <!-- Info Column -->
-  <ng-container matColumnDef="info">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Details</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <div layout="row">
-        <div flex>
-          <mat-icon>
-            {{ row.isPurchased ? 'shopping_cart' : 'remove_shopping_cart' }}
-          </mat-icon>
-          <b> {{ row.isPurchased ? 'Purchased' : 'Made' }}</b>
+    <!-- Info Column -->
+    <ng-container matColumnDef="info">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Details</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <div layout="row">
+          <div flex>
+            <mat-icon>
+              {{ row.isPurchased ? 'shopping_cart' : 'remove_shopping_cart' }}
+            </mat-icon>
+            <b> {{ row.isPurchased ? 'Purchased' : 'Made' }}</b>
+          </div>
+          <div flex>
+            <mat-icon>
+              {{ row.isSold ? 'restaurant_menu' : 'import_contacts' }}
+            </mat-icon>
+            <b> {{ row.isSold ? 'Sold' : 'Used' }}</b>
+          </div>
+          <div flex>
+            <mat-icon>
+              {{ row.isActive ? 'visibility' : 'visibility_off' }}
+            </mat-icon>
+            <b> {{ row.isActive ? 'Active' : 'Deactivated' }}</b>
+          </div>
         </div>
-        <div flex>
-          <mat-icon>
-            {{ row.isSold ? 'restaurant_menu' : 'import_contacts' }}
-          </mat-icon>
-          <b> {{ row.isSold ? 'Sold' : 'Used' }}</b>
-        </div>
-        <div flex>
-          <mat-icon>
-            {{ row.isActive ? 'visibility' : 'visibility_off' }}
-          </mat-icon>
-          <b> {{ row.isActive ? 'Active' : 'Deactivated' }}</b>
-        </div>
-      </div>
-    </mat-cell>
-  </ng-container>
+      </mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns()"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns()"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 5000]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="filteredList().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 5000]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/product/product-list/product-list.component.ts b/overlord/src/app/product/product-list/product-list.component.ts
index 6b28a23d..86c23eca 100644
--- a/overlord/src/app/product/product-list/product-list.component.ts
+++ b/overlord/src/app/product/product-list/product-list.component.ts
@@ -1,30 +1,47 @@
 import { CurrencyPipe, PercentPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import {
+  Component,
+  inject,
+  computed,
+  signal,
+  debounced,
+  input,
+  linkedSignal,
+  afterNextRender,
+  effect,
+} from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
-import { Observable } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 
 import { Product } from '../../core/product';
+import { ProductGroup } from '../../core/product-group';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { ToCsvService } from '../../shared/to-csv.service';
-import { ProductListDataSource } from './product-list-datasource';
+import { ProductService } from '../product.service';
+
+export interface ProductListFormData {
+  filter: string;
+}
 
 @Component({
   selector: 'app-product-list',
   templateUrl: './product-list.component.html',
   styleUrls: ['./product-list.component.css'],
+
   imports: [
     MatIconModule,
     RouterModule,
     MatButtonModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatTableModule,
@@ -32,77 +49,111 @@ import { ProductListDataSource } from './product-list-datasource';
     MatPaginatorModule,
     PercentPipe,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class ProductListComponent implements OnInit, AfterViewInit {
+export class ProductListComponent {
   private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private ser = inject(ProductService);
   private toCsv = inject(ToCsvService);
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  showExtended = signal(true);
+  q = input('', { transform: (v: string | null | undefined) => v ?? '' });
+  formModel = linkedSignal({
+    source: this.q,
+    computation: (qValue): ProductListFormData => ({ filter: qValue }),
+  });
 
-  @ViewChild('filterElement', { static: true }) filterElement!: ElementRef<HTMLInputElement>;
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  list: Product[] = [];
-  filter: Observable<string>;
-  dataSource: ProductListDataSource;
-  form: FormGroup<{
-    filter: FormControl<string>;
-  }>;
+  productForm = form(this.formModel);
 
-  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns: string[] = [];
+  filterSignal = computed(() => this.formModel().filter);
+  debouncedFilter = debounced(this.filterSignal, 150);
+  resource = this.ser.list();
+  list = computed(() => this.resource.value() ?? []);
+  filteredList = computed(() => {
+    const q = (this.debouncedFilter.value() ?? '').trim().toLowerCase();
+    const data = this.list();
+    if (!q) {
+      return data;
+    }
+    return q.split(' ').reduce(
+      (p: Product[], c: string) =>
+        p.filter((x) => {
+          const productString =
+            `${x.handle} ${x.name} ${x.productGroup?.name}${x.isPurchased ? ' purchased' : ' made'}${
+              x.isSold ? 'sold' : 'used'
+            }${x.isActive ? 'active' : 'deactive'}`.toLowerCase();
+          return productString.indexOf(c) !== -1;
+        }),
+      [...data],
+    );
+  });
 
-  private _showExtended = true;
+  sortedList = computed(() => {
+    const data = this.filteredList();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'productGroup':
+          return compare((a.productGroup as ProductGroup).name, (b.productGroup as ProductGroup).name, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  length = computed(() => this.filteredList().length);
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
   constructor() {
-    this.showExtended = true;
-    this.form = new FormGroup({
-      filter: new FormControl<string>('', { nonNullable: true }),
+    afterNextRender(() => {
+      this.productForm().focusBoundControl();
     });
-    this.filter = this.form.controls.filter.valueChanges.pipe(debounceTime(150), distinctUntilChanged());
-    this.dataSource = new ProductListDataSource(this.list, this.filter, this.paginator, this.sort);
-  }
-
-  get showExtended(): boolean {
-    return this._showExtended;
-  }
-
-  set showExtended(value: boolean) {
-    this._showExtended = value;
-    if (value) {
-      this.displayedColumns = ['name', 'costPrice', 'productYield', 'productGroup', 'info'];
-    } else {
-      this.displayedColumns = ['name', 'costPrice', 'productGroup', 'info'];
-    }
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: Product[] };
-
-      this.list = data.list;
+    effect(() => {
+      const q = this.debouncedFilter.value() ?? '';
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: { q: q || null },
+        queryParamsHandling: 'merge',
+        replaceUrl: true,
+      });
     });
-    this.dataSource = new ProductListDataSource(this.list, this.filter, this.paginator, this.sort);
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.filterElement.nativeElement.focus();
-    }, 0);
-  }
+  displayedColumns = computed(() =>
+    this.showExtended()
+      ? ['name', 'costPrice', 'productYield', 'productGroup', 'info']
+      : ['name', 'costPrice', 'productGroup', 'info'],
+  );
 
   exportCsv() {
     const headers = {
-      Handle: 'handle',
-      Name: 'name',
-      Units: 'units',
-      Fraction: 'fraction',
-      FractionUnits: 'fractionUnits',
-      CostPrice: 'costPrice',
-      Yield: 'yield',
-      ProductGroup: 'productGroup',
+      name: 'Name',
+      costPrice: 'Cost Price',
+      productGroup: 'Product Group',
     };
-
-    const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource.data)], {
+    const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource())], {
       type: 'text/csv;charset=utf-8;',
     });
     const link = document.createElement('a');
@@ -112,4 +163,17 @@ export class ProductListComponent implements OnInit, AfterViewInit {
     link.click();
     document.body.removeChild(link);
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/product/product.resolver.spec.ts b/overlord/src/app/product/product.resolver.spec.ts
deleted file mode 100644
index 9962a7e0..00000000
--- a/overlord/src/app/product/product.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Product } from '../core/product';
-import { productResolver } from './product.resolver';
-
-describe('productResolver', () => {
-  const executeResolver: ResolveFn<Product> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => productResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/product/product.resolver.ts b/overlord/src/app/product/product.resolver.ts
deleted file mode 100644
index ef916305..00000000
--- a/overlord/src/app/product/product.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Product } from '../core/product';
-import { ProductService } from './product.service';
-
-export const productResolver: ResolveFn<Product> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(ProductService).get(id);
-};
diff --git a/overlord/src/app/product/product.routes.ts b/overlord/src/app/product/product.routes.ts
index 2977c94b..5522d24b 100644
--- a/overlord/src/app/product/product.routes.ts
+++ b/overlord/src/app/product/product.routes.ts
@@ -1,11 +1,8 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-import { productGroupListResolver } from '../product-group/product-group-list.resolver';
 import { ProductDetailComponent } from './product-detail/product-detail.component';
-import { productListResolver } from './product-list.resolver';
 import { ProductListComponent } from './product-list/product-list.component';
-import { productResolver } from './product.resolver';
 
 export const routes: Routes = [
   {
@@ -15,9 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Products',
     },
-    resolve: {
-      list: productListResolver,
-    },
   },
   {
     path: 'new',
@@ -26,10 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Products',
     },
-    resolve: {
-      item: productResolver,
-      productGroups: productGroupListResolver,
-    },
   },
   {
     path: ':id',
@@ -38,9 +28,5 @@ export const routes: Routes = [
     data: {
       permission: 'Products',
     },
-    resolve: {
-      item: productResolver,
-      productGroups: productGroupListResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/product/product.service.ts b/overlord/src/app/product/product.service.ts
index 534327df..022951c6 100644
--- a/overlord/src/app/product/product.service.ts
+++ b/overlord/src/app/product/product.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource, HttpParams } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -8,36 +8,32 @@ import { Product } from '../core/product';
 import { ProductSku } from '../core/product-sku';
 
 const url = '/api/products';
-const serviceName = 'ProductService';
-
 @Injectable({ providedIn: 'root' })
 export class ProductService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<Product> {
-    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
-    return this.http
-      .get<Product>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Product>;
+  get(id: Signal<string | null>) {
+    return httpResource<Product>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<Product[]> {
-    return this.http
-      .get<Product[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'getList'))) as Observable<Product[]>;
+  list() {
+    return httpResource<Product[]>(() => `${url}/list`);
   }
 
   save(product: Product): Observable<Product> {
     return this.http
       .post<Product>(`${url}`, product)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<Product>;
+      .pipe(catchError(this.log.handleError('ProductService', 'save'))) as Observable<Product>;
   }
 
   update(product: Product): Observable<Product> {
     return this.http
       .put<Product>(`${url}/${product.id}`, product)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<Product>;
+      .pipe(catchError(this.log.handleError('ProductService', 'update'))) as Observable<Product>;
   }
 
   saveOrUpdate(product: Product): Observable<Product> {
@@ -50,38 +46,41 @@ export class ProductService {
   delete(id: string): Observable<Product> {
     return this.http
       .delete<Product>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<Product>;
+      .pipe(catchError(this.log.handleError('ProductService', 'delete'))) as Observable<Product>;
   }
 
-  autocompleteProduct(query: string, isPurchased: boolean | null): Observable<ProductSku[]> {
-    const options = {
-      params: new HttpParams().set('q', query),
-    };
-    if (isPurchased !== null) {
-      options.params = options.params.set('p', isPurchased.toString());
-    }
-    return this.http
-      .get<ProductSku[]>(`${url}/q-product`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'autocomplete'))) as Observable<ProductSku[]>;
+  autocompleteProduct(query: Signal<string | null>, isPurchased: Signal<boolean | null>) {
+    return httpResource<ProductSku[]>(() => {
+      const q = query();
+      if (!q) return undefined;
+      let params = new HttpParams().set('q', q || '');
+      if (isPurchased() !== null) {
+        params = params.set('p', isPurchased.toString());
+      }
+      return { url: `${url}/q-product`, params };
+    });
   }
 
   autocompleteSku(
-    query: string,
-    isPurchased: boolean | null,
-    date?: string,
-    vendorId?: string,
-  ): Observable<ProductSku[]> {
-    const options = {
-      params: new HttpParams().set('q', query),
-    };
-    if (isPurchased !== null) {
-      options.params = options.params.set('p', isPurchased.toString());
-    }
-    if (!!vendorId && !!date) {
-      options.params = options.params.set('v', vendorId as string).set('d', date as string);
-    }
-    return this.http
-      .get<ProductSku[]>(`${url}/q-sku`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'autocomplete'))) as Observable<ProductSku[]>;
+    query: Signal<string | null>,
+    isPurchased: Signal<boolean | null>,
+    date: Signal<string | null>,
+    vendorId: Signal<string | null>,
+  ) {
+    return httpResource<ProductSku[]>(() => {
+      const q = query();
+      if (!q) return undefined;
+      let params = new HttpParams().set('q', q || '');
+      const p = isPurchased();
+      if (p !== null) {
+        params = params.set('p', p.toString());
+      }
+      const v = vendorId();
+      const d = date();
+      if (!!v && !!d) {
+        params = params.set('v', v).set('d', d);
+      }
+      return { url: `${url}/q-sku`, params };
+    });
   }
 }
diff --git a/overlord/src/app/profit-loss/profit-loss-datasource.ts b/overlord/src/app/profit-loss/profit-loss-datasource.ts
deleted file mode 100644
index 94918161..00000000
--- a/overlord/src/app/profit-loss/profit-loss-datasource.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { ProfitLossItem } from './profit-loss-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class ProfitLossDataSource extends DataSource<ProfitLossItem> {
-  constructor(
-    public data: ProfitLossItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<ProfitLossItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: ProfitLossItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: ProfitLossItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'group':
-          return compare(a.group, b.group, isAsc);
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        case 'amount':
-          return compare(+a.amount, +b.amount, isAsc);
-        case 'total':
-          return compare(+a.total, +b.total, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/profit-loss/profit-loss.component.html b/overlord/src/app/profit-loss/profit-loss.component.html
index a1b201d2..b520bb78 100644
--- a/overlord/src/app/profit-loss/profit-loss.component.html
+++ b/overlord/src/app/profit-loss/profit-loss.component.html
@@ -1,65 +1,71 @@
 <h2>Profit & Loss</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
+      <input matInput #startDateElement [matDatepicker]="startDate" [formField]="form.startDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
       <mat-datepicker #startDate></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Group Column -->
-  <ng-container matColumnDef="group">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef>{{ info.footer.group }}</mat-footer-cell>
-  </ng-container>
+@if (infoResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (infoResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Group Column -->
+    <ng-container matColumnDef="group">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef>{{ info().footer.group }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef>{{ info.footer.name }}</mat-footer-cell>
-  </ng-container>
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef>{{ info().footer.name }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Amount Column -->
-  <ng-container matColumnDef="amount">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">
-      {{ info.footer.amount | currency: 'INR' }}
-    </mat-footer-cell>
-  </ng-container>
+    <!-- Amount Column -->
+    <ng-container matColumnDef="amount">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">
+        {{ info().footer.amount | currency: 'INR' }}
+      </mat-footer-cell>
+    </ng-container>
 
-  <!-- Total Column -->
-  <ng-container matColumnDef="total">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Total</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.total | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">
-      {{ info.footer.total | currency: 'INR' }}
-    </mat-footer-cell>
-  </ng-container>
+    <!-- Total Column -->
+    <ng-container matColumnDef="total">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Total</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.total | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">
+        {{ info().footer.total | currency: 'INR' }}
+      </mat-footer-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="(this.info().body ?? []).length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/profit-loss/profit-loss.component.ts b/overlord/src/app/profit-loss/profit-loss.component.ts
index 90109675..a61f4027 100644
--- a/overlord/src/app/profit-loss/profit-loss.component.ts
+++ b/overlord/src/app/profit-loss/profit-loss.component.ts
@@ -1,25 +1,34 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, linkedSignal, computed, signal, input, afterNextRender } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { ProfitLoss } from './profit-loss';
-import { ProfitLossDataSource } from './profit-loss-datasource';
+import { ProfitLossService } from './profit-loss.service';
+
+export interface ProfitLossFormData {
+  startDate: moment.Moment;
+  finishDate: moment.Moment;
+}
 
 @Component({
   selector: 'app-profit-loss',
   templateUrl: './profit-loss.component.html',
   styleUrls: ['./profit-loss.component.css'],
+
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -28,21 +37,67 @@ import { ProfitLossDataSource } from './profit-loss-datasource';
     MatSortModule,
     MatPaginatorModule,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class ProfitLossComponent implements OnInit {
+export class ProfitLossComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  private ser = inject(ProfitLossService);
+  pageSize = signal(50);
+  pageIndex = signal(0);
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  info: ProfitLoss = new ProfitLoss();
-  dataSource: ProfitLossDataSource = new ProfitLossDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-  }>;
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  infoResource = this.ser.list(this.startDate, this.finishDate);
+  info = computed(() => this.infoResource.value() ?? new ProfitLoss());
+
+  formModel = linkedSignal({
+    source: this.info,
+    computation: (info: ProfitLoss): ProfitLossFormData => ({
+      startDate: info.startDate ? moment(info.startDate, 'DD-MMM-YYYY') : moment(new Date()),
+      finishDate: info.finishDate ? moment(info.finishDate, 'DD-MMM-YYYY') : moment(new Date()),
+    }),
+  });
+
+  form = form(this.formModel);
+
+  sortActive = signal('');
+  sortDirection = signal('');
+  sortedList = computed(() => {
+    const data = this.info().body ?? [];
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'group':
+          return compare(a.group, b.group, isAsc);
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'amount':
+          return compare(a.amount, b.amount, isAsc);
+        case 'total':
+          return compare(a.total, b.total, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
   selectedRowId = '';
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -51,46 +106,45 @@ export class ProfitLossComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
+    this.form().focusBoundControl();
   }
 
   constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: ProfitLoss };
-
-      this.info = data.info;
-      this.form.setValue({
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new ProfitLossDataSource(this.info.body, this.paginator, this.sort);
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
   show() {
-    const l = this.prepareSubmit();
+    const info = this.getInfo();
     this.router.navigate(['profit-loss'], {
       queryParams: {
-        startDate: l.startDate,
-        finishDate: l.finishDate,
+        startDate: info.startDate,
+        finishDate: info.finishDate,
       },
     });
   }
 
-  prepareSubmit(): ProfitLoss {
-    const formModel = this.form.value;
+  getInfo(): ProfitLoss {
+    const formModel = this.formModel();
 
     return new ProfitLoss({
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
       finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
+      footer: this.info().footer,
+      body: this.info().body,
     });
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/profit-loss/profit-loss.resolver.spec.ts b/overlord/src/app/profit-loss/profit-loss.resolver.spec.ts
deleted file mode 100644
index 2b735beb..00000000
--- a/overlord/src/app/profit-loss/profit-loss.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { ProfitLoss } from './profit-loss';
-import { profitLossResolver } from './profit-loss.resolver';
-
-describe('profitLossResolver', () => {
-  const executeResolver: ResolveFn<ProfitLoss> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => profitLossResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/profit-loss/profit-loss.resolver.ts b/overlord/src/app/profit-loss/profit-loss.resolver.ts
deleted file mode 100644
index df9d225e..00000000
--- a/overlord/src/app/profit-loss/profit-loss.resolver.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { ProfitLoss } from './profit-loss';
-import { ProfitLossService } from './profit-loss.service';
-
-export const profitLossResolver: ResolveFn<ProfitLoss> = (route) => {
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(ProfitLossService).list(startDate, finishDate);
-};
diff --git a/overlord/src/app/profit-loss/profit-loss.routes.ts b/overlord/src/app/profit-loss/profit-loss.routes.ts
index 87d6938a..1af005e0 100644
--- a/overlord/src/app/profit-loss/profit-loss.routes.ts
+++ b/overlord/src/app/profit-loss/profit-loss.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { ProfitLossComponent } from './profit-loss.component';
-import { profitLossResolver } from './profit-loss.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Profit & Loss',
     },
-    resolve: {
-      info: profitLossResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/profit-loss/profit-loss.service.ts b/overlord/src/app/profit-loss/profit-loss.service.ts
index c9d3eb94..01ae7d5f 100644
--- a/overlord/src/app/profit-loss/profit-loss.service.ts
+++ b/overlord/src/app/profit-loss/profit-loss.service.ts
@@ -1,14 +1,10 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { HttpClient, httpResource, HttpParams } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { ProfitLoss } from './profit-loss';
 
 const url = '/api/profit-loss';
-const serviceName = 'ProfitLossService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,16 +12,14 @@ export class ProfitLossService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(startDate: string | null, finishDate: string | null): Observable<ProfitLoss> {
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    return this.http
-      .get<ProfitLoss>(url, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<ProfitLoss>;
+  list(startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<ProfitLoss>(() => {
+      let params = new HttpParams();
+      const s = startDate();
+      if (s !== null) params = params.set('s', s);
+      const f = finishDate();
+      if (f !== null) params = params.set('f', f);
+      return { url, params };
+    });
   }
 }
diff --git a/overlord/src/app/purchase-entries/purchase-entries-datasource.ts b/overlord/src/app/purchase-entries/purchase-entries-datasource.ts
deleted file mode 100644
index 1432aa1f..00000000
--- a/overlord/src/app/purchase-entries/purchase-entries-datasource.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { PurchaseEntriesItem } from './purchase-entries-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class PurchaseEntriesDataSource extends DataSource<PurchaseEntriesItem> {
-  constructor(
-    public data: PurchaseEntriesItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<PurchaseEntriesItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: PurchaseEntriesItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: PurchaseEntriesItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'date':
-          return compare(a.date, b.date, isAsc);
-        case 'supplier':
-          return compare(a.supplier, b.supplier, isAsc);
-        case 'product':
-          return compare(a.product, b.product, isAsc);
-        case 'amount':
-          return compare(+a.amount, +b.amount, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/purchase-entries/purchase-entries.component.html b/overlord/src/app/purchase-entries/purchase-entries.component.html
index f4a0d4a9..8d87b03b 100644
--- a/overlord/src/app/purchase-entries/purchase-entries.component.html
+++ b/overlord/src/app/purchase-entries/purchase-entries.component.html
@@ -1,82 +1,88 @@
 <h2>Purchase Entries</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
+      <input matInput #startDateElement [matDatepicker]="startDate" [formField]="form.startDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
       <mat-datepicker #startDate></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Date Column -->
-  <ng-container matColumnDef="date">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
-  </ng-container>
+@if (resource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (resource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="resource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Date Column -->
+    <ng-container matColumnDef="date">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
+    </ng-container>
 
-  <!-- Supplier Column -->
-  <ng-container matColumnDef="supplier">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="row.url">{{ row.supplier }}</a></mat-cell
-    >
-  </ng-container>
+    <!-- Supplier Column -->
+    <ng-container matColumnDef="supplier">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="row.url">{{ row.supplier }}</a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Product Column -->
-  <ng-container matColumnDef="product">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Product</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.product }}</mat-cell>
-  </ng-container>
+    <!-- Product Column -->
+    <ng-container matColumnDef="product">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Product</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.product }}</mat-cell>
+    </ng-container>
 
-  <!-- Quantity Column -->
-  <ng-container matColumnDef="quantity">
-    <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
-  </ng-container>
+    <!-- Quantity Column -->
+    <ng-container matColumnDef="quantity">
+      <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
+    </ng-container>
 
-  <!-- Rate Column -->
-  <ng-container matColumnDef="rate">
-    <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
-  </ng-container>
+    <!-- Rate Column -->
+    <ng-container matColumnDef="rate">
+      <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
+    </ng-container>
 
-  <!-- Tax Column -->
-  <ng-container matColumnDef="tax">
-    <mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.tax | percent: '1.2-2' }}</mat-cell>
-  </ng-container>
+    <!-- Tax Column -->
+    <ng-container matColumnDef="tax">
+      <mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.tax | percent: '1.2-2' }}</mat-cell>
+    </ng-container>
 
-  <!-- Discount Column -->
-  <ng-container matColumnDef="discount">
-    <mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.discount | percent: '1.2-2' }}</mat-cell>
-  </ng-container>
+    <!-- Discount Column -->
+    <ng-container matColumnDef="discount">
+      <mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.discount | percent: '1.2-2' }}</mat-cell>
+    </ng-container>
 
-  <!-- Amount Column -->
-  <ng-container matColumnDef="amount">
-    <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-  </ng-container>
+    <!-- Amount Column -->
+    <ng-container matColumnDef="amount">
+      <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="(this.info().body ?? []).length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/purchase-entries/purchase-entries.component.ts b/overlord/src/app/purchase-entries/purchase-entries.component.ts
index 11853fee..a120f8b2 100644
--- a/overlord/src/app/purchase-entries/purchase-entries.component.ts
+++ b/overlord/src/app/purchase-entries/purchase-entries.component.ts
@@ -1,25 +1,34 @@
 import { CurrencyPipe, DecimalPipe, PercentPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, linkedSignal, computed, signal, input } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import moment from 'moment';
 
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { PurchaseEntries } from './purchase-entries';
-import { PurchaseEntriesDataSource } from './purchase-entries-datasource';
+import { PurchaseEntriesService } from './purchase-entries.service';
+
+export interface PurchaseEntriesFormData {
+  startDate: moment.Moment | null | string;
+  finishDate: moment.Moment | null | string;
+}
 
 @Component({
   selector: 'app-purchase-entries',
   templateUrl: './purchase-entries.component.html',
   styleUrls: ['./purchase-entries.component.css'],
+
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -31,21 +40,75 @@ import { PurchaseEntriesDataSource } from './purchase-entries-datasource';
     DecimalPipe,
     PercentPipe,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class PurchaseEntriesComponent implements OnInit {
+export class PurchaseEntriesComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  private ser = inject(PurchaseEntriesService);
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  info: PurchaseEntries = new PurchaseEntries();
-  dataSource: PurchaseEntriesDataSource = new PurchaseEntriesDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-  }>;
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  resource = this.ser.list(this.startDate, this.finishDate);
+  info = computed(() => this.resource.value() ?? new PurchaseEntries());
+  sortedList = computed(() => {
+    const data = this.info().body ?? [];
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'date':
+          return compare(a.date, b.date, isAsc);
+        case 'supplier':
+          return compare(a.supplier, b.supplier, isAsc);
+        case 'product':
+          return compare(a.product, b.product, isAsc);
+        case 'quantity':
+          return compare(a.quantity, b.quantity, isAsc);
+        case 'rate':
+          return compare(a.rate, b.rate, isAsc);
+        case 'tax':
+          return compare(a.tax, b.tax, isAsc);
+        case 'discount':
+          return compare(a.discount, b.discount, isAsc);
+        case 'amount':
+          return compare(a.amount, b.amount, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  formModel = linkedSignal({
+    source: () => null,
+    computation: (): PurchaseEntriesFormData => ({
+      startDate: moment(new Date()),
+      finishDate: moment(new Date()),
+    }),
+  });
+
+  form = form(this.formModel);
 
   selectedRowId = '';
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -54,28 +117,7 @@ export class PurchaseEntriesComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
-  }
-
-  constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: PurchaseEntries };
-
-      this.info = data.info;
-      this.form.setValue({
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new PurchaseEntriesDataSource(this.info.body, this.paginator, this.sort);
-    });
+    this.form().focusBoundControl();
   }
 
   show() {
@@ -89,7 +131,7 @@ export class PurchaseEntriesComponent implements OnInit {
   }
 
   prepareSubmit(): PurchaseEntries {
-    const formModel = this.form.value;
+    const formModel = this.formModel();
 
     return {
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
@@ -97,4 +139,17 @@ export class PurchaseEntriesComponent implements OnInit {
       body: [],
     };
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/purchase-entries/purchase-entries.resolver.spec.ts b/overlord/src/app/purchase-entries/purchase-entries.resolver.spec.ts
deleted file mode 100644
index 852c2745..00000000
--- a/overlord/src/app/purchase-entries/purchase-entries.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { PurchaseEntries } from './purchase-entries';
-import { purchaseEntriesResolver } from './purchase-entries.resolver';
-
-describe('purchaseEntriesResolver', () => {
-  const executeResolver: ResolveFn<PurchaseEntries> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => purchaseEntriesResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/purchase-entries/purchase-entries.resolver.ts b/overlord/src/app/purchase-entries/purchase-entries.resolver.ts
deleted file mode 100644
index 445e8c3e..00000000
--- a/overlord/src/app/purchase-entries/purchase-entries.resolver.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { PurchaseEntries } from './purchase-entries';
-import { PurchaseEntriesService } from './purchase-entries.service';
-
-export const purchaseEntriesResolver: ResolveFn<PurchaseEntries> = (route) => {
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(PurchaseEntriesService).list(startDate, finishDate);
-};
diff --git a/overlord/src/app/purchase-entries/purchase-entries.routes.ts b/overlord/src/app/purchase-entries/purchase-entries.routes.ts
index 20acbb33..bfd6d112 100644
--- a/overlord/src/app/purchase-entries/purchase-entries.routes.ts
+++ b/overlord/src/app/purchase-entries/purchase-entries.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { PurchaseEntriesComponent } from './purchase-entries.component';
-import { purchaseEntriesResolver } from './purchase-entries.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Purchase Entries',
     },
-    resolve: {
-      info: purchaseEntriesResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/purchase-entries/purchase-entries.service.ts b/overlord/src/app/purchase-entries/purchase-entries.service.ts
index 35996513..6685f1a2 100644
--- a/overlord/src/app/purchase-entries/purchase-entries.service.ts
+++ b/overlord/src/app/purchase-entries/purchase-entries.service.ts
@@ -1,14 +1,10 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { HttpClient, httpResource, HttpParams } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { PurchaseEntries } from './purchase-entries';
 
 const url = '/api/purchase-entries';
-const serviceName = 'PurchaseEntriesService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,16 +12,14 @@ export class PurchaseEntriesService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(startDate: string | null, finishDate: string | null): Observable<PurchaseEntries> {
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    return this.http
-      .get<PurchaseEntries>(url, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<PurchaseEntries>;
+  list(startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<PurchaseEntries>(() => {
+      let params = new HttpParams();
+      const s = startDate();
+      if (s !== null) params = params.set('s', s);
+      const f = finishDate();
+      if (f !== null) params = params.set('f', f);
+      return { url, params };
+    });
   }
 }
diff --git a/overlord/src/app/purchase-return/purchase-return-datasource.ts b/overlord/src/app/purchase-return/purchase-return-datasource.ts
deleted file mode 100644
index 4c5e575a..00000000
--- a/overlord/src/app/purchase-return/purchase-return-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { Inventory } from '../core/inventory';
-
-export class PurchaseReturnDataSource extends DataSource<Inventory> {
-  constructor(private data: Observable<Inventory[]>) {
-    super();
-  }
-
-  connect(): Observable<Inventory[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/purchase-return/purchase-return-dialog.component.html b/overlord/src/app/purchase-return/purchase-return-dialog.component.html
index 0a5cdda6..e426b02e 100644
--- a/overlord/src/app/purchase-return/purchase-return-dialog.component.html
+++ b/overlord/src/app/purchase-return/purchase-return-dialog.component.html
@@ -1,6 +1,6 @@
 <h1 mat-dialog-title>Edit Purchase Return Entry</h1>
 <div mat-dialog-content>
-  <form [formGroup]="form">
+  <form [formRoot]="form">
     <div class="row-container">
       <mat-form-field class="flex-auto basis-2-3">
         <mat-label>Product</mat-label>
@@ -9,23 +9,18 @@
           matInput
           #batchElement
           [matAutocomplete]="autoB"
-          formControlName="batch"
+          [formField]="form.batch"
           autocomplete="off"
         />
-        <mat-autocomplete
-          #autoB="matAutocomplete"
-          autoActiveFirstOption
-          [displayWith]="displayFn"
-          (optionSelected)="batchSelected($event)"
-        >
-          @for (batch of batches | async; track batch) {
+        <mat-autocomplete #autoB="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+          @for (batch of batches(); track batch) {
             <mat-option [value]="batch">{{ batch.name }}</mat-option>
           }
         </mat-autocomplete>
       </mat-form-field>
       <mat-form-field class="flex-auto basis-1-3">
         <mat-label>Quantity</mat-label>
-        <input type="text" matInput formControlName="quantity" autocomplete="off" />
+        <input type="text" matInput [formField]="form.quantity" autocomplete="off" />
       </mat-form-field>
     </div>
   </form>
diff --git a/overlord/src/app/purchase-return/purchase-return-dialog.component.ts b/overlord/src/app/purchase-return/purchase-return-dialog.component.ts
index f8fd06a9..60c1b638 100644
--- a/overlord/src/app/purchase-return/purchase-return-dialog.component.ts
+++ b/overlord/src/app/purchase-return/purchase-return-dialog.component.ts
@@ -1,21 +1,24 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { AsyncPipe } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { Component, computed, inject, linkedSignal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { round } from 'mathjs';
 
 import { Batch } from '../core/batch';
 import { BatchService } from '../core/batch.service';
 import { Inventory } from '../core/inventory';
 import { MathService } from '../shared/math.service';
 
+export interface PurchaseReturnDialogFormData {
+  batch: Batch | string | null;
+  quantity: string;
+}
+
 @Component({
   selector: 'app-purchase-return-dialog',
   templateUrl: './purchase-return-dialog.component.html',
@@ -23,16 +26,16 @@ import { MathService } from '../shared/math.service';
   imports: [
     MatDialogModule,
     CdkScrollableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatAutocompleteModule,
     MatOptionModule,
     MatButtonModule,
-    AsyncPipe,
   ],
 })
-export class PurchaseReturnDialogComponent implements OnInit {
+export class PurchaseReturnDialogComponent {
   dialogRef = inject<MatDialogRef<PurchaseReturnDialogComponent>>(MatDialogRef);
   data = inject<{
     inventory: Inventory;
@@ -42,52 +45,51 @@ export class PurchaseReturnDialogComponent implements OnInit {
   private math = inject(MathService);
   private batchSer = inject(BatchService);
 
-  batches: Observable<Batch[]>;
-  form: FormGroup<{
-    batch: FormControl<string | null>;
-    quantity: FormControl<string>;
-  }>;
+  formModel = linkedSignal<
+    {
+      inventory: Inventory;
+      date: string;
+    },
+    PurchaseReturnDialogFormData
+  >({
+    source: () => this.data,
+    computation: (data: { inventory: Inventory; date: string }): PurchaseReturnDialogFormData => ({
+      batch: data.inventory.batch ?? null,
+      quantity: `${data.inventory.quantity}`,
+    }),
+  });
 
-  batch: Batch = new Batch();
+  form = form(this.formModel);
 
-  constructor() {
-    this.form = new FormGroup({
-      batch: new FormControl<string | null>(null),
-      quantity: new FormControl<string>('', { nonNullable: true }),
-    });
-    // Listen to Batch Autocomplete Change
-    this.batches = this.form.controls.batch.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.batchSer.autocomplete(this.data.date, x))),
-    );
-  }
+  batchSearch = computed(() => {
+    const v = this.form.batch().value();
+    return typeof v === 'string' ? v : null;
+  });
 
-  ngOnInit() {
-    this.form.setValue({
-      batch: this.data.inventory.batch.name,
-      quantity: `${this.data.inventory.quantity}`,
-    });
-    this.batch = this.data.inventory.batch;
-  }
+  batchesResource = this.batchSer.autocomplete(
+    computed(() => this.data.date),
+    this.batchSearch,
+  );
+
+  batches = computed(() => this.batchesResource.value() ?? []);
 
   displayFn(batch?: Batch | string): string {
     return !batch ? '' : typeof batch === 'string' ? batch : batch.name;
   }
 
-  batchSelected(event: MatAutocompleteSelectedEvent): void {
-    this.batch = event.option.value;
-  }
-
   accept(): void {
-    const formValue = this.form.value;
-    const quantity = this.math.parseAmount(formValue.quantity, 2);
-    this.data.inventory.batch = this.batch;
+    const formValue = this.form().value();
+    const batch = typeof formValue.batch === 'string' ? null : formValue.batch;
+    if (!batch || !batch.id) {
+      return;
+    }
+    const quantity = this.math.parseAmount(formValue.quantity ?? '0', 2);
+    this.data.inventory.batch = batch;
     this.data.inventory.quantity = quantity;
-    this.data.inventory.rate = this.batch.rate;
-    this.data.inventory.tax = this.batch.tax;
-    this.data.inventory.discount = this.batch.discount;
-    this.data.inventory.amount = quantity * this.batch.rate * (1 + this.batch.tax) * (1 - this.batch.discount);
+    this.data.inventory.rate = batch.rate;
+    this.data.inventory.tax = batch.tax;
+    this.data.inventory.discount = batch.discount;
+    this.data.inventory.amount = round(quantity * batch.rate * (1 + batch.tax) * (1 - batch.discount), 2);
     this.dialogRef.close(this.data.inventory);
   }
 }
diff --git a/overlord/src/app/purchase-return/purchase-return.component.html b/overlord/src/app/purchase-return/purchase-return.component.html
index b6c19d33..106518e7 100644
--- a/overlord/src/app/purchase-return/purchase-return.component.html
+++ b/overlord/src/app/purchase-return/purchase-return.component.html
@@ -1,15 +1,20 @@
 <h2 class="row-container space-between">
   <span>Purchase Return</span>
-  <mat-icon matSuffix (click)="voucher.isStarred = !voucher.isStarred" class="pointer" [class.gold]="voucher.isStarred">
-    {{ voucher.isStarred ? 'star' : 'star_border' }}
+  <mat-icon
+    matSuffix
+    (click)="form.isStarred().value.set(!form.isStarred())"
+    class="pointer"
+    [class.gold]="form.isStarred()"
+  >
+    {{ form.isStarred() ? 'star' : 'star_border' }}
   </mat-icon>
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Date</mat-label>
-      <input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
+      <input matInput [matDatepicker]="date" [formField]="form.date" autocomplete="off" #dateElement />
       <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
       <mat-datepicker #date></mat-datepicker>
     </mat-form-field>
@@ -20,188 +25,191 @@
         matInput
         #accountElement
         [matAutocomplete]="autoA"
-        formControlName="account"
+        [formField]="form.account"
         autocomplete="off"
       />
-      @if (accBal) {
+      @if (accBal()) {
         <mat-hint>
-          Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-          <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+          Balance as on Date: <strong>{{ accBal()?.date | currency: 'INR' | accounting }}</strong> / Final balance:
+          <strong>{{ accBal()?.total | currency: 'INR' | accounting }}</strong>
         </mat-hint>
       }
-      <mat-autocomplete
-        #autoA="matAutocomplete"
-        autoActiveFirstOption
-        [displayWith]="displayFn"
-        (optionSelected)="accountSelected($event)"
-      >
-        @for (account of accounts | async; track account) {
+      <mat-autocomplete #autoA="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+        @for (account of accounts(); track account) {
           <mat-option [value]="account">{{ account.name }}</mat-option>
         }
       </mat-autocomplete>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-1-5">
       <mat-label>Amount</mat-label>
-      <input type="text" matInput formControlName="amount" />
+      <input type="number" matInput [formField]="form.amount" />
       <span matTextPrefix>₹&nbsp;</span>
     </mat-form-field>
   </div>
 
-  <div formGroupName="addRow" class="row-container">
+  <div class="row-container">
     <mat-form-field class="flex-auto basis-55">
       <mat-label>Product</mat-label>
-      <input type="text" matInput #batchElement [matAutocomplete]="autoB" formControlName="batch" autocomplete="off" />
-      <mat-autocomplete
-        #autoB="matAutocomplete"
-        autoActiveFirstOption
-        [displayWith]="displayFn"
-        (optionSelected)="batchSelected($event)"
-      >
-        @for (batch of batches | async; track batch) {
+      <input
+        type="text"
+        matInput
+        #batchElement
+        [matAutocomplete]="autoB"
+        [formField]="form.addRow.batch"
+        autocomplete="off"
+      />
+      <mat-autocomplete #autoB="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+        @for (batch of batches(); track batch) {
           <mat-option [value]="batch">{{ batch.name }}</mat-option>
         }
       </mat-autocomplete>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-1-4">
       <mat-label>Quantity</mat-label>
-      <input type="text" matInput formControlName="quantity" autocomplete="off" />
+      <input type="text" matInput [formField]="form.addRow.quantity" autocomplete="off" />
     </mat-form-field>
 
     <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1-5">Add</button>
   </div>
-  <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-    <!-- Product Column -->
-    <ng-container matColumnDef="product">
-      <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
-    </ng-container>
+  @if (itemResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (itemResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+  } @else {
+    <mat-table #table [dataSource]="form.inventories().value() ?? []" matSort (matSortChange)="sortData($event)">
+      <!-- Product Column -->
+      <ng-container matColumnDef="product">
+        <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
+      </ng-container>
 
-    <!-- Quantity Column -->
-    <ng-container matColumnDef="quantity">
-      <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Quantity Column -->
+      <ng-container matColumnDef="quantity">
+        <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
+      </ng-container>
 
-    <!-- Rate Column -->
-    <ng-container matColumnDef="rate">
-      <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Rate Column -->
+      <ng-container matColumnDef="rate">
+        <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Tax Column -->
-    <ng-container matColumnDef="tax">
-      <mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.tax | percent: '1.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Tax Column -->
+      <ng-container matColumnDef="tax">
+        <mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.tax | percent: '1.2-2' }}</mat-cell>
+      </ng-container>
 
-    <!-- Discount Column -->
-    <ng-container matColumnDef="discount">
-      <mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.discount | percent: '1.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Discount Column -->
+      <ng-container matColumnDef="discount">
+        <mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.discount | percent: '1.2-2' }}</mat-cell>
+      </ng-container>
 
-    <!-- Amount Column -->
-    <ng-container matColumnDef="amount">
-      <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Amount Column -->
+      <ng-container matColumnDef="amount">
+        <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Action Column -->
-    <ng-container matColumnDef="action">
-      <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center">
-        <button mat-icon-button tabindex="-1" (click)="editRow(row)">
-          <mat-icon>edit</mat-icon>
-        </button>
-        <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
+      <!-- Action Column -->
+      <ng-container matColumnDef="action">
+        <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="center">
+          <button mat-icon-button tabindex="-1" (click)="editRow(row)">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Narration</mat-label>
-      <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Tags</mat-label>
-      <mat-chip-grid #chipGrid aria-label="Tag selection">
-        @for (tag of voucher.tags; track tag) {
-          <mat-chip-row (removed)="removeTag(tag)">
-            {{ tag.name }}
-            <button matChipRemove [attr.aria-label]="'remove ' + tag.name">
-              <mat-icon>cancel</mat-icon>
-            </button>
-          </mat-chip-row>
-        }
-      </mat-chip-grid>
-      <input
-        placeholder="New Tag..."
-        #tagInput
-        formControlName="tags"
-        [matChipInputFor]="chipGrid"
-        [matAutocomplete]="autoTag"
-        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-        (matChipInputTokenEnd)="addTag($event)"
-      />
-      <mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
-        @for (tag of tags | async; track tag) {
-          <mat-option [value]="tag">{{ tag.name }}</mat-option>
-        }
-      </mat-autocomplete>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    @for (item of voucher.files; track item) {
-      <div class="img-container" class="flex-auto basis-1-5">
-        <img [src]="item.thumbnail" alt="img" (click)="zoomImage(item)" (keyup.enter)="zoomImage(item)" tabindex="0" />
-        <button mat-icon-button class="overlay" (click)="deleteImage(item)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
-    }
-    <div class="img-container" class="flex flex-auto basis-1-5">
-      <label ng-href for="fileUp">
-        <img
-          alt="add"
-          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
-        />
-      </label>
-      <input
-        type="file"
-        id="fileUp"
-        multiple
-        accept="image/*"
-        style="display: none"
-        (change)="image.detectFiles($event, voucher)"
-      />
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Narration</mat-label>
+        <textarea matInput matAutosizeMinRows="5" [formField]="form.narration"></textarea>
+      </mat-form-field>
     </div>
-  </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Tags</mat-label>
+        <mat-chip-grid #chipGrid aria-label="Tag selection">
+          @for (tag of form.tagList().value(); track tag) {
+            <mat-chip-row (removed)="removeTag(tag)">
+              {{ tag.name }}
+              <button matChipRemove [attr.aria-label]="'remove ' + tag.name">
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip-row>
+          }
+        </mat-chip-grid>
+        <input
+          placeholder="New Tag..."
+          #tagInput
+          [formField]="form.tagInput"
+          [matChipInputFor]="chipGrid"
+          [matAutocomplete]="autoTag"
+          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+          (matChipInputTokenEnd)="addTag()"
+        />
+        <mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
+          @for (tag of tags(); track tag) {
+            <mat-option [value]="tag">{{ tag.name }}</mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      @for (item of form.files().value(); track item) {
+        <div class="img-container" class="flex-auto basis-1-5">
+          <img
+            [src]="item.thumbnail"
+            alt="img"
+            (click)="zoomImage(item)"
+            (keyup.enter)="zoomImage(item)"
+            tabindex="0"
+          />
+          <button mat-icon-button class="overlay" (click)="deleteImage(item)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+      }
+      <div class="img-container" class="flex flex-auto basis-1-5">
+        <label ng-href for="fileUp">
+          <img
+            alt="add"
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
+          />
+        </label>
+        <input type="file" id="fileUp" multiple accept="image/*" style="display: none" (change)="detectFiles($event)" />
+      </div>
+    </div>
+  }
 </form>
 
 <div class="row-container">
   <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="">
-    {{ voucher.id ? 'Update' : 'Save' }}
+    {{ id() ? 'Update' : 'Save' }}
   </button>
-  @if (voucher.id) {
-    <button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')" class="">
-      {{ voucher.posted ? 'Posted' : 'Post' }}
+  @if (id()) {
+    <button mat-raised-button (click)="post()" [disabled]="form.posted().controlValue()" class="">
+      {{ form.posted().controlValue() ? 'Posted' : 'Post' }}
     </button>
     <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
   }
   <span class="spacer"></span>
-  @if (voucher.id) {
+  @if (id()) {
     <span class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      Created on&nbsp;<strong>{{ form.creationDate().value() | localTime }}</strong
+      >&nbsp;and Last Edited on&nbsp; <strong>{{ form.lastEditDate().value() | localTime }}</strong
+      >&nbsp;by&nbsp; <strong>{{ form.userName() }}</strong
+      >.
+      {{ form.posted() ? 'Posted by ' + form.poster() : '' }}
     </span>
   }
 </div>
diff --git a/overlord/src/app/purchase-return/purchase-return.component.ts b/overlord/src/app/purchase-return/purchase-return.component.ts
index 8502147a..6f89ec34 100644
--- a/overlord/src/app/purchase-return/purchase-return.component.ts
+++ b/overlord/src/app/purchase-return/purchase-return.component.ts
@@ -1,10 +1,20 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { AsyncPipe, CurrencyPipe, DecimalPipe, PercentPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CurrencyPipe, DecimalPipe, PercentPipe } from '@angular/common';
+import {
+  afterNextRender,
+  Component,
+  computed,
+  effect,
+  HostListener,
+  inject,
+  input,
+  linkedSignal,
+  signal,
+} from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
@@ -12,17 +22,15 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { round } from 'mathjs';
 import moment from 'moment';
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
+import { zip } from 'rxjs';
 
 import { AuthService } from '../auth/auth.service';
 import { Account } from '../core/account';
-import { AccountBalance } from '../core/account-balance';
 import { AccountService } from '../core/account.service';
 import { Batch } from '../core/batch';
 import { BatchService } from '../core/batch.service';
@@ -33,22 +41,55 @@ import { Voucher } from '../core/voucher';
 import { VoucherService } from '../core/voucher.service';
 import { AccountingPipe } from '../shared/accounting.pipe';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
 import { ImageDialogComponent } from '../shared/image-dialog/image-dialog.component';
 import { ImageService } from '../shared/image.service';
 import { LocalTimePipe } from '../shared/local-time.pipe';
 import { MathService } from '../shared/math.service';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { Tag } from '../tag/tag';
 import { TagService } from '../tag/tag.service';
-import { PurchaseReturnDataSource } from './purchase-return-datasource';
 import { PurchaseReturnDialogComponent } from './purchase-return-dialog.component';
 
+export interface PurchaseReturnItemFormData {
+  id: string | undefined;
+  quantity: number;
+  rate: number;
+  tax: number;
+  discount: number;
+  amount: number;
+  batch: Batch;
+}
+
+export interface PurchaseReturnFormModel {
+  isStarred: boolean;
+  date: Date;
+  account: Account | string | null;
+  amount: number;
+  addRow: {
+    batch: Batch | string | null;
+    quantity: string;
+  };
+  inventories: PurchaseReturnItemFormData[];
+  narration: string;
+  tagInput: string | Tag | null;
+  tagList: Tag[];
+  files: DbFile[];
+  posted: boolean;
+  creationDate: string;
+  lastEditDate: string;
+  userName: string;
+  poster: string;
+}
+
 @Component({
   selector: 'app-purchase-return',
   templateUrl: './purchase-return.component.html',
   styleUrls: ['./purchase-return.component.css'],
   imports: [
+    FormField,
+    FormRoot,
     MatIconModule,
-    ReactiveFormsModule,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -58,16 +99,22 @@ import { PurchaseReturnDialogComponent } from './purchase-return-dialog.componen
     MatTableModule,
     MatSortModule,
     MatChipsModule,
-    AsyncPipe,
     DecimalPipe,
     PercentPipe,
     CurrencyPipe,
     AccountingPipe,
     LocalTimePipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class PurchaseReturnComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class PurchaseReturnComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  d = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  a = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  type = signal('Purchase Return');
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
@@ -79,16 +126,104 @@ export class PurchaseReturnComponent implements OnInit, AfterViewInit {
   private accountSer = inject(AccountService);
   private tagSer = inject(TagService);
 
-  @ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('batchElement', { static: true }) batchElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('tagInput') tagInput?: ElementRef<HTMLInputElement>;
+  sortActive = signal('');
+  sortDirection = signal('');
+
+  itemResource = this.ser.getVoucher(this.id, this.type, this.a, this.d);
+  item = linkedSignal(() => this.itemResource.value() ?? new Voucher());
+
+  formModel = linkedSignal<Voucher, PurchaseReturnFormModel>({
+    source: this.item,
+    computation: (voucher): PurchaseReturnFormModel => {
+      const amount = round(
+        voucher.inventories.reduce((p, c) => p + c.amount, 0),
+        2,
+      );
+      return {
+        isStarred: voucher.isStarred,
+        date: voucher.date ? moment(voucher.date, 'DD-MMM-YYYY').toDate() : new Date(),
+        account: voucher.vendor ?? (this.a() ? new Account({ id: this.a()! }) : null),
+        amount,
+        addRow: {
+          batch: null as Batch | string | null,
+          quantity: '',
+        },
+        inventories: voucher.inventories.map((inv) => ({
+          id: inv.id,
+          quantity: inv.quantity,
+          rate: inv.rate,
+          tax: inv.tax,
+          discount: inv.discount,
+          amount: inv.amount,
+          batch: inv.batch,
+        })),
+        narration: voucher.narration ?? '',
+        tagInput: null as string | Tag | null,
+        tagList: [...voucher.tags],
+        files: [...voucher.files],
+        posted: voucher.posted,
+        creationDate: voucher.creationDate,
+        lastEditDate: voucher.lastEditDate,
+        userName: voucher.user?.name ?? '',
+        poster: voucher.poster ?? '',
+      };
+    },
+  });
+
+  form = form(this.formModel);
+
+  displayedColumns = ['product', 'quantity', 'rate', 'tax', 'discount', 'amount', 'action'];
+  separatorKeysCodes: number[] = [ENTER, COMMA];
+
+  accountSearch = computed(() => {
+    const v = this.form.account().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  accountsResource = this.accountSer.autocomplete(this.accountSearch);
+  accounts = computed(() => this.accountsResource.value() ?? []);
+
+  tagQuery = computed(() => {
+    const tag = this.form.tagInput().value();
+    return tag === null ? '' : typeof tag !== 'string' ? tag.name.toLowerCase() : tag;
+  });
+
+  tagsResource = this.tagSer.autocomplete(this.tagQuery);
+  tags = computed(() => this.tagsResource.value() ?? []);
+
+  balanceDate = computed(() => moment(this.form.date().value()).format('DD-MMM-YYYY'));
+  accountId = computed((): string | null => {
+    const account = this.form.account().value();
+    return typeof account === 'string' ? null : (account?.id ?? null);
+  });
+
+  accBalResource = this.accountSer.balance(this.accountId, this.balanceDate);
+  accBal = computed(() => this.accBalResource.value() ?? null);
+
+  batchSearch = computed(() => {
+    const v = this.form.addRow.batch().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  batchesResource = this.batchSer.autocomplete(this.balanceDate, this.batchSearch);
+  batches = computed(() => this.batchesResource.value() ?? []);
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
+    this.form().focusBoundControl();
+  }
+
+  @HostListener('window:keydown.f3', ['$event'])
+  focusAccountHost(event: Event) {
+    event.preventDefault();
+    this.form.account().focusBoundControl();
+  }
+
+  @HostListener('window:keydown.f4', ['$event'])
+  focusBatchHost(event: Event) {
+    event.preventDefault();
+    this.form.addRow.batch().focusBoundControl();
   }
 
   @HostListener('window:keydown.control.s', ['$event'])
@@ -102,209 +237,195 @@ export class PurchaseReturnComponent implements OnInit, AfterViewInit {
   @HostListener('window:keydown.control.p', ['$event'])
   postListner(event: Event) {
     event.preventDefault();
-    if (this.voucher.id && !this.voucher.posted && this.auth.allowed('post-vouchers')) {
+    if (this.id() && !this.form.posted().controlValue() && this.auth.allowed('post-vouchers')) {
       this.post();
     }
   }
 
-  separatorKeysCodes: number[] = [ENTER, COMMA];
-  public inventoryObservable = new BehaviorSubject<Inventory[]>([]);
-  dataSource: PurchaseReturnDataSource = new PurchaseReturnDataSource(this.inventoryObservable);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    account: FormControl<string | null>;
-    amount: FormControl<number>;
-    addRow: FormGroup<{
-      batch: FormControl<string | null>;
-      quantity: FormControl<string>;
-    }>;
-    narration: FormControl<string>;
-    tags: FormControl<string | null>;
-  }>;
-
-  voucher: Voucher = new Voucher();
-  batch: Batch | null = null;
-  accBal: AccountBalance | null = null;
-
-  displayedColumns = ['product', 'quantity', 'rate', 'tax', 'discount', 'amount', 'action'];
-
-  accounts: Observable<Account[]>;
-  tags: Observable<Tag[]>;
-  batches: Observable<Batch[]>;
-
   constructor() {
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      account: new FormControl<string | null>(null),
-      amount: new FormControl({ value: 0, disabled: true }, { nonNullable: true }),
-      addRow: new FormGroup({
-        batch: new FormControl<string | null>(null),
-        quantity: new FormControl<string>('', { nonNullable: true }),
-      }),
-      narration: new FormControl('', { nonNullable: true }),
-      tags: new FormControl(''),
+    afterNextRender(() => {
+      this.form.account().focusBoundControl();
     });
-    // Listen to Account Autocomplete Change
-    this.accounts = this.form.controls.account.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
-    );
-    this.tags = this.form.controls.tags.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      map((tag: string | Tag | null) => (tag === null ? '' : typeof tag !== 'string' ? tag.name.toLowerCase() : tag)),
-      switchMap((tag: string) => this.tagSer.autocomplete(tag)),
-    );
-    // Listen to Batch Autocomplete Change
-    this.batches = this.form.controls.addRow.controls.batch.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) =>
-        x === null
-          ? observableOf([])
-          : this.batchSer.autocomplete(moment(this.form.value.date).format('DD-MMM-YYYY'), x),
-      ),
-    );
-  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { voucher: Voucher };
+    effect(() => {
+      const d = this.formModel().date;
+      if (!d) return;
 
-      this.loadVoucher(data.voucher);
+      const url = new URL(window.location.href);
+      url.searchParams.set('d', moment(d).format('DD-MMM-YYYY'));
+      window.history.replaceState({}, '', url.toString());
+    });
+
+    effect(() => {
+      const a = this.formModel().account;
+      const aId = typeof a === 'string' ? a : a?.id;
+      if (!aId) return;
+
+      const url = new URL(window.location.href);
+      url.searchParams.set('a', aId);
+      window.history.replaceState({}, '', url.toString());
     });
   }
 
-  ngAfterViewInit() {
-    this.focusAccount();
-  }
-
-  loadVoucher(voucher: Voucher) {
-    this.voucher = voucher;
-    this.form.setValue({
-      date: moment(this.voucher.date, 'DD-MMM-YYYY'),
-      account: this.voucher.vendor?.name ?? null,
-      amount: Math.abs(this.voucher.inventories.map((x) => x.amount).reduce((p, c) => p + c, 0)),
-      addRow: {
-        batch: '',
-        quantity: '',
-      },
-      narration: this.voucher.narration,
-      tags: '',
-    });
-    this.dataSource = new PurchaseReturnDataSource(this.inventoryObservable);
-    this.updateView();
-  }
-
-  focusAccount() {
-    setTimeout(() => {
-      this.accountElement.nativeElement.focus();
-    }, 0);
+  displayFn(item?: Account | Batch | string): string {
+    return !item ? '' : typeof item === 'string' ? item : item.name;
   }
 
   addRow() {
-    const formValue = this.form.value.addRow;
-    if (formValue === undefined) {
+    const formValue = this.form().value().addRow;
+    if (!formValue || !formValue.batch || typeof formValue.batch === 'string') {
       return;
     }
-    const quantity = this.math.parseAmount(formValue.quantity, 2);
-    if (this.batch === null || quantity <= 0 || this.batch.quantityRemaining < quantity) {
+    const batch = formValue.batch as Batch;
+    const quantity = this.math.parseAmount(formValue.quantity ?? '0', 2);
+    if (quantity <= 0 || batch.quantityRemaining < quantity) {
       return;
     }
-    const old = this.voucher.inventories.find((x) => x.batch.id === (this.batch as Batch).id);
+    const currentInventories = this.formModel().inventories;
+    const old = currentInventories.find((x) => x.batch?.id === batch.id);
     if (old !== undefined) {
       this.snackBar.open('Product already added', 'Danger');
       return;
     }
-    this.voucher.inventories.push(
-      new Inventory({
-        quantity,
-        rate: this.batch.rate,
-        tax: this.batch.tax,
-        discount: this.batch.discount,
-        amount: quantity * this.batch.rate * (1 + this.batch.tax) * (1 - this.batch.discount),
-        batch: this.batch,
-      }),
+    const newRow: PurchaseReturnItemFormData = {
+      id: undefined,
+      quantity,
+      rate: batch.rate,
+      tax: batch.tax,
+      discount: batch.discount,
+      amount: round(quantity * batch.rate * (1 + batch.tax) * (1 - batch.discount), 2),
+      batch,
+    };
+    const updatedInventories = [...currentInventories, newRow];
+    const totalAmount = round(
+      updatedInventories.reduce((p, c) => p + c.amount, 0),
+      2,
     );
-    this.resetAddRow();
-    this.updateView();
+    this.formModel.update((m) => ({
+      ...m,
+      inventories: updatedInventories,
+      amount: totalAmount,
+    }));
+    this.form.addRow.batch().value.set(null);
+    this.form.addRow.quantity().value.set('');
+    this.form.addRow.batch().focusBoundControl();
   }
 
-  resetAddRow() {
-    this.form.controls.addRow.reset();
-    this.batch = null;
-    setTimeout(() => {
-      this.batchElement.nativeElement.focus();
-    }, 0);
-  }
-
-  updateView() {
-    this.inventoryObservable.next(this.voucher.inventories);
-    this.form.controls.amount.setValue(
-      round(Math.abs(this.voucher.inventories.map((x) => x.amount).reduce((p, c) => p + c, 0)), 2),
+  deleteRow(row: PurchaseReturnItemFormData) {
+    const updatedInventories = this.formModel().inventories.filter((j) => j !== row);
+    const totalAmount = round(
+      updatedInventories.reduce((p, c) => p + c.amount, 0),
+      2,
     );
+    this.formModel.update((m) => ({
+      ...m,
+      inventories: updatedInventories,
+      amount: totalAmount,
+    }));
+    this.form.addRow.batch().focusBoundControl();
   }
 
-  editRow(row: Inventory) {
+  editRow(row: PurchaseReturnItemFormData) {
     const dialogRef = this.dialog.open(PurchaseReturnDialogComponent, {
       width: '750px',
       data: {
-        inventory: { ...row },
-        date: moment(this.form.value.date).format('DD-MMM-YYYY'),
+        inventory: new Inventory({
+          id: row.id,
+          quantity: row.quantity,
+          rate: row.rate,
+          tax: row.tax,
+          discount: row.discount,
+          amount: row.amount,
+          batch: row.batch,
+        }),
+        date: moment(this.formModel().date).format('DD-MMM-YYYY'),
       },
     });
 
     dialogRef.afterClosed().subscribe((result: boolean | Inventory) => {
-      if (!result) {
+      if (!result || typeof result === 'boolean') {
         return;
       }
-      const j = result as Inventory;
+      const j = result;
       if (
-        j.batch.sku.id !== row.batch.sku.id &&
-        this.voucher.inventories.filter((x) => x.batch.sku.id === j.batch.sku.id).length
+        j.batch?.sku.id !== row.batch?.sku.id &&
+        this.formModel().inventories.some((x) => x.batch?.sku.id === j.batch?.sku.id)
       ) {
+        this.snackBar.open('Product already added', 'Danger');
         return;
       }
-      Object.assign(row, j);
-      this.updateView();
+      const updatedInventories = this.formModel().inventories.map((item) =>
+        item === row
+          ? {
+              ...item,
+              quantity: j.quantity,
+              rate: j.rate,
+              tax: j.tax,
+              discount: j.discount,
+              amount: j.amount,
+              batch: j.batch,
+            }
+          : item,
+      );
+      const totalAmount = round(
+        updatedInventories.reduce((p, c) => p + c.amount, 0),
+        2,
+      );
+      this.formModel.update((m) => ({
+        ...m,
+        inventories: updatedInventories,
+        amount: totalAmount,
+      }));
+      this.form.addRow.batch().focusBoundControl();
     });
   }
 
-  deleteRow(row: Inventory) {
-    this.voucher.inventories.splice(this.voucher.inventories.indexOf(row), 1);
-    this.updateView();
+  getVoucher(): Voucher {
+    const m = this.formModel();
+    const base = this.item();
+    const v = new Voucher({ ...base });
+    v.date = moment(m.date).format('DD-MMM-YYYY');
+    const account = m.account;
+    v.vendor = !account || typeof account === 'string' ? undefined : account;
+    v.narration = m.narration ?? '';
+    v.inventories = m.inventories.map(
+      (inv) =>
+        new Inventory({
+          id: inv.id,
+          quantity: inv.quantity,
+          rate: inv.rate,
+          tax: inv.tax,
+          discount: inv.discount,
+          amount: inv.amount,
+          batch: inv.batch,
+        }),
+    );
+    v.tags = [...m.tagList];
+    v.files = [...m.files];
+    return v;
   }
 
   canSave() {
-    if (!this.voucher.id) {
+    const account = this.form.account().value();
+    if (!account || typeof account === 'string') {
+      return false;
+    }
+    if (!this.id()) {
       return true;
     }
-    if (this.voucher.posted && this.auth.allowed('edit-posted-vouchers')) {
-      return true;
+    if (this.form.posted().value() && !this.auth.allowed('edit-posted-vouchers')) {
+      return false;
     }
-    return this.voucher.user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
-  }
-
-  post() {
-    this.ser.post(this.voucher.id as string).subscribe({
-      next: (result) => {
-        this.loadVoucher(result);
-        this.snackBar.open('Voucher Posted', 'Success');
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
+    const user = this.auth.user as User;
+    return this.item().user?.id === user?.id || this.auth.allowed("edit-other-user's-vouchers");
   }
 
   save() {
-    const voucher: Voucher = this.getVoucher();
-    this.ser.saveOrUpdate(voucher).subscribe({
+    this.ser.saveOrUpdate(this.getVoucher()).subscribe({
       next: (result) => {
-        this.snackBar.open('', 'Success');
-        if (voucher.id === result.id) {
-          this.loadVoucher(result);
+        this.snackBar.open('Voucher Saved', undefined, { duration: 2000 });
+        if (this.item().id === result.id) {
+          this.item.set(result);
         } else {
           this.router.navigate(['/purchase-return', result.id]);
         }
@@ -315,96 +436,116 @@ export class PurchaseReturnComponent implements OnInit, AfterViewInit {
     });
   }
 
-  getVoucher(): Voucher {
-    const formModel = this.form.value;
-    this.voucher.date = moment(formModel.date).format('DD-MMM-YYYY');
-    if (formModel.account !== null && typeof formModel.account !== 'string') {
-      this.voucher.vendor = formModel.account;
+  post() {
+    const id = this.id();
+    if (id) {
+      this.ser.post(id).subscribe({
+        next: (result) => {
+          this.snackBar.open('Voucher Posted', undefined, { duration: 2000 });
+          this.item.set(result);
+        },
+        error: (error) => {
+          this.snackBar.open(error, 'Danger');
+        },
+      });
     }
-    this.voucher.narration = formModel.narration ?? '';
-    return this.voucher;
-  }
-
-  delete() {
-    this.ser.delete(this.voucher.id as string).subscribe({
-      next: () => {
-        this.snackBar.open('', 'Success');
-        this.router.navigate(['/purchase-return'], { replaceUrl: true });
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
   }
 
   confirmDelete(): void {
+    const id = this.id();
+    if (!id) return;
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '250px',
       data: { title: 'Delete Voucher?', content: 'Are you sure? This cannot be undone.' },
     });
 
-    dialogRef.afterClosed().subscribe((result: boolean) => {
+    dialogRef.afterClosed().subscribe((result) => {
       if (result) {
         this.delete();
       }
     });
   }
 
-  displayFn(item?: Account | Batch | string): string {
-    return !item ? '' : typeof item === 'string' ? item : item.name;
-  }
-
-  accountSelected(event: MatAutocompleteSelectedEvent): void {
-    this.form.controls.account.setValue(event.option.value);
-  }
-
-  batchSelected(event: MatAutocompleteSelectedEvent): void {
-    this.batch = event.option.value;
+  delete() {
+    const id = this.id();
+    if (id) {
+      this.ser.delete(id).subscribe({
+        next: () => {
+          this.snackBar.open('Voucher Deleted', undefined, { duration: 2000 });
+          this.router.navigate(['/purchase-return'], { replaceUrl: true });
+        },
+        error: (error) => {
+          this.snackBar.open(error, 'Danger');
+        },
+      });
+    }
   }
 
   zoomImage(file: DbFile) {
     this.dialog.open(ImageDialogComponent, {
-      width: '750px',
-      data: file.resized,
+      data: file,
+      panelClass: 'full-picture',
     });
   }
 
   deleteImage(file: DbFile) {
-    const index = this.voucher.files.indexOf(file);
-    this.voucher.files.splice(index, 1);
+    this.formModel.update((m) => ({
+      ...m,
+      files: m.files.filter((f) => f !== file),
+    }));
+  }
+
+  detectFiles(event: Event) {
+    const fileList = (event.target as HTMLInputElement).files;
+    if (!fileList) return;
+    for (const file of Array.from(fileList)) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const src = (e.target as FileReader).result as string;
+        zip(this.image.resizeImage(src, 100, 150), this.image.resizeImage(src, 825, 1170)).subscribe(
+          ([thumbnail, resized]) => {
+            this.formModel.update((m) => ({
+              ...m,
+              files: [...m.files, new DbFile({ thumbnail, resized })],
+            }));
+          },
+        );
+      };
+      reader.readAsDataURL(file);
+    }
   }
 
   removeTag(tag: Tag): void {
-    const index = this.voucher.tags.indexOf(tag);
-
-    if (index >= 0) {
-      this.voucher.tags.splice(index, 1);
-    }
+    this.formModel.update((m) => ({
+      ...m,
+      tagList: m.tagList.filter((t) => t !== tag),
+    }));
   }
 
-  addTag(event: MatChipInputEvent): void {
-    const value = (event.value || '').trim();
-
-    // Add our tag
-    if (value) {
-      this.voucher.tags.push(new Tag({ name: value }));
+  addTag(): void {
+    const query = this.form.tagInput().value();
+    if (!query) return;
+    const val = (query as string).trim().toLowerCase();
+    if (!val) return;
+    const existing = this.formModel().tagList;
+    const old = existing.find((t) => t.name.toLowerCase() === val);
+    if (!old) {
+      this.formModel.update((m) => ({ ...m, tagList: [...m.tagList, { id: null, name: val }] }));
     }
-
-    // Clear the input value
-    event.chipInput!.clear();
-
-    this.form.controls.tags.setValue(null);
+    this.form.tagInput().value.set(null);
   }
 
   selectedTag(event: MatAutocompleteSelectedEvent): void {
     const tag = event.option.value as Tag;
-    const index = this.voucher.tags.findIndex((t) => (tag.id === null ? t.name === tag.name : t.id === tag.id));
-    if (index === -1) {
-      this.voucher.tags.push(tag);
+    const existing = this.formModel().tagList;
+    const old = existing.find((t) => t.name.toLowerCase() === tag.name.toLowerCase());
+    if (!old) {
+      this.formModel.update((m) => ({ ...m, tagList: [...m.tagList, tag] }));
     }
-    if (this.tagInput) {
-      this.tagInput.nativeElement.value = '';
-    }
-    this.form.controls.tags.setValue(null);
+    this.form.tagInput().value.set(null);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
diff --git a/overlord/src/app/purchase-return/purchase-return.resolver.spec.ts b/overlord/src/app/purchase-return/purchase-return.resolver.spec.ts
deleted file mode 100644
index bbccc44a..00000000
--- a/overlord/src/app/purchase-return/purchase-return.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { purchaseReturnResolver } from './purchase-return.resolver';
-
-describe('purchaseReturnResolver', () => {
-  const executeResolver: ResolveFn<Voucher> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => purchaseReturnResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/purchase-return/purchase-return.resolver.ts b/overlord/src/app/purchase-return/purchase-return.resolver.ts
deleted file mode 100644
index f34f8322..00000000
--- a/overlord/src/app/purchase-return/purchase-return.resolver.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { VoucherService } from '../core/voucher.service';
-
-export const purchaseReturnResolver: ResolveFn<Voucher> = (route) => {
-  const id = route.paramMap.get('id');
-  if (id === null) {
-    return inject(VoucherService).getOfType('Purchase Return', null, null);
-  }
-  return inject(VoucherService).get(id, 'Purchase Return');
-};
diff --git a/overlord/src/app/purchase-return/purchase-return.routes.ts b/overlord/src/app/purchase-return/purchase-return.routes.ts
index e3aa3b3a..cacc278d 100644
--- a/overlord/src/app/purchase-return/purchase-return.routes.ts
+++ b/overlord/src/app/purchase-return/purchase-return.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { PurchaseReturnComponent } from './purchase-return.component';
-import { purchaseReturnResolver } from './purchase-return.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Purchase Return',
     },
-    resolve: {
-      voucher: purchaseReturnResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Purchase Return',
     },
-    resolve: {
-      voucher: purchaseReturnResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/purchase/purchase-datasource.ts b/overlord/src/app/purchase/purchase-datasource.ts
deleted file mode 100644
index fb9622eb..00000000
--- a/overlord/src/app/purchase/purchase-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { Inventory } from '../core/inventory';
-
-export class PurchaseDataSource extends DataSource<Inventory> {
-  constructor(private data: Observable<Inventory[]>) {
-    super();
-  }
-
-  connect(): Observable<Inventory[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/purchase/purchase-dialog.component.html b/overlord/src/app/purchase/purchase-dialog.component.html
index 9f51a01f..2c4a18e3 100644
--- a/overlord/src/app/purchase/purchase-dialog.component.html
+++ b/overlord/src/app/purchase/purchase-dialog.component.html
@@ -1,6 +1,6 @@
 <h1 mat-dialog-title>Edit Purchase Entry</h1>
 <div mat-dialog-content>
-  <form [formGroup]="form">
+  <form [formRoot]="form">
     <div class="row-container">
       <mat-form-field class="flex-auto basis-52">
         <mat-label>Product</mat-label>
@@ -9,7 +9,7 @@
           matInput
           #productElement
           [matAutocomplete]="autoP"
-          formControlName="product"
+          [formField]="form.product"
           autocomplete="off"
         />
         <mat-autocomplete
@@ -18,26 +18,26 @@
           [displayWith]="displayFn"
           (optionSelected)="productSelected($event)"
         >
-          @for (product of products | async; track product) {
+          @for (product of products(); track product) {
             <mat-option [value]="product">{{ product.name }}</mat-option>
           }
         </mat-autocomplete>
       </mat-form-field>
       <mat-form-field class="flex-auto basis-12">
         <mat-label>Quantity</mat-label>
-        <input type="text" matInput formControlName="quantity" autocomplete="off" />
+        <input type="text" matInput [formField]="form.quantity" autocomplete="off" />
       </mat-form-field>
       <mat-form-field class="flex-auto basis-12">
         <mat-label>Price</mat-label>
-        <input type="text" matInput formControlName="price" autocomplete="off" />
+        <input type="text" matInput [formField]="form.price" autocomplete="off" />
       </mat-form-field>
       <mat-form-field class="flex-auto basis-12">
         <mat-label>Tax</mat-label>
-        <input type="text" matInput formControlName="tax" autocomplete="off" />
+        <input type="text" matInput [formField]="form.tax" autocomplete="off" />
       </mat-form-field>
       <mat-form-field class="flex-auto basis-12">
         <mat-label>Discount</mat-label>
-        <input type="text" matInput formControlName="discount" autocomplete="off" />
+        <input type="text" matInput [formField]="form.discount" autocomplete="off" />
       </mat-form-field>
     </div>
   </form>
diff --git a/overlord/src/app/purchase/purchase-dialog.component.ts b/overlord/src/app/purchase/purchase-dialog.component.ts
index ec009252..2e59d44c 100644
--- a/overlord/src/app/purchase/purchase-dialog.component.ts
+++ b/overlord/src/app/purchase/purchase-dialog.component.ts
@@ -1,7 +1,6 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { AsyncPipe } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, computed, inject, linkedSignal, signal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
@@ -9,8 +8,6 @@ import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/materia
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { round } from 'mathjs';
-import { Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
 import { Batch } from '../core/batch';
 import { Inventory } from '../core/inventory';
@@ -19,6 +16,14 @@ import { ProductSku } from '../core/product-sku';
 import { ProductService } from '../product/product.service';
 import { MathService } from '../shared/math.service';
 
+export interface PurchaseDialogFormData {
+  product: ProductSku | string | null;
+  quantity: string;
+  price: string;
+  tax: string;
+  discount: string;
+}
+
 @Component({
   selector: 'app-purchase-dialog',
   templateUrl: './purchase-dialog.component.html',
@@ -26,16 +31,16 @@ import { MathService } from '../shared/math.service';
   imports: [
     MatDialogModule,
     CdkScrollableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatAutocompleteModule,
     MatOptionModule,
     MatButtonModule,
-    AsyncPipe,
   ],
 })
-export class PurchaseDialogComponent implements OnInit {
+export class PurchaseDialogComponent {
   dialogRef = inject<MatDialogRef<PurchaseDialogComponent>>(MatDialogRef);
   data = inject<{
     inventory: Inventory;
@@ -44,77 +49,75 @@ export class PurchaseDialogComponent implements OnInit {
   private math = inject(MathService);
   private productSer = inject(ProductService);
 
-  products: Observable<ProductSku[]>;
-  form: FormGroup<{
-    product: FormControl<string | null>;
-    quantity: FormControl<string>;
-    price: FormControl<string>;
-    tax: FormControl<string>;
-    discount: FormControl<string>;
-  }>;
+  formModel = linkedSignal<
+    {
+      inventory: Inventory;
+    },
+    PurchaseDialogFormData
+  >({
+    source: () => this.data,
+    computation: (data: { inventory: Inventory }): PurchaseDialogFormData => {
+      const sku = data.inventory.batch?.sku;
+      return {
+        product: sku ?? null,
+        quantity: `${data.inventory.quantity}`,
+        price: `${data.inventory.rate}`,
+        tax: sku?.isRateContracted ? 'RC' : `${data.inventory.tax}`,
+        discount: sku?.isRateContracted ? 'RC' : `${data.inventory.discount}`,
+      };
+    },
+  });
 
-  product: ProductSku = new ProductSku();
+  form = form(this.formModel);
 
-  constructor() {
-    this.form = new FormGroup({
-      product: new FormControl<string | null>(null),
-      quantity: new FormControl('', { nonNullable: true }),
-      price: new FormControl('', { nonNullable: true }),
-      tax: new FormControl('', { nonNullable: true }),
-      discount: new FormControl('', { nonNullable: true }),
-    });
-    // Listen to Product Autocomplete Change
-    this.products = this.form.controls.product.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.productSer.autocompleteSku(x, true))),
-    );
-  }
+  productSearch = computed(() => {
+    const v = this.form.product().value();
+    return typeof v === 'string' ? v : null;
+  });
 
-  ngOnInit() {
-    this.form.setValue({
-      product: this.data.inventory.batch?.sku.name,
-      quantity: `${this.data.inventory.quantity}`,
-      price: `${this.data.inventory.rate}`,
-      tax: `${this.data.inventory.tax}`,
-      discount: `${this.data.inventory.discount}`,
-    });
-    this.product = this.data.inventory.batch?.sku;
-  }
+  productsResource = this.productSer.autocompleteSku(
+    this.productSearch,
+    signal(true),
+    signal<string | null>(null),
+    signal<string | null>(null),
+  );
 
-  displayFn(product?: Product | string): string {
+  products = computed(() => this.productsResource.value() ?? []);
+
+  displayFn(product?: Product | ProductSku | string): string {
     return !product ? '' : typeof product === 'string' ? product : product.name;
   }
 
   productSelected(event: MatAutocompleteSelectedEvent): void {
-    const product: ProductSku = event.option.value;
-    this.product = product;
-    this.form.controls.price.setValue(`${product.costPrice}`);
+    const product = event.option.value as ProductSku;
+    this.form.product().value.set(product);
+    this.form.price().value.set(`${product.costPrice}`);
     if (product.isRateContracted) {
-      this.form.controls.price.disable();
-      this.form.controls.tax.disable();
-      this.form.controls.discount.disable();
-      this.form.controls.tax.setValue('RC');
-      this.form.controls.discount.setValue('RC');
+      this.form.tax().value.set('RC');
+      this.form.discount().value.set('RC');
     } else {
-      this.form.controls.price.enable();
-      this.form.controls.tax.enable();
-      this.form.controls.discount.enable();
-      this.form.controls.tax.setValue('');
-      this.form.controls.discount.setValue('');
+      this.form.tax().value.set('');
+      this.form.discount().value.set('');
     }
   }
 
   accept(): void {
-    const formValue = this.form.value;
-    const quantity = this.math.parseAmount(formValue.quantity, 2);
-    const price = this.math.parseAmount(formValue.price, 2);
-    const tax = this.math.parseAmount(formValue.tax, 5);
-    const discount = this.math.parseAmount(formValue.discount, 5);
-    if (this.data.inventory.batch === null) {
+    const formValue = this.form().value();
+    const product = typeof formValue.product === 'string' ? null : formValue.product;
+    if (!product || !product.id) {
+      return;
+    }
+    const quantity = this.math.parseAmount(formValue.quantity ?? '0', 2);
+    const price = product.isRateContracted
+      ? (product.costPrice as number)
+      : this.math.parseAmount(formValue.price ?? '0', 2);
+    const tax = product.isRateContracted ? 0 : this.math.parseAmount(formValue.tax ?? '0', 5);
+    const discount = product.isRateContracted ? 0 : this.math.parseAmount(formValue.discount ?? '0', 5);
+
+    if (this.data.inventory.batch === null || this.data.inventory.batch === undefined) {
       this.data.inventory.batch = new Batch();
     }
-    this.data.inventory.batch.sku = this.product;
+    this.data.inventory.batch.sku = product;
     this.data.inventory.quantity = quantity;
     this.data.inventory.rate = price;
     this.data.inventory.tax = tax;
diff --git a/overlord/src/app/purchase/purchase.component.html b/overlord/src/app/purchase/purchase.component.html
index 314211c3..e76cdc6e 100644
--- a/overlord/src/app/purchase/purchase.component.html
+++ b/overlord/src/app/purchase/purchase.component.html
@@ -1,15 +1,20 @@
 <h2 class="row-container space-between">
   <span>Purchase</span>
-  <mat-icon matSuffix (click)="voucher.isStarred = !voucher.isStarred" class="pointer" [class.gold]="voucher.isStarred">
-    {{ voucher.isStarred ? 'star' : 'star_border' }}
+  <mat-icon
+    matSuffix
+    (click)="form.isStarred().value.set(!form.isStarred())"
+    class="pointer"
+    [class.gold]="form.isStarred()"
+  >
+    {{ form.isStarred() ? 'star' : 'star_border' }}
   </mat-icon>
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Date</mat-label>
-      <input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
+      <input matInput [matDatepicker]="date" [formField]="form.date" autocomplete="off" #dateElement />
       <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
       <mat-datepicker #date></mat-datepicker>
     </mat-form-field>
@@ -20,34 +25,29 @@
         matInput
         #accountElement
         [matAutocomplete]="autoA"
-        formControlName="account"
+        [formField]="form.account"
         autocomplete="off"
       />
-      @if (accBal) {
+      @if (accBal()) {
         <mat-hint>
-          Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-          <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+          Balance as on Date: <strong>{{ accBal()?.date | currency: 'INR' | accounting }}</strong> / Final balance:
+          <strong>{{ accBal()?.total | currency: 'INR' | accounting }}</strong>
         </mat-hint>
       }
-      <mat-autocomplete
-        #autoA="matAutocomplete"
-        autoActiveFirstOption
-        [displayWith]="displayFn"
-        (optionSelected)="accountSelected($event)"
-      >
-        @for (account of accounts | async; track account) {
+      <mat-autocomplete #autoA="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+        @for (account of accounts(); track account) {
           <mat-option [value]="account">{{ account.name }}</mat-option>
         }
       </mat-autocomplete>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-1-5">
       <mat-label>Amount</mat-label>
-      <input type="text" matInput formControlName="amount" />
+      <input type="number" matInput [formField]="form.amount" />
       <span matTextPrefix>₹&nbsp;</span>
     </mat-form-field>
   </div>
 
-  <div formGroupName="addRow" class="row-container">
+  <div class="row-container">
     <mat-form-field class="flex-auto basis-1-2">
       <mat-label>Product</mat-label>
       <input
@@ -55,7 +55,7 @@
         matInput
         #productElement
         [matAutocomplete]="autoP"
-        formControlName="product"
+        [formField]="form.addRow.product"
         autocomplete="off"
       />
       <mat-autocomplete
@@ -64,163 +64,172 @@
         [displayWith]="displayFn"
         (optionSelected)="productSelected($event)"
       >
-        @for (product of products | async; track product) {
-          <mat-option [value]="product">{{ product.name }}</mat-option>
+        @for (product of products(); track product) {
+          <mat-option [value]="product" [disabled]="!product.id">
+            <span [class.gold]="product.isRateContracted">{{ product.name }}</span>
+            <!-- <small> ( stock: {{ product.stock }} )</small> -->
+          </mat-option>
         }
       </mat-autocomplete>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-10">
       <mat-label>Quantity</mat-label>
-      <input type="text" matInput formControlName="quantity" autocomplete="off" />
+      <input type="text" matInput [formField]="form.addRow.quantity" autocomplete="off" />
     </mat-form-field>
     <mat-form-field class="flex-auto basis-10">
       <mat-label>Price</mat-label>
-      <input type="text" matInput formControlName="price" autocomplete="off" />
+      <input type="text" matInput [formField]="form.addRow.price" autocomplete="off" />
     </mat-form-field>
     <mat-form-field class="flex-auto basis-10">
       <mat-label>Tax</mat-label>
-      <input type="text" matInput formControlName="tax" autocomplete="off" />
+      <input type="text" matInput [formField]="form.addRow.tax" autocomplete="off" />
     </mat-form-field>
     <mat-form-field class="flex-auto basis-10">
       <mat-label>Discount</mat-label>
-      <input type="text" matInput formControlName="discount" autocomplete="off" />
+      <input type="text" matInput [formField]="form.addRow.discount" autocomplete="off" />
     </mat-form-field>
 
     <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-10">Add</button>
   </div>
-  <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-    <!-- Product Column -->
-    <ng-container matColumnDef="product">
-      <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
-    </ng-container>
+  @if (itemResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (itemResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+  } @else {
+    <mat-table #table [dataSource]="form.inventories().value() ?? []" matSort (matSortChange)="sortData($event)">
+      <!-- Product Column -->
+      <ng-container matColumnDef="product">
+        <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
+      </ng-container>
 
-    <!-- Quantity Column -->
-    <ng-container matColumnDef="quantity">
-      <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Quantity Column -->
+      <ng-container matColumnDef="quantity">
+        <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
+      </ng-container>
 
-    <!-- Rate Column -->
-    <ng-container matColumnDef="rate">
-      <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Rate Column -->
+      <ng-container matColumnDef="rate">
+        <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Tax Column -->
-    <ng-container matColumnDef="tax">
-      <mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.tax | percent: '1.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Tax Column -->
+      <ng-container matColumnDef="tax">
+        <mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.tax | percent: '1.2-2' }}</mat-cell>
+      </ng-container>
 
-    <!-- Discount Column -->
-    <ng-container matColumnDef="discount">
-      <mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.discount | percent: '1.2-2' }}</mat-cell>
-    </ng-container>
+      <!-- Discount Column -->
+      <ng-container matColumnDef="discount">
+        <mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.discount | percent: '1.2-2' }}</mat-cell>
+      </ng-container>
 
-    <!-- Amount Column -->
-    <ng-container matColumnDef="amount">
-      <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Amount Column -->
+      <ng-container matColumnDef="amount">
+        <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Action Column -->
-    <ng-container matColumnDef="action">
-      <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center">
-        <button mat-icon-button tabindex="-1" (click)="editRow(row)">
-          <mat-icon>edit</mat-icon>
-        </button>
-        <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
+      <!-- Action Column -->
+      <ng-container matColumnDef="action">
+        <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="center">
+          <button mat-icon-button tabindex="-1" (click)="editRow(row)">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Narration</mat-label>
-      <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Tags</mat-label>
-      <mat-chip-grid #chipGrid aria-label="Tag selection">
-        @for (tag of voucher.tags; track tag) {
-          <mat-chip-row (removed)="removeTag(tag)">
-            {{ tag.name }}
-            <button matChipRemove [attr.aria-label]="'remove ' + tag.name">
-              <mat-icon>cancel</mat-icon>
-            </button>
-          </mat-chip-row>
-        }
-      </mat-chip-grid>
-      <input
-        placeholder="New Tag..."
-        #tagInput
-        formControlName="tags"
-        [matChipInputFor]="chipGrid"
-        [matAutocomplete]="autoTag"
-        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-        (matChipInputTokenEnd)="addTag($event)"
-      />
-      <mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
-        @for (tag of tags | async; track tag) {
-          <mat-option [value]="tag">{{ tag.name }}</mat-option>
-        }
-      </mat-autocomplete>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    @for (item of voucher.files; track item) {
-      <div class="img-container" class="flex-auto basis-1-5">
-        <img [src]="item.thumbnail" alt="img" (click)="zoomImage(item)" (keyup.enter)="zoomImage(item)" tabindex="0" />
-        <button mat-icon-button class="overlay" (click)="deleteImage(item)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
-    }
-    <div class="img-container" class="flex flex-auto basis-1-5">
-      <label ng-href for="fileUp">
-        <img
-          alt="add"
-          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
-        />
-      </label>
-      <input
-        type="file"
-        id="fileUp"
-        multiple
-        accept="image/*"
-        style="display: none"
-        (change)="image.detectFiles($event, voucher)"
-      />
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Narration</mat-label>
+        <textarea matInput matAutosizeMinRows="5" [formField]="form.narration"></textarea>
+      </mat-form-field>
     </div>
-  </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Tags</mat-label>
+        <mat-chip-grid #chipGrid aria-label="Tag selection">
+          @for (tag of form.tagList().value(); track tag) {
+            <mat-chip-row (removed)="removeTag(tag)">
+              {{ tag.name }}
+              <button matChipRemove [attr.aria-label]="'remove ' + tag.name">
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip-row>
+          }
+        </mat-chip-grid>
+        <input
+          placeholder="New Tag..."
+          #tagInput
+          [formField]="form.tagInput"
+          [matChipInputFor]="chipGrid"
+          [matAutocomplete]="autoTag"
+          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+          (matChipInputTokenEnd)="addTag()"
+        />
+        <mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
+          @for (tag of tags(); track tag) {
+            <mat-option [value]="tag">{{ tag.name }}</mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      @for (item of form.files().value(); track item) {
+        <div class="img-container" class="flex-auto basis-1-5">
+          <img
+            [src]="item.thumbnail"
+            alt="img"
+            (click)="zoomImage(item)"
+            (keyup.enter)="zoomImage(item)"
+            tabindex="0"
+          />
+          <button mat-icon-button class="overlay" (click)="deleteImage(item)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+      }
+      <div class="img-container" class="flex flex-auto basis-1-5">
+        <label ng-href for="fileUp">
+          <img
+            alt="add"
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
+          />
+        </label>
+        <input type="file" id="fileUp" multiple accept="image/*" style="display: none" (change)="detectFiles($event)" />
+      </div>
+    </div>
+  }
 </form>
 
 <div class="row-container">
   <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="">
-    {{ voucher.id ? 'Update' : 'Save' }}
+    {{ id() ? 'Update' : 'Save' }}
   </button>
-  @if (voucher.id) {
-    <button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')" class="">
-      {{ voucher.posted ? 'Posted' : 'Post' }}
+  @if (id()) {
+    <button mat-raised-button (click)="post()" [disabled]="form.posted().controlValue()" class="">
+      {{ form.posted().controlValue() ? 'Posted' : 'Post' }}
     </button>
     <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
   }
   <span class="spacer"></span>
-  @if (voucher.id) {
+  @if (id()) {
     <span class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      Created on&nbsp;<strong>{{ form.creationDate().value() | localTime }}</strong
+      >&nbsp;and Last Edited on&nbsp; <strong>{{ form.lastEditDate().value() | localTime }}</strong
+      >&nbsp;by&nbsp; <strong>{{ form.userName() }}</strong
+      >.
+      {{ form.posted() ? 'Posted by ' + form.poster() : '' }}
     </span>
   }
 </div>
diff --git a/overlord/src/app/purchase/purchase.component.ts b/overlord/src/app/purchase/purchase.component.ts
index 2b652153..031fed16 100644
--- a/overlord/src/app/purchase/purchase.component.ts
+++ b/overlord/src/app/purchase/purchase.component.ts
@@ -1,10 +1,20 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { AsyncPipe, CurrencyPipe, DecimalPipe, PercentPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CurrencyPipe, DecimalPipe, PercentPipe } from '@angular/common';
+import {
+  afterNextRender,
+  Component,
+  computed,
+  effect,
+  HostListener,
+  inject,
+  input,
+  linkedSignal,
+  signal,
+} from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
@@ -12,17 +22,15 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { round } from 'mathjs';
 import moment from 'moment';
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
+import { zip } from 'rxjs';
 
 import { AuthService } from '../auth/auth.service';
 import { Account } from '../core/account';
-import { AccountBalance } from '../core/account-balance';
 import { AccountService } from '../core/account.service';
 import { Batch } from '../core/batch';
 import { DbFile } from '../core/db-file';
@@ -35,22 +43,58 @@ import { VoucherService } from '../core/voucher.service';
 import { ProductService } from '../product/product.service';
 import { AccountingPipe } from '../shared/accounting.pipe';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
 import { ImageDialogComponent } from '../shared/image-dialog/image-dialog.component';
 import { ImageService } from '../shared/image.service';
 import { LocalTimePipe } from '../shared/local-time.pipe';
 import { MathService } from '../shared/math.service';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { Tag } from '../tag/tag';
 import { TagService } from '../tag/tag.service';
-import { PurchaseDataSource } from './purchase-datasource';
 import { PurchaseDialogComponent } from './purchase-dialog.component';
 
+export interface PurchaseItemFormData {
+  id: string | undefined;
+  quantity: number;
+  rate: number;
+  tax: number;
+  discount: number;
+  amount: number;
+  batch: Batch;
+}
+
+export interface PurchaseFormModel {
+  isStarred: boolean;
+  date: Date;
+  account: Account | string | null;
+  amount: number;
+  addRow: {
+    product: ProductSku | string | null;
+    quantity: string;
+    price: string;
+    tax: string;
+    discount: string;
+  };
+  inventories: PurchaseItemFormData[];
+  narration: string;
+  tagInput: string | Tag | null;
+  tagList: Tag[];
+  files: DbFile[];
+  posted: boolean;
+  creationDate: string;
+  lastEditDate: string;
+  userName: string;
+  poster: string;
+}
+
 @Component({
   selector: 'app-purchase',
   templateUrl: './purchase.component.html',
   styleUrls: ['./purchase.component.css'],
   imports: [
+    FormField,
+    FormRoot,
     MatIconModule,
-    ReactiveFormsModule,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -60,16 +104,22 @@ import { PurchaseDialogComponent } from './purchase-dialog.component';
     MatTableModule,
     MatSortModule,
     MatChipsModule,
-    AsyncPipe,
     DecimalPipe,
     PercentPipe,
     CurrencyPipe,
     AccountingPipe,
     LocalTimePipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class PurchaseComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class PurchaseComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  d = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  a = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  type = signal('Purchase');
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
@@ -81,16 +131,113 @@ export class PurchaseComponent implements OnInit, AfterViewInit {
   private accountSer = inject(AccountService);
   private tagSer = inject(TagService);
 
-  @ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('productElement', { static: true }) productElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('tagInput') tagInput?: ElementRef<HTMLInputElement>;
+  sortActive = signal('');
+  sortDirection = signal('');
+
+  itemResource = this.ser.getVoucher(this.id, this.type, this.a, this.d);
+  item = linkedSignal(() => this.itemResource.value() ?? new Voucher());
+
+  formModel = linkedSignal<Voucher, PurchaseFormModel>({
+    source: this.item,
+    computation: (voucher): PurchaseFormModel => {
+      const amount = round(
+        voucher.inventories.reduce((p, c) => p + c.amount, 0),
+        2,
+      );
+      return {
+        isStarred: voucher.isStarred,
+        date: voucher.date ? moment(voucher.date, 'DD-MMM-YYYY').toDate() : new Date(),
+        account: voucher.vendor ?? (this.a() ? new Account({ id: this.a()! }) : null),
+        amount,
+        addRow: {
+          product: null as ProductSku | string | null,
+          quantity: '',
+          price: '',
+          tax: '',
+          discount: '',
+        },
+        inventories: voucher.inventories.map((inv) => ({
+          id: inv.id,
+          quantity: inv.quantity,
+          rate: inv.rate,
+          tax: inv.tax,
+          discount: inv.discount,
+          amount: inv.amount,
+          batch: inv.batch,
+        })),
+        narration: voucher.narration ?? '',
+        tagInput: null as string | Tag | null,
+        tagList: [...voucher.tags],
+        files: [...voucher.files],
+        posted: voucher.posted,
+        creationDate: voucher.creationDate,
+        lastEditDate: voucher.lastEditDate,
+        userName: voucher.user?.name ?? '',
+        poster: voucher.poster ?? '',
+      };
+    },
+  });
+
+  form = form(this.formModel);
+
+  displayedColumns = ['product', 'quantity', 'rate', 'tax', 'discount', 'amount', 'action'];
+  separatorKeysCodes: number[] = [ENTER, COMMA];
+
+  accountSearch = computed(() => {
+    const v = this.form.account().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  accountsResource = this.accountSer.autocomplete(this.accountSearch);
+  accounts = computed(() => this.accountsResource.value() ?? []);
+
+  tagQuery = computed(() => {
+    const tag = this.form.tagInput().value();
+    return tag === null ? '' : typeof tag !== 'string' ? tag.name.toLowerCase() : tag;
+  });
+
+  tagsResource = this.tagSer.autocomplete(this.tagQuery);
+  tags = computed(() => this.tagsResource.value() ?? []);
+
+  productSearch = computed(() => {
+    const v = this.form.addRow.product().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  balanceDate = computed(() => moment(this.form.date().value()).format('DD-MMM-YYYY'));
+  accountId = computed((): string | null => {
+    const account = this.form.account().value();
+    return typeof account === 'string' ? null : (account?.id ?? null);
+  });
+
+  accBalResource = this.accountSer.balance(this.accountId, this.balanceDate);
+  accBal = computed(() => this.accBalResource.value() ?? null);
+
+  productsResource = this.productSer.autocompleteSku(
+    this.productSearch,
+    signal(true),
+    this.balanceDate,
+    this.accountId,
+  );
+
+  products = computed(() => this.productsResource.value() ?? []);
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
+    this.form().focusBoundControl();
+  }
+
+  @HostListener('window:keydown.f3', ['$event'])
+  focusAccountHost(event: Event) {
+    event.preventDefault();
+    this.form.account().focusBoundControl();
+  }
+
+  @HostListener('window:keydown.f4', ['$event'])
+  focusProductHost(event: Event) {
+    event.preventDefault();
+    this.form.addRow.product().focusBoundControl();
   }
 
   @HostListener('window:keydown.control.s', ['$event'])
@@ -104,233 +251,218 @@ export class PurchaseComponent implements OnInit, AfterViewInit {
   @HostListener('window:keydown.control.p', ['$event'])
   postListner(event: Event) {
     event.preventDefault();
-    if (this.voucher.id && !this.voucher.posted && this.auth.allowed('post-vouchers')) {
+    if (this.id() && !this.form.posted().controlValue() && this.auth.allowed('post-vouchers')) {
       this.post();
     }
   }
 
-  separatorKeysCodes: number[] = [ENTER, COMMA];
-  public inventoryObservable = new BehaviorSubject<Inventory[]>([]);
-  dataSource: PurchaseDataSource = new PurchaseDataSource(this.inventoryObservable);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    account: FormControl<string | Account | null>;
-    amount: FormControl<number>;
-    addRow: FormGroup<{
-      product: FormControl<string | ProductSku | null>;
-      quantity: FormControl<string>;
-      price: FormControl<string>;
-      tax: FormControl<string>;
-      discount: FormControl<string>;
-    }>;
-    narration: FormControl<string>;
-    tags: FormControl<string | null>;
-  }>;
-
-  voucher: Voucher = new Voucher();
-  accBal: AccountBalance | null = null;
-
-  displayedColumns = ['product', 'quantity', 'rate', 'tax', 'discount', 'amount', 'action'];
-
-  accounts: Observable<Account[]>;
-  tags: Observable<Tag[]>;
-  products: Observable<ProductSku[]>;
-
   constructor() {
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      account: new FormControl<string | Account | null>(null),
-      amount: new FormControl({ value: 0, disabled: true }, { nonNullable: true }),
-      addRow: new FormGroup({
-        product: new FormControl<string | ProductSku | null>(null),
-        quantity: new FormControl('', { nonNullable: true }),
-        price: new FormControl('', { nonNullable: true }),
-        tax: new FormControl('', { nonNullable: true }),
-        discount: new FormControl('', { nonNullable: true }),
-      }),
-      narration: new FormControl('', { nonNullable: true }),
-      tags: new FormControl(''),
+    afterNextRender(() => {
+      this.form.account().focusBoundControl();
     });
-    this.accBal = null;
-    // Listen to Account Autocomplete Change
-    this.accounts = this.form.controls.account.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) =>
-        x === null ? observableOf([]) : this.accountSer.autocomplete(typeof x === 'string' ? x : x.name),
-      ),
-    );
-    this.tags = this.form.controls.tags.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      map((tag: string | Tag | null) => (tag === null ? '' : typeof tag !== 'string' ? tag.name.toLowerCase() : tag)),
-      switchMap((tag: string) => this.tagSer.autocomplete(tag)),
-    );
-    // Listen to Product Autocomplete Change
-    this.products = this.form.controls.addRow.controls.product.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => {
-        const account = this.form.value.account;
-        const vendorId = account && typeof account === 'object' ? account.id : undefined;
-        const query = typeof x !== 'string' ? '' : x;
-        return query === null || query === ''
-          ? observableOf([])
-          : this.productSer.autocompleteSku(query, true, moment(this.form.value.date).format('DD-MMM-YYYY'), vendorId);
-      }),
-    );
-  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { voucher: Voucher };
+    effect(() => {
+      const d = this.formModel().date;
+      if (!d) return;
 
-      this.loadVoucher(data.voucher);
+      const url = new URL(window.location.href);
+      url.searchParams.set('d', moment(d).format('DD-MMM-YYYY'));
+      window.history.replaceState({}, '', url.toString());
+    });
+
+    effect(() => {
+      const a = this.formModel().account;
+      const aId = typeof a === 'string' ? a : a?.id;
+      if (!aId) return;
+
+      const url = new URL(window.location.href);
+      url.searchParams.set('a', aId);
+      window.history.replaceState({}, '', url.toString());
     });
   }
 
-  ngAfterViewInit() {
-    this.focusAccount();
+  displayFn(item?: Account | Product | ProductSku | string): string {
+    return !item ? '' : typeof item === 'string' ? item : item.name;
   }
 
-  loadVoucher(voucher: Voucher) {
-    this.voucher = voucher;
-    this.form.setValue({
-      date: moment(this.voucher.date, 'DD-MMM-YYYY'),
-      account: this.voucher.vendor ?? null,
-      amount: Math.abs(this.voucher.inventories.map((x) => x.amount).reduce((p, c) => p + c, 0)),
-      addRow: {
-        product: '',
-        quantity: '',
-        price: '',
-        tax: '',
-        discount: '',
-      },
-      narration: this.voucher.narration,
-      tags: '',
-    });
-    this.dataSource = new PurchaseDataSource(this.inventoryObservable);
-    this.updateView();
-  }
-
-  focusAccount() {
-    setTimeout(() => {
-      this.accountElement.nativeElement.focus();
-    }, 0);
+  productSelected(event: MatAutocompleteSelectedEvent): void {
+    const product = event.option.value as ProductSku;
+    this.form.addRow.product().value.set(product);
+    this.form.addRow.price().value.set(`${product.costPrice}`);
+    if (product.isRateContracted) {
+      this.form.addRow.tax().value.set('RC');
+      this.form.addRow.discount().value.set('RC');
+    } else {
+      this.form.addRow.tax().value.set('');
+      this.form.addRow.discount().value.set('');
+    }
   }
 
   addRow() {
-    const formValue = this.form.value.addRow;
-    if (formValue === undefined || !formValue.product || typeof formValue.product === 'string') {
+    const formValue = this.form().value().addRow;
+    if (!formValue || !formValue.product || typeof formValue.product === 'string') {
       return;
     }
     const product = formValue.product as ProductSku;
-    const quantity = this.math.parseAmount(formValue.quantity, 2);
+    const quantity = this.math.parseAmount(formValue.quantity ?? '0', 2);
     if (quantity <= 0) {
       return;
     }
-    const price = product.isRateContracted ? (product.costPrice as number) : this.math.parseAmount(formValue.price, 2);
-    const tax = product.isRateContracted ? 0 : this.math.parseAmount(formValue.tax, 5);
-    const discount = product.isRateContracted ? 0 : this.math.parseAmount(formValue.discount, 5);
+    const price = product.isRateContracted
+      ? (product.costPrice as number)
+      : this.math.parseAmount(formValue.price ?? '0', 2);
+    const tax = product.isRateContracted ? 0 : this.math.parseAmount(formValue.tax ?? '0', 5);
+    const discount = product.isRateContracted ? 0 : this.math.parseAmount(formValue.discount ?? '0', 5);
     if ((price as number) <= 0 || (tax as number) < 0 || (discount as number) < 0) {
       return;
     }
-    const oldFiltered = this.voucher.inventories.filter((x) => x.batch?.sku.id === product.id);
-    if (oldFiltered.length) {
+    const currentInventories = this.formModel().inventories;
+    const oldIndex = currentInventories.findIndex((x) => x.batch?.sku.id === product.id);
+    if (oldIndex >= 0) {
       this.snackBar.open('Product already added', 'Danger');
       return;
     }
-    this.voucher.inventories.push(
-      new Inventory({
-        quantity,
-        rate: price,
-        tax,
-        discount,
-        amount: round(quantity * (price as number) * (1 + tax) * (1 - discount), 2),
-        batch: new Batch({ sku: product }),
-      }),
+    const newRow: PurchaseItemFormData = {
+      id: undefined,
+      quantity,
+      rate: price,
+      tax,
+      discount,
+      amount: round(quantity * (price as number) * (1 + tax) * (1 - discount), 2),
+      batch: new Batch({ sku: product }),
+    };
+    const updatedInventories = [...currentInventories, newRow];
+    const totalAmount = round(
+      updatedInventories.reduce((p, c) => p + c.amount, 0),
+      2,
     );
-    this.resetAddRow();
-    this.updateView();
+    this.formModel.update((m) => ({
+      ...m,
+      inventories: updatedInventories,
+      amount: totalAmount,
+    }));
+    this.form.addRow.product().value.set(null);
+    this.form.addRow.quantity().value.set('');
+    this.form.addRow.price().value.set('');
+    this.form.addRow.tax().value.set('');
+    this.form.addRow.discount().value.set('');
+    this.form.addRow.product().focusBoundControl();
   }
 
-  resetAddRow() {
-    this.form.controls.addRow.reset();
-    this.form.controls.addRow.controls.price.enable();
-    this.form.controls.addRow.controls.tax.enable();
-    this.form.controls.addRow.controls.discount.enable();
-    setTimeout(() => {
-      this.productElement.nativeElement.focus();
-    }, 0);
-  }
-
-  updateView() {
-    this.inventoryObservable.next(this.voucher.inventories);
-    this.form.controls.amount.setValue(
-      round(Math.abs(this.voucher.inventories.map((x) => x.amount).reduce((p, c) => p + c, 0)), 2),
+  deleteRow(row: PurchaseItemFormData) {
+    const updatedInventories = this.formModel().inventories.filter((j) => j !== row);
+    const totalAmount = round(
+      updatedInventories.reduce((p, c) => p + c.amount, 0),
+      2,
     );
+    this.formModel.update((m) => ({
+      ...m,
+      inventories: updatedInventories,
+      amount: totalAmount,
+    }));
+    this.form.addRow.product().focusBoundControl();
   }
 
-  editRow(row: Inventory) {
+  editRow(row: PurchaseItemFormData) {
     const dialogRef = this.dialog.open(PurchaseDialogComponent, {
       width: '750px',
-      data: { inventory: { ...row } },
+      data: {
+        inventory: new Inventory({
+          id: row.id,
+          quantity: row.quantity,
+          rate: row.rate,
+          tax: row.tax,
+          discount: row.discount,
+          amount: row.amount,
+          batch: row.batch,
+        }),
+      },
     });
 
     dialogRef.afterClosed().subscribe((result: boolean | Inventory) => {
-      if (!result) {
+      if (!result || typeof result === 'boolean') {
         return;
       }
-      const j = result as Inventory;
+      const j = result;
       if (
         j.batch?.sku.id !== row.batch?.sku.id &&
-        this.voucher.inventories.filter((x) => x.batch?.sku.id === j.batch?.sku.id).length
+        this.formModel().inventories.some((x) => x.batch?.sku.id === j.batch?.sku.id)
       ) {
+        this.snackBar.open('Product already added', 'Danger');
         return;
       }
-      Object.assign(row, j);
-      this.updateView();
+      const updatedInventories = this.formModel().inventories.map((item) =>
+        item === row
+          ? {
+              ...item,
+              quantity: j.quantity,
+              rate: j.rate,
+              tax: j.tax,
+              discount: j.discount,
+              amount: j.amount,
+              batch: j.batch,
+            }
+          : item,
+      );
+      const totalAmount = round(
+        updatedInventories.reduce((p, c) => p + c.amount, 0),
+        2,
+      );
+      this.formModel.update((m) => ({
+        ...m,
+        inventories: updatedInventories,
+        amount: totalAmount,
+      }));
+      this.form.addRow.product().focusBoundControl();
     });
   }
 
-  deleteRow(row: Inventory) {
-    this.voucher.inventories.splice(this.voucher.inventories.indexOf(row), 1);
-    this.updateView();
+  getVoucher(): Voucher {
+    const m = this.formModel();
+    const base = this.item();
+    const v = new Voucher({ ...base });
+    v.date = moment(m.date).format('DD-MMM-YYYY');
+    const account = m.account;
+    v.vendor = !account || typeof account === 'string' ? undefined : account;
+    v.narration = m.narration ?? '';
+    v.inventories = m.inventories.map(
+      (inv) =>
+        new Inventory({
+          id: inv.id,
+          quantity: inv.quantity,
+          rate: inv.rate,
+          tax: inv.tax,
+          discount: inv.discount,
+          amount: inv.amount,
+          batch: inv.batch,
+        }),
+    );
+    v.tags = [...m.tagList];
+    v.files = [...m.files];
+    return v;
   }
 
   canSave() {
-    const account = this.form.value.account;
+    const account = this.form.account().value();
     if (!account || typeof account === 'string') {
       return false;
     }
-    if (!this.voucher.id) {
+    if (!this.id()) {
       return true;
     }
-    if (this.voucher.posted && this.auth.allowed('edit-posted-vouchers')) {
-      return true;
+    if (this.form.posted().value() && !this.auth.allowed('edit-posted-vouchers')) {
+      return false;
     }
-    return this.voucher.user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
-  }
-
-  post() {
-    this.ser.post(this.voucher.id as string).subscribe({
-      next: (result) => {
-        this.loadVoucher(result);
-        this.snackBar.open('Voucher Posted', 'Success');
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
+    const user = this.auth.user as User;
+    return this.item().user?.id === user?.id || this.auth.allowed("edit-other-user's-vouchers");
   }
 
   save() {
-    const voucher: Voucher = this.getVoucher();
-    this.ser.saveOrUpdate(voucher).subscribe({
+    this.ser.saveOrUpdate(this.getVoucher()).subscribe({
       next: (result) => {
-        this.snackBar.open('', 'Success');
-        if (voucher.id === result.id) {
-          this.loadVoucher(result);
+        this.snackBar.open('Voucher Saved', undefined, { duration: 2000 });
+        if (this.item().id === result.id) {
+          this.item.set(result);
         } else {
           this.router.navigate(['/purchase', result.id]);
         }
@@ -341,114 +473,116 @@ export class PurchaseComponent implements OnInit, AfterViewInit {
     });
   }
 
-  getVoucher(): Voucher {
-    const formModel = this.form.value;
-    this.voucher.date = moment(formModel.date).format('DD-MMM-YYYY');
-    if (!formModel.account || typeof formModel.account === 'string') {
-      this.voucher.vendor = undefined;
-    } else {
-      this.voucher.vendor = formModel.account;
+  post() {
+    const id = this.id();
+    if (id) {
+      this.ser.post(id).subscribe({
+        next: (result) => {
+          this.snackBar.open('Voucher Posted', undefined, { duration: 2000 });
+          this.item.set(result);
+        },
+        error: (error) => {
+          this.snackBar.open(error, 'Danger');
+        },
+      });
     }
-    this.voucher.narration = formModel.narration ?? '';
-    return this.voucher;
-  }
-
-  delete() {
-    this.ser.delete(this.voucher.id as string).subscribe({
-      next: () => {
-        this.snackBar.open('', 'Success');
-        this.router.navigate(['/purchase'], { replaceUrl: true });
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
   }
 
   confirmDelete(): void {
+    const id = this.id();
+    if (!id) return;
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '250px',
       data: { title: 'Delete Voucher?', content: 'Are you sure? This cannot be undone.' },
     });
 
-    dialogRef.afterClosed().subscribe((result: boolean) => {
+    dialogRef.afterClosed().subscribe((result) => {
       if (result) {
         this.delete();
       }
     });
   }
 
-  displayFn(item?: Account | Product | string): string {
-    return !item ? '' : typeof item === 'string' ? item : item.name;
-  }
-
-  accountSelected(event: MatAutocompleteSelectedEvent): void {
-    this.form.controls.account.setValue(event.option.value);
-  }
-
-  productSelected(event: MatAutocompleteSelectedEvent): void {
-    const product: ProductSku = event.option.value;
-    const addRowForm = this.form.controls.addRow;
-    addRowForm.controls.product.setValue(product);
-    addRowForm.controls.price.setValue(`${product.costPrice}`);
-    if (product.isRateContracted) {
-      addRowForm.controls.price.disable();
-      addRowForm.controls.tax.disable();
-      addRowForm.controls.discount.disable();
-      addRowForm.controls.tax.setValue('RC');
-      addRowForm.controls.discount.setValue('RC');
-    } else {
-      addRowForm.controls.price.enable();
-      addRowForm.controls.tax.enable();
-      addRowForm.controls.discount.enable();
-      addRowForm.controls.tax.setValue('');
-      addRowForm.controls.discount.setValue('');
+  delete() {
+    const id = this.id();
+    if (id) {
+      this.ser.delete(id).subscribe({
+        next: () => {
+          this.snackBar.open('Voucher Deleted', undefined, { duration: 2000 });
+          this.router.navigate(['/purchase'], { replaceUrl: true });
+        },
+        error: (error) => {
+          this.snackBar.open(error, 'Danger');
+        },
+      });
     }
   }
 
   zoomImage(file: DbFile) {
     this.dialog.open(ImageDialogComponent, {
-      width: '750px',
-      data: file.resized,
+      data: file,
+      panelClass: 'full-picture',
     });
   }
 
   deleteImage(file: DbFile) {
-    const index = this.voucher.files.indexOf(file);
-    this.voucher.files.splice(index, 1);
+    this.formModel.update((m) => ({
+      ...m,
+      files: m.files.filter((f) => f !== file),
+    }));
+  }
+
+  detectFiles(event: Event) {
+    const fileList = (event.target as HTMLInputElement).files;
+    if (!fileList) return;
+    for (const file of Array.from(fileList)) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const src = (e.target as FileReader).result as string;
+        zip(this.image.resizeImage(src, 100, 150), this.image.resizeImage(src, 825, 1170)).subscribe(
+          ([thumbnail, resized]) => {
+            this.formModel.update((m) => ({
+              ...m,
+              files: [...m.files, new DbFile({ thumbnail, resized })],
+            }));
+          },
+        );
+      };
+      reader.readAsDataURL(file);
+    }
   }
 
   removeTag(tag: Tag): void {
-    const index = this.voucher.tags.indexOf(tag);
-
-    if (index >= 0) {
-      this.voucher.tags.splice(index, 1);
-    }
+    this.formModel.update((m) => ({
+      ...m,
+      tagList: m.tagList.filter((t) => t !== tag),
+    }));
   }
 
-  addTag(event: MatChipInputEvent): void {
-    const value = (event.value || '').trim();
-
-    // Add our tag
-    if (value) {
-      this.voucher.tags.push(new Tag({ name: value }));
+  addTag(): void {
+    const query = this.form.tagInput().value();
+    if (!query) return;
+    const val = (query as string).trim().toLowerCase();
+    if (!val) return;
+    const existing = this.formModel().tagList;
+    const old = existing.find((t) => t.name.toLowerCase() === val);
+    if (!old) {
+      this.formModel.update((m) => ({ ...m, tagList: [...m.tagList, { id: null, name: val }] }));
     }
-
-    // Clear the input value
-    event.chipInput!.clear();
-
-    this.form.controls.tags.setValue(null);
+    this.form.tagInput().value.set(null);
   }
 
   selectedTag(event: MatAutocompleteSelectedEvent): void {
     const tag = event.option.value as Tag;
-    const index = this.voucher.tags.findIndex((t) => (tag.id === null ? t.name === tag.name : t.id === tag.id));
-    if (index === -1) {
-      this.voucher.tags.push(tag);
+    const existing = this.formModel().tagList;
+    const old = existing.find((t) => t.name.toLowerCase() === tag.name.toLowerCase());
+    if (!old) {
+      this.formModel.update((m) => ({ ...m, tagList: [...m.tagList, tag] }));
     }
-    if (this.tagInput) {
-      this.tagInput.nativeElement.value = '';
-    }
-    this.form.controls.tags.setValue(null);
+    this.form.tagInput().value.set(null);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
diff --git a/overlord/src/app/purchase/purchase.resolver.spec.ts b/overlord/src/app/purchase/purchase.resolver.spec.ts
deleted file mode 100644
index 423baa9d..00000000
--- a/overlord/src/app/purchase/purchase.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { purchaseResolver } from './purchase.resolver';
-
-describe('purchaseResolver', () => {
-  const executeResolver: ResolveFn<Voucher> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => purchaseResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/purchase/purchase.resolver.ts b/overlord/src/app/purchase/purchase.resolver.ts
deleted file mode 100644
index 659e9ead..00000000
--- a/overlord/src/app/purchase/purchase.resolver.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { VoucherService } from '../core/voucher.service';
-
-export const purchaseResolver: ResolveFn<Voucher> = (route) => {
-  const id = route.paramMap.get('id');
-  if (id === null) {
-    return inject(VoucherService).getOfType('Purchase', null, null);
-  }
-  return inject(VoucherService).get(id, 'Purchase');
-};
diff --git a/overlord/src/app/purchase/purchase.routes.ts b/overlord/src/app/purchase/purchase.routes.ts
index 1e1b1468..947b9254 100644
--- a/overlord/src/app/purchase/purchase.routes.ts
+++ b/overlord/src/app/purchase/purchase.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { PurchaseComponent } from './purchase.component';
-import { purchaseResolver } from './purchase.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Purchase',
     },
-    resolve: {
-      voucher: purchaseResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Purchase',
     },
-    resolve: {
-      voucher: purchaseResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/purchases/purchases-datasource.ts b/overlord/src/app/purchases/purchases-datasource.ts
deleted file mode 100644
index 24d8b2b8..00000000
--- a/overlord/src/app/purchases/purchases-datasource.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { PurchasesItem } from './purchases-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class PurchasesDataSource extends DataSource<PurchasesItem> {
-  constructor(
-    public data: PurchasesItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<PurchasesItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: PurchasesItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: PurchasesItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'product':
-          return compare(a.name, b.name, isAsc);
-        case 'quantity':
-          return compare(+a.quantity, +b.quantity, isAsc);
-        case 'rate':
-          return compare(+a.rate, +b.rate, isAsc);
-        case 'amount':
-          return compare(+a.amount, +b.amount, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/purchases/purchases.component.html b/overlord/src/app/purchases/purchases.component.html
index d86e9b78..fa0e29d3 100644
--- a/overlord/src/app/purchases/purchases.component.html
+++ b/overlord/src/app/purchases/purchases.component.html
@@ -1,73 +1,77 @@
 <h2>Purchases</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
+      <input matInput #startDateElement [matDatepicker]="startDate" [formField]="form.startDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
       <mat-datepicker #startDate></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Product Column -->
-  <ng-container matColumnDef="product">
-    <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="row.url" [queryParams]="{ startDate: info.startDate, finishDate: info.finishDate }">{{
-        row.name
-      }}</a></mat-cell
-    >
-    <mat-footer-cell *matFooterCellDef>
-      {{ info.footer.name }}
-    </mat-footer-cell>
-  </ng-container>
+@if (resource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (resource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="resource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Product Column -->
+    <ng-container matColumnDef="product">
+      <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="row.url" [queryParams]="{ startDate: info().startDate, finishDate: info().finishDate }">{{
+          row.name
+        }}</a></mat-cell
+      >
+      <mat-footer-cell *matFooterCellDef>{{ info().footer.name }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Quantity Column -->
-  <ng-container matColumnDef="quantity">
-    <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">
-      {{ info.footer.quantity | number: '1.2-2' }}
-    </mat-footer-cell>
-  </ng-container>
+    <!-- Quantity Column -->
+    <ng-container matColumnDef="quantity">
+      <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">
+        {{ info().footer.quantity | number: '1.2-2' }}
+      </mat-footer-cell>
+    </ng-container>
 
-  <!-- Rate Column -->
-  <ng-container matColumnDef="rate">
-    <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">
-      {{ info.footer.rate | currency: 'INR' }}
-    </mat-footer-cell>
-  </ng-container>
+    <!-- Rate Column -->
+    <ng-container matColumnDef="rate">
+      <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">
+        {{ info().footer.rate | currency: 'INR' }}
+      </mat-footer-cell>
+    </ng-container>
 
-  <!-- Amount Column -->
-  <ng-container matColumnDef="amount">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">
-      {{ info.footer.amount | currency: 'INR' }}
-    </mat-footer-cell>
-  </ng-container>
+    <!-- Amount Column -->
+    <ng-container matColumnDef="amount">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">
+        {{ info().footer.amount | currency: 'INR' }}
+      </mat-footer-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="(this.info().body ?? []).length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/purchases/purchases.component.ts b/overlord/src/app/purchases/purchases.component.ts
index a3521187..ae341fae 100644
--- a/overlord/src/app/purchases/purchases.component.ts
+++ b/overlord/src/app/purchases/purchases.component.ts
@@ -1,26 +1,35 @@
 import { CurrencyPipe, DecimalPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, linkedSignal, computed, signal, input } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import moment from 'moment';
 
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { Purchases } from './purchases';
-import { PurchasesDataSource } from './purchases-datasource';
 import { PurchasesItem } from './purchases-item';
+import { PurchasesService } from './purchases.service';
+
+export interface PurchasesFormData {
+  startDate: moment.Moment | null | string;
+  finishDate: moment.Moment | null | string;
+}
 
 @Component({
   selector: 'app-purchases',
   templateUrl: './purchases.component.html',
   styleUrls: ['./purchases.component.css'],
+
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -31,21 +40,67 @@ import { PurchasesItem } from './purchases-item';
     MatPaginatorModule,
     DecimalPipe,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class PurchasesComponent implements OnInit {
+export class PurchasesComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  private ser = inject(PurchasesService);
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  info: Purchases = new Purchases();
-  dataSource: PurchasesDataSource = new PurchasesDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-  }>;
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  resource = this.ser.list(this.startDate, this.finishDate);
+
+  info = computed(() => this.resource.value() ?? new Purchases());
+  sortedList = computed(() => {
+    const data = this.info().body ?? [];
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'product':
+          return compare(a.name, b.name, isAsc);
+        case 'quantity':
+          return compare(a.quantity, b.quantity, isAsc);
+        case 'rate':
+          return compare(a.rate, b.rate, isAsc);
+        case 'amount':
+          return compare(a.amount, b.amount, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  formModel = linkedSignal({
+    source: () => null,
+    computation: (): PurchasesFormData => ({
+      startDate: moment(new Date()),
+      finishDate: moment(new Date()),
+    }),
+  });
+
+  form = form(this.formModel);
 
   selectedRowId = '';
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -54,28 +109,7 @@ export class PurchasesComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
-  }
-
-  constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: Purchases };
-
-      this.info = data.info;
-      this.form.setValue({
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new PurchasesDataSource(this.info.body, this.paginator, this.sort);
-    });
+    this.form().focusBoundControl();
   }
 
   show() {
@@ -89,7 +123,7 @@ export class PurchasesComponent implements OnInit {
   }
 
   prepareSubmit(): Purchases {
-    const formModel = this.form.value;
+    const formModel = this.formModel();
 
     return {
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
@@ -98,4 +132,16 @@ export class PurchasesComponent implements OnInit {
       footer: new PurchasesItem(),
     };
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/purchases/purchases.resolver.spec.ts b/overlord/src/app/purchases/purchases.resolver.spec.ts
deleted file mode 100644
index cd375f21..00000000
--- a/overlord/src/app/purchases/purchases.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Purchases } from './purchases';
-import { purchasesResolver } from './purchases.resolver';
-
-describe('purchasesResolver', () => {
-  const executeResolver: ResolveFn<Purchases> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => purchasesResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/purchases/purchases.resolver.ts b/overlord/src/app/purchases/purchases.resolver.ts
deleted file mode 100644
index 86d2205e..00000000
--- a/overlord/src/app/purchases/purchases.resolver.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Purchases } from './purchases';
-import { PurchasesService } from './purchases.service';
-
-export const purchasesResolver: ResolveFn<Purchases> = (route) => {
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(PurchasesService).list(startDate, finishDate);
-};
diff --git a/overlord/src/app/purchases/purchases.routes.ts b/overlord/src/app/purchases/purchases.routes.ts
index d8af4baa..2ea5ea12 100644
--- a/overlord/src/app/purchases/purchases.routes.ts
+++ b/overlord/src/app/purchases/purchases.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { PurchasesComponent } from './purchases.component';
-import { purchasesResolver } from './purchases.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Purchases',
     },
-    resolve: {
-      info: purchasesResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/purchases/purchases.service.ts b/overlord/src/app/purchases/purchases.service.ts
index 3354797a..a19de3a9 100644
--- a/overlord/src/app/purchases/purchases.service.ts
+++ b/overlord/src/app/purchases/purchases.service.ts
@@ -1,14 +1,10 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { HttpClient, httpResource, HttpParams } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { Purchases } from './purchases';
 
 const url = '/api/purchases';
-const serviceName = 'PurchasesService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,16 +12,14 @@ export class PurchasesService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(startDate: string | null, finishDate: string | null): Observable<Purchases> {
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    return this.http
-      .get<Purchases>(url, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Purchases>;
+  list(startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<Purchases>(() => {
+      let params = new HttpParams();
+      const s = startDate();
+      if (s !== null) params = params.set('s', s);
+      const f = finishDate();
+      if (f !== null) params = params.set('f', f);
+      return { url, params };
+    });
   }
 }
diff --git a/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail-datasource.ts b/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail-datasource.ts
deleted file mode 100644
index a86126ed..00000000
--- a/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { RateContractItem } from '../rate-contract-item';
-
-export class RateContractDetailDatasource extends DataSource<RateContractItem> {
-  constructor(private data: Observable<RateContractItem[]>) {
-    super();
-  }
-
-  connect(): Observable<RateContractItem[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.html b/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.html
index 8586f0e4..51fdbe3e 100644
--- a/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.html
+++ b/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.html
@@ -1,10 +1,10 @@
 <h2>Rate Contract</h2>
 
-<form [formGroup]="form" class="flex flex-col wrapped">
+<form class="flex flex-col wrapped" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Date</mat-label>
-      <input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
+      <input matInput [matDatepicker]="date" [formField]="form.date" autocomplete="off" #dateElement />
       <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
       <mat-datepicker #date></mat-datepicker>
     </mat-form-field>
@@ -15,7 +15,7 @@
         matInput
         #accountElement
         [matAutocomplete]="autoA"
-        formControlName="account"
+        [formField]="form.account"
         autocomplete="off"
       />
       <mat-autocomplete
@@ -24,7 +24,7 @@
         [displayWith]="displayFn"
         (optionSelected)="accountSelected($event)"
       >
-        @for (account of accounts | async; track account) {
+        @for (account of accounts(); track account) {
           <mat-option [value]="account">{{ account.name }}</mat-option>
         }
       </mat-autocomplete>
@@ -33,18 +33,18 @@
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Valid From</mat-label>
-      <input matInput [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
+      <input matInput [matDatepicker]="validFrom" [formField]="form.validFrom" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
       <mat-datepicker #validFrom></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Valid Till</mat-label>
-      <input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
+      <input matInput [matDatepicker]="validTill" [formField]="form.validTill" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
       <mat-datepicker #validTill></mat-datepicker>
     </mat-form-field>
   </div>
-  <div formGroupName="addRow" class="row-container">
+  <div class="row-container">
     <mat-form-field class="flex-auto basis-3-5">
       <mat-label>Product</mat-label>
       <input
@@ -52,7 +52,7 @@
         matInput
         #productElement
         [matAutocomplete]="autoP"
-        formControlName="product"
+        [formField]="form.addRow.product"
         autocomplete="off"
       />
       <mat-autocomplete
@@ -61,49 +61,55 @@
         [displayWith]="displayFn"
         (optionSelected)="productSelected($event)"
       >
-        @for (product of products | async; track product.id) {
+        @for (product of products(); track product) {
           <mat-option [value]="product">{{ product.name }}</mat-option>
         }
       </mat-autocomplete>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-1-5">
       <mat-label>Price</mat-label>
-      <input type="text" matInput formControlName="price" autocomplete="off" />
+      <input type="text" matInput [formField]="form.addRow.price" autocomplete="off" />
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1-5">Add</button>
   </div>
-  <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-    <!-- Product Column -->
-    <ng-container matColumnDef="product">
-      <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.sku.name }}</mat-cell>
-    </ng-container>
+  @if (itemResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (itemResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+  } @else {
+    <mat-table #table [dataSource]="form.items().value()" matSort (matSortChange)="sortData($event)">
+      <!-- Product Column -->
+      <ng-container matColumnDef="product">
+        <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.sku }}</mat-cell>
+      </ng-container>
 
-    <!-- Price Column -->
-    <ng-container matColumnDef="price">
-      <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Price Column -->
+      <ng-container matColumnDef="price">
+        <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ +row.price | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Action Column -->
-    <ng-container matColumnDef="action">
-      <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center">
-        <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
+      <!-- Action Column -->
+      <ng-container matColumnDef="action">
+        <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="center">
+          <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Narration</mat-label>
-      <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
-    </mat-form-field>
-  </div>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Narration</mat-label>
+        <textarea matInput matAutosizeMinRows="5" [formField]="form.narration"></textarea>
+      </mat-form-field>
+    </div>
+  }
 </form>
 
 <div class="row-container">
diff --git a/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.ts b/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.ts
index e5bbe08d..8832b89e 100644
--- a/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.ts
+++ b/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.ts
@@ -1,6 +1,6 @@
-import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CurrencyPipe } from '@angular/common';
+import { Component, inject, computed, signal, linkedSignal, input, afterNextRender } from '@angular/core';
+import { FormField, FormRoot, form as createForm } from '@angular/forms/signals';
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
@@ -10,31 +10,53 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
 import { Account } from '../../core/account';
 import { AccountService } from '../../core/account.service';
 import { Product } from '../../core/product';
-import { ProductSku } from '../../core/product-sku';
 import { ProductService } from '../../product/product.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
 import { MathService } from '../../shared/math.service';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { RateContract } from '../rate-contract';
 import { RateContractItem } from '../rate-contract-item';
 import { RateContractService } from '../rate-contract.service';
-import { RateContractDetailDatasource } from './rate-contract-detail-datasource';
+
+export interface RateContractItemFormData {
+  id: string | undefined;
+  sku: string;
+  skuObject: Product;
+  price: string;
+}
+
+export interface RateContractDetailFormData {
+  date: Date;
+  account: string;
+  validFrom: Date;
+  validTill: Date;
+  addRow: {
+    product: string;
+    price: string;
+  };
+  items: RateContractItemFormData[];
+  narration: string;
+}
 
 @Component({
   selector: 'app-rate-contract-detail',
   templateUrl: './rate-contract-detail.component.html',
   styleUrls: ['./rate-contract-detail.component.css'],
+  host: {
+    '(window:keydown.f2)': 'focusDate($event)',
+  },
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -44,12 +66,13 @@ import { RateContractDetailDatasource } from './rate-contract-detail-datasource'
     MatTableModule,
     MatSortModule,
     MatIconModule,
-    AsyncPipe,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class RateContractDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class RateContractDetailComponent {
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
@@ -57,137 +80,112 @@ export class RateContractDetailComponent implements OnInit, AfterViewInit {
   private ser = inject(RateContractService);
   private productSer = inject(ProductService);
   private accountSer = inject(AccountService);
+  sortActive = signal('');
+  sortDirection = signal('');
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  itemResource = this.ser.get(this.id);
+  item = computed(() => this.itemResource.value() ?? new RateContract());
 
-  @ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('productElement', { static: true }) productElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
-  public itemsObservable = new BehaviorSubject<RateContractItem[]>([]);
-  dataSource: RateContractDetailDatasource = new RateContractDetailDatasource(this.itemsObservable);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    account: FormControl<string | null>;
-    validFrom: FormControl<moment.Moment>;
-    validTill: FormControl<moment.Moment>;
-    addRow: FormGroup<{
-      product: FormControl<string | null>;
-      price: FormControl<string>;
-    }>;
-    narration: FormControl<string>;
-  }>;
+  formModel = linkedSignal({
+    source: this.item,
+    computation: (itemVal): RateContractDetailFormData => ({
+      date: itemVal.date ? moment(itemVal.date, 'DD-MMM-YYYY').toDate() : new Date(),
+      validFrom: itemVal.validFrom ? moment(itemVal.validFrom, 'DD-MMM-YYYY').toDate() : new Date(),
+      validTill: itemVal.validTill ? moment(itemVal.validTill, 'DD-MMM-YYYY').toDate() : new Date(),
+      account: itemVal.vendor?.name ?? '',
+      addRow: {
+        product: '',
+        price: '',
+      },
+      items: itemVal.items.map((i) => ({
+        id: i.id,
+        sku: i.sku.name,
+        skuObject: i.sku,
+        price: String(i.price),
+      })),
+      narration: itemVal.narration ?? '',
+    }),
+  });
 
-  item: RateContract = new RateContract();
+  form = createForm(this.formModel, () => {});
 
   account: Account | null = null;
   product: Product | null = null;
 
   displayedColumns = ['product', 'price', 'action'];
 
-  accounts: Observable<Account[]>;
-  products: Observable<ProductSku[]>;
+  accountSearch = computed(() => {
+    const v = this.form.account().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  accountsResource = this.accountSer.autocomplete(this.accountSearch);
+  accounts = computed(() => this.accountsResource.value() ?? []);
+
+  productSearch = computed(() => {
+    const v = this.form.addRow.product().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  productsResource = this.productSer.autocompleteSku(
+    this.productSearch,
+    signal(true),
+    signal<string | null>(null),
+    signal<string | null>(null),
+  );
+
+  products = computed(() => this.productsResource.value() ?? []);
 
-  @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
+    this.form().focusBoundControl();
   }
 
   constructor() {
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      account: new FormControl<string | null>(null),
-      validFrom: new FormControl(moment(new Date()), { nonNullable: true }),
-      validTill: new FormControl(moment(new Date()), { nonNullable: true }),
-      addRow: new FormGroup({
-        product: new FormControl(''),
-        price: new FormControl('', { nonNullable: true }),
-      }),
-      narration: new FormControl('', { nonNullable: true }),
+    afterNextRender(() => {
+      this.form.account().focusBoundControl();
     });
-    this.accounts = this.form.controls.account.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
-    );
-    // Listen to Product Autocomplete Change
-    this.products = this.form.controls.addRow.controls.product.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.productSer.autocompleteSku(x, true))),
-    );
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: RateContract };
-      this.loadItem(data.item);
-    });
-  }
-
-  loadItem(item: RateContract) {
-    this.item = item;
-    this.form.setValue({
-      date: moment(this.item.date, 'DD-MMM-YYYY'),
-      validFrom: moment(this.item.validFrom, 'DD-MMM-YYYY'),
-      validTill: moment(this.item.validTill, 'DD-MMM-YYYY'),
-      account: this.item.vendor?.name ?? '',
-      addRow: {
-        product: '',
-        price: '',
-      },
-      narration: this.item.narration,
-    });
-    this.account = this.item.vendor || null;
-    this.dataSource = new RateContractDetailDatasource(this.itemsObservable);
-    this.updateView();
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.accountElement.nativeElement.focus();
-    }, 0);
   }
 
   addRow() {
-    const formValue = this.form.value.addRow;
+    const formValue = this.formModel().addRow;
     if (formValue === undefined) {
       return;
     }
-    const price = this.math.parseAmount(formValue.price, 2);
+    const price = this.math.parseAmount(formValue.price ?? '0', 2);
     if (this.product === null || price <= 0) {
       return;
     }
-    const oldFiltered = this.item.items.filter((x) => x.sku.id === (this.product as Product).id);
-    if (oldFiltered.length) {
+    const existingItems = this.formModel().items;
+    if (existingItems.some((x) => x.skuObject.id === (this.product as Product).id)) {
       this.snackBar.open('Product already added', 'Danger');
       return;
     }
-    this.item.items.push(
-      new RateContractItem({
-        price,
-        sku: this.product,
-      }),
-    );
+    this.formModel.update((m) => ({
+      ...m,
+      items: [
+        ...m.items,
+        {
+          id: undefined,
+          sku: (this.product as Product).name,
+          skuObject: this.product as Product,
+          price: String(price),
+        },
+      ],
+    }));
     this.resetAddRow();
-    this.updateView();
   }
 
   resetAddRow() {
-    this.form.controls.addRow.reset();
+    this.formModel.update((m) => ({ ...m, addRow: { product: '', price: '' } }));
     this.product = null;
-    setTimeout(() => {
-      this.productElement.nativeElement.focus();
-    }, 0);
+    this.form.addRow.product().focusBoundControl();
   }
 
   displayFn(item?: Account | Product | string): string {
     return !item ? '' : typeof item === 'string' ? item : item.name;
   }
 
-  updateView() {
-    this.itemsObservable.next(this.item.items);
-  }
-
   accountSelected(event: MatAutocompleteSelectedEvent): void {
     this.account = event.option.value;
   }
@@ -196,9 +194,11 @@ export class RateContractDetailComponent implements OnInit, AfterViewInit {
     this.product = event.option.value;
   }
 
-  deleteRow(row: RateContractItem) {
-    this.item.items.splice(this.item.items.indexOf(row), 1);
-    this.updateView();
+  deleteRow(row: RateContractItemFormData) {
+    this.formModel.update((m) => ({
+      ...m,
+      items: m.items.filter((x) => x !== row),
+    }));
   }
 
   save() {
@@ -208,19 +208,19 @@ export class RateContractDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/rate-contracts');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
+    this.ser.delete(this.item().id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/rate-contracts');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -239,12 +239,26 @@ export class RateContractDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): RateContract {
-    const formModel = this.form.value;
-    this.item.date = moment(formModel.date).format('DD-MMM-YYYY');
-    this.item.validFrom = moment(formModel.validFrom).format('DD-MMM-YYYY');
-    this.item.validTill = moment(formModel.validTill).format('DD-MMM-YYYY');
-    this.item.vendor = this.account ?? new Account();
-    this.item.narration = formModel.narration ?? '';
-    return this.item;
+    const formModel = this.formModel();
+    const item = this.item();
+    item.date = moment(formModel.date).format('DD-MMM-YYYY');
+    item.validFrom = moment(formModel.validFrom).format('DD-MMM-YYYY');
+    item.validTill = moment(formModel.validTill).format('DD-MMM-YYYY');
+    item.vendor = this.account ?? new Account();
+    item.narration = formModel.narration ?? '';
+    item.items = formModel.items.map(
+      (i) =>
+        new RateContractItem({
+          id: i.id,
+          sku: i.skuObject,
+          price: this.math.parseAmount(i.price, 2),
+        }),
+    );
+    return item;
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
diff --git a/overlord/src/app/rate-contract/rate-contract-list.resolver.spec.ts b/overlord/src/app/rate-contract/rate-contract-list.resolver.spec.ts
deleted file mode 100644
index 66c33c7e..00000000
--- a/overlord/src/app/rate-contract/rate-contract-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { RateContract } from './rate-contract';
-import { rateContractListResolver } from './rate-contract-list.resolver';
-
-describe('rateContractListResolver', () => {
-  const executeResolver: ResolveFn<RateContract[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => rateContractListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/rate-contract/rate-contract-list.resolver.ts b/overlord/src/app/rate-contract/rate-contract-list.resolver.ts
deleted file mode 100644
index 7b9a5397..00000000
--- a/overlord/src/app/rate-contract/rate-contract-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { RateContract } from './rate-contract';
-import { RateContractService } from './rate-contract.service';
-
-export const rateContractListResolver: ResolveFn<RateContract[]> = () => {
-  return inject(RateContractService).list();
-};
diff --git a/overlord/src/app/rate-contract/rate-contract-list/rate-contract-list-datasource.ts b/overlord/src/app/rate-contract/rate-contract-list/rate-contract-list-datasource.ts
deleted file mode 100644
index 4912c758..00000000
--- a/overlord/src/app/rate-contract/rate-contract-list/rate-contract-list-datasource.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { RateContract } from '../rate-contract';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class RateContractListDatasource extends DataSource<RateContract> {
-  constructor(
-    public data: RateContract[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<RateContract[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: RateContract[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: RateContract[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'vendor':
-          return compare(a.vendor?.name ?? '', b.vendor?.name ?? '', isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/rate-contract/rate-contract-list/rate-contract-list.component.html b/overlord/src/app/rate-contract/rate-contract-list/rate-contract-list.component.html
index e06947dc..18c0f982 100644
--- a/overlord/src/app/rate-contract/rate-contract-list/rate-contract-list.component.html
+++ b/overlord/src/app/rate-contract/rate-contract-list/rate-contract-list.component.html
@@ -6,42 +6,48 @@
   </a>
 </h2>
 
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Vendor Column -->
-  <ng-container matColumnDef="vendor">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Vendor</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="['/rate-contracts', row.id]">{{ row.vendor.name }} // {{ row.date }}</a></mat-cell
-    >
-  </ng-container>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (listResource.error()) {
+  <app-error-state [message]="'Failed to load list.'" (retryAction)="listResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Vendor Column -->
+    <ng-container matColumnDef="vendor">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Vendor</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="['/rate-contracts', row.id]">{{ row.vendor.name }} // {{ row.date }}</a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Validity Column -->
-  <ng-container matColumnDef="validity">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Validity</mat-header-cell>
-    <mat-cell *matCellDef="let row"> {{ row.validFrom }} - {{ row.validTill }} </mat-cell>
-  </ng-container>
+    <!-- Validity Column -->
+    <ng-container matColumnDef="validity">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Validity</mat-header-cell>
+      <mat-cell *matCellDef="let row"> {{ row.validFrom }} - {{ row.validTill }} </mat-cell>
+    </ng-container>
 
-  <!-- Products Column -->
-  <ng-container matColumnDef="products">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Products</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        @for (item of row.items; track item) {
-          <li>{{ item.sku.name }} &#64; {{ item.price | currency: 'INR' }}</li>
-        }
-      </ul>
-    </mat-cell>
-  </ng-container>
+    <!-- Products Column -->
+    <ng-container matColumnDef="products">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Products</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <ul>
+          @for (item of row.items; track item) {
+            <li>{{ item.sku.name }} &#64; {{ item.price | currency: 'INR' }}</li>
+          }
+        </ul>
+      </mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="list().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/rate-contract/rate-contract-list/rate-contract-list.component.ts b/overlord/src/app/rate-contract/rate-contract-list/rate-contract-list.component.ts
index 91b06560..8c30d3d3 100644
--- a/overlord/src/app/rate-contract/rate-contract-list/rate-contract-list.component.ts
+++ b/overlord/src/app/rate-contract/rate-contract-list/rate-contract-list.component.ts
@@ -1,19 +1,21 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { Component, inject, computed, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
-import { RateContract } from '../rate-contract';
-import { RateContractListDatasource } from './rate-contract-list-datasource';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { RateContractService } from '../rate-contract.service';
 
 @Component({
   selector: 'app-rate-contract-list',
   templateUrl: './rate-contract-list.component.html',
   styleUrls: ['./rate-contract-list.component.css'],
+
   imports: [
     RouterModule,
     MatIconModule,
@@ -22,24 +24,63 @@ import { RateContractListDatasource } from './rate-contract-list-datasource';
     MatPaginatorModule,
     CurrencyPipe,
     MatButtonModule,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class RateContractListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class RateContractListComponent {
+  private ser = inject(RateContractService);
+
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+
+  listResource = this.ser.list();
+  list = computed(() => this.listResource.value() ?? []);
+  sortedList = computed(() => {
+    const data = this.list();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'vendor':
+          return compare(a.vendor?.name ?? '', b.vendor?.name ?? '', isAsc);
+        case 'validity':
+          return compare(a.validFrom, b.validFrom, isAsc);
+        case 'products':
+          return compare(a.items?.length ?? 0, b.items?.length ?? 0, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  list: RateContract[] = [];
-  dataSource: RateContractListDatasource = new RateContractListDatasource(this.list, this.paginator, this.sort);
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['vendor', 'validity', 'products'];
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: RateContract[] };
-
-      this.list = data.list;
-    });
-    this.dataSource = new RateContractListDatasource(this.list, this.paginator, this.sort);
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/rate-contract/rate-contract.resolver.spec.ts b/overlord/src/app/rate-contract/rate-contract.resolver.spec.ts
deleted file mode 100644
index 089285f7..00000000
--- a/overlord/src/app/rate-contract/rate-contract.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { RateContract } from './rate-contract';
-import { rateContractResolver } from './rate-contract.resolver';
-
-describe('rateContractResolver', () => {
-  const executeResolver: ResolveFn<RateContract> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => rateContractResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/rate-contract/rate-contract.resolver.ts b/overlord/src/app/rate-contract/rate-contract.resolver.ts
deleted file mode 100644
index 24816c5a..00000000
--- a/overlord/src/app/rate-contract/rate-contract.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { RateContract } from './rate-contract';
-import { RateContractService } from './rate-contract.service';
-
-export const rateContractResolver: ResolveFn<RateContract> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(RateContractService).get(id);
-};
diff --git a/overlord/src/app/rate-contract/rate-contract.routes.ts b/overlord/src/app/rate-contract/rate-contract.routes.ts
index f4d72917..2510196a 100644
--- a/overlord/src/app/rate-contract/rate-contract.routes.ts
+++ b/overlord/src/app/rate-contract/rate-contract.routes.ts
@@ -2,9 +2,7 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { RateContractDetailComponent } from './rate-contract-detail/rate-contract-detail.component';
-import { rateContractListResolver } from './rate-contract-list.resolver';
 import { RateContractListComponent } from './rate-contract-list/rate-contract-list.component';
-import { rateContractResolver } from './rate-contract.resolver';
 
 export const routes: Routes = [
   {
@@ -14,9 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Rate Contracts',
     },
-    resolve: {
-      list: rateContractListResolver,
-    },
   },
   {
     path: 'new',
@@ -25,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Rate Contracts',
     },
-    resolve: {
-      item: rateContractResolver,
-    },
   },
   {
     path: ':id',
@@ -36,8 +28,5 @@ export const routes: Routes = [
     data: {
       permission: 'Rate Contracts',
     },
-    resolve: {
-      item: rateContractResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/rate-contract/rate-contract.service.ts b/overlord/src/app/rate-contract/rate-contract.service.ts
index 032af9d7..d8b125e8 100644
--- a/overlord/src/app/rate-contract/rate-contract.service.ts
+++ b/overlord/src/app/rate-contract/rate-contract.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { RateContract } from './rate-contract';
 
 const url = '/api/rate-contracts';
-const serviceName = 'RateContractService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,29 +14,27 @@ export class RateContractService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<RateContract> {
-    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
-    return this.http
-      .get<RateContract>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<RateContract>;
+  get(id: Signal<string | null>) {
+    return httpResource<RateContract>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<RateContract[]> {
-    return this.http
-      .get<RateContract[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<RateContract[]>;
+  list() {
+    return httpResource<RateContract[]>(() => `${url}/list`);
   }
 
   save(rateContract: RateContract): Observable<RateContract> {
     return this.http
       .post<RateContract>(`${url}`, rateContract)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<RateContract>;
+      .pipe(catchError(this.log.handleError('RateContractService', 'save'))) as Observable<RateContract>;
   }
 
   update(rateContract: RateContract): Observable<RateContract> {
     return this.http
       .put<RateContract>(`${url}/${rateContract.id}`, rateContract)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<RateContract>;
+      .pipe(catchError(this.log.handleError('RateContractService', 'update'))) as Observable<RateContract>;
   }
 
   saveOrUpdate(rateContract: RateContract): Observable<RateContract> {
@@ -51,6 +47,6 @@ export class RateContractService {
   delete(id: string): Observable<RateContract> {
     return this.http
       .delete<RateContract>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<RateContract>;
+      .pipe(catchError(this.log.handleError('RateContractService', 'delete'))) as Observable<RateContract>;
   }
 }
diff --git a/overlord/src/app/raw-material-cost/raw-material-cost-datasource.ts b/overlord/src/app/raw-material-cost/raw-material-cost-datasource.ts
deleted file mode 100644
index e3a27c3d..00000000
--- a/overlord/src/app/raw-material-cost/raw-material-cost-datasource.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { RawMaterialCostItem } from './raw-material-cost-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class RawMaterialCostDataSource extends DataSource<RawMaterialCostItem> {
-  constructor(
-    public data: RawMaterialCostItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<RawMaterialCostItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: RawMaterialCostItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: RawMaterialCostItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/raw-material-cost/raw-material-cost.component.html b/overlord/src/app/raw-material-cost/raw-material-cost.component.html
index 81877872..deb33183 100644
--- a/overlord/src/app/raw-material-cost/raw-material-cost.component.html
+++ b/overlord/src/app/raw-material-cost/raw-material-cost.component.html
@@ -1,104 +1,116 @@
 <h2 class="row-container space-between">
   <span>Raw Material Cost</span>
-  @if (dataSource.data.length) {
+  @if ((this.info().body ?? []).length) {
     <button mat-icon-button (click)="exportCsv()">
       <mat-icon>save_alt</mat-icon>
     </button>
   }
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
+      <input matInput #startDateElement [matDatepicker]="startDate" [formField]="form.startDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
       <mat-datepicker #startDate></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      @if (row.url) {
-        <a [routerLink]="row.url" [queryParams]="{ startDate: info.startDate, finishDate: info.finishDate }">
-          {{ row.name }}
-        </a>
-      } @else {
-        <span>{{ row.name }}</span>
-      }
-    </mat-cell>
-    <mat-footer-cell *matFooterCellDef>{{ info.footer?.name }}</mat-footer-cell>
-  </ng-container>
+@if (infoResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (infoResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="infoResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        @if (row.url) {
+          <a [routerLink]="row.url" [queryParams]="{ startDate: info().startDate, finishDate: info().finishDate }">
+            {{ row.name }}
+          </a>
+        } @else {
+          <span>{{ row.name }}</span>
+        }
+      </mat-cell>
+      <mat-footer-cell *matFooterCellDef>{{ info().footer?.name }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Issue Column -->
-  <ng-container matColumnDef="issue">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Issue</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.issue | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">{{ info.footer?.issue | currency: 'INR' }}</mat-footer-cell>
-  </ng-container>
+    <!-- Issue Column -->
+    <ng-container matColumnDef="issue">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Issue</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.issue | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">{{
+        $safeNavigationMigration(info().footer?.issue) | currency: 'INR'
+      }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Sale Column -->
-  <ng-container matColumnDef="sale">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Sale</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.sale | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">{{ info.footer?.sale | currency: 'INR' }}</mat-footer-cell>
-  </ng-container>
+    <!-- Sale Column -->
+    <ng-container matColumnDef="sale">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Sale</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.sale | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">{{
+        $safeNavigationMigration(info().footer?.sale) | currency: 'INR'
+      }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Rmc Column  -->
-  <ng-container matColumnDef="rmc">
-    <mat-header-cell *matHeaderCellDef class="right">RMC</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.rmc | percent: '1.2-2' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef class="right">{{ info.footer?.rmc | percent: '1.2-2' }}</mat-footer-cell>
-  </ng-container>
+    <!-- Rmc Column  -->
+    <ng-container matColumnDef="rmc">
+      <mat-header-cell *matHeaderCellDef class="right">RMC</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.rmc | percent: '1.2-2' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef class="right">{{
+        $safeNavigationMigration(info().footer?.rmc) | percent: '1.2-2'
+      }}</mat-footer-cell>
+    </ng-container>
 
-  <!-- Group Column -->
-  <ng-container matColumnDef="group">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
-  </ng-container>
+    <!-- Group Column -->
+    <ng-container matColumnDef="group">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef></mat-footer-cell>
+    </ng-container>
 
-  <!-- Quantity Column -->
-  <ng-container matColumnDef="quantity">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Quantity</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
-  </ng-container>
+    <!-- Quantity Column -->
+    <ng-container matColumnDef="quantity">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Quantity</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef></mat-footer-cell>
+    </ng-container>
 
-  <!-- Net Column -->
-  <ng-container matColumnDef="net">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Net</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.net | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
-  </ng-container>
+    <!-- Net Column -->
+    <ng-container matColumnDef="net">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Net</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.net | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef></mat-footer-cell>
+    </ng-container>
 
-  <!-- Gross Column -->
-  <ng-container matColumnDef="gross">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Gross</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.gross | currency: 'INR' }}</mat-cell>
-    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
-  </ng-container>
+    <!-- Gross Column -->
+    <ng-container matColumnDef="gross">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Gross</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.gross | currency: 'INR' }}</mat-cell>
+      <mat-footer-cell *matFooterCellDef></mat-footer-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns()"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns()"></mat-row>
+    <mat-footer-row *matFooterRowDef="displayedColumns()"></mat-footer-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="(this.info().body ?? []).length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/raw-material-cost/raw-material-cost.component.ts b/overlord/src/app/raw-material-cost/raw-material-cost.component.ts
index 3cebb7bc..86445956 100644
--- a/overlord/src/app/raw-material-cost/raw-material-cost.component.ts
+++ b/overlord/src/app/raw-material-cost/raw-material-cost.component.ts
@@ -1,28 +1,37 @@
 import { CurrencyPipe, DecimalPipe, PercentPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, linkedSignal, computed, signal, input } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import moment from 'moment';
 
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { ToCsvService } from '../shared/to-csv.service';
 import { RawMaterialCost } from './raw-material-cost';
-import { RawMaterialCostDataSource } from './raw-material-cost-datasource';
+import { RawMaterialCostService } from './raw-material-cost.service';
+
+export interface RawMaterialCostFormData {
+  startDate: Date | null;
+  finishDate: Date | null;
+}
 
 @Component({
   selector: 'app-raw-material-cost',
   templateUrl: './raw-material-cost.component.html',
   styleUrls: ['./raw-material-cost.component.css'],
+
   imports: [
     MatIconModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -34,22 +43,75 @@ import { RawMaterialCostDataSource } from './raw-material-cost-datasource';
     DecimalPipe,
     PercentPipe,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class RawMaterialCostComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class RawMaterialCostComponent {
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
+  private ser = inject(RawMaterialCostService);
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  infoResource = this.ser.list(this.id, this.startDate, this.finishDate);
+  info = computed(() => this.infoResource.value() ?? new RawMaterialCost());
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  info: RawMaterialCost = new RawMaterialCost();
-  dataSource: RawMaterialCostDataSource = new RawMaterialCostDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-  }>;
+  sortedList = computed(() => {
+    const data = this.info().body ?? [];
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'issue':
+          return compare(a.issue ?? 0, b.issue ?? 0, isAsc);
+        case 'sale':
+          return compare(a.sale ?? 0, b.sale ?? 0, isAsc);
+        case 'group':
+          return compare(a.group ?? '', b.group ?? '', isAsc);
+        case 'quantity':
+          return compare(a.quantity ?? 0, b.quantity ?? 0, isAsc);
+        case 'net':
+          return compare(a.net ?? 0, b.net ?? 0, isAsc);
+        case 'gross':
+          return compare(a.gross ?? 0, b.gross ?? 0, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  displayedColumns = computed(() => (this.info().id ? this.columnsId : this.columnsNoId));
+
+  formModel = linkedSignal({
+    source: () => null,
+    computation: (): RawMaterialCostFormData => ({
+      startDate: new Date(),
+      finishDate: new Date(),
+    }),
+  });
+
+  form = form(this.formModel);
 
   debitQuantity = 0;
   debitAmount = 0;
@@ -57,37 +119,13 @@ export class RawMaterialCostComponent implements OnInit {
   creditAmount = 0;
   runningQuantity = 0;
   runningAmount = 0;
-  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns: string[] = [];
   columnsNoId = ['name', 'issue', 'sale', 'rmc'];
   columnsId = ['name', 'group', 'quantity', 'net', 'gross'];
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
-  }
-
-  constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: RawMaterialCost };
-
-      this.info = data.info;
-      this.displayedColumns = this.info.id ? this.columnsId : this.columnsNoId;
-      this.form.setValue({
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new RawMaterialCostDataSource(this.info.body, this.paginator, this.sort);
-    });
+    this.form().focusBoundControl();
   }
 
   show() {
@@ -101,7 +139,7 @@ export class RawMaterialCostComponent implements OnInit {
   }
 
   prepareSubmit(): RawMaterialCost {
-    const formModel = this.form.value;
+    const formModel = this.formModel();
 
     return new RawMaterialCost({
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
@@ -111,13 +149,13 @@ export class RawMaterialCostComponent implements OnInit {
 
   exportCsv() {
     let headers: Record<string, string>;
-    if (this.info.id) {
+    if (this.info().id) {
       headers = { Name: 'name', Group: 'group', Quantity: 'quantity', Net: 'net', Gross: 'gross' };
     } else {
       headers = { Name: 'name', Issue: 'issue', Sale: 'sale', RMC: 'rmc' };
     }
 
-    const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource.data)], {
+    const csvData = new Blob([this.toCsv.toCsv(headers, this.info().body ?? [])], {
       type: 'text/csv;charset=utf-8;',
     });
     const link = document.createElement('a');
@@ -127,4 +165,16 @@ export class RawMaterialCostComponent implements OnInit {
     link.click();
     document.body.removeChild(link);
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/raw-material-cost/raw-material-cost.resolver.spec.ts b/overlord/src/app/raw-material-cost/raw-material-cost.resolver.spec.ts
deleted file mode 100644
index 9c3e0b9a..00000000
--- a/overlord/src/app/raw-material-cost/raw-material-cost.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { RawMaterialCost } from './raw-material-cost';
-import { rawMaterialCostResolver } from './raw-material-cost.resolver';
-
-describe('rawMaterialCostResolver', () => {
-  const executeResolver: ResolveFn<RawMaterialCost> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => rawMaterialCostResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/raw-material-cost/raw-material-cost.resolver.ts b/overlord/src/app/raw-material-cost/raw-material-cost.resolver.ts
deleted file mode 100644
index ccd56819..00000000
--- a/overlord/src/app/raw-material-cost/raw-material-cost.resolver.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { RawMaterialCost } from './raw-material-cost';
-import { RawMaterialCostService } from './raw-material-cost.service';
-
-export const rawMaterialCostResolver: ResolveFn<RawMaterialCost> = (route) => {
-  const id = route.paramMap.get('id') || null;
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(RawMaterialCostService).list(id, startDate, finishDate);
-};
diff --git a/overlord/src/app/raw-material-cost/raw-material-cost.routes.ts b/overlord/src/app/raw-material-cost/raw-material-cost.routes.ts
index 59413f45..de7bdcd5 100644
--- a/overlord/src/app/raw-material-cost/raw-material-cost.routes.ts
+++ b/overlord/src/app/raw-material-cost/raw-material-cost.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { RawMaterialCostComponent } from './raw-material-cost.component';
-import { rawMaterialCostResolver } from './raw-material-cost.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Raw Material Cost',
     },
-    resolve: {
-      info: rawMaterialCostResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Raw Material Cost',
     },
-    resolve: {
-      info: rawMaterialCostResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/raw-material-cost/raw-material-cost.service.ts b/overlord/src/app/raw-material-cost/raw-material-cost.service.ts
index fccaf8ee..ceafac27 100644
--- a/overlord/src/app/raw-material-cost/raw-material-cost.service.ts
+++ b/overlord/src/app/raw-material-cost/raw-material-cost.service.ts
@@ -1,14 +1,10 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { HttpClient, httpResource, HttpParams } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { RawMaterialCost } from './raw-material-cost';
 
 const url = '/api/raw-material-cost';
-const serviceName = 'RawMaterialCostService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,24 +12,22 @@ export class RawMaterialCostService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(id: string | null, startDate: string | null, finishDate: string | null): Observable<RawMaterialCost> {
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    let listUrl = '';
-    if (id !== null) {
-      listUrl = `${url}/${id}`;
-    } else if (startDate || finishDate) {
-      listUrl = `${url}/data`;
-    } else {
-      listUrl = url;
-    }
-    return this.http
-      .get<RawMaterialCost>(listUrl, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<RawMaterialCost>;
+  list(id: Signal<string | null>, startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<RawMaterialCost>(() => {
+      let params = new HttpParams();
+      const s = startDate();
+      if (s !== null) params = params.set('s', s);
+      const f = finishDate();
+      if (f !== null) params = params.set('f', f);
+
+      const i = id();
+      if (i !== null) {
+        return { url: `${url}/${i}`, params };
+      } else if (s || f) {
+        return { url: `${url}/data`, params };
+      } else {
+        return { url: url, params };
+      }
+    });
   }
 }
diff --git a/overlord/src/app/receipt/receipt-accounts.resolver.spec.ts b/overlord/src/app/receipt/receipt-accounts.resolver.spec.ts
deleted file mode 100644
index b02fcf22..00000000
--- a/overlord/src/app/receipt/receipt-accounts.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Account } from '../core/account';
-import { receiptAccountsResolver } from './receipt-accounts.resolver';
-
-describe('receiptAccountsResolver', () => {
-  const executeResolver: ResolveFn<Account[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => receiptAccountsResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/receipt/receipt-accounts.resolver.ts b/overlord/src/app/receipt/receipt-accounts.resolver.ts
deleted file mode 100644
index 26f647b7..00000000
--- a/overlord/src/app/receipt/receipt-accounts.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Account } from '../core/account';
-import { AccountService } from '../core/account.service';
-
-export const receiptAccountsResolver: ResolveFn<Account[]> = () => {
-  return inject(AccountService).receiptAutocomplete('');
-};
diff --git a/overlord/src/app/receipt/receipt-datasource.ts b/overlord/src/app/receipt/receipt-datasource.ts
deleted file mode 100644
index c4188af0..00000000
--- a/overlord/src/app/receipt/receipt-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { Journal } from '../core/journal';
-
-export class ReceiptDataSource extends DataSource<Journal> {
-  constructor(private data: Observable<Journal[]>) {
-    super();
-  }
-
-  connect(): Observable<Journal[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/receipt/receipt-dialog.component.html b/overlord/src/app/receipt/receipt-dialog.component.html
index 96fdc784..c7ede502 100644
--- a/overlord/src/app/receipt/receipt-dialog.component.html
+++ b/overlord/src/app/receipt/receipt-dialog.component.html
@@ -1,6 +1,6 @@
 <h1 mat-dialog-title>Edit Receipt Entry</h1>
 <div mat-dialog-content>
-  <form [formGroup]="form">
+  <form [formRoot]="form">
     <div class="row-container">
       <mat-form-field class="flex-auto basis-2-3">
         <mat-label>Account</mat-label>
@@ -9,29 +9,24 @@
           matInput
           #accountElement
           [matAutocomplete]="auto"
-          formControlName="account"
+          [formField]="form.account"
           autocomplete="off"
         />
-        @if (accBal) {
+        @if (accBal()) {
           <mat-hint>
-            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+            Balance as on Date: <strong>{{ accBal()?.date | currency: 'INR' | accounting }}</strong> / Final balance:
+            <strong>{{ accBal()?.total | currency: 'INR' | accounting }}</strong>
           </mat-hint>
         }
       </mat-form-field>
-      <mat-autocomplete
-        #auto="matAutocomplete"
-        autoActiveFirstOption
-        [displayWith]="displayFn"
-        (optionSelected)="accountSelected($event)"
-      >
-        @for (account of accounts | async; track account) {
+      <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+        @for (account of accounts(); track account) {
           <mat-option [value]="account">{{ account.name }}</mat-option>
         }
       </mat-autocomplete>
       <mat-form-field class="flex-auto basis-1-3">
         <mat-label>Amount</mat-label>
-        <input type="text" matInput formControlName="amount" autocomplete="off" />
+        <input type="text" matInput [formField]="form.amount" autocomplete="off" />
         <span matTextPrefix>₹&nbsp;</span>
       </mat-form-field>
     </div>
diff --git a/overlord/src/app/receipt/receipt-dialog.component.ts b/overlord/src/app/receipt/receipt-dialog.component.ts
index 4278b3a5..04c3d005 100644
--- a/overlord/src/app/receipt/receipt-dialog.component.ts
+++ b/overlord/src/app/receipt/receipt-dialog.component.ts
@@ -1,23 +1,24 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { CurrencyPipe } from '@angular/common';
+import { Component, computed, inject, linkedSignal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatOptionModule } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
 import { Account } from '../core/account';
-import { AccountBalance } from '../core/account-balance';
 import { AccountService } from '../core/account.service';
 import { Journal } from '../core/journal';
 import { AccountingPipe } from '../shared/accounting.pipe';
 import { MathService } from '../shared/math.service';
 
+export interface ReceiptDialogFormData {
+  account: Account | string | null;
+  amount: string;
+}
+
 @Component({
   selector: 'app-receipt-dialog',
   templateUrl: './receipt-dialog.component.html',
@@ -25,18 +26,17 @@ import { MathService } from '../shared/math.service';
   imports: [
     MatDialogModule,
     CdkScrollableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatAutocompleteModule,
-    MatOptionModule,
     MatButtonModule,
-    AsyncPipe,
     CurrencyPipe,
     AccountingPipe,
   ],
 })
-export class ReceiptDialogComponent implements OnInit {
+export class ReceiptDialogComponent {
   dialogRef = inject<MatDialogRef<ReceiptDialogComponent>>(MatDialogRef);
   data = inject<{
     journal: Journal;
@@ -45,56 +45,52 @@ export class ReceiptDialogComponent implements OnInit {
 
   private math = inject(MathService);
   private accountSer = inject(AccountService);
-  private cd = inject(ChangeDetectorRef);
 
-  accounts: Observable<Account[]>;
-  form: FormGroup<{
-    account: FormControl<string | null>;
-    amount: FormControl<string>;
-  }>;
+  formModel = linkedSignal<
+    {
+      journal: Journal;
+      date: string;
+    },
+    ReceiptDialogFormData
+  >({
+    source: () => this.data,
+    computation: (data: { journal: Journal; date: string }) => ({
+      account: data.journal.account,
+      amount: `${data.journal.amount}`,
+    }),
+  });
 
-  account: Account = new Account();
-  accBal: AccountBalance | null = null;
+  form = form(this.formModel);
 
-  constructor() {
-    this.form = new FormGroup({
-      account: new FormControl(''),
-      amount: new FormControl('', { nonNullable: true }),
-    });
-    this.accBal = null;
-    // Setup Account Autocomplete
-    this.accounts = this.form.controls.account.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
-    );
-  }
+  accountSearch = computed(() => {
+    const v = this.form.account().value();
+    return typeof v === 'string' ? v : null;
+  });
 
-  ngOnInit() {
-    this.form.setValue({
-      account: this.data.journal.account.name,
-      amount: `${this.data.journal.amount}`,
-    });
-    this.account = this.data.journal.account;
-  }
+  accountsResource = this.accountSer.autocomplete(this.accountSearch);
+  accounts = computed(() => this.accountsResource.value() ?? []);
 
-  displayFn(account?: Account | string): string {
-    return !account ? '' : typeof account === 'string' ? account : account.name;
-  }
+  balanceDate = computed(() => this.data.date);
+  accountId = computed((): string | null => {
+    const account = this.form.account().value();
+    return typeof account === 'string' ? null : (account?.id ?? null);
+  });
 
-  accountSelected(event: MatAutocompleteSelectedEvent): void {
-    const account = event.option.value;
-    this.account = account;
-    this.accountSer.balance(account.id as string, this.data.date).subscribe((v) => {
-      this.accBal = v;
-      this.cd.detectChanges();
-    });
+  accBalResource = this.accountSer.balance(this.accountId, this.balanceDate);
+  accBal = computed(() => this.accBalResource.value() ?? null);
+
+  displayFn(account?: Account): string {
+    return account ? account.name : '';
   }
 
   accept(): void {
-    const formValue = this.form.value;
-    const amount = this.math.parseAmount(formValue.amount, 2);
-    this.data.journal.account = this.account;
+    const formValue = this.form().value();
+    const account = typeof formValue.account === 'string' ? null : formValue.account;
+    if (!account || !account.id) {
+      return;
+    }
+    const amount = this.math.parseAmount(formValue.amount ?? '0', 2);
+    this.data.journal.account = account;
     this.data.journal.amount = amount;
     this.dialogRef.close(this.data.journal);
   }
diff --git a/overlord/src/app/receipt/receipt.component.html b/overlord/src/app/receipt/receipt.component.html
index 253ec98d..14a110da 100644
--- a/overlord/src/app/receipt/receipt.component.html
+++ b/overlord/src/app/receipt/receipt.component.html
@@ -1,21 +1,26 @@
 <h2 class="row-container space-between">
   <span>Receipt</span>
-  <mat-icon matSuffix (click)="voucher.isStarred = !voucher.isStarred" class="pointer" [class.gold]="voucher.isStarred">
-    {{ voucher.isStarred ? 'star' : 'star_border' }}
+  <mat-icon
+    matSuffix
+    (click)="form.isStarred().value.set(!form.isStarred())"
+    class="pointer"
+    [class.gold]="form.isStarred()"
+  >
+    {{ form.isStarred() ? 'star' : 'star_border' }}
   </mat-icon>
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Date</mat-label>
-      <input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
+      <input matInput [matDatepicker]="date" [formField]="form.date" autocomplete="off" #dateElement />
       <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
       <mat-datepicker #date></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
-      <mat-select formControlName="receiptAccount">
-        @for (account of receiptAccounts; track account) {
+      <mat-select [formField]="form.receiptAccount">
+        @for (account of receiptAccounts(); track account) {
           <mat-option [value]="account.id">
             {{ account.name }}
           </mat-option>
@@ -24,12 +29,12 @@
     </mat-form-field>
     <mat-form-field class="flex-auto basis-1-5">
       <mat-label>Receipt Amount</mat-label>
-      <input type="text" matInput formControlName="receiptAmount" />
+      <input type="number" matInput [formField]="form.receiptAmount" />
       <span matTextPrefix>₹&nbsp;</span>
     </mat-form-field>
   </div>
 
-  <div formGroupName="addRow" class="row-container">
+  <div class="row-container">
     <mat-form-field class="flex-auto basis-55">
       <mat-label>Account</mat-label>
       <input
@@ -37,143 +42,143 @@
         matInput
         #accountElement
         [matAutocomplete]="auto"
-        formControlName="account"
+        [formField]="form.addRow.account"
         autocomplete="off"
       />
-      @if (accBal) {
+      @if (accBal()) {
         <mat-hint>
-          Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-          <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+          Balance as on Date: <strong>{{ accBal()?.date | currency: 'INR' | accounting }}</strong> / Final balance:
+          <strong>{{ accBal()?.total | currency: 'INR' | accounting }}</strong>
         </mat-hint>
       }
+      <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayFn">
+        @for (account of accounts(); track account) {
+          <mat-option [value]="account">{{ account.name }}</mat-option>
+        }
+      </mat-autocomplete>
     </mat-form-field>
-    <mat-autocomplete
-      #auto="matAutocomplete"
-      autoActiveFirstOption
-      [displayWith]="displayFn"
-      (optionSelected)="accountSelected($event)"
-    >
-      @for (account of accounts | async; track account) {
-        <mat-option [value]="account">{{ account.name }}</mat-option>
-      }
-    </mat-autocomplete>
     <mat-form-field class="flex-auto basis-1-4">
       <mat-label>Amount</mat-label>
-      <input type="text" matInput formControlName="amount" autocomplete="off" />
+      <input type="text" matInput [formField]="form.addRow.amount" autocomplete="off" />
       <span matTextPrefix>₹&nbsp;</span>
     </mat-form-field>
 
     <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1-5">Add</button>
   </div>
-  <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-    <!-- Account Column -->
-    <ng-container matColumnDef="account">
-      <mat-header-cell *matHeaderCellDef>Account</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.account.name }}</mat-cell>
-    </ng-container>
+  @if (itemResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (itemResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+  } @else {
+    <mat-table #table [dataSource]="form.journals().value() ?? []" matSort (matSortChange)="sortData($event)">
+      <!-- Account Column -->
+      <ng-container matColumnDef="account">
+        <mat-header-cell *matHeaderCellDef>Account</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.account.name }}</mat-cell>
+      </ng-container>
 
-    <!-- Amount Column -->
-    <ng-container matColumnDef="amount">
-      <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Amount Column -->
+      <ng-container matColumnDef="amount">
+        <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Action Column -->
-    <ng-container matColumnDef="action">
-      <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center">
-        <button mat-icon-button tabindex="-1" (click)="editRow(row)">
-          <mat-icon>edit</mat-icon>
-        </button>
-        <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
+      <!-- Action Column -->
+      <ng-container matColumnDef="action">
+        <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="center">
+          <button mat-icon-button tabindex="-1" (click)="editRow(row)">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Narration</mat-label>
-      <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Tags</mat-label>
-      <mat-chip-grid #chipGrid aria-label="Tag selection">
-        @for (tag of voucher.tags; track tag) {
-          <mat-chip-row (removed)="removeTag(tag)">
-            {{ tag.name }}
-            <button matChipRemove [attr.aria-label]="'remove ' + tag.name">
-              <mat-icon>cancel</mat-icon>
-            </button>
-          </mat-chip-row>
-        }
-      </mat-chip-grid>
-      <input
-        placeholder="New Tag..."
-        #tagInput
-        formControlName="tags"
-        [matChipInputFor]="chipGrid"
-        [matAutocomplete]="autoTag"
-        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-        (matChipInputTokenEnd)="addTag($event)"
-      />
-      <mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
-        @for (tag of tags | async; track tag) {
-          <mat-option [value]="tag">{{ tag.name }}</mat-option>
-        }
-      </mat-autocomplete>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    @for (item of voucher.files; track item) {
-      <div class="img-container" class="flex-auto basis-1-5">
-        <img [src]="item.thumbnail" alt="img" (click)="zoomImage(item)" (keyup.enter)="zoomImage(item)" tabindex="0" />
-        <button mat-icon-button class="overlay" (click)="deleteImage(item)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
-    }
-    <div class="img-container" class="flex flex-auto basis-1-5">
-      <label ng-href for="fileUp">
-        <img
-          alt="add"
-          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
-        />
-      </label>
-      <input
-        type="file"
-        id="fileUp"
-        multiple
-        accept="image/*"
-        style="display: none"
-        (change)="image.detectFiles($event, voucher)"
-      />
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Narration</mat-label>
+        <textarea matInput matAutosizeMinRows="5" [formField]="form.narration"></textarea>
+      </mat-form-field>
     </div>
-  </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Tags</mat-label>
+        <mat-chip-grid #chipGrid aria-label="Tag selection">
+          @for (tag of form.tagList().value(); track tag) {
+            <mat-chip-row (removed)="removeTag(tag)">
+              {{ tag.name }}
+              <button matChipRemove [attr.aria-label]="'remove ' + tag.name">
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip-row>
+          }
+        </mat-chip-grid>
+        <input
+          placeholder="New Tag..."
+          #tagInput
+          [formField]="form.tagInput"
+          [matChipInputFor]="chipGrid"
+          [matAutocomplete]="autoTag"
+          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+          (matChipInputTokenEnd)="addTag()"
+        />
+        <mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
+          @for (tag of tags(); track tag) {
+            <mat-option [value]="tag">{{ tag.name }}</mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      @for (item of form.files().value(); track item) {
+        <div class="img-container" class="flex-auto basis-1-5">
+          <img
+            [src]="item.thumbnail"
+            alt="img"
+            (click)="zoomImage(item)"
+            (keyup.enter)="zoomImage(item)"
+            tabindex="0"
+          />
+          <button mat-icon-button class="overlay" (click)="deleteImage(item)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+      }
+      <div class="img-container" class="flex flex-auto basis-1-5">
+        <label ng-href for="fileUp">
+          <img
+            alt="add"
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
+          />
+        </label>
+        <input type="file" id="fileUp" multiple accept="image/*" style="display: none" (change)="detectFiles($event)" />
+      </div>
+    </div>
+  }
 </form>
 
 <div class="row-container">
   <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="">
-    {{ voucher.id ? 'Update' : 'Save' }}
+    {{ id() ? 'Update' : 'Save' }}
   </button>
-  @if (voucher.id) {
-    <button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')" class="">
-      {{ voucher.posted ? 'Posted' : 'Post' }}
+  @if (id()) {
+    <button mat-raised-button (click)="post()" [disabled]="form.posted().controlValue()" class="">
+      {{ form.posted().controlValue() ? 'Posted' : 'Post' }}
     </button>
     <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
   }
   <span class="spacer"></span>
-  @if (voucher.id) {
+  @if (id()) {
     <span class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      Created on&nbsp;<strong>{{ form.creationDate().value() | localTime }}</strong
+      >&nbsp;and Last Edited on&nbsp; <strong>{{ form.lastEditDate().value() | localTime }}</strong
+      >&nbsp;by&nbsp; <strong>{{ form.userName() }}</strong
+      >. {{ form.posted() ? 'Posted by ' + form.poster() : '' }}
     </span>
   }
 </div>
diff --git a/overlord/src/app/receipt/receipt.component.ts b/overlord/src/app/receipt/receipt.component.ts
index 25bfa9ae..3159a14e 100644
--- a/overlord/src/app/receipt/receipt.component.ts
+++ b/overlord/src/app/receipt/receipt.component.ts
@@ -1,19 +1,20 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { AsyncPipe, CurrencyPipe } from '@angular/common';
+import { CurrencyPipe } from '@angular/common';
 import {
-  AfterViewInit,
-  ChangeDetectorRef,
+  afterNextRender,
   Component,
-  ElementRef,
+  computed,
+  effect,
   HostListener,
   inject,
-  OnInit,
-  ViewChild,
+  input,
+  linkedSignal,
+  signal,
 } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
@@ -22,18 +23,17 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { round } from 'mathjs';
 import moment from 'moment';
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
+import { zip } from 'rxjs';
 
 import { AuthService } from '../auth/auth.service';
 import { Account } from '../core/account';
-import { AccountBalance } from '../core/account-balance';
 import { AccountService } from '../core/account.service';
+import { CostCentre } from '../core/cost-centre';
 import { DbFile } from '../core/db-file';
 import { Journal } from '../core/journal';
 import { User } from '../core/user';
@@ -41,25 +41,55 @@ import { Voucher } from '../core/voucher';
 import { VoucherService } from '../core/voucher.service';
 import { AccountingPipe } from '../shared/accounting.pipe';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
 import { ImageDialogComponent } from '../shared/image-dialog/image-dialog.component';
 import { ImageService } from '../shared/image.service';
 import { LocalTimePipe } from '../shared/local-time.pipe';
 import { MathService } from '../shared/math.service';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { Tag } from '../tag/tag';
 import { TagService } from '../tag/tag.service';
-import { ReceiptDataSource } from './receipt-datasource';
 import { ReceiptDialogComponent } from './receipt-dialog.component';
 
+export interface ReceiptItemFormData {
+  id: string | undefined;
+  amount: number;
+  account: Account;
+  costCentre: CostCentre | null;
+}
+
+export interface ReceiptFormModel {
+  isStarred: boolean;
+  date: Date;
+  receiptAccount: string;
+  receiptAmount: number;
+  addRow: {
+    account: Account | string | null;
+    amount: string;
+  };
+  journals: ReceiptItemFormData[];
+  narration: string;
+  tagInput: string | Tag | null;
+  tagList: Tag[];
+  files: DbFile[];
+  posted: boolean;
+  creationDate: string;
+  lastEditDate: string;
+  userName: string;
+  poster: string;
+}
+
 @Component({
   selector: 'app-receipt',
   templateUrl: './receipt.component.html',
   styleUrls: ['./receipt.component.css'],
   imports: [
+    FormField,
+    FormRoot,
     MatIconModule,
-    ReactiveFormsModule,
     MatFormFieldModule,
-    MatDatepickerModule,
     MatInputModule,
+    MatDatepickerModule,
     MatSelectModule,
     MatOptionModule,
     MatAutocompleteModule,
@@ -67,14 +97,20 @@ import { ReceiptDialogComponent } from './receipt-dialog.component';
     MatTableModule,
     MatSortModule,
     MatChipsModule,
-    AsyncPipe,
     CurrencyPipe,
     AccountingPipe,
     LocalTimePipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class ReceiptComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class ReceiptComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  d = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  a = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  type = signal('Receipt');
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
@@ -84,17 +120,95 @@ export class ReceiptComponent implements OnInit, AfterViewInit {
   private ser = inject(VoucherService);
   private accountSer = inject(AccountService);
   private tagSer = inject(TagService);
-  private cd = inject(ChangeDetectorRef);
 
-  @ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('tagInput') tagInput?: ElementRef<HTMLInputElement>;
+  sortActive = signal('');
+  sortDirection = signal('');
+
+  itemResource = this.ser.getVoucher(this.id, this.type, this.a, this.d);
+  item = linkedSignal(() => this.itemResource.value() ?? new Voucher());
+
+  formModel = linkedSignal<Voucher, ReceiptFormModel>({
+    source: this.item,
+    computation: (voucher): ReceiptFormModel => {
+      const rj = voucher.journals.find((x) => x.debit === 1);
+      const creditJournals = voucher.journals.filter((x) => x.debit === -1);
+      const receiptAmount =
+        rj?.amount ??
+        round(
+          creditJournals.reduce((acc, j) => acc + j.amount, 0),
+          2,
+        );
+      return {
+        isStarred: voucher.isStarred,
+        date: voucher.date ? moment(voucher.date, 'DD-MMM-YYYY').toDate() : new Date(),
+        receiptAccount: rj?.account?.id ?? this.a() ?? '',
+        receiptAmount,
+        addRow: {
+          account: null as Account | string | null,
+          amount: '',
+        },
+        journals: creditJournals.map((j) => ({
+          id: j.id,
+          amount: j.amount,
+          account: j.account,
+          costCentre: j.costCentre,
+        })),
+        narration: voucher.narration ?? '',
+        tagInput: null as string | Tag | null,
+        tagList: [...voucher.tags],
+        files: [...voucher.files],
+        posted: voucher.posted,
+        creationDate: voucher.creationDate,
+        lastEditDate: voucher.lastEditDate,
+        userName: voucher.user?.name ?? '',
+        poster: voucher.poster ?? '',
+      };
+    },
+  });
+
+  form = form(this.formModel);
+
+  displayedColumns = ['account', 'amount', 'action'];
+  separatorKeysCodes: number[] = [ENTER, COMMA];
+
+  accountSearch = computed(() => {
+    const v = this.form.addRow.account().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  accountsResource = this.accountSer.autocomplete(this.accountSearch);
+  accounts = computed(() => this.accountsResource.value() ?? []);
+
+  tagQuery = computed(() => {
+    const tag = this.form.tagInput().value();
+    return tag === null ? '' : typeof tag !== 'string' ? tag.name.toLowerCase() : tag;
+  });
+
+  tagsResource = this.tagSer.autocomplete(this.tagQuery);
+  tags = computed(() => this.tagsResource.value() ?? []);
+
+  balanceDate = computed(() => moment(this.form.date().value()).format('DD-MMM-YYYY'));
+  accountId = computed((): string | null => {
+    const account = this.form.addRow.account().value();
+    return typeof account === 'string' ? null : (account?.id ?? null);
+  });
+
+  accBalResource = this.accountSer.balance(this.accountId, this.balanceDate);
+  accBal = computed(() => this.accBalResource.value() ?? null);
+
+  receiptAccountsResource = this.accountSer.receiptAutocomplete(signal(''));
+  receiptAccounts = computed(() => this.receiptAccountsResource.value() ?? []);
 
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
+    this.form().focusBoundControl();
+  }
+
+  @HostListener('window:keydown.f3', ['$event'])
+  focusAccountHost(event: Event) {
+    event.preventDefault();
+    this.form.addRow.account().focusBoundControl();
   }
 
   @HostListener('window:keydown.f5', ['$event'])
@@ -102,8 +216,8 @@ export class ReceiptComponent implements OnInit, AfterViewInit {
     event.preventDefault();
     this.router.navigate(['payment'], {
       queryParams: {
-        a: this.form.controls.receiptAccount.value,
-        d: this.form.controls.date.value.format('DD-MMM-YYYY'),
+        a: this.formModel().receiptAccount,
+        d: moment(this.formModel().date).format('DD-MMM-YYYY'),
       },
       queryParamsHandling: 'merge',
     });
@@ -119,8 +233,7 @@ export class ReceiptComponent implements OnInit, AfterViewInit {
     event.preventDefault();
     this.router.navigate(['journal'], {
       queryParams: {
-        a: this.form.controls.receiptAccount.value,
-        d: this.form.controls.date.value.format('DD-MMM-YYYY'),
+        d: moment(this.formModel().date).format('DD-MMM-YYYY'),
       },
       queryParamsHandling: 'merge',
     });
@@ -137,222 +250,174 @@ export class ReceiptComponent implements OnInit, AfterViewInit {
   @HostListener('window:keydown.control.p', ['$event'])
   postListner(event: Event) {
     event.preventDefault();
-    if (this.voucher.id && !this.voucher.posted && this.auth.allowed('post-vouchers')) {
+    if (this.id() && !this.form.posted().controlValue() && this.auth.allowed('post-vouchers')) {
       this.post();
     }
   }
 
-  separatorKeysCodes: number[] = [ENTER, COMMA];
-  public journalObservable = new BehaviorSubject<Journal[]>([]);
-  dataSource: ReceiptDataSource = new ReceiptDataSource(this.journalObservable);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    receiptAccount: FormControl<string>;
-    receiptAmount: FormControl<number>;
-    addRow: FormGroup<{
-      account: FormControl<string | null>;
-      amount: FormControl<string>;
-    }>;
-    narration: FormControl<string>;
-    tags: FormControl<string | null>;
-  }>;
-
-  receiptAccounts: Account[] = [];
-  receiptJournal: Journal = new Journal();
-  voucher: Voucher = new Voucher();
-  account: Account | null;
-  accBal: AccountBalance | null = null;
-
-  displayedColumns = ['account', 'amount', 'action'];
-
-  accounts: Observable<Account[]>;
-  tags: Observable<Tag[]>;
-
   constructor() {
-    this.account = null;
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      receiptAccount: new FormControl('', { nonNullable: true }),
-      receiptAmount: new FormControl({ value: 0, disabled: true }, { nonNullable: true }),
-      addRow: new FormGroup({
-        account: new FormControl(''),
-        amount: new FormControl('', { nonNullable: true }),
-      }),
-      narration: new FormControl('', { nonNullable: true }),
-      tags: new FormControl(''),
+    afterNextRender(() => {
+      this.form.addRow.account().focusBoundControl();
     });
-    this.accBal = null;
-    // Listen to Account Autocomplete Change
-    this.accounts = this.form.controls.addRow.controls.account.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
-    );
-    this.tags = this.form.controls.tags.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      map((tag: string | Tag | null) => (tag === null ? '' : typeof tag !== 'string' ? tag.name.toLowerCase() : tag)),
-      switchMap((tag: string) => this.tagSer.autocomplete(tag)),
-    );
-    // Listen to Date Change
-    this.form.controls.date.valueChanges.subscribe((x) =>
-      this.router.navigate([], {
-        relativeTo: this.route,
-        queryParams: { d: x.format('DD-MMM-YYYY') },
-        replaceUrl: true,
-        queryParamsHandling: 'merge',
-      }),
-    );
-    // Listen to Receipt Account Change
-    this.form.controls.receiptAccount.valueChanges.subscribe((x) =>
-      this.router.navigate([], {
-        relativeTo: this.route,
-        queryParams: { a: x },
-        replaceUrl: true,
-        queryParamsHandling: 'merge',
-      }),
-    );
-  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { voucher: Voucher; receiptAccounts: Account[] };
+    effect(() => {
+      const d = this.formModel().date;
+      if (!d) return;
 
-      this.receiptAccounts = data.receiptAccounts;
-      this.loadVoucher(data.voucher);
+      const url = new URL(window.location.href);
+      url.searchParams.set('d', moment(d).format('DD-MMM-YYYY'));
+      window.history.replaceState({}, '', url.toString());
     });
-  }
 
-  ngAfterViewInit() {
-    this.focusAccount();
-  }
+    effect(() => {
+      const a = this.formModel().receiptAccount;
+      if (!a) return;
 
-  loadVoucher(voucher: Voucher) {
-    this.voucher = voucher;
-    [this.receiptJournal] = this.voucher.journals.filter((x) => x.debit === 1);
-    this.form.setValue({
-      date: moment(this.voucher.date, 'DD-MMM-YYYY'),
-      receiptAccount: this.receiptJournal.account.id ?? '',
-      receiptAmount: this.receiptJournal.amount,
-      addRow: {
-        account: '',
-        amount: '',
-      },
-      narration: this.voucher.narration,
-      tags: '',
+      const url = new URL(window.location.href);
+      url.searchParams.set('a', a);
+      window.history.replaceState({}, '', url.toString());
     });
-    this.dataSource = new ReceiptDataSource(this.journalObservable);
-    this.updateView();
-  }
-
-  focusAccount() {
-    setTimeout(() => {
-      this.accountElement.nativeElement.focus();
-    }, 0);
   }
 
   addRow() {
-    const amount = this.math.parseAmount(this.form.value.addRow?.amount ?? '0', 2);
-    const debit = -1;
-    if (this.account === null || amount <= 0) {
+    const formValue = this.form().value().addRow;
+    if (!formValue) return;
+    const amount = this.math.parseAmount(formValue.amount ?? '0', 2);
+    const account = formValue.account as Account;
+
+    if (!account || typeof account === 'string' || amount <= 0) {
       return;
     }
-    const oldFiltered = this.voucher.journals.filter((x) => x.account.id === (this.account as Account).id);
-    const old = oldFiltered.length ? oldFiltered[0] : null;
-    if (old && (old.debit === 1 || old.id === this.receiptJournal.id)) {
-      return;
-    }
-    if (old) {
-      old.amount += amount;
-    } else {
-      this.voucher.journals.push(
-        new Journal({
-          debit,
-          amount,
-          account: this.account,
-          costCentre: null,
-        }),
+    const currentJournals = this.formModel().journals;
+    const oldIndex = currentJournals.findIndex((x) => x.account.id === account.id);
+    let updatedJournals: ReceiptItemFormData[];
+    if (oldIndex >= 0) {
+      updatedJournals = currentJournals.map((j, i) =>
+        i === oldIndex ? { ...j, amount: round(j.amount + amount, 2) } : j,
       );
+    } else {
+      updatedJournals = [...currentJournals, { id: undefined, account, amount, costCentre: null }];
     }
-    this.resetAddRow();
-    this.updateView();
+    const totalReceiptAmount = round(
+      updatedJournals.reduce((acc, j) => acc + j.amount, 0),
+      2,
+    );
+    this.formModel.update((m) => ({
+      ...m,
+      journals: updatedJournals,
+      receiptAmount: totalReceiptAmount,
+    }));
+    this.form.addRow.account().value.set(null);
+    this.form.addRow.amount().value.set('');
+    this.form.addRow.account().focusBoundControl();
   }
 
-  resetAddRow() {
-    this.form.controls.addRow.reset({ account: null, amount: '' });
-    this.account = null;
-    this.accBal = null;
-    setTimeout(() => {
-      this.accountElement.nativeElement.focus();
-    }, 0);
+  deleteRow(row: ReceiptItemFormData) {
+    const updatedJournals = this.formModel().journals.filter((j) => j !== row);
+    const totalReceiptAmount = round(
+      updatedJournals.reduce((acc, j) => acc + j.amount, 0),
+      2,
+    );
+    this.formModel.update((m) => ({
+      ...m,
+      journals: updatedJournals,
+      receiptAmount: totalReceiptAmount,
+    }));
+    this.form.addRow.account().value.set(null);
+    this.form.addRow.account().focusBoundControl();
   }
 
-  updateView() {
-    const journals = this.voucher.journals.filter((x) => x.debit === -1);
-    this.journalObservable.next(journals);
-    this.receiptJournal.amount = round(Math.abs(journals.map((x) => x.amount).reduce((p, c) => p + c, 0)), 2);
-    this.form.controls.receiptAmount.setValue(this.receiptJournal.amount);
-  }
-
-  editRow(row: Journal) {
+  editRow(row: ReceiptItemFormData) {
     const dialogRef = this.dialog.open(ReceiptDialogComponent, {
       width: '750px',
       data: {
-        journal: { ...row },
-        date: moment(this.form.value.date).format('DD-MMM-YYYY'),
+        journal: new Journal({
+          id: row.id,
+          debit: -1,
+          amount: row.amount,
+          account: row.account,
+          costCentre: row.costCentre,
+        }),
+        date: moment(this.formModel().date).format('DD-MMM-YYYY'),
       },
     });
 
     dialogRef.afterClosed().subscribe((result: boolean | Journal) => {
-      if (!result) {
+      if (!result || typeof result === 'boolean') {
         return;
       }
-      const j = result as Journal;
-      if (
-        j.account.id !== row.account.id &&
-        this.voucher.journals.filter((x) => x.account.id === j.account.id).length
-      ) {
+      const j = result;
+      if (j.account.id !== row.account.id && this.formModel().journals.some((x) => x.account.id === j.account.id)) {
+        this.snackBar.open('Account already exists in journals', 'Danger');
         return;
       }
-      Object.assign(row, j);
-      this.updateView();
+      const updatedJournals = this.formModel().journals.map((item) =>
+        item === row
+          ? {
+              ...item,
+              account: j.account,
+              amount: j.amount,
+            }
+          : item,
+      );
+      const totalReceiptAmount = round(
+        updatedJournals.reduce((acc, jItem) => acc + jItem.amount, 0),
+        2,
+      );
+      this.formModel.update((m) => ({
+        ...m,
+        journals: updatedJournals,
+        receiptAmount: totalReceiptAmount,
+      }));
+      this.form.addRow.account().focusBoundControl();
     });
   }
 
-  deleteRow(row: Journal) {
-    this.voucher.journals.splice(this.voucher.journals.indexOf(row), 1);
-    this.updateView();
+  getVoucher(): Voucher {
+    const m = this.formModel();
+    const base = this.item();
+    const v = new Voucher({ ...base });
+    v.date = moment(m.date).format('DD-MMM-YYYY');
+    v.narration = m.narration ?? '';
+
+    const existingRj = base.journals.find((x) => x.debit === 1);
+    const receiptAccountObj =
+      this.receiptAccounts().find((a) => a.id === m.receiptAccount) ?? new Account({ id: m.receiptAccount });
+    const rj = new Journal({
+      id: existingRj?.id,
+      debit: 1,
+      amount: m.receiptAmount,
+      account: receiptAccountObj,
+      costCentre: existingRj?.costCentre ?? null,
+    });
+
+    const creditJournals = m.journals.map(
+      (j) => new Journal({ id: j.id, debit: -1, amount: j.amount, account: j.account, costCentre: j.costCentre }),
+    );
+
+    v.journals = [rj, ...creditJournals];
+    v.tags = [...m.tagList];
+    v.files = [...m.files];
+    return v;
   }
 
   canSave() {
-    if (!this.voucher.id) {
+    if (!this.id()) {
       return true;
     }
-    if (this.voucher.posted && this.auth.allowed('edit-posted-vouchers')) {
-      return true;
+    if (this.form.posted().value() && !this.auth.allowed('edit-posted-vouchers')) {
+      return false;
     }
-    return this.voucher.user.id === (this.auth.user as User).id || this.auth.allowed("edit-other-user's-vouchers");
-  }
-
-  post() {
-    this.ser.post(this.voucher.id as string).subscribe({
-      next: (result) => {
-        this.loadVoucher(result);
-        this.snackBar.open('Voucher Posted', 'Success');
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
+    const user = this.auth.user as User;
+    return this.item().user?.id === user?.id || this.auth.allowed("edit-other-user's-vouchers");
   }
 
   save() {
-    const voucher: Voucher = this.getVoucher();
-    this.ser.saveOrUpdate(voucher).subscribe({
+    this.ser.saveOrUpdate(this.getVoucher()).subscribe({
       next: (result) => {
-        this.snackBar.open('', 'Success');
-        if (voucher.id === result.id) {
-          this.loadVoucher(result);
+        this.snackBar.open('Voucher Saved', undefined, { duration: 2000 });
+        if (this.item().id === result.id) {
+          this.item.set(result);
         } else {
           this.router.navigate(['/receipt', result.id]);
         }
@@ -363,96 +428,120 @@ export class ReceiptComponent implements OnInit, AfterViewInit {
     });
   }
 
-  getVoucher(): Voucher {
-    const formModel = this.form.value;
-    this.voucher.date = moment(formModel.date).format('DD-MMM-YYYY');
-    this.receiptJournal.account.id = formModel.receiptAccount;
-    this.voucher.narration = formModel.narration ?? '';
-    return this.voucher;
-  }
-
-  delete() {
-    this.ser.delete(this.voucher.id as string).subscribe({
-      next: () => {
-        this.snackBar.open('', 'Success');
-        this.router.navigate(['/receipt'], { replaceUrl: true });
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
+  post() {
+    const id = this.id();
+    if (id) {
+      this.ser.post(id).subscribe({
+        next: (result) => {
+          this.snackBar.open('Voucher Posted', undefined, { duration: 2000 });
+          this.item.set(result);
+        },
+        error: (error) => {
+          this.snackBar.open(error, 'Danger');
+        },
+      });
+    }
   }
 
   confirmDelete(): void {
+    const id = this.id();
+    if (!id) return;
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '250px',
       data: { title: 'Delete Voucher?', content: 'Are you sure? This cannot be undone.' },
     });
 
-    dialogRef.afterClosed().subscribe((result: boolean) => {
+    dialogRef.afterClosed().subscribe((result) => {
       if (result) {
         this.delete();
       }
     });
   }
 
-  displayFn(account?: Account | string): string {
-    return !account ? '' : typeof account === 'string' ? account : account.name;
+  delete() {
+    const id = this.id();
+    if (id) {
+      this.ser.delete(id).subscribe({
+        next: () => {
+          this.snackBar.open('Voucher Deleted', undefined, { duration: 2000 });
+          this.router.navigate(['/receipt'], { replaceUrl: true });
+        },
+        error: (error) => {
+          this.snackBar.open(error, 'Danger');
+        },
+      });
+    }
   }
 
-  accountSelected(event: MatAutocompleteSelectedEvent): void {
-    const account = event.option.value;
-    this.account = account;
-    const date = moment(this.form.value.date).format('DD-MMM-YYYY');
-    this.accountSer.balance(account.id as string, date).subscribe((v) => {
-      this.accBal = v;
-      this.cd.detectChanges();
-    });
+  displayFn(account?: Account): string {
+    return account ? account.name : '';
   }
 
   zoomImage(file: DbFile) {
     this.dialog.open(ImageDialogComponent, {
-      width: '750px',
-      data: file.resized,
+      data: file,
+      panelClass: 'full-picture',
     });
   }
 
   deleteImage(file: DbFile) {
-    const index = this.voucher.files.indexOf(file);
-    this.voucher.files.splice(index, 1);
+    this.formModel.update((m) => ({
+      ...m,
+      files: m.files.filter((f) => f !== file),
+    }));
+  }
+
+  detectFiles(event: Event) {
+    const fileList = (event.target as HTMLInputElement).files;
+    if (!fileList) return;
+    for (const file of Array.from(fileList)) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const src = (e.target as FileReader).result as string;
+        zip(this.image.resizeImage(src, 100, 150), this.image.resizeImage(src, 825, 1170)).subscribe(
+          ([thumbnail, resized]) => {
+            this.formModel.update((m) => ({
+              ...m,
+              files: [...m.files, new DbFile({ thumbnail, resized })],
+            }));
+          },
+        );
+      };
+      reader.readAsDataURL(file);
+    }
   }
 
   removeTag(tag: Tag): void {
-    const index = this.voucher.tags.indexOf(tag);
-
-    if (index >= 0) {
-      this.voucher.tags.splice(index, 1);
-    }
+    this.formModel.update((m) => ({
+      ...m,
+      tagList: m.tagList.filter((t) => t !== tag),
+    }));
   }
 
-  addTag(event: MatChipInputEvent): void {
-    const value = (event.value || '').trim();
-
-    // Add our tag
-    if (value) {
-      this.voucher.tags.push(new Tag({ name: value }));
+  addTag(): void {
+    const query = this.form.tagInput().value();
+    if (!query) return;
+    const val = (query as string).trim().toLowerCase();
+    if (!val) return;
+    const existing = this.formModel().tagList;
+    const old = existing.find((t) => t.name.toLowerCase() === val);
+    if (!old) {
+      this.formModel.update((m) => ({ ...m, tagList: [...m.tagList, { id: null, name: val }] }));
     }
-
-    // Clear the input value
-    event.chipInput!.clear();
-
-    this.form.controls.tags.setValue(null);
+    this.form.tagInput().value.set(null);
   }
 
   selectedTag(event: MatAutocompleteSelectedEvent): void {
     const tag = event.option.value as Tag;
-    const index = this.voucher.tags.findIndex((t) => (tag.id === null ? t.name === tag.name : t.id === tag.id));
-    if (index === -1) {
-      this.voucher.tags.push(tag);
+    const existing = this.formModel().tagList;
+    const old = existing.find((t) => t.name.toLowerCase() === tag.name.toLowerCase());
+    if (!old) {
+      this.formModel.update((m) => ({ ...m, tagList: [...m.tagList, tag] }));
     }
-    if (this.tagInput) {
-      this.tagInput.nativeElement.value = '';
-    }
-    this.form.controls.tags.setValue(null);
+    this.form.tagInput().value.set(null);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
diff --git a/overlord/src/app/receipt/receipt.resolver.spec.ts b/overlord/src/app/receipt/receipt.resolver.spec.ts
deleted file mode 100644
index 9621d1d1..00000000
--- a/overlord/src/app/receipt/receipt.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { receiptResolver } from './receipt.resolver';
-
-describe('receiptResolver', () => {
-  const executeResolver: ResolveFn<Voucher> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => receiptResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/receipt/receipt.resolver.ts b/overlord/src/app/receipt/receipt.resolver.ts
deleted file mode 100644
index 897093d7..00000000
--- a/overlord/src/app/receipt/receipt.resolver.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Voucher } from '../core/voucher';
-import { VoucherService } from '../core/voucher.service';
-
-export const receiptResolver: ResolveFn<Voucher> = (route) => {
-  const id = route.paramMap.get('id');
-  const account = route.queryParamMap.get('a') || null;
-  const date = route.queryParamMap.get('d') || null;
-  if (id !== null) {
-    return inject(VoucherService).get(id, 'Receipt');
-  }
-  return inject(VoucherService).getOfType('Receipt', account, date);
-};
diff --git a/overlord/src/app/receipt/receipt.routes.ts b/overlord/src/app/receipt/receipt.routes.ts
index 663dbad7..017ad6f4 100644
--- a/overlord/src/app/receipt/receipt.routes.ts
+++ b/overlord/src/app/receipt/receipt.routes.ts
@@ -1,9 +1,7 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-import { receiptAccountsResolver } from './receipt-accounts.resolver';
 import { ReceiptComponent } from './receipt.component';
-import { receiptResolver } from './receipt.resolver';
 
 export const routes: Routes = [
   {
@@ -13,10 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'journal',
     },
-    resolve: {
-      receiptAccounts: receiptAccountsResolver,
-      voucher: receiptResolver,
-    },
     runGuardsAndResolvers: 'paramsChange',
   },
   {
@@ -26,10 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'journal',
     },
-    resolve: {
-      receiptAccounts: receiptAccountsResolver,
-      voucher: receiptResolver,
-    },
     runGuardsAndResolvers: 'paramsChange',
   },
 ];
diff --git a/overlord/src/app/recipe-template/recipe-template-detail/recipe-template-detail.component.html b/overlord/src/app/recipe-template/recipe-template-detail/recipe-template-detail.component.html
index b3d62b00..0daae4a4 100644
--- a/overlord/src/app/recipe-template/recipe-template-detail/recipe-template-detail.component.html
+++ b/overlord/src/app/recipe-template/recipe-template-detail/recipe-template-detail.component.html
@@ -1,28 +1,35 @@
 <h2>RecipeTemplate</h2>
 
-<form [formGroup]="form" class="flex flex-col wrapped">
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" />
-    </mat-form-field>
-    <mat-form-field class="flex-auto">
-      <mat-label>Date</mat-label>
-      <input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
-      <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
-      <mat-datepicker #date></mat-datepicker>
-    </mat-form-field>
-    <mat-checkbox formControlName="selected" class="flex-auto">Is Selected?</mat-checkbox>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Text</mat-label>
-      <textarea matInput matAutosizeMinRows="20" formControlName="text"></textarea>
-    </mat-form-field>
-  </div>
-</form>
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <form class="flex flex-col wrapped" [formRoot]="form">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput [formField]="form.name" />
+      </mat-form-field>
+      <mat-form-field class="flex-auto">
+        <mat-label>Date</mat-label>
+        <input matInput [matDatepicker]="date" [formField]="form.date" autocomplete="off" #dateElement />
+        <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+        <mat-datepicker #date></mat-datepicker>
+      </mat-form-field>
+      <mat-checkbox [formField]="form.selected" class="flex-auto">Is Selected?</mat-checkbox>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Text</mat-label>
+        <textarea matInput matAutosizeMinRows="20" [formField]="form.text"></textarea>
+      </mat-form-field>
+    </div>
+  </form>
 
-<div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()">Save</button>
-  <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-</div>
+  <div class="row-container">
+    <button mat-raised-button color="primary" (click)="save()">Save</button>
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  </div>
+}
diff --git a/overlord/src/app/recipe-template/recipe-template-detail/recipe-template-detail.component.ts b/overlord/src/app/recipe-template/recipe-template-detail/recipe-template-detail.component.ts
index f1bece7d..011b35e7 100644
--- a/overlord/src/app/recipe-template/recipe-template-detail/recipe-template-detail.component.ts
+++ b/overlord/src/app/recipe-template/recipe-template-detail/recipe-template-detail.component.ts
@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, afterNextRender, linkedSignal, input, computed } from '@angular/core';
+import { FormField, FormRoot, form as createForm } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -7,76 +7,69 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
 
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { RecipeTemplate } from '../recipe-template';
 import { RecipeTemplateService } from '../recipe-template.service';
 
+export interface RecipeTemplateDetailFormData {
+  name: string;
+  date: moment.Moment | null | string;
+  text: string;
+  selected: boolean;
+}
+
 @Component({
   selector: 'app-recipe-template-detail',
   templateUrl: './recipe-template-detail.component.html',
   styleUrls: ['./recipe-template-detail.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
     MatCheckboxModule,
     MatButtonModule,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class RecipeTemplateDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class RecipeTemplateDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private ser = inject(RecipeTemplateService);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    name: FormControl<string>;
-    date: FormControl<moment.Moment>;
-    text: FormControl<string>;
-    selected: FormControl<boolean>;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  item: RecipeTemplate = new RecipeTemplate();
+  item = computed(() => this.itemResource.value() ?? new RecipeTemplate());
+
+  formModel = linkedSignal({
+    source: this.item,
+    computation: (itemVal): RecipeTemplateDetailFormData => ({
+      name: itemVal.name || '',
+      date: itemVal.date ? moment(itemVal.date, 'DD-MMM-YYYY') : moment(new Date()),
+      text: itemVal.text || '',
+      selected: itemVal.selected || false,
+    }),
+  });
+
+  form = createForm(this.formModel, () => {});
 
   constructor() {
-    this.form = new FormGroup({
-      name: new FormControl<string>('', { nonNullable: true }),
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      text: new FormControl<string>('', { nonNullable: true }),
-      selected: new FormControl<boolean>(false, { nonNullable: true }),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: RecipeTemplate };
-
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: RecipeTemplate) {
-    this.item = item;
-    this.form.setValue({
-      name: this.item.name,
-      date: moment(this.item.date, 'DD-MMM-YYYY'),
-      text: this.item.text,
-      selected: this.item.selected,
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
@@ -84,19 +77,19 @@ export class RecipeTemplateDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/recipe-templates');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id).subscribe({
+    this.ser.delete(this.item().id).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/recipe-templates');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -115,11 +108,12 @@ export class RecipeTemplateDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): RecipeTemplate {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    this.item.date = moment(formModel.date).format('DD-MMM-YYYY');
-    this.item.text = formModel.text ?? '';
-    this.item.selected = formModel.selected ?? false;
-    return this.item;
+    const formModel = this.formModel();
+    const item = this.item();
+    item.name = formModel.name ?? '';
+    item.date = moment(formModel.date).format('DD-MMM-YYYY');
+    item.text = formModel.text ?? '';
+    item.selected = formModel.selected ?? false;
+    return item;
   }
 }
diff --git a/overlord/src/app/recipe-template/recipe-template-list.resolver.spec.ts b/overlord/src/app/recipe-template/recipe-template-list.resolver.spec.ts
deleted file mode 100644
index 6e5c0307..00000000
--- a/overlord/src/app/recipe-template/recipe-template-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { RecipeTemplate } from './recipe-template';
-import { recipeTemplateListResolver } from './recipe-template-list.resolver';
-
-describe('recipeTemplateListResolver', () => {
-  const executeResolver: ResolveFn<RecipeTemplate[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => recipeTemplateListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/recipe-template/recipe-template-list.resolver.ts b/overlord/src/app/recipe-template/recipe-template-list.resolver.ts
deleted file mode 100644
index 17be743a..00000000
--- a/overlord/src/app/recipe-template/recipe-template-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { RecipeTemplate } from './recipe-template';
-import { RecipeTemplateService } from './recipe-template.service';
-
-export const recipeTemplateListResolver: ResolveFn<RecipeTemplate[]> = () => {
-  return inject(RecipeTemplateService).list();
-};
diff --git a/overlord/src/app/recipe-template/recipe-template-list/recipe-template-list-datasource.ts b/overlord/src/app/recipe-template/recipe-template-list/recipe-template-list-datasource.ts
deleted file mode 100644
index b6b5ec11..00000000
--- a/overlord/src/app/recipe-template/recipe-template-list/recipe-template-list-datasource.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { RecipeTemplate } from '../recipe-template';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class RecipeTemplateListDataSource extends DataSource<RecipeTemplate> {
-  constructor(
-    public data: RecipeTemplate[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<RecipeTemplate[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: RecipeTemplate[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: RecipeTemplate[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        case 'id':
-          return compare(+a.id, +b.id, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/recipe-template/recipe-template-list/recipe-template-list.component.html b/overlord/src/app/recipe-template/recipe-template-list/recipe-template-list.component.html
index 1bc62ceb..d4fc484b 100644
--- a/overlord/src/app/recipe-template/recipe-template-list/recipe-template-list.component.html
+++ b/overlord/src/app/recipe-template/recipe-template-list/recipe-template-list.component.html
@@ -6,36 +6,42 @@
   </a>
 </h2>
 
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="['/recipe-templates', row.id]">{{ row.name }}</a></mat-cell
-    >
-  </ng-container>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (listResource.error()) {
+  <app-error-state [message]="'Failed to load list.'" (retryAction)="listResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="['/recipe-templates', row.id]">{{ row.name }}</a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Selected Column -->
-  <ng-container matColumnDef="selected">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Is Selected?</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.selected }}</mat-cell>
-  </ng-container>
+    <!-- Selected Column -->
+    <ng-container matColumnDef="selected">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Is Selected?</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.selected }}</mat-cell>
+    </ng-container>
 
-  <!-- Date Column -->
-  <ng-container matColumnDef="date">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
-  </ng-container>
+    <!-- Date Column -->
+    <ng-container matColumnDef="date">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="list().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/recipe-template/recipe-template-list/recipe-template-list.component.ts b/overlord/src/app/recipe-template/recipe-template-list/recipe-template-list.component.ts
index e3198174..20975c53 100644
--- a/overlord/src/app/recipe-template/recipe-template-list/recipe-template-list.component.ts
+++ b/overlord/src/app/recipe-template/recipe-template-list/recipe-template-list.component.ts
@@ -1,36 +1,81 @@
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
-import { RecipeTemplate } from '../recipe-template';
-import { RecipeTemplateListDataSource } from './recipe-template-list-datasource';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { RecipeTemplateService } from '../recipe-template.service';
 
 @Component({
   selector: 'app-recipe-template-list',
   templateUrl: './recipe-template-list.component.html',
   styleUrls: ['./recipe-template-list.component.css'],
-  imports: [RouterModule, MatIconModule, MatTableModule, MatSortModule, MatPaginatorModule, MatButtonModule],
+  imports: [
+    RouterModule,
+    MatIconModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    MatButtonModule,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class RecipeTemplateListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class RecipeTemplateListComponent {
+  private ser = inject(RecipeTemplateService);
+
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  listResource = this.ser.list();
+  list = computed(() => this.listResource.value() ?? []);
+  sortedList = computed(() => {
+    const data = this.list();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'selected':
+          return compare(a.selected, b.selected, isAsc);
+        case 'date':
+          return compare(a.date, b.date, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  list: RecipeTemplate[] = [];
-  dataSource: RecipeTemplateListDataSource = new RecipeTemplateListDataSource(this.list, this.paginator, this.sort);
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'selected', 'date'];
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: RecipeTemplate[] };
-
-      this.list = data.list;
-    });
-    this.dataSource = new RecipeTemplateListDataSource(this.list, this.paginator, this.sort);
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/recipe-template/recipe-template.resolver.spec.ts b/overlord/src/app/recipe-template/recipe-template.resolver.spec.ts
deleted file mode 100644
index 38aebb83..00000000
--- a/overlord/src/app/recipe-template/recipe-template.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { RecipeTemplate } from './recipe-template';
-import { recipeTemplateResolver } from './recipe-template.resolver';
-
-describe('recipeTemplateResolver', () => {
-  const executeResolver: ResolveFn<RecipeTemplate> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => recipeTemplateResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/recipe-template/recipe-template.resolver.ts b/overlord/src/app/recipe-template/recipe-template.resolver.ts
deleted file mode 100644
index 2f7c0f3b..00000000
--- a/overlord/src/app/recipe-template/recipe-template.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { RecipeTemplate } from './recipe-template';
-import { RecipeTemplateService } from './recipe-template.service';
-
-export const recipeTemplateResolver: ResolveFn<RecipeTemplate> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(RecipeTemplateService).get(id);
-};
diff --git a/overlord/src/app/recipe-template/recipe-template.routes.ts b/overlord/src/app/recipe-template/recipe-template.routes.ts
index 7018b232..aa5f3445 100644
--- a/overlord/src/app/recipe-template/recipe-template.routes.ts
+++ b/overlord/src/app/recipe-template/recipe-template.routes.ts
@@ -2,9 +2,7 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { RecipeTemplateDetailComponent } from './recipe-template-detail/recipe-template-detail.component';
-import { recipeTemplateListResolver } from './recipe-template-list.resolver';
 import { RecipeTemplateListComponent } from './recipe-template-list/recipe-template-list.component';
-import { recipeTemplateResolver } from './recipe-template.resolver';
 
 export const routes: Routes = [
   {
@@ -14,9 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Recipes',
     },
-    resolve: {
-      list: recipeTemplateListResolver,
-    },
   },
   {
     path: 'new',
@@ -25,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Recipes',
     },
-    resolve: {
-      item: recipeTemplateResolver,
-    },
   },
   {
     path: ':id',
@@ -36,8 +28,5 @@ export const routes: Routes = [
     data: {
       permission: 'Recipes',
     },
-    resolve: {
-      item: recipeTemplateResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/recipe-template/recipe-template.service.ts b/overlord/src/app/recipe-template/recipe-template.service.ts
index 5811e9be..ec52967a 100644
--- a/overlord/src/app/recipe-template/recipe-template.service.ts
+++ b/overlord/src/app/recipe-template/recipe-template.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { RecipeTemplate } from './recipe-template';
 
 const url = '/api/recipe-templates';
-const serviceName = 'RecipeTemplateService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,29 +14,27 @@ export class RecipeTemplateService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<RecipeTemplate> {
-    const getUrl: string = id === null ? url : `${url}/${id}`;
-    return this.http
-      .get<RecipeTemplate>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<RecipeTemplate>;
+  get(id: Signal<string | null>) {
+    return httpResource<RecipeTemplate>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<RecipeTemplate[]> {
-    return this.http
-      .get<RecipeTemplate[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<RecipeTemplate[]>;
+  list() {
+    return httpResource<RecipeTemplate[]>(() => `${url}/list`);
   }
 
   save(recipeTemplate: RecipeTemplate): Observable<RecipeTemplate> {
     return this.http
       .post<RecipeTemplate>(`${url}`, recipeTemplate)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<RecipeTemplate>;
+      .pipe(catchError(this.log.handleError('RecipeTemplateService', 'save'))) as Observable<RecipeTemplate>;
   }
 
   update(recipeTemplate: RecipeTemplate): Observable<RecipeTemplate> {
     return this.http
       .put<RecipeTemplate>(`${url}/${recipeTemplate.id}`, recipeTemplate)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<RecipeTemplate>;
+      .pipe(catchError(this.log.handleError('RecipeTemplateService', 'update'))) as Observable<RecipeTemplate>;
   }
 
   saveOrUpdate(recipeTemplate: RecipeTemplate): Observable<RecipeTemplate> {
@@ -51,6 +47,6 @@ export class RecipeTemplateService {
   delete(id: string): Observable<RecipeTemplate> {
     return this.http
       .delete<RecipeTemplate>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<RecipeTemplate>;
+      .pipe(catchError(this.log.handleError('RecipeTemplateService', 'delete'))) as Observable<RecipeTemplate>;
   }
 }
diff --git a/overlord/src/app/recipe/recipe-detail/recipe-detail-datasource.ts b/overlord/src/app/recipe/recipe-detail/recipe-detail-datasource.ts
deleted file mode 100644
index 4b12aaad..00000000
--- a/overlord/src/app/recipe/recipe-detail/recipe-detail-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { RecipeItem } from '../recipe-item';
-
-export class RecipeDetailDatasource extends DataSource<RecipeItem> {
-  constructor(private data: Observable<RecipeItem[]>) {
-    super();
-  }
-
-  connect(): Observable<RecipeItem[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/recipe/recipe-detail/recipe-detail.component.css b/overlord/src/app/recipe/recipe-detail/recipe-detail.component.css
index e69de29b..9766a0e7 100644
--- a/overlord/src/app/recipe/recipe-detail/recipe-detail.component.css
+++ b/overlord/src/app/recipe/recipe-detail/recipe-detail.component.css
@@ -0,0 +1,186 @@
+.section-nav button.active {
+  font-weight: 700;
+}
+
+.hint {
+  opacity: 0.8;
+  margin: 0.25rem 0 0.75rem;
+}
+
+.step-card,
+.photo-card {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  padding: 0.75rem;
+  margin: 0.75rem 0;
+}
+
+.step-number {
+  font-weight: 700;
+}
+
+.thumb {
+  width: 96px;
+  height: 96px;
+  object-fit: cover;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.file-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+}
+
+.file-btn input[type='file'] {
+  display: none;
+}
+
+/* Print / book layout handled via global styles (.recipe-print) */
+.recipe-print {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: #333;
+  line-height: 1.5;
+  font-size: 14px;
+  background-color: white;
+  padding: 24px;
+}
+
+.recipe-print__header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.recipe-print__title {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.recipe-print__meta {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  font-size: 13px;
+  color: #666;
+}
+
+.recipe-print__hr {
+  border: 0;
+  border-top: 2px solid #eee;
+  margin: 24px 0;
+}
+
+.recipe-print__section {
+  margin-bottom: 32px;
+}
+
+.recipe-print__section h2 {
+  font-size: 18px;
+  font-weight: 600;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 4px;
+  margin-bottom: 16px;
+  color: #2c3e50;
+}
+
+.recipe-print__ingredients {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.recipe-print__ingredients li {
+  width: calc(50% - 16px);
+  margin-right: 16px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px dotted #ccc;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+}
+
+.recipe-print__ingredients .name {
+  font-weight: 500;
+}
+
+.recipe-print__ingredients .desc {
+  font-style: italic;
+  color: #666;
+  font-size: 12px;
+}
+
+.recipe-print__steps {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
+
+.recipe-print__step-item {
+  margin-bottom: 16px;
+}
+
+.recipe-print__step-header {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.recipe-print__step-text {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.recipe-print__step-notes {
+  margin: 4px 0 0 0;
+  font-size: 12px;
+  color: #666;
+  font-style: italic;
+}
+
+.recipe-print__photos {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.recipe-print__photo-item {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+}
+
+.recipe-print__photo-img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+
+.recipe-print__photo-caption {
+  font-size: 12px;
+  text-align: center;
+  margin-top: 4px;
+  color: #555;
+}
+
+.recipe-print__notes-block {
+  margin-bottom: 16px;
+}
+.recipe-print__notes-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.recipe-print__notes-text {
+  margin: 0;
+  white-space: pre-wrap;
+}
diff --git a/overlord/src/app/recipe/recipe-detail/recipe-detail.component.html b/overlord/src/app/recipe/recipe-detail/recipe-detail.component.html
index ca0f86a4..d36dacb9 100644
--- a/overlord/src/app/recipe/recipe-detail/recipe-detail.component.html
+++ b/overlord/src/app/recipe/recipe-detail/recipe-detail.component.html
@@ -1,135 +1,421 @@
-<h2>Recipe Detail</h2>
+<h2>Recipe Editor</h2>
 
-<form [formGroup]="form" class="flex-col wrapped">
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Date</mat-label>
-      <input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
-      <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
-      <mat-datepicker #date></mat-datepicker>
-    </mat-form-field>
-    <mat-form-field class="flex-auto">
-      <mat-label>Source</mat-label>
-      <input type="text" matInput formControlName="source" autocomplete="off" />
-    </mat-form-field>
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load recipe detail.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <div class="section-nav row-container wrapped">
+    <button mat-stroked-button (click)="go('basics')" [class.active]="selectedSection === 'basics'">Basics</button>
+    <button mat-stroked-button (click)="go('ingredients')" [class.active]="selectedSection === 'ingredients'">
+      Ingredients
+    </button>
+    <button mat-stroked-button (click)="go('steps')" [class.active]="selectedSection === 'steps'">Steps</button>
+    <button mat-stroked-button (click)="go('photos')" [class.active]="selectedSection === 'photos'">Photos</button>
+    <button mat-stroked-button (click)="go('notes')" [class.active]="selectedSection === 'notes'">Notes</button>
+    <button mat-raised-button color="primary" (click)="go('preview')" [class.active]="selectedSection === 'preview'">
+      Preview
+    </button>
   </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto basis-4-5">
-      <mat-label>Product</mat-label>
-      <input
-        type="text"
-        matInput
-        #productElement
-        [matAutocomplete]="autoP"
-        formControlName="product"
-        autocomplete="off"
-      />
-      <mat-autocomplete
-        #autoP="matAutocomplete"
-        autoActiveFirstOption
-        [displayWith]="displayProduct"
-        (optionSelected)="productSelected($event)"
-      >
-        @for (product of products | async; track product) {
-          <mat-option [value]="product">{{ product.name }}</mat-option>
+
+  <form class="flex-col wrapped" [formRoot]="form">
+    @if (selectedSection === 'basics') {
+      <div class="flex-col wrapped">
+        <h3>Basics</h3>
+        <div class="row-container">
+          <mat-form-field class="flex-auto">
+            <mat-label>Date</mat-label>
+            <input matInput [matDatepicker]="date" [formField]="form.basics.date" autocomplete="off" />
+            <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+            <mat-datepicker #date></mat-datepicker>
+          </mat-form-field>
+          <mat-form-field class="flex-auto">
+            <mat-label>Source</mat-label>
+            <input type="text" matInput [formField]="form.basics.source" autocomplete="off" />
+          </mat-form-field>
+        </div>
+
+        <div class="row-container">
+          <mat-form-field class="flex-auto basis-4-5">
+            <mat-label>Dish / Product</mat-label>
+            <input
+              type="text"
+              matInput
+              #productElement
+              [matAutocomplete]="autoP"
+              [formField]="form.basics.product"
+              autocomplete="off"
+            />
+            <mat-autocomplete
+              #autoP="matAutocomplete"
+              autoActiveFirstOption
+              [displayWith]="displayProduct"
+              (optionSelected)="productSelected($event)"
+            >
+              @for (product of products(); track product) {
+                <mat-option [value]="product">{{ product.name }}</mat-option>
+              }
+            </mat-autocomplete>
+          </mat-form-field>
+
+          <mat-form-field class="flex-auto basis-1-5">
+            <mat-label>Yield</mat-label>
+            <input type="text" matInput [formField]="form.basics.recipeYield" autocomplete="off" />
+          </mat-form-field>
+        </div>
+      </div>
+    }
+
+    @if (selectedSection === 'ingredients') {
+      <div class="flex-col wrapped">
+        <h3>Ingredients</h3>
+
+        <div class="row-container">
+          <mat-form-field class="flex-auto basis-2-5">
+            <mat-label>Ingredient</mat-label>
+            <input
+              type="text"
+              matInput
+              #ingredientElement
+              [matAutocomplete]="autoI"
+              [formField]="form.addRow.ingredient"
+              autocomplete="off"
+            />
+            <mat-autocomplete #autoI="matAutocomplete" autoActiveFirstOption [displayWith]="displayIngredient">
+              @for (product of ingredients(); track product) {
+                <mat-option [value]="product">{{ product.name }} ({{ product.fractionUnits }})</mat-option>
+              }
+            </mat-autocomplete>
+          </mat-form-field>
+
+          <mat-form-field class="flex-auto basis-1-5">
+            <mat-label>Quantity</mat-label>
+            <input type="text" matInput [formField]="form.addRow.quantity" autocomplete="off" />
+          </mat-form-field>
+
+          <mat-form-field class="flex-auto basis-30">
+            <mat-label>Description</mat-label>
+            <input type="text" matInput [formField]="form.addRow.description" autocomplete="off" />
+          </mat-form-field>
+
+          <button mat-raised-button color="primary" type="button" (click)="addRow()" class="flex-auto basis-10">
+            Add
+          </button>
+        </div>
+
+        <mat-table
+          #table
+          [dataSource]="form.ingredients().value() ?? []"
+          matSort
+          (matSortChange)="sortData($event)"
+          aria-label="Ingredients"
+        >
+          <ng-container matColumnDef="product">
+            <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
+            <mat-cell *matCellDef="let row">{{ row.product.name }} {{ row.description }}</mat-cell>
+          </ng-container>
+
+          <ng-container matColumnDef="quantity">
+            <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
+            <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
+          </ng-container>
+
+          <ng-container matColumnDef="units">
+            <mat-header-cell *matHeaderCellDef>Units</mat-header-cell>
+            <mat-cell *matCellDef="let row">{{ row.product.fractionUnits }}</mat-cell>
+          </ng-container>
+
+          <ng-container matColumnDef="action">
+            <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
+            <mat-cell *matCellDef="let row" class="center">
+              <button mat-icon-button tabindex="-1" color="warn" type="button" (click)="deleteRow(row)">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </mat-cell>
+          </ng-container>
+
+          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+          <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+        </mat-table>
+      </div>
+    }
+
+    @if (selectedSection === 'steps') {
+      <div class="flex-col wrapped">
+        <h3>Steps</h3>
+        <p class="hint">Add steps and reorder them using ↑ / ↓. Keep titles short and chef-friendly.</p>
+
+        <div class="row-container">
+          <button mat-raised-button color="primary" type="button" (click)="addStep()">
+            <mat-icon>add</mat-icon>
+            Add Step
+          </button>
+        </div>
+
+        @for (step of form.steps; track step; let i = $index) {
+          <div class="step-card">
+            <div class="row-container space-between aligned">
+              <div class="row-container aligned">
+                <span class="step-number">Step {{ i + 1 }}</span>
+              </div>
+              <div class="row-container aligned">
+                <button mat-icon-button type="button" (click)="moveStepUp(i)" [disabled]="i === 0">
+                  <mat-icon>arrow_upward</mat-icon>
+                </button>
+                <button
+                  mat-icon-button
+                  type="button"
+                  (click)="moveStepDown(i)"
+                  [disabled]="i === form.steps.length - 1"
+                >
+                  <mat-icon>arrow_downward</mat-icon>
+                </button>
+                <button mat-icon-button type="button" color="warn" (click)="removeStep(i)">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+            </div>
+
+            <div class="row-container">
+              <mat-form-field class="flex-auto basis-1-5">
+                <mat-label>Phase</mat-label>
+                <select matNativeControl [formField]="step.phase">
+                  @for (p of phases; track p) {
+                    <option [value]="p">{{ p }}</option>
+                  }
+                </select>
+              </mat-form-field>
+
+              <mat-form-field class="flex-auto basis-3-5">
+                <mat-label>Title</mat-label>
+                <input matInput [formField]="step.title" autocomplete="off" />
+              </mat-form-field>
+
+              <mat-form-field class="flex-auto basis-1-5">
+                <mat-label>Duration (min)</mat-label>
+                <input matInput type="number" [formField]="step.durationMinutes" />
+              </mat-form-field>
+            </div>
+
+            <div class="row-container">
+              <mat-form-field class="flex-auto">
+                <mat-label>Step Text</mat-label>
+                <textarea matInput matAutosizeMinRows="3" [formField]="step.text"></textarea>
+              </mat-form-field>
+            </div>
+
+            <div class="row-container">
+              <mat-form-field class="flex-auto">
+                <mat-label>Notes (optional)</mat-label>
+                <textarea matInput matAutosizeMinRows="2" [formField]="step.notes"></textarea>
+              </mat-form-field>
+            </div>
+          </div>
         }
-      </mat-autocomplete>
-    </mat-form-field>
-    <mat-form-field class="flex-auto basis-1-5">
-      <mat-label>Yield</mat-label>
-      <input type="text" matInput formControlName="recipeYield" autocomplete="off" />
-    </mat-form-field>
-  </div>
-  <div formGroupName="addRow" class="row-container">
-    <mat-form-field class="flex-auto basis-2-5">
-      <mat-label>Ingredient</mat-label>
-      <input
-        type="text"
-        matInput
-        #ingredientElement
-        [matAutocomplete]="autoI"
-        formControlName="ingredient"
-        autocomplete="off"
-      />
-      <mat-autocomplete
-        #autoI="matAutocomplete"
-        autoActiveFirstOption
-        [displayWith]="displayIngredient"
-        (optionSelected)="ingredientSelected($event)"
-      >
-        @for (product of ingredients | async; track product) {
-          <mat-option [value]="product">{{ product.name }} ({{ product.fractionUnits }})</mat-option>
+      </div>
+    }
+
+    @if (selectedSection === 'photos') {
+      <div class="flex-col wrapped">
+        <h3>Photos</h3>
+        <div class="row-container aligned wrapped">
+          <label class="file-btn">
+            <input type="file" accept="image/*" multiple (change)="onPhotosSelected($event)" />
+            <span>
+              <mat-icon>upload</mat-icon>
+              Add Photos
+            </span>
+          </label>
+          <span class="hint">Captions are optional. Reorder with ↑ / ↓.</span>
+        </div>
+
+        @if (form.photos.length === 0) {
+          <p class="hint">No photos yet.</p>
         }
-      </mat-autocomplete>
-    </mat-form-field>
-    <mat-form-field class="flex-auto basis-1-5">
-      <mat-label>Quantity</mat-label>
-      <input type="text" matInput formControlName="quantity" autocomplete="off" />
-    </mat-form-field>
-    <mat-form-field class="flex-auto basis-30">
-      <mat-label>Description</mat-label>
-      <input type="text" matInput formControlName="description" autocomplete="off" />
-    </mat-form-field>
 
-    <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-10">Add</button>
-  </div>
-  <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-    <!-- Ingredient Column -->
-    <ng-container matColumnDef="product">
-      <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.product.name }} {{ row.description }}</mat-cell>
-    </ng-container>
+        @for (p of form.photos; track p; let i = $index) {
+          <div class="photo-card">
+            <div class="row-container space-between aligned">
+              <div class="row-container aligned">
+                <img class="thumb" [src]="photoThumbSrc(formModel().photos[i])" alt="Recipe photo" />
+              </div>
+              <div class="row-container aligned">
+                <button mat-icon-button type="button" (click)="movePhotoUp(i)" [disabled]="i === 0">
+                  <mat-icon>arrow_upward</mat-icon>
+                </button>
+                <button
+                  mat-icon-button
+                  type="button"
+                  (click)="movePhotoDown(i)"
+                  [disabled]="i === form.photos.length - 1"
+                >
+                  <mat-icon>arrow_downward</mat-icon>
+                </button>
+                <button mat-icon-button color="warn" type="button" (click)="removePhoto(i)">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+            </div>
+            <div class="row-container">
+              <mat-form-field class="flex-auto">
+                <mat-label>Caption</mat-label>
+                <input matInput [formField]="p.caption" autocomplete="off" />
+              </mat-form-field>
+            </div>
+          </div>
+        }
+      </div>
+    }
 
-    <!-- Quantity Column -->
-    <ng-container matColumnDef="quantity">
-      <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
-    </ng-container>
+    @if (selectedSection === 'notes') {
+      <div class="flex-col wrapped">
+        <h3>Notes</h3>
+        <div class="row-container">
+          <mat-form-field class="flex-auto">
+            <mat-label>Garnishing</mat-label>
+            <textarea matInput matAutosizeMinRows="3" [formField]="form.notes.garnishing"></textarea>
+          </mat-form-field>
+        </div>
+        <div class="row-container">
+          <mat-form-field class="flex-auto">
+            <mat-label>Plating</mat-label>
+            <textarea matInput matAutosizeMinRows="3" [formField]="form.notes.plating"></textarea>
+          </mat-form-field>
+        </div>
+        <div class="row-container">
+          <mat-form-field class="flex-auto">
+            <mat-label>Additional Notes</mat-label>
+            <textarea matInput matAutosizeMinRows="4" [formField]="form.notes.notes"></textarea>
+          </mat-form-field>
+        </div>
+      </div>
+    }
 
-    <!-- Units Column -->
-    <ng-container matColumnDef="units">
-      <mat-header-cell *matHeaderCellDef>Units</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.product.fractionUnits }}</mat-cell>
-    </ng-container>
+    @if (selectedSection === 'preview') {
+      <div class="flex-col wrapped">
+        <div class="row-container space-between aligned">
+          <h3>Preview</h3>
+          <div class="row-container aligned">
+            <button mat-stroked-button type="button" (click)="exportPdf()">
+              <mat-icon>picture_as_pdf</mat-icon>
+              Export PDF
+            </button>
+            <button mat-stroked-button type="button" (click)="print()">
+              <mat-icon>print</mat-icon>
+              Print
+            </button>
+          </div>
+        </div>
 
-    <!-- Action Column -->
-    <ng-container matColumnDef="action">
-      <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center">
-        <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
+        <div class="recipe-print" #previewElement>
+          <div class="recipe-print__header">
+            <h1 class="recipe-print__title">{{ dishName }}</h1>
+            <div class="recipe-print__meta">
+              <span><strong>Date:</strong> {{ formModel().basics.date.format('DD-MMM-YYYY') }}</span>
+              <span><strong>Source:</strong> {{ formModel().basics.source }}</span>
+              <span>
+                <strong>Yield:</strong>
+                {{ yieldText }}
+              </span>
+            </div>
+          </div>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Instructions</mat-label>
-      <textarea matInput matAutosizeMinRows="5" formControlName="instructions"></textarea>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Garnishing</mat-label>
-      <textarea matInput matAutosizeMinRows="5" formControlName="garnishing"></textarea>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Plating</mat-label>
-      <textarea matInput matAutosizeMinRows="5" formControlName="plating"></textarea>
-    </mat-form-field>
-  </div>
-</form>
+          <hr class="recipe-print__hr" />
 
-<div class="row-container">
-  <button mat-raised-button (click)="save()" color="primary" class="">
-    {{ item.id ? 'Update' : 'Save' }}
+          <section class="recipe-print__section">
+            <h2>Ingredients</h2>
+            <ul class="recipe-print__ingredients">
+              @for (ing of formModel().ingredients; track ing) {
+                <li>
+                  <div>
+                    <span class="name">{{ ing.product.name }}</span>
+                    @if (ing.description) {
+                      <span class="desc">— {{ ing.description }}</span>
+                    }
+                  </div>
+                  <span class="qty">{{ ing.quantity | number: '1.2-2' }} {{ ing.product.fractionUnits }}</span>
+                </li>
+              }
+            </ul>
+          </section>
+
+          @if (formModel().steps.length > 0) {
+            <section class="recipe-print__section">
+              <h2>Steps</h2>
+              <ol class="recipe-print__steps">
+                @for (step of formModel().steps; track step; let i = $index) {
+                  <li class="recipe-print__step-item">
+                    <div class="recipe-print__step-header">
+                      Step {{ i + 1 }} - {{ step.phase }}: {{ step.title }}
+                      @if (step.durationMinutes) {
+                        ({{ step.durationMinutes }} min)
+                      }
+                    </div>
+                    <p class="recipe-print__step-text">{{ step.text }}</p>
+                    @if (step.notes) {
+                      <p class="recipe-print__step-notes">Note: {{ step.notes }}</p>
+                    }
+                  </li>
+                }
+              </ol>
+            </section>
+          }
+
+          @if (formModel().photos.length > 0) {
+            <section class="recipe-print__section">
+              <h2>Photos</h2>
+              <div class="recipe-print__photos">
+                @for (p of formModel().photos; track p; let i = $index) {
+                  <div class="recipe-print__photo-item">
+                    <img
+                      class="recipe-print__photo-img"
+                      [src]="photoThumbSrc(formModel().photos[i])"
+                      alt="Recipe photo"
+                    />
+                    @if (p.caption) {
+                      <div class="recipe-print__photo-caption">{{ p.caption }}</div>
+                    }
+                  </div>
+                }
+              </div>
+            </section>
+          }
+
+          @if (formModel().notes.garnishing || formModel().notes.plating || formModel().notes.notes) {
+            <section class="recipe-print__section">
+              <h2>Notes</h2>
+              @if (formModel().notes.garnishing) {
+                <div class="recipe-print__notes-block">
+                  <div class="recipe-print__notes-title">Garnishing</div>
+                  <p class="recipe-print__notes-text">{{ formModel().notes.garnishing }}</p>
+                </div>
+              }
+              @if (formModel().notes.plating) {
+                <div class="recipe-print__notes-block">
+                  <div class="recipe-print__notes-title">Plating</div>
+                  <p class="recipe-print__notes-text">{{ formModel().notes.plating }}</p>
+                </div>
+              }
+              @if (formModel().notes.notes) {
+                <div class="recipe-print__notes-block">
+                  <div class="recipe-print__notes-title">Additional Notes</div>
+                  <p class="recipe-print__notes-text">{{ formModel().notes.notes }}</p>
+                </div>
+              }
+            </section>
+          }
+        </div>
+      </div>
+    }
+  </form>
+}
+
+<div class="row-container aligned wrapped">
+  <button mat-raised-button color="primary" (click)="save()">
+    {{ id() ? 'Update' : 'Save' }}
   </button>
-  @if (item.id) {
-    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  @if (id()) {
+    <button mat-raised-button type="button" color="warn" (click)="confirmDelete()">Delete</button>
   }
 </div>
diff --git a/overlord/src/app/recipe/recipe-detail/recipe-detail.component.ts b/overlord/src/app/recipe/recipe-detail/recipe-detail.component.ts
index b9b2043b..9d188f10 100644
--- a/overlord/src/app/recipe/recipe-detail/recipe-detail.component.ts
+++ b/overlord/src/app/recipe/recipe-detail/recipe-detail.component.ts
@@ -1,6 +1,16 @@
-import { AsyncPipe, DecimalPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import {
+  afterNextRender,
+  Component,
+  computed,
+  inject,
+  input,
+  linkedSignal,
+  signal,
+  viewChild,
+  ElementRef,
+} from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
@@ -10,30 +20,78 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 
 import { Product } from '../../core/product';
 import { ProductSku } from '../../core/product-sku';
-import { Period } from '../../period/period';
 import { ProductService } from '../../product/product.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
 import { MathService } from '../../shared/math.service';
+import { PdfExportService } from '../../shared/pdf-export.service';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { Recipe } from '../recipe';
 import { RecipeItem } from '../recipe-item';
+import { RecipePhoto } from '../recipe-photo';
+import { RecipePhase, RecipeStep } from '../recipe-step';
 import { RecipeService } from '../recipe.service';
-import { RecipeDetailDatasource } from './recipe-detail-datasource';
+
+interface StepFormModel {
+  phase: RecipePhase;
+  title: string;
+  text: string;
+  durationMinutes: number | null;
+  notes: string;
+}
+
+interface PhotoFormModel {
+  id: string | null;
+  caption: string;
+  resized: string | null;
+  thumbnail: string | null;
+}
+
+export interface IngredientFormData {
+  id: string | undefined;
+  product: ProductSku;
+  quantity: number;
+  description: string;
+}
+
+export interface RecipeDetailFormData {
+  basics: {
+    date: moment.Moment;
+    source: string;
+    recipeYield: string;
+    product: ProductSku | string | null;
+  };
+  addRow: {
+    ingredient: ProductSku | string | null;
+    quantity: string;
+    description: string;
+  };
+  ingredients: IngredientFormData[];
+  steps: StepFormModel[];
+  photos: PhotoFormModel[];
+  notes: {
+    garnishing: string;
+    plating: string;
+    notes: string;
+  };
+}
 
 @Component({
-  selector: 'app-product-group-detail',
+  selector: 'app-recipe-detail',
   templateUrl: './recipe-detail.component.html',
   styleUrls: ['./recipe-detail.component.css'],
+
   imports: [
-    ReactiveFormsModule,
+    CommonModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -43,115 +101,175 @@ import { RecipeDetailDatasource } from './recipe-detail-datasource';
     MatTableModule,
     MatSortModule,
     MatIconModule,
-    AsyncPipe,
-    DecimalPipe,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class RecipeDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class RecipeDetailComponent {
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private math = inject(MathService);
   private ser = inject(RecipeService);
   private productSer = inject(ProductService);
+  private pdf = inject(PdfExportService);
 
-  @ViewChild('productElement', { static: true }) productElement!: ElementRef<HTMLInputElement>;
-  @ViewChild('ingredientElement', { static: true }) ingredientElement!: ElementRef<HTMLInputElement>;
-  public itemsObservable = new BehaviorSubject<RecipeItem[]>([]);
-  dataSource: RecipeDetailDatasource = new RecipeDetailDatasource(this.itemsObservable);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-    source: FormControl<string>;
-    recipeYield: FormControl<string | null>;
-    product: FormControl<ProductSku | string | null>;
-    addRow: FormGroup<{
-      ingredient: FormControl<string | null>;
-      quantity: FormControl<string>;
-      description: FormControl<string>;
-    }>;
-    instructions: FormControl<string>;
-    garnishing: FormControl<string>;
-    plating: FormControl<string>;
-  }>;
+  sortActive = signal('');
+  sortDirection = signal('');
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  previewElement = viewChild<ElementRef<HTMLElement>>('previewElement');
 
-  periods: Period[] = [];
-  product: ProductSku | null;
-  products: Observable<ProductSku[]>;
-  ingredient: ProductSku | null;
-  ingredients: Observable<ProductSku[]>;
-  item: Recipe = new Recipe();
+  public readonly phases: RecipePhase[] = ['Prep', 'Cook', 'Finish', 'Serve'];
+  public selectedSection: 'basics' | 'ingredients' | 'steps' | 'photos' | 'notes' | 'preview' = 'basics';
 
   displayedColumns = ['product', 'quantity', 'units', 'action'];
 
-  constructor() {
-    this.product = null;
-    this.ingredient = null;
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-      source: new FormControl('', { nonNullable: true }),
-      recipeYield: new FormControl<string | null>(null),
-      product: new FormControl<ProductSku | string | null>(new ProductSku()),
-      addRow: new FormGroup({
-        ingredient: new FormControl(''),
-        quantity: new FormControl('', { nonNullable: true }),
-        description: new FormControl('', { nonNullable: true }),
-      }),
-      instructions: new FormControl('', { nonNullable: true }),
-      garnishing: new FormControl('', { nonNullable: true }),
-      plating: new FormControl('', { nonNullable: true }),
-    });
-    // Setup Product Autocomplete
-    this.products = this.form.controls.product.valueChanges.pipe(
-      map((x) => ((x as ProductSku).name !== undefined ? (x as ProductSku).name : (x as string))),
-      map((x) => (x !== null && x.length >= 1 ? x : null)),
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.productSer.autocompleteSku(x, false))),
-    );
-    // Setup Product Autocomplete
-    this.ingredients = this.form.controls.addRow.controls.ingredient.valueChanges.pipe(
-      map((x) => (x !== null && x.length >= 1 ? x : null)),
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.productSer.autocompleteProduct(x, null))),
-    );
-  }
+  itemResource = this.ser.get(this.id);
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: Recipe; periods: Period[] };
-      this.periods = data.periods;
-      this.showItem(data.item);
-      this.updateView();
-    });
-  }
+  item = linkedSignal(() => {
+    const val = this.itemResource.value() ?? new Recipe();
+    this.ensureLegacyCompatibility(val);
+    return val;
+  });
 
-  showItem(item: Recipe) {
-    this.item = item;
-    this.form.setValue({
-      date: moment(item.date, 'DD-MMM-YYYY'),
-      source: item.source,
-      recipeYield: `${item.recipeYield}`,
-      product: item.sku,
+  formModel = linkedSignal<Recipe, RecipeDetailFormData>({
+    source: this.item,
+    computation: (itemVal): RecipeDetailFormData => ({
+      basics: {
+        date: itemVal.date ? moment(itemVal.date) : moment(new Date()),
+        source: itemVal.source ?? '',
+        recipeYield: `${itemVal.recipeYield ?? ''}`,
+        product: itemVal.sku ?? null,
+      },
       addRow: {
         ingredient: null,
         quantity: '',
         description: '',
       },
-      instructions: item.instructions,
-      garnishing: item.garnishing,
-      plating: item.plating,
-    });
-    this.dataSource = new RecipeDetailDatasource(this.itemsObservable);
+      ingredients: (itemVal.ingredients ?? []).map((ing) => ({
+        id: ing.id,
+        product: ing.product,
+        quantity: ing.quantity,
+        description: ing.description,
+      })),
+      steps: this.mapSteps(itemVal.steps ?? []),
+      photos: this.mapPhotos(itemVal.photos ?? []),
+      notes: {
+        garnishing: itemVal.garnishing ?? '',
+        plating: itemVal.plating ?? '',
+        notes: itemVal.notes ?? '',
+      },
+    }),
+  });
+
+  form = form(this.formModel);
+
+  productSearch = computed(() => {
+    const v = this.form.basics.product().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  productsResource = this.productSer.autocompleteSku(
+    this.productSearch,
+    signal(false),
+    signal<string | null>(null),
+    signal<string | null>(null),
+  );
+
+  products = computed(() => this.productsResource.value() ?? []);
+
+  ingredientSearch = computed(() => {
+    const v = this.form.addRow.ingredient().value();
+    return typeof v === 'string' ? v : null;
+  });
+
+  ingredientsResource = this.productSer.autocompleteSku(
+    this.ingredientSearch,
+    signal(false),
+    signal<string | null>(null),
+    signal<string | null>(null),
+  );
+
+  ingredients = computed(() => this.ingredientsResource.value() ?? []);
+
+  get dishName(): string {
+    const v = this.formModel().basics.product;
+    if (v === null) return '';
+    if (typeof v === 'string') return v;
+    return (v as ProductSku).name ?? '';
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.productElement.nativeElement.focus();
-    }, 0);
+  get yieldText(): string {
+    const y = this.formModel().basics.recipeYield;
+    const units = this.item().units ?? '';
+    return `${y || '1'} ${units}`.trim();
   }
 
+  constructor() {
+    afterNextRender(() => {
+      this.form.basics.product().focusBoundControl();
+    });
+  }
+
+  // ---------- Form helpers ----------
+
+  private createStepGroup(step?: Partial<RecipeStep>): StepFormModel {
+    return {
+      phase: step?.phase ?? 'Cook',
+      title: step?.title ?? '',
+      text: step?.text ?? '',
+      durationMinutes: step?.durationMinutes ?? null,
+      notes: step?.notes ?? '',
+    };
+  }
+
+  private createPhotoGroup(photo?: Partial<RecipePhoto>): PhotoFormModel {
+    return {
+      id: photo?.id ?? null,
+      caption: photo?.caption ?? '',
+      resized: photo?.resized ?? null,
+      thumbnail: photo?.thumbnail ?? null,
+    };
+  }
+
+  private mapSteps(steps: RecipeStep[]): StepFormModel[] {
+    const normalized = [...steps].sort((a, b) => a.orderIndex - b.orderIndex);
+    const newSteps: StepFormModel[] = [];
+    for (const s of normalized) {
+      newSteps.push(this.createStepGroup(s));
+    }
+    if (newSteps.length === 0) {
+      newSteps.push(this.createStepGroup({ phase: 'Cook' }));
+    }
+    return newSteps;
+  }
+
+  private mapPhotos(photos: RecipePhoto[]): PhotoFormModel[] {
+    const normalized = [...photos].sort((a, b) => a.orderIndex - b.orderIndex);
+    const newPhotos: PhotoFormModel[] = [];
+    for (const p of normalized) {
+      newPhotos.push(this.createPhotoGroup(p));
+    }
+    return newPhotos;
+  }
+
+  private ensureLegacyCompatibility(item: Recipe): void {
+    if ((!item.steps || item.steps.length === 0) && item.instructions && item.instructions.trim().length > 0) {
+      item.steps = [
+        {
+          orderIndex: 0,
+          phase: 'Cook',
+          title: 'Instructions',
+          text: item.instructions,
+          durationMinutes: null,
+          notes: null,
+        },
+      ];
+    }
+  }
+
+  // ---------- Display / selection helpers ----------
+
   displayIngredient(product?: Product): string {
     return product ? `${product.name} (${product.fractionUnits})` : '';
   }
@@ -160,59 +278,156 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
     return product?.name || '';
   }
 
-  productSelected(event: MatAutocompleteSelectedEvent): void {
-    const product: ProductSku = event.option.value;
-    this.item.sku = product;
-    this.form.controls.product.setValue(product);
+  go(section: typeof this.selectedSection): void {
+    this.selectedSection = section;
   }
 
-  ingredientSelected(event: MatAutocompleteSelectedEvent): void {
-    const ingredient: ProductSku = event.option.value;
-    this.ingredient = ingredient;
+  // ---------- Ingredients workflow ----------
+
+  productSelected(event: MatAutocompleteSelectedEvent): void {
+    const product: ProductSku = event.option.value;
+    this.formModel.update((m) => ({ ...m, basics: { ...m.basics, product } }));
   }
 
   addRow() {
-    const formValue = this.form.value.addRow;
-    if (formValue === undefined) {
+    const formValue = this.form().value().addRow;
+    const quantity = this.math.parseAmount(formValue?.quantity ?? '0', 2);
+    const ingredient = formValue?.ingredient;
+    if (!ingredient || typeof ingredient === 'string' || quantity <= 0) {
       return;
     }
-    const quantity = this.math.parseAmount(formValue.quantity, 2);
-    if (this.ingredient === null || quantity <= 0) {
-      return;
-    }
-    const oldFiltered = this.item.items.filter((x) => x.product.id === (this.ingredient as ProductSku).id);
-    if (oldFiltered.length) {
+    const ingredientSku = ingredient as ProductSku;
+    const alreadyAdded = this.formModel().ingredients.some((x) => x.product.id === ingredientSku.id);
+    if (alreadyAdded) {
       this.snackBar.open('Product already added', 'Danger');
       return;
     }
-    this.item.items.push(
-      new RecipeItem({
-        product: this.ingredient,
-        quantity,
-        description: formValue.description ?? '',
-      }),
-    );
-    this.resetAddRow();
-    this.updateView();
+    const newIngredient: IngredientFormData = {
+      id: undefined,
+      product: ingredientSku,
+      quantity,
+      description: formValue?.description ?? '',
+    };
+    this.formModel.update((m) => ({
+      ...m,
+      ingredients: [...m.ingredients, newIngredient],
+      addRow: { ingredient: null, quantity: '', description: '' },
+    }));
+    this.form.addRow.ingredient().focusBoundControl();
   }
 
-  resetAddRow() {
-    this.form.controls.addRow.reset();
-    this.ingredient = null;
-    setTimeout(() => {
-      this.ingredientElement.nativeElement.focus();
-    }, 0);
+  deleteRow(row: IngredientFormData) {
+    const updatedIngredients = this.formModel().ingredients.filter((ing) => ing !== row);
+    this.formModel.update((m) => ({
+      ...m,
+      ingredients: updatedIngredients,
+    }));
+    this.form.addRow.ingredient().focusBoundControl();
   }
 
-  updateView() {
-    this.itemsObservable.next(this.item.items);
+  // ---------- Steps ----------
+
+  addStep(afterIndex?: number): void {
+    const steps = [...this.formModel().steps];
+    const idx = afterIndex === undefined ? steps.length - 1 : afterIndex;
+    const insertAt = Math.max(0, idx + 1);
+    steps.splice(insertAt, 0, this.createStepGroup({ phase: 'Cook' }));
+    this.formModel.update((m) => ({ ...m, steps }));
   }
 
-  deleteRow(row: RecipeItem) {
-    this.item.items.splice(this.item.items.indexOf(row), 1);
-    this.updateView();
+  removeStep(index: number): void {
+    const steps = [...this.formModel().steps];
+    if (steps.length <= 1) {
+      this.snackBar.open('At least one step is required.', 'Info');
+      return;
+    }
+    steps.splice(index, 1);
+    this.formModel.update((m) => ({ ...m, steps }));
   }
 
+  moveStepUp(index: number): void {
+    if (index <= 0) return;
+    const steps = [...this.formModel().steps];
+    const step = steps[index];
+    steps.splice(index, 1);
+    steps.splice(index - 1, 0, step);
+    this.formModel.update((m) => ({ ...m, steps }));
+  }
+
+  moveStepDown(index: number): void {
+    const steps = [...this.formModel().steps];
+    if (index >= steps.length - 1) return;
+    const step = steps[index];
+    steps.splice(index, 1);
+    steps.splice(index + 1, 0, step);
+    this.formModel.update((m) => ({ ...m, steps }));
+  }
+
+  // ---------- Photos ----------
+
+  async onPhotosSelected(event: Event): Promise<void> {
+    const input = event.target as HTMLInputElement | null;
+    const files: FileList | null = input?.files ?? null;
+    if (!files || files.length === 0) return;
+
+    const photos = [...this.formModel().photos];
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files.item(i);
+      if (!file) continue;
+
+      const resizedDataUrl = await this.readFileAsDataUrl(file);
+      const thumbDataUrl = await this.createThumbnail(resizedDataUrl, 320);
+
+      photos.push(
+        this.createPhotoGroup({
+          id: undefined,
+          caption: '',
+          resized: this.stripDataUrlPrefix(resizedDataUrl),
+          thumbnail: this.stripDataUrlPrefix(thumbDataUrl),
+        }),
+      );
+    }
+
+    this.formModel.update((m) => ({ ...m, photos }));
+
+    // clear input so selecting same files again triggers change
+    if (input) input.value = '';
+  }
+
+  removePhoto(index: number): void {
+    const photos = [...this.formModel().photos];
+    photos.splice(index, 1);
+    this.formModel.update((m) => ({ ...m, photos }));
+  }
+
+  movePhotoUp(index: number): void {
+    if (index <= 0) return;
+    const photos = [...this.formModel().photos];
+    const p = photos[index];
+    photos.splice(index, 1);
+    photos.splice(index - 1, 0, p);
+    this.formModel.update((m) => ({ ...m, photos }));
+  }
+
+  movePhotoDown(index: number): void {
+    const photos = [...this.formModel().photos];
+    if (index >= photos.length - 1) return;
+    const p = photos[index];
+    photos.splice(index, 1);
+    photos.splice(index + 1, 0, p);
+    this.formModel.update((m) => ({ ...m, photos }));
+  }
+
+  photoThumbSrc(photo: PhotoFormModel): string {
+    const t = photo.thumbnail;
+    if (!t) return '';
+    if (t.startsWith('/')) return t;
+    return `data:image/jpeg;base64,${t}`;
+  }
+
+  // ---------- Save / Delete ----------
+
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
@@ -220,21 +435,24 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/recipes');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
-      next: () => {
-        this.snackBar.open('', 'Success');
-        this.router.navigate(['/recipes']);
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
+    const id = this.id();
+    if (id) {
+      this.ser.delete(id).subscribe({
+        next: () => {
+          this.snackBar.open('', 'Success');
+          this.router.navigate(['/recipes']);
+        },
+        error: (error) => {
+          this.snackBar.open(error as string, 'Danger');
+        },
+      });
+    }
   }
 
   confirmDelete(): void {
@@ -250,14 +468,120 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
     });
   }
 
-  getItem(): Recipe {
-    const formModel = this.form.value;
-    this.item.date = moment(formModel.date).format('DD-MMM-YYYY');
-    this.item.source = formModel.source ?? '';
-    this.item.recipeYield = this.math.parseAmount(formModel.recipeYield ?? '1', 2);
-    this.item.instructions = formModel.instructions ?? '';
-    this.item.garnishing = formModel.garnishing ?? '';
-    this.item.plating = formModel.plating ?? '';
-    return this.item;
+  // ---------- Export ----------
+
+  async exportPdf(): Promise<void> {
+    const el = this.previewElement();
+    if (!el) {
+      this.snackBar.open('PDF export requires previewElement.', 'Info');
+      return;
+    }
+    await this.pdf.exportElementAsA4Pdf(el.nativeElement, `${this.dishName || 'Recipe'}.pdf`);
+  }
+
+  // ---------- Build outgoing model ----------
+
+  private getItem(): Recipe {
+    const m = this.formModel();
+    const basics = m.basics;
+    const notes = m.notes;
+    const base = this.item();
+    const item = new Recipe({ ...base });
+
+    item.date = moment(basics.date).format('DD-MMM-YYYY');
+    item.source = basics.source ?? '';
+    item.recipeYield = this.math.parseAmount(basics.recipeYield ?? '1', 2);
+    item.garnishing = notes.garnishing ?? '';
+    item.plating = notes.plating ?? '';
+    item.notes = notes.notes ?? '';
+
+    // Ingredients
+    item.ingredients = m.ingredients.map(
+      (ing) =>
+        new RecipeItem({
+          id: ing.id,
+          product: ing.product,
+          quantity: ing.quantity,
+          description: ing.description,
+        }),
+    );
+
+    // Steps
+    const steps: RecipeStep[] = m.steps.map((v: StepFormModel, idx: number) => ({
+      orderIndex: idx,
+      phase: v.phase ?? 'Cook',
+      title: v.title ?? '',
+      text: v.text ?? '',
+      durationMinutes: v.durationMinutes ?? null,
+      notes: v.notes ?? null,
+    }));
+    item.steps = steps;
+
+    // Photos
+    const photos: RecipePhoto[] = m.photos.map((v: PhotoFormModel, idx: number) => {
+      const hasId = !!v.id;
+      return {
+        id: v.id ?? undefined,
+        orderIndex: idx,
+        caption: v.caption ?? '',
+        resized: hasId ? null : (v.resized ?? null),
+        thumbnail: hasId ? null : (v.thumbnail ?? null),
+      };
+    });
+    item.photos = photos;
+
+    // Legacy compatibility (server also regenerates)
+    item.instructions = steps.map((s, i) => `${i + 1}. [${s.phase}] ${s.title}\n${s.text}`.trim()).join('\n\n');
+
+    return item;
+  }
+
+  // ---------- Image helpers ----------
+
+  private stripDataUrlPrefix(value: string): string {
+    const idx = value.indexOf(',');
+    if (value.startsWith('data:') && idx >= 0) return value.slice(idx + 1);
+    return value;
+  }
+
+  private readFileAsDataUrl(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(String(reader.result ?? ''));
+      reader.onerror = () => reject(new Error('File read failed'));
+      reader.readAsDataURL(file);
+    });
+  }
+
+  private createThumbnail(dataUrl: string, maxSizePx: number): Promise<string> {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        const ratio = Math.min(maxSizePx / img.width, maxSizePx / img.height, 1);
+        const w = Math.round(img.width * ratio);
+        const h = Math.round(img.height * ratio);
+        const canvas = document.createElement('canvas');
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+          resolve(dataUrl);
+          return;
+        }
+        ctx.drawImage(img, 0, 0, w, h);
+        resolve(canvas.toDataURL('image/jpeg', 0.85));
+      };
+      img.onerror = () => resolve(dataUrl);
+      img.src = dataUrl;
+    });
+  }
+
+  print(): void {
+    window.print();
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
diff --git a/overlord/src/app/recipe/recipe-list.resolver.spec.ts b/overlord/src/app/recipe/recipe-list.resolver.spec.ts
deleted file mode 100644
index 1d055426..00000000
--- a/overlord/src/app/recipe/recipe-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Recipe } from './recipe';
-import { recipeListResolver } from './recipe-list.resolver';
-
-describe('recipeListResolver', () => {
-  const executeResolver: ResolveFn<Recipe[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => recipeListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/recipe/recipe-list.resolver.ts b/overlord/src/app/recipe/recipe-list.resolver.ts
deleted file mode 100644
index 1427f091..00000000
--- a/overlord/src/app/recipe/recipe-list.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Recipe } from './recipe';
-import { RecipeService } from './recipe.service';
-
-export const recipeListResolver: ResolveFn<Recipe[]> = (route) => {
-  const period = route.queryParamMap.get('p') || null;
-  return inject(RecipeService).list(period);
-};
diff --git a/overlord/src/app/recipe/recipe-list/recipe-list-datasource.ts b/overlord/src/app/recipe/recipe-list/recipe-list-datasource.ts
deleted file mode 100644
index ddc65944..00000000
--- a/overlord/src/app/recipe/recipe-list/recipe-list-datasource.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-
-import { Recipe } from '../recipe';
-
-export class RecipeListDatasource extends DataSource<Recipe> {
-  public data: Recipe[];
-  public filteredData: Recipe[];
-  public productGroup: string;
-
-  constructor(
-    private readonly productGroupFilter: Observable<string>,
-    private readonly dataObs: Observable<Recipe[]>,
-
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-    this.data = [];
-    this.filteredData = [];
-    this.productGroup = '';
-  }
-
-  connect(): Observable<Recipe[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    const d = this.dataObs.pipe(
-      tap((x) => {
-        this.data = x;
-      }),
-    );
-    const pg = this.productGroupFilter.pipe(
-      tap((x) => {
-        this.productGroup = x;
-      }),
-    );
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    return merge(d, pg, ...dataMutations).pipe(
-      map(() => this.getFilteredData(this.data, this.productGroup)),
-      tap((x: Recipe[]) => {
-        if (this.paginator) {
-          this.paginator.length = x.length;
-        }
-      }),
-      tap((x) => {
-        this.filteredData = x;
-      }),
-      map(() => this.getPagedData(this.getSortedData([...this.filteredData]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getFilteredData(data: Recipe[], productGroup: string): Recipe[] {
-    return data.filter((x: Recipe) => productGroup === '' || x.productGroupId === productGroup);
-  }
-
-  private getPagedData(data: Recipe[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: Recipe[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.sku.name, b.sku.name, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number | Date, b: string | number | Date, isAsc: boolean) =>
-  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-// const compareDate = (a: string, b: string, isAsc: boolean) =>
-//   (moment(a, 'DD-MMM-YYYY').toDate() < moment(b, 'DD-MMM-YYYY').toDate() ? -1 : 1) *
-//   (isAsc ? 1 : -1);
diff --git a/overlord/src/app/recipe/recipe-list/recipe-list.component.html b/overlord/src/app/recipe/recipe-list/recipe-list.component.html
index d2816fb3..2bae44f4 100644
--- a/overlord/src/app/recipe/recipe-list/recipe-list.component.html
+++ b/overlord/src/app/recipe/recipe-list/recipe-list.component.html
@@ -12,20 +12,20 @@
   </a>
 </h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto">
-      <mat-select formControlName="period">
-        @for (p of periods; track p.id) {
+      <mat-select [formField]="form.period">
+        @for (p of periods(); track p.id) {
           <mat-option [value]="p"> {{ p.validFrom }} to {{ p.validTill }} </mat-option>
         }
       </mat-select>
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Product Type</mat-label>
-      <mat-select formControlName="productGroup" (selectionChange)="filterProductGroup($event.value)">
+      <mat-select [formField]="form.productGroup" (selectionChange)="filterProductGroup($event.value)">
         <mat-option>-- All Products --</mat-option>
-        @for (mc of productGroups; track mc.id) {
+        @for (mc of productGroups(); track mc.id) {
           <mat-option [value]="mc.id">
             {{ mc.name }}
           </mat-option>
@@ -34,35 +34,71 @@
     </mat-form-field>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="['/recipes', row.id]">{{ row.sku.name }}</a></mat-cell
-    >
-  </ng-container>
-  <!-- Yield Column -->
-  <ng-container matColumnDef="yield">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Yield</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.recipeYield }} {{ row.units }}</mat-cell>
-  </ng-container>
+@if (resource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (resource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="resource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="['/recipes', row.id]">{{ row.sku.name }}</a></mat-cell
+      >
+    </ng-container>
+    <!-- Yield Column -->
+    <ng-container matColumnDef="yield">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Yield</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.recipeYield }} {{ row.units }}</mat-cell>
+    </ng-container>
 
-  <!-- Date Column -->
-  <ng-container matColumnDef="date">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
-  </ng-container>
+    <!-- Steps Column -->
+    <ng-container matColumnDef="steps">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Steps</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.stepCount ?? 0 }}</mat-cell>
+    </ng-container>
 
-  <!-- Source Column -->
-  <ng-container matColumnDef="source">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Source</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.source }}</mat-cell>
-  </ng-container>
+    <!-- Photos Column -->
+    <ng-container matColumnDef="photos">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Photos</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.photoCount ?? 0 }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <!-- Time Column -->
+    <ng-container matColumnDef="time">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Time</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        @if ((row.totalDurationMinutes ?? 0) > 0) {
+          {{ row.totalDurationMinutes }} min
+        } @else {
+          —
+        }
+      </mat-cell>
+    </ng-container>
 
-<mat-paginator #paginator [length]="0" [pageIndex]="0" [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
-</mat-paginator>
+    <!-- Date Column -->
+    <ng-container matColumnDef="date">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
+    </ng-container>
+
+    <!-- Source Column -->
+    <ng-container matColumnDef="source">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Source</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.source }}</mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
+
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="info().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/recipe/recipe-list/recipe-list.component.ts b/overlord/src/app/recipe/recipe-list/recipe-list.component.ts
index c9449164..6dbc4b97 100644
--- a/overlord/src/app/recipe/recipe-list/recipe-list.component.ts
+++ b/overlord/src/app/recipe/recipe-list/recipe-list.component.ts
@@ -1,30 +1,34 @@
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, input, computed, effect, signal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatSelectModule } from '@angular/material/select';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { BehaviorSubject } from 'rxjs';
+import { Router, RouterModule } from '@angular/router';
 
 import { ProductGroup } from '../../core/product-group';
 import { Period } from '../../period/period';
-import { Recipe } from '../recipe';
-import { RecipeListDatasource } from './recipe-list-datasource';
+import { PeriodService } from '../../period/period.service';
+import { ProductGroupService } from '../../product-group/product-group.service';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { RecipeService } from '../recipe.service';
 
 @Component({
-  selector: 'app-role-list',
+  selector: 'app-recipe-list',
   templateUrl: './recipe-list.component.html',
   styleUrls: ['./recipe-list.component.css'],
+
   imports: [
     MatIconModule,
     RouterModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatDatepickerModule,
     MatFormFieldModule,
     MatSelectModule,
@@ -33,46 +37,88 @@ import { RecipeListDatasource } from './recipe-list-datasource';
     MatSortModule,
     MatPaginatorModule,
     MatButtonModule,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class RecipeListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class RecipeListComponent {
+  p = input<string>();
+  private ser = inject(RecipeService);
   private router = inject(Router);
+  private periodSer = inject(PeriodService);
+  private productGroupSer = inject(ProductGroupService);
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  form: FormGroup<{
-    period: FormControl<Period>;
-    productGroup: FormControl<ProductGroup | string | null>;
-  }>;
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
 
-  productGroups: ProductGroup[] = [];
-  periods: Period[] = [];
-  periodFilter: BehaviorSubject<Period> = new BehaviorSubject<Period>(new Period());
-  productGroupFilter = new BehaviorSubject<string>('');
-  list: Recipe[] = [];
-  data: BehaviorSubject<Recipe[]> = new BehaviorSubject<Recipe[]>([]);
-  dataSource: RecipeListDatasource = new RecipeListDatasource(
-    this.productGroupFilter,
-    this.data,
-    this.paginator,
-    this.sort,
-  );
+  model = signal({
+    period: null as Period | null,
+    productGroup: null as ProductGroup | string | null,
+  });
 
-  period: Period = new Period();
+  form = createForm(this.model);
 
-  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['name', 'yield', 'date', 'source'];
+  periodsResource = this.periodSer.list();
+  periods = computed(() => this.periodsResource.value() ?? []);
+
+  productGroupsResource = this.productGroupSer.list();
+  productGroups = computed(() => this.productGroupsResource.value() ?? []);
+
+  periodFilter = computed(() => this.p() || '');
+  resource = this.ser.list(this.periodFilter);
+
+  info = computed(() => this.resource.value() ?? []);
+  sortedList = computed(() => {
+    let data = this.info() ?? [];
+
+    const pg = this.model().productGroup;
+    if (pg) {
+      const pgId = typeof pg === 'string' ? pg : pg.id;
+      data = data.filter((r) => r.productGroupId === pgId);
+    }
+
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.sku.name, b.sku.name, isAsc);
+        case 'date':
+          return compare(a.date, b.date, isAsc);
+        case 'source':
+          return compare(a.source, b.source, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  period = new Period();
+
+  displayedColumns = ['name', 'yield', 'steps', 'photos', 'time', 'date', 'source'];
 
   constructor() {
-    this.form = new FormGroup({
-      period: new FormControl(new Period(), { nonNullable: true }),
-      productGroup: new FormControl<ProductGroup | string | null>(null),
-    });
     // Listen to Period Change
-    this.form.controls.period.valueChanges.subscribe((x) => {
+    effect(() => {
+      const x = this.model().period;
+      if (!x) return;
       this.router.navigate([], {
-        relativeTo: this.route,
         queryParams: { p: x.id },
         replaceUrl: true,
         queryParamsHandling: 'merge',
@@ -81,24 +127,19 @@ export class RecipeListComponent implements OnInit {
     });
   }
 
-  ngOnInit() {
-    this.dataSource = new RecipeListDatasource(this.productGroupFilter, this.data, this.paginator, this.sort);
-    // this.dataSource = new RecipeListDatasource(this.validFromFilter, this.validTillFilter, this.productGroupFilter, this.data);
-    this.route.data.subscribe((value) => {
-      const data = value as { list: Recipe[]; productGroups: ProductGroup[]; periods: Period[] };
-      this.productGroups = data.productGroups;
-      this.periods = data.periods;
-      const period = this.periods.find((x) => x.id === this.route.snapshot.queryParamMap.get('p')) || this.periods[0];
-
-      this.form.setValue({
-        period: period,
-        productGroup: '',
-      });
-      this.data.next(data.list);
-    });
+  filterProductGroup(val: string) {
+    this.model.update((m) => ({ ...m, productGroup: val }));
   }
 
-  filterProductGroup(val: string) {
-    this.productGroupFilter.next(val || '');
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/recipe/recipe-photo.ts b/overlord/src/app/recipe/recipe-photo.ts
new file mode 100644
index 00000000..73fe3933
--- /dev/null
+++ b/overlord/src/app/recipe/recipe-photo.ts
@@ -0,0 +1,13 @@
+export interface RecipePhoto {
+  /** DbImage id */
+  id?: string;
+  orderIndex: number;
+  caption: string;
+
+  /**
+   * For GET responses these are URLs (e.g. /db-image/{id}/thumbnail).
+   * For POST/PUT these are base64 strings (no data-url header is also OK).
+   */
+  resized?: string | null;
+  thumbnail?: string | null;
+}
diff --git a/overlord/src/app/recipe/recipe-step.ts b/overlord/src/app/recipe/recipe-step.ts
new file mode 100644
index 00000000..038e445c
--- /dev/null
+++ b/overlord/src/app/recipe/recipe-step.ts
@@ -0,0 +1,11 @@
+export type RecipePhase = 'Prep' | 'Cook' | 'Finish' | 'Serve';
+
+export interface RecipeStep {
+  id?: string;
+  orderIndex: number;
+  phase: RecipePhase;
+  title: string;
+  text: string;
+  durationMinutes?: number | null;
+  notes?: string | null;
+}
diff --git a/overlord/src/app/recipe/recipe.resolver.spec.ts b/overlord/src/app/recipe/recipe.resolver.spec.ts
deleted file mode 100644
index 474c17fd..00000000
--- a/overlord/src/app/recipe/recipe.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Recipe } from './recipe';
-import { recipeResolver } from './recipe.resolver';
-
-describe('recipeResolver', () => {
-  const executeResolver: ResolveFn<Recipe> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => recipeResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/recipe/recipe.resolver.ts b/overlord/src/app/recipe/recipe.resolver.ts
deleted file mode 100644
index 7917d847..00000000
--- a/overlord/src/app/recipe/recipe.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Recipe } from './recipe';
-import { RecipeService } from './recipe.service';
-
-export const recipeResolver: ResolveFn<Recipe> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(RecipeService).get(id);
-};
diff --git a/overlord/src/app/recipe/recipe.routes.ts b/overlord/src/app/recipe/recipe.routes.ts
index 6c5bf9d1..75bbf98d 100644
--- a/overlord/src/app/recipe/recipe.routes.ts
+++ b/overlord/src/app/recipe/recipe.routes.ts
@@ -1,12 +1,8 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-import { periodListResolver } from '../period/period-list.resolver';
-import { productGroupListResolver } from '../product-group/product-group-list.resolver';
 import { RecipeDetailComponent } from './recipe-detail/recipe-detail.component';
-import { recipeListResolver } from './recipe-list.resolver';
 import { RecipeListComponent } from './recipe-list/recipe-list.component';
-import { recipeResolver } from './recipe.resolver';
 
 export const routes: Routes = [
   {
@@ -16,11 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Recipes',
     },
-    resolve: {
-      list: recipeListResolver,
-      productGroups: productGroupListResolver,
-      periods: periodListResolver,
-    },
     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
   },
   {
@@ -30,10 +21,6 @@ export const routes: Routes = [
     data: {
       permission: 'Recipes',
     },
-    resolve: {
-      item: recipeResolver,
-      periods: periodListResolver,
-    },
   },
   {
     path: ':id',
@@ -42,9 +29,5 @@ export const routes: Routes = [
     data: {
       permission: 'Recipes',
     },
-    resolve: {
-      item: recipeResolver,
-      periods: periodListResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/recipe/recipe.service.ts b/overlord/src/app/recipe/recipe.service.ts
index 2d887aaa..c35a648c 100644
--- a/overlord/src/app/recipe/recipe.service.ts
+++ b/overlord/src/app/recipe/recipe.service.ts
@@ -1,45 +1,42 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable, of as observableOf } from 'rxjs';
+import { HttpClient, httpResource, HttpParams } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
+import { Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { Recipe } from './recipe';
 
 const url = '/api/recipes';
-const serviceName = 'RecipeService';
-
 @Injectable({ providedIn: 'root' })
 export class RecipeService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<Recipe> {
-    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
-    return this.http
-      .get<Recipe>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Recipe>;
+  get(id: Signal<string | null>) {
+    return httpResource<Recipe>(() => {
+      const i = id();
+      return i === null ? `${url}` : `${url}/${i}`;
+    });
   }
 
-  list(periodId: string | null): Observable<Recipe[]> {
-    if (periodId === null) {
-      return observableOf([]);
-    }
-    return this.http
-      .get<Recipe[]>(`${url}/list`, { params: new HttpParams().set('p', periodId) })
-      .pipe(catchError(this.log.handleError(serviceName, 'getList'))) as Observable<Recipe[]>;
+  list(periodId: Signal<string | null>) {
+    return httpResource<Recipe[]>(() => {
+      const p = periodId();
+      if (!p) return undefined;
+      return { url: `${url}/list`, params: new HttpParams().set('p', p) };
+    });
   }
 
   save(recipe: Recipe): Observable<Recipe> {
     return this.http
       .post<Recipe>(`${url}`, recipe)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<Recipe>;
+      .pipe(catchError(this.log.handleError('RecipeService', 'save'))) as Observable<Recipe>;
   }
 
   update(recipe: Recipe): Observable<Recipe> {
     return this.http
       .put<Recipe>(`${url}/${recipe.id}`, recipe)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<Recipe>;
+      .pipe(catchError(this.log.handleError('RecipeService', 'update'))) as Observable<Recipe>;
   }
 
   saveOrUpdate(recipe: Recipe): Observable<Recipe> {
@@ -52,6 +49,6 @@ export class RecipeService {
   delete(id: string): Observable<Recipe> {
     return this.http
       .delete<Recipe>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<Recipe>;
+      .pipe(catchError(this.log.handleError('RecipeService', 'delete'))) as Observable<Recipe>;
   }
 }
diff --git a/overlord/src/app/recipe/recipe.ts b/overlord/src/app/recipe/recipe.ts
index 559d57b3..b35bb447 100644
--- a/overlord/src/app/recipe/recipe.ts
+++ b/overlord/src/app/recipe/recipe.ts
@@ -1,5 +1,7 @@
 import { ProductSku } from '../core/product-sku';
 import { RecipeItem } from './recipe-item';
+import { RecipePhoto } from './recipe-photo';
+import { RecipeStep } from './recipe-step';
 
 export class Recipe {
   id: string | undefined;
@@ -11,10 +13,20 @@ export class Recipe {
   sku: ProductSku;
   recipeYield: number;
   notes: string;
-  items: RecipeItem[];
+
+  // Ingredients (renamed from legacy "items")
+  ingredients: RecipeItem[];
+
+  steps: RecipeStep[];
+  photos: RecipePhoto[];
   units: string | undefined;
   productGroupId: string | undefined;
 
+  // Derived metrics (list view)
+  stepCount?: number;
+  photoCount?: number;
+  totalDurationMinutes?: number;
+
   public constructor(init?: Partial<Recipe>) {
     this.date = '';
     this.source = '';
@@ -24,7 +36,11 @@ export class Recipe {
     this.sku = new ProductSku();
     this.recipeYield = 0;
     this.notes = '';
-    this.items = [];
+
+    this.ingredients = [];
+    this.steps = [];
+    this.photos = [];
+
     Object.assign(this, init);
   }
 }
diff --git a/overlord/src/app/role/role-detail/role-detail.component.html b/overlord/src/app/role/role-detail/role-detail.component.html
index 5f5ca1a5..d970fa09 100644
--- a/overlord/src/app/role/role-detail/role-detail.component.html
+++ b/overlord/src/app/role/role-detail/role-detail.component.html
@@ -1,34 +1,46 @@
 <h2>Role</h2>
 
-<form [formGroup]="form" class="flex flex-col wrapped">
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <form class="flex flex-col wrapped" [formRoot]="form">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput [formField]="form.name" />
+      </mat-form-field>
+    </div>
+    <div class="two-col">
+      <div class="col">
+        <h3>Permissions</h3>
+        @for (p of item().permissions; track p; let i = $index) {
+          <div class="row-container">
+            <mat-checkbox
+              [formField]="form.permissions[i].permission"
+              [disabled]="model().permissions[i].disabled"
+              class="flex-auto"
+              >{{ p.name }}</mat-checkbox
+            >
+          </div>
+        }
+      </div>
+
+      <div class="col">
+        <h3>Includes Roles</h3>
+        @for (r of item().includedRoles; track r; let i = $index) {
+          <div class="row-container">
+            <mat-checkbox [formField]="form.includedRoles[i].role" class="flex-auto">{{ r.name }}</mat-checkbox>
+          </div>
+        }
+      </div>
+    </div>
+  </form>
+
   <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" />
-    </mat-form-field>
+    <button mat-raised-button color="primary" (click)="save()">Save</button>
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
   </div>
-  <div class="two-col">
-    <div formArrayName="permissions" class="col">
-      <h3>Permissions</h3>
-      @for (p of item.permissions; track p; let i = $index) {
-        <div class="row-container" [formGroupName]="i">
-          <mat-checkbox formControlName="permission" class="flex-auto">{{ p.name }}</mat-checkbox>
-        </div>
-      }
-    </div>
-
-    <div formArrayName="includedRoles" class="col">
-      <h3>Includes Roles</h3>
-      @for (r of item.includedRoles; track r; let i = $index) {
-        <div class="row-container" [formGroupName]="i">
-          <mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
-        </div>
-      }
-    </div>
-  </div>
-</form>
-
-<div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()">Save</button>
-  <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-</div>
+}
diff --git a/overlord/src/app/role/role-detail/role-detail.component.ts b/overlord/src/app/role/role-detail/role-detail.component.ts
index 3f0fe251..37350d6f 100644
--- a/overlord/src/app/role/role-detail/role-detail.component.ts
+++ b/overlord/src/app/role/role-detail/role-detail.component.ts
@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild, OnDestroy } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, afterNextRender, effect, input, computed, linkedSignal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
@@ -7,10 +7,11 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Subject, takeUntil } from 'rxjs';
+import { Router } from '@angular/router';
 
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { Role } from '../role';
 import { RoleService } from '../role.service';
 
@@ -18,126 +19,96 @@ import { RoleService } from '../role.service';
   selector: 'app-role-detail',
   templateUrl: './role-detail.component.html',
   styleUrls: ['./role-detail.component.css'],
+
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDividerModule,
     MatCheckboxModule,
     MatButtonModule,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class RoleDetailComponent implements OnInit, AfterViewInit, OnDestroy {
-  private route = inject(ActivatedRoute);
+export class RoleDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
   private ser = inject(RoleService);
 
-  private destroyed$ = new Subject<void>();
+  itemResource = this.ser.get(this.id);
+  item = computed(() => this.itemResource.value() ?? new Role());
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    name: FormControl<string | null>;
-    permissions: FormArray<
-      FormGroup<{
-        permission: FormControl<boolean>;
-      }>
-    >;
-    includedRoles: FormArray<
-      FormGroup<{
-        role: FormControl<boolean>;
-      }>
-    >;
-  }>;
+  model = linkedSignal({
+    source: this.item,
+    computation: (itemVal) => ({
+      name: itemVal.name ?? '',
+      permissions: itemVal.permissions.map((x) => ({
+        permission: x.enabled,
+        disabled: false,
+      })),
+      includedRoles: itemVal.includedRoles.map((x) => ({
+        role: x.enabled,
+      })),
+    }),
+  });
 
-  item: Role = new Role();
+  form = createForm(this.model);
 
   constructor() {
-    this.form = new FormGroup({
-      name: new FormControl<string | null>(null),
-      permissions: new FormArray<FormGroup<{ permission: FormControl<boolean> }>>([]),
-      includedRoles: new FormArray<FormGroup<{ role: FormControl<boolean> }>>([]),
+    afterNextRender(() => {
+      this.form.name().focusBoundControl();
     });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: Role };
-      this.item = data.item;
-
-      this.form.controls.name.setValue(this.item.name);
-      this.form.controls.permissions.clear();
-      this.item.permissions.forEach((x) =>
-        this.form.controls.permissions.push(
-          new FormGroup({
-            permission: new FormControl<boolean>(x.enabled, { nonNullable: true }),
-          }),
-        ),
-      );
-
-      this.form.controls.includedRoles.clear();
-      this.item.includedRoles.forEach((x) =>
-        this.form.controls.includedRoles.push(
-          new FormGroup({
-            role: new FormControl<boolean>(x.enabled, { nonNullable: true }),
-          }),
-        ),
-      );
-
-      // Rebind listeners (important when route data changes)
-      this.destroyed$.next();
-
-      // When included roles change, recompute locks
-      this.form.controls.includedRoles.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe(() => {
-        this.applyIncludedRolePermissionLocks();
-      });
-
-      // Apply initial locks immediately
+    effect(() => {
+      // Track changes to includedRoles explicitly
+      this.model().includedRoles.map((x) => x.role);
       this.applyIncludedRolePermissionLocks();
     });
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
-  ngOnDestroy(): void {
-    this.destroyed$.next();
-    this.destroyed$.complete();
-  }
-
   private applyIncludedRolePermissionLocks(): void {
-    // 1) collect all permission IDs implied by enabled included roles
-    const implied = new Set<string>();
+    this.model.update((currentModel) => {
+      const implied = new Set<string>();
+      const currentItem = this.item();
 
-    this.item.includedRoles.forEach((roleOpt, idx) => {
-      const checked = this.form.controls.includedRoles.at(idx).controls.role.value;
-      if (checked) {
-        (roleOpt.permissionIds || []).forEach((pid) => implied.add(pid));
-      }
-    });
+      currentItem.includedRoles.forEach((roleOpt, idx) => {
+        const checked = currentModel.includedRoles[idx]?.role;
+        if (checked) {
+          (roleOpt.permissionIds || []).forEach((pid) => implied.add(pid));
+        }
+      });
 
-    // 2) apply to permission checkboxes
-    this.item.permissions.forEach((perm, idx) => {
-      const ctrl = this.form.controls.permissions.at(idx).controls.permission;
+      const newPerms = [...currentModel.permissions];
+      let changed = false;
 
-      const isImplied = implied.has(perm.id as string);
-      const isDirect = perm.enabled === true; // from backend: direct assignment
+      currentItem.permissions.forEach((perm, idx) => {
+        const isImplied = implied.has(perm.id as string);
+        const isDirect = perm.enabled === true;
 
-      if (isImplied) {
-        // must be checked + disabled
-        ctrl.setValue(true, { emitEvent: false });
-        ctrl.disable({ emitEvent: false });
-      } else {
-        // not implied -> enable checkbox
-        ctrl.enable({ emitEvent: false });
+        if (!newPerms[idx]) return;
 
-        // restore to direct-enabled state (so user sees what is explicitly on the role)
-        ctrl.setValue(isDirect, { emitEvent: false });
+        if (isImplied) {
+          if (!newPerms[idx].permission || !newPerms[idx].disabled) {
+            newPerms[idx] = { permission: true, disabled: true };
+            changed = true;
+          }
+        } else {
+          if (newPerms[idx].permission !== isDirect || newPerms[idx].disabled) {
+            newPerms[idx] = { permission: isDirect, disabled: false };
+            changed = true;
+          }
+        }
+      });
+
+      if (changed) {
+        return { ...currentModel, permissions: newPerms };
       }
+      return currentModel;
     });
   }
 
@@ -148,19 +119,19 @@ export class RoleDetailComponent implements OnInit, AfterViewInit, OnDestroy {
         this.router.navigateByUrl('/roles');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
+    this.ser.delete(this.item().id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/roles');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -179,24 +150,22 @@ export class RoleDetailComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   getItem(): Role {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    const permArray = this.form.controls.permissions;
-    this.item.permissions.forEach((p, index) => {
-      // If disabled, keep p.enabled as it was originally direct (don’t accidentally mark direct)
-      if (permArray.at(index).controls.permission.disabled) {
-        // leave p.enabled unchanged
+    const formModel = this.model();
+    const currentItem = this.item();
+    currentItem.name = formModel.name ?? '';
+    const permArray = formModel.permissions;
+
+    currentItem.permissions.forEach((p, index) => {
+      if (permArray[index]?.disabled) {
         return;
       }
-      p.enabled = permArray.at(index).controls.permission.value;
+      p.enabled = permArray[index]?.permission ?? false;
     });
-    // this.item.permissions.forEach((item, index) => {
-    //   item.enabled = permArray.controls[index].value.permission ?? false;
-    // });
-    const includeArray = this.form.controls.includedRoles;
-    this.item.includedRoles.forEach((r, index) => {
-      r.enabled = includeArray.controls[index]?.value.role ?? false;
+
+    const includeArray = formModel.includedRoles;
+    currentItem.includedRoles.forEach((r, index) => {
+      r.enabled = includeArray[index]?.role ?? false;
     });
-    return this.item;
+    return currentItem;
   }
 }
diff --git a/overlord/src/app/role/role-list.resolver.spec.ts b/overlord/src/app/role/role-list.resolver.spec.ts
deleted file mode 100644
index 57bf4b33..00000000
--- a/overlord/src/app/role/role-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Role } from './role';
-import { roleListResolver } from './role-list.resolver';
-
-describe('roleListResolver', () => {
-  const executeResolver: ResolveFn<Role[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => roleListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/role/role-list.resolver.ts b/overlord/src/app/role/role-list.resolver.ts
deleted file mode 100644
index 3f670665..00000000
--- a/overlord/src/app/role/role-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Role } from './role';
-import { RoleService } from './role.service';
-
-export const roleListResolver: ResolveFn<Role[]> = () => {
-  return inject(RoleService).list();
-};
diff --git a/overlord/src/app/role/role-list/role-list-datasource.ts b/overlord/src/app/role/role-list/role-list-datasource.ts
deleted file mode 100644
index 06e67262..00000000
--- a/overlord/src/app/role/role-list/role-list-datasource.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { Role } from '../role';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class RoleListDatasource extends DataSource<Role> {
-  constructor(
-    public data: Role[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<Role[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: Role[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: Role[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/role/role-list/role-list.component.html b/overlord/src/app/role/role-list/role-list.component.html
index bd084d44..6e755a65 100644
--- a/overlord/src/app/role/role-list/role-list.component.html
+++ b/overlord/src/app/role/role-list/role-list.component.html
@@ -6,52 +6,58 @@
   </a>
 </h2>
 
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="['/roles', row.id]">{{ row.name }}</a></mat-cell
-    >
-  </ng-container>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (listResource.error()) {
+  <app-error-state [message]="'Failed to load roles.'" (retryAction)="listResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="['/roles', row.id]">{{ row.name }}</a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Included Roles Column -->
-  <ng-container matColumnDef="includedRoles">
-    <mat-header-cell *matHeaderCellDef>Includes</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      @if (row.includedRoles?.length) {
+    <!-- Included Roles Column -->
+    <ng-container matColumnDef="includedRoles">
+      <mat-header-cell *matHeaderCellDef>Includes</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        @if (row.includedRoles?.length) {
+          <ul>
+            @for (r of row.includedRoles; track r) {
+              <li>{{ r }}</li>
+            }
+          </ul>
+        } @else {
+          <span>-</span>
+        }
+      </mat-cell>
+    </ng-container>
+
+    <!-- Permissions Column -->
+    <ng-container matColumnDef="permissions">
+      <mat-header-cell *matHeaderCellDef>Permissions</mat-header-cell>
+      <mat-cell *matCellDef="let row">
         <ul>
-          @for (r of row.includedRoles; track r) {
-            <li>{{ r }}</li>
+          @for (permission of row.permissions; track permission) {
+            <li>{{ permission }}</li>
           }
         </ul>
-      } @else {
-        <span>-</span>
-      }
-    </mat-cell>
-  </ng-container>
+      </mat-cell>
+    </ng-container>
 
-  <!-- Permissions Column -->
-  <ng-container matColumnDef="permissions">
-    <mat-header-cell *matHeaderCellDef>Permissions</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        @for (permission of row.permissions; track permission) {
-          <li>{{ permission }}</li>
-        }
-      </ul>
-    </mat-cell>
-  </ng-container>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
-
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="list().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/role/role-list/role-list.component.ts b/overlord/src/app/role/role-list/role-list.component.ts
index 4e77d4a5..999190a9 100644
--- a/overlord/src/app/role/role-list/role-list.component.ts
+++ b/overlord/src/app/role/role-list/role-list.component.ts
@@ -1,35 +1,79 @@
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { Component, inject, signal, computed } from '@angular/core';
+import { MatButton } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
-import { Role } from '../role';
-import { RoleListDatasource } from './role-list-datasource';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { RoleService } from '../role.service';
 
 @Component({
   selector: 'app-role-list',
   templateUrl: './role-list.component.html',
   styleUrls: ['./role-list.component.css'],
-  imports: [RouterModule, MatIconModule, MatTableModule, MatSortModule, MatPaginatorModule],
-})
-export class RoleListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  list: Role[] = [];
-  dataSource: RoleListDatasource = new RoleListDatasource(this.list, this.paginator, this.sort);
+  imports: [
+    RouterModule,
+    MatButton,
+    MatIconModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
+})
+export class RoleListComponent {
+  private ser = inject(RoleService);
+
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+
+  listResource = this.ser.list();
+  list = computed(() => this.listResource.value() ?? []);
+  sortedList = computed(() => {
+    const data = this.list();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'includedRoles', 'permissions'];
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: Role[] };
-
-      this.list = data.list;
-    });
-    this.dataSource = new RoleListDatasource(this.list, this.paginator, this.sort);
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/role/role.resolver.spec.ts b/overlord/src/app/role/role.resolver.spec.ts
deleted file mode 100644
index d3e556a4..00000000
--- a/overlord/src/app/role/role.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Role } from './role';
-import { roleResolver } from './role.resolver';
-
-describe('roleResolver', () => {
-  const executeResolver: ResolveFn<Role> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => roleResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/role/role.resolver.ts b/overlord/src/app/role/role.resolver.ts
deleted file mode 100644
index fc621d81..00000000
--- a/overlord/src/app/role/role.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Role } from './role';
-import { RoleService } from './role.service';
-
-export const roleResolver: ResolveFn<Role> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(RoleService).get(id);
-};
diff --git a/overlord/src/app/role/role.routes.ts b/overlord/src/app/role/role.routes.ts
index 7b34ab79..f2ff5850 100644
--- a/overlord/src/app/role/role.routes.ts
+++ b/overlord/src/app/role/role.routes.ts
@@ -2,9 +2,7 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { RoleDetailComponent } from './role-detail/role-detail.component';
-import { roleListResolver } from './role-list.resolver';
 import { RoleListComponent } from './role-list/role-list.component';
-import { roleResolver } from './role.resolver';
 
 export const routes: Routes = [
   {
@@ -14,9 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Users',
     },
-    resolve: {
-      list: roleListResolver,
-    },
   },
   {
     path: 'new',
@@ -25,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Users',
     },
-    resolve: {
-      item: roleResolver,
-    },
   },
   {
     path: ':id',
@@ -36,8 +28,5 @@ export const routes: Routes = [
     data: {
       permission: 'Users',
     },
-    resolve: {
-      item: roleResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/role/role.service.ts b/overlord/src/app/role/role.service.ts
index eb407d4b..05f380dd 100644
--- a/overlord/src/app/role/role.service.ts
+++ b/overlord/src/app/role/role.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { Role } from './role';
 
 const url = '/api/roles';
-const serviceName = 'RoleService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,29 +14,27 @@ export class RoleService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<Role> {
-    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
-    return this.http
-      .get<Role>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Role>;
+  get(id: Signal<string | null>) {
+    return httpResource<Role>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<Role[]> {
-    return this.http
-      .get<Role[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Role[]>;
+  list() {
+    return httpResource<Role[]>(() => `${url}/list`);
   }
 
   save(role: Role): Observable<Role> {
     return this.http
       .post<Role>(`${url}`, role)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<Role>;
+      .pipe(catchError(this.log.handleError('RoleService', 'save'))) as Observable<Role>;
   }
 
   update(role: Role): Observable<Role> {
     return this.http
       .put<Role>(`${url}/${role.id}`, role)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<Role>;
+      .pipe(catchError(this.log.handleError('RoleService', 'update'))) as Observable<Role>;
   }
 
   saveOrUpdate(role: Role): Observable<Role> {
@@ -51,6 +47,6 @@ export class RoleService {
   delete(id: string): Observable<Role> {
     return this.http
       .delete<Role>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<Role>;
+      .pipe(catchError(this.log.handleError('RoleService', 'delete'))) as Observable<Role>;
   }
 }
diff --git a/overlord/src/app/settings/lock-datasource.ts b/overlord/src/app/settings/lock-datasource.ts
deleted file mode 100644
index ce69922e..00000000
--- a/overlord/src/app/settings/lock-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { LockInfo } from './lock-info';
-
-export class LockDataSource extends DataSource<LockInfo> {
-  constructor(private data: Observable<LockInfo[]>) {
-    super();
-  }
-
-  connect(): Observable<LockInfo[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/settings/lock-information.resolver.ts b/overlord/src/app/settings/lock-information.resolver.ts
deleted file mode 100644
index e66b021c..00000000
--- a/overlord/src/app/settings/lock-information.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { LockInfo } from './lock-info';
-import { SettingsService } from './settings.service';
-
-export const lockInformationResolver: ResolveFn<[LockInfo]> = () => {
-  return inject(SettingsService).getLockInformation();
-};
diff --git a/overlord/src/app/settings/maintenance.resolver.ts b/overlord/src/app/settings/maintenance.resolver.ts
deleted file mode 100644
index b35cc47a..00000000
--- a/overlord/src/app/settings/maintenance.resolver.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { SettingsService } from './settings.service';
-
-export const maintenanceResolver: ResolveFn<{ enabled: boolean; user: string }> = () => {
-  return inject(SettingsService).getMaintenance();
-};
diff --git a/overlord/src/app/settings/settings.component.html b/overlord/src/app/settings/settings.component.html
index 5d8733d5..a45508fa 100644
--- a/overlord/src/app/settings/settings.component.html
+++ b/overlord/src/app/settings/settings.component.html
@@ -1,64 +1,68 @@
 <mat-tab-group>
   <mat-tab label="Lock Dates">
-    <form [formGroup]="lockInfoForm" class="flex flex-col">
+    <form class="flex flex-col" [formRoot]="lockInfoForm">
       <div class="row-container">
-        <mat-checkbox formControlName="lockOlder" class="flex-auto basis-1-5">Lock Older</mat-checkbox>
-        @if (lockOlder) {
-          <mat-checkbox formControlName="olderRolling" class="flex-auto basis-1-5"> Is Rolling </mat-checkbox>
+        <mat-checkbox [formField]="lockInfoForm.lockOlder" class="flex-auto basis-1-5">Lock Older</mat-checkbox>
+        @if (lockOlder()) {
+          <mat-checkbox [formField]="lockInfoForm.olderRolling" class="flex-auto basis-1-5"> Is Rolling </mat-checkbox>
         }
-        @if (lockOlder && !olderRolling) {
+        @if (lockOlder() && !olderRolling()) {
           <mat-form-field class="flex-auto basis-3-5">
             <mat-label>Date</mat-label>
-            <input matInput [matDatepicker]="olderDate" formControlName="olderDate" autocomplete="off" />
+            <input matInput [matDatepicker]="olderDate" [formField]="lockInfoForm.olderDate" autocomplete="off" />
             <mat-datepicker-toggle matSuffix [for]="olderDate"></mat-datepicker-toggle>
             <mat-datepicker #olderDate></mat-datepicker>
           </mat-form-field>
         }
-        @if (lockOlder && olderRolling) {
+        @if (lockOlder() && olderRolling()) {
           <mat-form-field class="flex-auto basis-3-5">
             <mat-label>Days</mat-label>
-            <input matInput formControlName="olderDays" autocomplete="off" />
+            <input matInput type="number" [formField]="lockInfoForm.olderDays" autocomplete="off" />
           </mat-form-field>
         }
       </div>
       <div class="row-container">
-        <mat-checkbox formControlName="lockNewer" class="flex-auto basis-1-5">Lock Newer</mat-checkbox>
-        @if (lockNewer) {
-          <mat-checkbox formControlName="newerRolling" class="flex-auto basis-1-5"> Is Rolling </mat-checkbox>
+        <mat-checkbox [formField]="lockInfoForm.lockNewer" class="flex-auto basis-1-5">Lock Newer</mat-checkbox>
+        @if (lockNewer()) {
+          <mat-checkbox [formField]="lockInfoForm.newerRolling" class="flex-auto basis-1-5"> Is Rolling </mat-checkbox>
         }
-        @if (lockNewer && !newerRolling) {
+        @if (lockNewer() && !newerRolling()) {
           <mat-form-field class="flex-auto basis-3-5">
-            <input
-              matInput
-              [matDatepicker]="newerDate"
-              placehnewer="Date"
-              formControlName="newerDate"
-              autocomplete="off"
-            />
+            <mat-label>Date</mat-label>
+            <input matInput [matDatepicker]="newerDate" [formField]="lockInfoForm.newerDate" autocomplete="off" />
             <mat-datepicker-toggle matSuffix [for]="newerDate"></mat-datepicker-toggle>
             <mat-datepicker #newerDate></mat-datepicker>
           </mat-form-field>
         }
-        @if (lockNewer && newerRolling) {
+        @if (lockNewer() && newerRolling()) {
           <mat-form-field class="flex-auto basis-3-5">
-            <input matInput placehnewer="Days" formControlName="newerDays" autocomplete="off" />
+            <mat-label>Days</mat-label>
+            <input matInput type="number" [formField]="lockInfoForm.newerDays" autocomplete="off" />
           </mat-form-field>
         }
       </div>
       <div class="row-container">
-        <div formArrayName="accountTypes">
+        <div>
           <h3>Account Types</h3>
-          @for (at of accountTypes; track at; let i = $index) {
-            <div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
-              <mat-checkbox formControlName="accountType" class="flex-auto">{{ at.name }}</mat-checkbox>
+          @for (at of accountTypes(); track at; let i = $index) {
+            <div class="flex flex-row justify-around content-start items-start">
+              @if (lockInfoForm.accountTypes[i]) {
+                <mat-checkbox [formField]="lockInfoForm.accountTypes[i].accountType" class="flex-auto">{{
+                  at.name
+                }}</mat-checkbox>
+              }
             </div>
           }
         </div>
-        <div formArrayName="voucherTypes">
+        <div>
           <h3>Voucher Types</h3>
-          @for (vt of voucherTypes; track vt; let j = $index) {
-            <div [formGroupName]="j" class="flex flex-row justify-around content-start items-start">
-              <mat-checkbox formControlName="voucherType" class="flex-auto">{{ vt.name }}</mat-checkbox>
+          @for (vt of voucherTypes(); track vt; let j = $index) {
+            <div class="flex flex-row justify-around content-start items-start">
+              @if (lockInfoForm.voucherTypes[j]) {
+                <mat-checkbox [formField]="lockInfoForm.voucherTypes[j].voucherType" class="flex-auto">{{
+                  vt.name
+                }}</mat-checkbox>
+              }
             </div>
           }
         </div>
@@ -66,23 +70,23 @@
       <div class="row-container">
         <mat-form-field class="flex-auto basis-30">
           <mat-label>Valid From</mat-label>
-          <input matInput [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
+          <input matInput [matDatepicker]="validFrom" [formField]="lockInfoForm.validFrom" autocomplete="off" />
           <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
           <mat-datepicker #validFrom></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-30">
           <mat-label>Valid Till</mat-label>
-          <input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
+          <input matInput [matDatepicker]="validTill" [formField]="lockInfoForm.validTill" autocomplete="off" />
           <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
           <mat-datepicker #validTill></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1-5">
           <mat-label>Index</mat-label>
-          <input type="text" matInput formControlName="index" autocomplete="off" />
+          <input type="number" matInput [formField]="lockInfoForm.index" autocomplete="off" />
         </mat-form-field>
         <button mat-raised-button color="primary" (click)="saveLock()" class="flex-auto basis-1-5">Add</button>
       </div>
-      <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
+      <mat-table #table [dataSource]="this.lockInformation()">
         <!-- Index Column -->
         <ng-container matColumnDef="index">
           <mat-header-cell *matHeaderCellDef>Index</mat-header-cell>
@@ -149,7 +153,7 @@
     </form>
   </mat-tab>
   <mat-tab label="Rebase Data">
-    <form [formGroup]="rebaseDataForm" class="flex flex-col">
+    <form class="flex flex-col" [formRoot]="rebaseDataForm">
       <div class="row-container">
         <mat-form-field class="flex-auto basis-4-5">
           <mat-label>Date</mat-label>
@@ -157,7 +161,7 @@
             matInput
             [matDatepicker]="rebaseDataDate"
             (focus)="rebaseDataDate.open()"
-            formControlName="date"
+            [formField]="rebaseDataForm.date"
             autocomplete="off"
           />
           <mat-datepicker-toggle matSuffix [for]="rebaseDataDate"></mat-datepicker-toggle>
@@ -169,23 +173,23 @@
     </form>
   </mat-tab>
   <mat-tab label="Maintenance Mode">
-    @if (maintenance.enabled) {
+    @if (maintenance().enabled) {
       <div class="row-container">
-        Maintenance mode is <strong>ENABLED</strong> by user <strong>{{ maintenance.user }}</strong
+        Maintenance mode is <strong>ENABLED</strong> by user <strong>{{ maintenance().user }}</strong
         >.
       </div>
     }
-    @if (!maintenance.enabled) {
+    @if (!maintenance().enabled) {
       <div class="row-container">Maintenance mode is <strong>DISABLED</strong>.</div>
     }
 
     <button
       mat-raised-button
-      [color]="maintenance.enabled ? 'warn' : 'primary'"
+      [color]="maintenance().enabled ? 'warn' : 'primary'"
       (click)="toggleMaintenance()"
       class="flex-auto"
     >
-      {{ maintenance.enabled ? 'Disable' : 'Enable' }}
+      {{ maintenance().enabled ? 'Disable' : 'Enable' }}
     </button>
   </mat-tab>
 </mat-tab-group>
diff --git a/overlord/src/app/settings/settings.component.ts b/overlord/src/app/settings/settings.component.ts
index 71461b03..2068faae 100644
--- a/overlord/src/app/settings/settings.component.ts
+++ b/overlord/src/app/settings/settings.component.ts
@@ -1,5 +1,5 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { signal, computed, linkedSignal, Component, inject } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -11,17 +11,33 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject } from 'rxjs';
 
+import { AccountTypeService } from '../account/account-type.service';
 import { environment } from '../app.environment';
 import { AuthService } from '../auth/auth.service';
 import { AccountType } from '../core/account-type';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
-import { LockDataSource } from './lock-datasource';
 import { LockInfo } from './lock-info';
 import { SettingsService } from './settings.service';
+import { VoucherTypeService } from './voucher-type.service';
+
+export interface LockInfoFormData {
+  validFrom: moment.Moment | null;
+  validTill: moment.Moment | null;
+  index: number;
+  lockOlder: boolean;
+  olderRolling: boolean;
+  olderDate: moment.Moment;
+  olderDays: number;
+  lockNewer: boolean;
+  newerRolling: boolean;
+  newerDate: moment.Moment;
+  newerDays: number;
+  accountTypes: { accountType: boolean }[];
+  voucherTypes: { voucherType: boolean }[];
+}
 
 @Component({
   selector: 'app-settings',
@@ -29,8 +45,8 @@ import { SettingsService } from './settings.service';
   styleUrls: ['./settings.component.css'],
   imports: [
     MatTabsModule,
-
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatCheckboxModule,
     MatFormFieldModule,
     MatInputModule,
@@ -41,173 +57,113 @@ import { SettingsService } from './settings.service';
     MatIconModule,
   ],
 })
-export class SettingsComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class SettingsComponent {
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   auth = inject(AuthService);
   private ser = inject(SettingsService);
+  private accTypeSer = inject(AccountTypeService);
+  private voucherTypeSer = inject(VoucherTypeService);
 
-  public lockObservable = new BehaviorSubject<LockInfo[]>([]);
-  dataSource: LockDataSource = new LockDataSource(this.lockObservable);
+  maintenanceResource = this.ser.getMaintenance();
+  lockInformationResource = this.ser.getLockInformation();
+  accountTypesResource = this.accTypeSer.list();
+  voucherTypesResource = this.voucherTypeSer.list();
 
-  accountTypes: AccountType[] = [];
-  voucherTypes: AccountType[] = [];
+  accountTypes = computed(() => this.accountTypesResource.value() ?? []);
+  voucherTypes = computed(() => this.voucherTypesResource.value() ?? []);
 
-  lockInfoForm: FormGroup<{
-    validFrom: FormControl<moment.Moment | null>;
-    validTill: FormControl<moment.Moment | null>;
-    index: FormControl<number>;
-    lockOlder: FormControl<boolean>;
-    olderRolling: FormControl<boolean>;
-    olderDate: FormControl<moment.Moment | null>;
-    olderDays: FormControl<number | null>;
-    lockNewer: FormControl<boolean>;
-    newerRolling: FormControl<boolean>;
-    newerDate: FormControl<moment.Moment | null>;
-    newerDays: FormControl<number | null>;
-    accountTypes: FormArray<FormGroup<{ accountType: FormControl<boolean> }>>;
-    voucherTypes: FormArray<FormGroup<{ voucherType: FormControl<boolean> }>>;
-  }>;
+  lockInfoSource = computed(() => ({
+    accTypes: this.accountTypes(),
+    vchTypes: this.voucherTypes(),
+  }));
 
-  lockInformation: LockInfo[];
-  lockOlder = false;
-  olderRolling = false;
-  lockNewer = false;
-  newerRolling = false;
+  lockInfoModel = linkedSignal({
+    source: this.lockInfoSource,
+    computation: (s): LockInfoFormData => ({
+      validFrom: null as moment.Moment | null,
+      validTill: null as moment.Moment | null,
+      index: 0,
+      lockOlder: false,
+      olderRolling: false,
+      olderDate: moment().date(moment().date(1).daysInMonth()),
+      olderDays: 0,
+      lockNewer: false,
+      newerRolling: false,
+      newerDate: moment().date(moment().date(1).daysInMonth()),
+      newerDays: 0,
+      accountTypes: s.accTypes.map(() => ({ accountType: false })),
+      voucherTypes: s.vchTypes.map(() => ({ voucherType: false })),
+    }),
+  });
 
-  rebaseDataForm: FormGroup<{
-    date: FormControl<moment.Moment>;
-  }>;
+  lockInfoForm = createForm(this.lockInfoModel);
 
-  maintenance: { enabled: boolean; user: string };
+  lockInformation = linkedSignal<LockInfo[]>(() => this.lockInformationResource.value() ?? []);
+
+  lockOlder = computed(() => this.lockInfoModel().lockOlder);
+  olderRolling = computed(() => this.lockInfoModel().olderRolling);
+  lockNewer = computed(() => this.lockInfoModel().lockNewer);
+  newerRolling = computed(() => this.lockInfoModel().newerRolling);
+
+  rebaseDataModel = signal({
+    date: moment(),
+  });
+
+  rebaseDataForm = createForm(this.rebaseDataModel);
+
+  maintenance = linkedSignal(() => this.maintenanceResource.value() ?? { enabled: false, user: '' });
 
   displayedColumns = ['index', 'validity', 'voucherTypes', 'accountTypes', 'lock', 'action'];
 
   version: string;
 
   constructor() {
-    const startDate = moment().date(1);
-    const finishDate = moment().date(startDate.daysInMonth());
-    this.lockInfoForm = new FormGroup({
-      validFrom: new FormControl<moment.Moment | null>(null),
-      validTill: new FormControl<moment.Moment | null>(null),
-      index: new FormControl<number>(0, { nonNullable: true }),
-      lockOlder: new FormControl<boolean>(false, { nonNullable: true }),
-      olderRolling: new FormControl<boolean>(false, { nonNullable: true }),
-      olderDate: new FormControl<moment.Moment | null>(finishDate),
-      olderDays: new FormControl<number | null>(0),
-      lockNewer: new FormControl<boolean>(false, { nonNullable: true }),
-      newerRolling: new FormControl<boolean>(false, { nonNullable: true }),
-      newerDate: new FormControl<moment.Moment | null>(finishDate),
-      newerDays: new FormControl<number | null>(0),
-      accountTypes: new FormArray<FormGroup<{ accountType: FormControl<boolean> }>>([]),
-      voucherTypes: new FormArray<FormGroup<{ voucherType: FormControl<boolean> }>>([]),
-    });
-    this.lockInformation = [];
-    this.rebaseDataForm = new FormGroup({
-      date: new FormControl<moment.Moment>(moment(), { nonNullable: true }),
-    });
-
-    this.listenToLockForm();
-    this.maintenance = { enabled: false, user: '' };
     this.version = environment.version;
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as {
-        maintenance: { enabled: boolean; user: string };
-        lockInformation: [LockInfo];
-        accountTypes: AccountType[];
-        voucherTypes: AccountType[];
-      };
-      this.accountTypes = data.accountTypes;
-      this.voucherTypes = data.voucherTypes;
-      this.initLockAccountVoucherTypes();
-      this.showLockInformation(data.lockInformation);
-      this.maintenance = data.maintenance;
-    });
-  }
-
-  initLockAccountVoucherTypes() {
-    this.lockInfoForm.controls.accountTypes.clear();
-    this.accountTypes.forEach(() =>
-      this.lockInfoForm.controls.accountTypes.push(
-        new FormGroup({
-          accountType: new FormControl<boolean>(false, { nonNullable: true }),
-        }),
-      ),
-    );
-    this.lockInfoForm.controls.voucherTypes.clear();
-    this.voucherTypes.forEach(() =>
-      this.lockInfoForm.controls.voucherTypes.push(
-        new FormGroup({
-          voucherType: new FormControl<boolean>(false, { nonNullable: true }),
-        }),
-      ),
-    );
-  }
-
   showLockInformation(info: LockInfo[]) {
-    this.lockInformation = info;
-    this.dataSource = new LockDataSource(this.lockObservable);
-    this.lockObservable.next(this.lockInformation);
-  }
-
-  listenToLockForm() {
-    this.lockInfoForm.controls.lockOlder.valueChanges.subscribe((x) => {
-      this.lockOlder = x;
-    });
-    this.lockInfoForm.controls.lockNewer.valueChanges.subscribe((x) => {
-      this.lockNewer = x;
-    });
-    this.lockInfoForm.controls.olderRolling.valueChanges.subscribe((x) => {
-      this.olderRolling = x;
-    });
-    this.lockInfoForm.controls.newerRolling.valueChanges.subscribe((x) => {
-      this.newerRolling = x;
-    });
+    this.lockInformation.set(info);
   }
 
   saveLock() {
     const item = new LockInfo();
-    if (this.lockOlder && this.olderRolling) {
-      item.start.days = this.lockInfoForm.value.olderDays ?? 0;
-    } else if (this.lockOlder && !this.olderRolling) {
-      item.start.date = (this.lockInfoForm.value.olderDate ?? moment()).format('DD-MMM-YYYY');
+    const model = this.lockInfoModel();
+    if (this.lockOlder() && this.olderRolling()) {
+      item.start.days = model.olderDays ?? 0;
+    } else if (this.lockOlder() && !this.olderRolling()) {
+      item.start.date = (model.olderDate ?? moment()).format('DD-MMM-YYYY');
     }
-    if (this.lockNewer && this.newerRolling) {
-      item.finish.days = this.lockInfoForm.value.newerDays ?? 0;
+    if (this.lockNewer() && this.newerRolling()) {
+      item.finish.days = model.newerDays ?? 0;
     }
-    if (this.lockNewer && !this.newerRolling) {
-      item.finish.date = (this.lockInfoForm.value.newerDate ?? moment()).format('DD-MMM-YYYY');
+    if (this.lockNewer() && !this.newerRolling()) {
+      item.finish.date = (model.newerDate ?? moment()).format('DD-MMM-YYYY');
     }
-    const atArray = this.lockInfoForm.controls.accountTypes;
-    this.accountTypes.forEach((at, index) => {
-      if (atArray.controls[index].value.accountType) {
+
+    this.accountTypes().forEach((at: AccountType, index: number) => {
+      if (model.accountTypes[index]?.accountType) {
         item.accountTypes.push({ id: at.id, name: at.name });
       }
     });
 
-    const vtArray = this.lockInfoForm.controls.voucherTypes;
-    this.voucherTypes.forEach((vt, index) => {
-      if (vtArray.controls[index].value.voucherType) {
+    this.voucherTypes().forEach((vt: AccountType, index: number) => {
+      if (model.voucherTypes[index]?.voucherType) {
         item.voucherTypes.push({ id: vt.id, name: vt.name });
       }
     });
 
-    const validFrom = this.lockInfoForm.value.validFrom;
+    const validFrom = model.validFrom;
     if (validFrom) {
       item.validFrom = moment(validFrom).format('DD-MMM-YYYY');
     }
 
-    const validTill = this.lockInfoForm.value.validTill;
+    const validTill = model.validTill;
     if (validTill) {
       item.validTill = moment(validTill).format('DD-MMM-YYYY');
     }
-    item.index = this.lockInfoForm.value.index ?? 0;
+    item.index = model.index ?? 0;
 
     this.ser.setLockInformation(item).subscribe({
       next: (result) => {
@@ -215,7 +171,7 @@ export class SettingsComponent implements OnInit {
         this.snackBar.open('Lock information Updated', 'Success');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -227,7 +183,7 @@ export class SettingsComponent implements OnInit {
   }
 
   confirmRebase(): void {
-    const rebaseDate = (this.rebaseDataForm.value.date ?? moment()).format('DD-MMM-YYYY');
+    const rebaseDate = (this.rebaseDataModel().date ?? moment()).format('DD-MMM-YYYY');
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
       width: '250px',
       data: {
@@ -249,14 +205,14 @@ export class SettingsComponent implements OnInit {
         this.snackBar.open('Data has been rebased!', 'Success');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   toggleMaintenance() {
-    this.ser.setMaintenance(!this.maintenance.enabled).subscribe((x) => {
-      this.maintenance = x;
+    this.ser.setMaintenance(!this.maintenance().enabled).subscribe((x) => {
+      this.maintenance.set(x);
     });
   }
 }
diff --git a/overlord/src/app/settings/settings.routes.ts b/overlord/src/app/settings/settings.routes.ts
index 42a8caac..eca57b00 100644
--- a/overlord/src/app/settings/settings.routes.ts
+++ b/overlord/src/app/settings/settings.routes.ts
@@ -1,11 +1,7 @@
 import { Routes } from '@angular/router';
 
-import { accountTypeResolver } from '../account/account-type.resolver';
 import { authGuard } from '../auth/auth-guard.service';
-import { lockInformationResolver } from './lock-information.resolver';
-import { maintenanceResolver } from './maintenance.resolver';
 import { SettingsComponent } from './settings.component';
-import { voucherTypeResolver } from './voucher-type.resolver';
 
 export const routes: Routes = [
   {
@@ -15,12 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Maintenance', // 'Lock Date'
     },
-    resolve: {
-      maintenance: maintenanceResolver,
-      lockInformation: lockInformationResolver,
-      accountTypes: accountTypeResolver,
-      voucherTypes: voucherTypeResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/settings/settings.service.ts b/overlord/src/app/settings/settings.service.ts
index 9a3430b7..6bc760d2 100644
--- a/overlord/src/app/settings/settings.service.ts
+++ b/overlord/src/app/settings/settings.service.ts
@@ -1,4 +1,4 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, httpResource } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
@@ -6,66 +6,57 @@ import { catchError } from 'rxjs/operators';
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { LockInfo } from './lock-info';
 
-const serviceName = 'SettingsService';
-
 @Injectable({ providedIn: 'root' })
 export class SettingsService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  getLockInformation(): Observable<[LockInfo]> {
+  getLockInformation() {
     const url = '/api/lock-information';
-    return this.http
-      .get<[LockInfo]>(url)
-      .pipe(catchError(this.log.handleError(serviceName, 'getLockInformation'))) as Observable<[LockInfo]>;
+    return httpResource<[LockInfo]>(() => url);
   }
 
   setLockInformation(lockInformation: LockInfo): Observable<LockInfo[]> {
     const url = '/api/lock-information';
     return this.http
       .post<LockInfo[]>(url, lockInformation)
-      .pipe(catchError(this.log.handleError(serviceName, 'setLockInformation'))) as Observable<LockInfo[]>;
+      .pipe(catchError(this.log.handleError('SettingsService', 'setLockInformation'))) as Observable<LockInfo[]>;
   }
 
   deleteLockInformation(id: string): Observable<LockInfo[]> {
     const url = '/api/lock-information';
     return this.http
       .delete<LockInfo[]>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'deleteLockInformation'))) as Observable<LockInfo[]>;
+      .pipe(catchError(this.log.handleError('SettingsService', 'deleteLockInformation'))) as Observable<LockInfo[]>;
   }
 
   rebaseDatabase(date: string): Observable<Record<string, never>> {
     const url = '/api/rebase';
     return this.http
       .post<Record<string, never>>(`${url}/${date}`, {})
-      .pipe(catchError(this.log.handleError(serviceName, 'rebaseDatabase'))) as Observable<Record<string, never>>;
+      .pipe(catchError(this.log.handleError('SettingsService', 'rebaseDatabase'))) as Observable<Record<string, never>>;
   }
 
   setMaintenance(enable: boolean): Observable<{ enabled: boolean; user: string }> {
     const url = '/api/maintenance';
     return this.http
       .post<{ enabled: boolean; user: string }>(url, { enabled: enable })
-      .pipe(catchError(this.log.handleError(serviceName, 'setMaintenance'))) as Observable<{
+      .pipe(catchError(this.log.handleError('SettingsService', 'setMaintenance'))) as Observable<{
       enabled: boolean;
       user: string;
     }>;
   }
 
-  getMaintenance(): Observable<{ enabled: boolean; user: string }> {
+  getMaintenance() {
     const url = '/api/maintenance';
-    return this.http
-      .get<{ enabled: boolean; user: string }>(url)
-      .pipe(catchError(this.log.handleError(serviceName, 'getMaintenance'))) as Observable<{
-      enabled: boolean;
-      user: string;
-    }>;
+    return httpResource<{ enabled: boolean; user: string }>(() => url);
   }
 
   checkDatabaseIntegrity(): Observable<{ attendanceCount: number }> {
     const url = '/api/db-integrity';
     return this.http
       .post<{ attendanceCount: number }>(url, {})
-      .pipe(catchError(this.log.handleError(serviceName, 'checkDatabaseIntegrity'))) as Observable<{
+      .pipe(catchError(this.log.handleError('SettingsService', 'checkDatabaseIntegrity'))) as Observable<{
       attendanceCount: number;
     }>;
   }
diff --git a/overlord/src/app/settings/voucher-type.resolver.ts b/overlord/src/app/settings/voucher-type.resolver.ts
deleted file mode 100644
index 91543a96..00000000
--- a/overlord/src/app/settings/voucher-type.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { AccountType } from '../core/account-type';
-import { VoucherTypeService } from './voucher-type.service';
-
-export const voucherTypeResolver: ResolveFn<AccountType[]> = () => {
-  return inject(VoucherTypeService).list();
-};
diff --git a/overlord/src/app/settings/voucher-type.service.ts b/overlord/src/app/settings/voucher-type.service.ts
index 916e5937..5f664a23 100644
--- a/overlord/src/app/settings/voucher-type.service.ts
+++ b/overlord/src/app/settings/voucher-type.service.ts
@@ -1,14 +1,10 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, httpResource } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
 
 import { AccountType } from '../core/account-type';
 import { ErrorLoggerService } from '../core/error-logger.service';
 
 const url = '/api/voucher-types';
-const serviceName = 'VoucherTypeService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,9 +12,7 @@ export class VoucherTypeService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(): Observable<AccountType[]> {
-    return this.http.get<AccountType[]>(url).pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<
-      AccountType[]
-    >;
+  list() {
+    return httpResource<AccountType[]>(() => url);
   }
 }
diff --git a/overlord/src/app/shared/error-state/error-state.component.html b/overlord/src/app/shared/error-state/error-state.component.html
new file mode 100644
index 00000000..1d909e43
--- /dev/null
+++ b/overlord/src/app/shared/error-state/error-state.component.html
@@ -0,0 +1,10 @@
+<div class="error-state-container">
+  <div class="error-state-icon">
+    <i class="material-icons">error_outline</i>
+  </div>
+  <h3 class="error-state-title">{{ title() }}</h3>
+  <p class="error-state-message">{{ message() }}</p>
+  <div class="error-state-actions">
+    <button mat-stroked-button color="warn" (click)="onRetry()">Try Again</button>
+  </div>
+</div>
diff --git a/overlord/src/app/shared/error-state/error-state.component.sass b/overlord/src/app/shared/error-state/error-state.component.sass
new file mode 100644
index 00000000..83a38736
--- /dev/null
+++ b/overlord/src/app/shared/error-state/error-state.component.sass
@@ -0,0 +1,33 @@
+.error-state-container
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  padding: 48px 24px
+  text-align: center
+  background-color: #fef2f2
+  border-radius: 8px
+  border: 1px solid #f87171
+
+.error-state-icon
+  font-size: 48px
+  color: #ef4444
+  margin-bottom: 16px
+  i
+    font-size: 48px
+
+.error-state-title
+  font-size: 1.25rem
+  font-weight: 600
+  color: #991b1b
+  margin: 0 0 8px 0
+
+.error-state-message
+  font-size: 0.875rem
+  color: #b91c1c
+  margin: 0 0 24px 0
+  max-width: 400px
+
+.error-state-actions
+  display: flex
+  gap: 12px
diff --git a/overlord/src/app/shared/error-state/error-state.component.spec.ts b/overlord/src/app/shared/error-state/error-state.component.spec.ts
new file mode 100644
index 00000000..515a776c
--- /dev/null
+++ b/overlord/src/app/shared/error-state/error-state.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorStateComponent } from './error-state.component';
+
+describe('ErrorStateComponent', () => {
+  let component: ErrorStateComponent;
+  let fixture: ComponentFixture<ErrorStateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ErrorStateComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ErrorStateComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/overlord/src/app/shared/error-state/error-state.component.ts b/overlord/src/app/shared/error-state/error-state.component.ts
new file mode 100644
index 00000000..b5b51192
--- /dev/null
+++ b/overlord/src/app/shared/error-state/error-state.component.ts
@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'app-error-state',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule],
+  templateUrl: './error-state.component.html',
+  styleUrl: './error-state.component.sass',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ErrorStateComponent {
+  title = input<string>('Something went wrong');
+  message = input<string>('An error occurred while loading the data.');
+  retryAction = output<void>();
+
+  onRetry(): void {
+    this.retryAction.emit();
+  }
+}
diff --git a/overlord/src/app/shared/pdf-export.service.ts b/overlord/src/app/shared/pdf-export.service.ts
new file mode 100644
index 00000000..f2e09820
--- /dev/null
+++ b/overlord/src/app/shared/pdf-export.service.ts
@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
+
+@Injectable({ providedIn: 'root' })
+export class PdfExportService {
+  /**
+   * Exports the given element as an A4 PDF.
+   *
+   * - Uses html2canvas for rendering.
+   * - Uses jsPDF for pagination.
+   */
+  async exportElementAsA4Pdf(element: HTMLElement, filename: string): Promise<void> {
+    // A4 in pt: 595.28 × 841.89
+    const pdf = new jsPDF({
+      orientation: 'p',
+      unit: 'pt',
+      format: 'a4',
+      compress: true,
+    });
+
+    const canvas = await html2canvas(element, {
+      scale: 2,
+      useCORS: true,
+      backgroundColor: '#ffffff',
+      logging: false,
+    });
+
+    const imgData = canvas.toDataURL('image/jpeg', 0.92);
+
+    const pageWidth = pdf.internal.pageSize.getWidth();
+    const pageHeight = pdf.internal.pageSize.getHeight();
+
+    const imgWidth = pageWidth;
+    const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+    let heightLeft = imgHeight;
+    let position = 0;
+
+    pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight);
+    heightLeft -= pageHeight;
+
+    while (heightLeft > 0) {
+      position -= pageHeight;
+      pdf.addPage();
+      pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight);
+      heightLeft -= pageHeight;
+    }
+
+    pdf.save(filename);
+  }
+}
diff --git a/overlord/src/app/shared/skeleton-loader/skeleton-loader.component.html b/overlord/src/app/shared/skeleton-loader/skeleton-loader.component.html
new file mode 100644
index 00000000..d31f742e
--- /dev/null
+++ b/overlord/src/app/shared/skeleton-loader/skeleton-loader.component.html
@@ -0,0 +1,16 @@
+@for (item of iterableCount; track $index) {
+  <div class="skeleton-wrapper" [class]="'skeleton-' + type()">
+    @if (type() === 'table') {
+      <div class="skeleton-header skeleton-pulse"></div>
+      <div class="skeleton-row skeleton-pulse"></div>
+      <div class="skeleton-row skeleton-pulse"></div>
+      <div class="skeleton-row skeleton-pulse"></div>
+    } @else if (type() === 'card') {
+      <div class="skeleton-image skeleton-pulse"></div>
+      <div class="skeleton-text skeleton-pulse"></div>
+      <div class="skeleton-text short skeleton-pulse"></div>
+    } @else {
+      <div class="skeleton-line skeleton-pulse"></div>
+    }
+  </div>
+}
diff --git a/overlord/src/app/shared/skeleton-loader/skeleton-loader.component.sass b/overlord/src/app/shared/skeleton-loader/skeleton-loader.component.sass
new file mode 100644
index 00000000..671aa580
--- /dev/null
+++ b/overlord/src/app/shared/skeleton-loader/skeleton-loader.component.sass
@@ -0,0 +1,52 @@
+.skeleton-wrapper
+  margin-bottom: 16px
+
+.skeleton-pulse
+  background: #e0e0e0
+  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%)
+  background-size: 200% 100%
+  animation: pulse 1.5s infinite linear
+
+@keyframes pulse
+  0%
+    background-position: 200% 0
+  100%
+    background-position: -200% 0
+
+.skeleton-line
+  height: 20px
+  width: 100%
+  border-radius: 4px
+
+.skeleton-table
+  border: 1px solid #e0e0e0
+  border-radius: 8px
+  padding: 16px
+  .skeleton-header
+    height: 40px
+    width: 100%
+    border-radius: 4px
+    margin-bottom: 16px
+  .skeleton-row
+    height: 30px
+    width: 100%
+    border-radius: 4px
+    margin-bottom: 8px
+
+.skeleton-card
+  border: 1px solid #e0e0e0
+  border-radius: 8px
+  padding: 16px
+  display: flex
+  flex-direction: column
+  gap: 12px
+  .skeleton-image
+    height: 150px
+    width: 100%
+    border-radius: 4px
+  .skeleton-text
+    height: 20px
+    width: 100%
+    border-radius: 4px
+  .skeleton-text.short
+    width: 60%
diff --git a/overlord/src/app/shared/skeleton-loader/skeleton-loader.component.spec.ts b/overlord/src/app/shared/skeleton-loader/skeleton-loader.component.spec.ts
new file mode 100644
index 00000000..bf2dbc59
--- /dev/null
+++ b/overlord/src/app/shared/skeleton-loader/skeleton-loader.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SkeletonLoaderComponent } from './skeleton-loader.component';
+
+describe('SkeletonLoaderComponent', () => {
+  let component: SkeletonLoaderComponent;
+  let fixture: ComponentFixture<SkeletonLoaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SkeletonLoaderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SkeletonLoaderComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/overlord/src/app/shared/skeleton-loader/skeleton-loader.component.ts b/overlord/src/app/shared/skeleton-loader/skeleton-loader.component.ts
new file mode 100644
index 00000000..421260e1
--- /dev/null
+++ b/overlord/src/app/shared/skeleton-loader/skeleton-loader.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-skeleton-loader',
+  standalone: true,
+  templateUrl: './skeleton-loader.component.html',
+  styleUrl: './skeleton-loader.component.sass',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SkeletonLoaderComponent {
+  type = input<'table' | 'card' | 'line'>('line');
+  count = input<number>(1);
+
+  get iterableCount(): number[] {
+    return Array(this.count()).fill(0);
+  }
+}
diff --git a/overlord/src/app/shared/spinner/spinner.component.html b/overlord/src/app/shared/spinner/spinner.component.html
new file mode 100644
index 00000000..2ce6bc8a
--- /dev/null
+++ b/overlord/src/app/shared/spinner/spinner.component.html
@@ -0,0 +1,3 @@
+<div class="spinner-container" [style.width.px]="diameter()" [style.height.px]="diameter()">
+  <div class="spinner"></div>
+</div>
diff --git a/overlord/src/app/shared/spinner/spinner.component.sass b/overlord/src/app/shared/spinner/spinner.component.sass
new file mode 100644
index 00000000..78062797
--- /dev/null
+++ b/overlord/src/app/shared/spinner/spinner.component.sass
@@ -0,0 +1,18 @@
+.spinner-container
+  display: flex
+  justify-content: center
+  align-items: center
+
+.spinner
+  width: 100%
+  height: 100%
+  border: 4px solid rgba(0, 0, 0, 0.1)
+  border-left-color: #3f51b5
+  border-radius: 50%
+  animation: spin 1s linear infinite
+
+@keyframes spin
+  0%
+    transform: rotate(0deg)
+  100%
+    transform: rotate(360deg)
diff --git a/overlord/src/app/shared/spinner/spinner.component.spec.ts b/overlord/src/app/shared/spinner/spinner.component.spec.ts
new file mode 100644
index 00000000..bf3ef919
--- /dev/null
+++ b/overlord/src/app/shared/spinner/spinner.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpinnerComponent } from './spinner.component';
+
+describe('SpinnerComponent', () => {
+  let component: SpinnerComponent;
+  let fixture: ComponentFixture<SpinnerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SpinnerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SpinnerComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/overlord/src/app/shared/spinner/spinner.component.ts b/overlord/src/app/shared/spinner/spinner.component.ts
new file mode 100644
index 00000000..a0def5e5
--- /dev/null
+++ b/overlord/src/app/shared/spinner/spinner.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-spinner',
+  standalone: true,
+  templateUrl: './spinner.component.html',
+  styleUrl: './spinner.component.sass',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpinnerComponent {
+  diameter = input<number>(40);
+}
diff --git a/overlord/src/app/stock-movement/stock-movement-datasource.ts b/overlord/src/app/stock-movement/stock-movement-datasource.ts
deleted file mode 100644
index 7bbaaf56..00000000
--- a/overlord/src/app/stock-movement/stock-movement-datasource.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { StockMovementItem } from './stock-movement-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class StockMovementDataSource extends DataSource<StockMovementItem> {
-  constructor(
-    public data: StockMovementItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<StockMovementItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: StockMovementItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: StockMovementItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'group':
-          return compare(a.group, b.group, isAsc);
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        case 'opening':
-          return compare(+a.opening, +b.opening, isAsc);
-        case 'purchase':
-          return compare(+a.purchase, +b.purchase, isAsc);
-        case 'issue':
-          return compare(+a.issue, +b.issue, isAsc);
-        case 'closing':
-          return compare(+a.closing, +b.closing, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/stock-movement/stock-movement.component.html b/overlord/src/app/stock-movement/stock-movement.component.html
index eabc9496..c8117f0d 100644
--- a/overlord/src/app/stock-movement/stock-movement.component.html
+++ b/overlord/src/app/stock-movement/stock-movement.component.html
@@ -1,72 +1,78 @@
 <h2>Stock Movement</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Start Date</mat-label>
-      <input matInput #startDateElement [matDatepicker]="startDate" formControlName="startDate" autocomplete="off" />
+      <input matInput #startDateElement [matDatepicker]="startDate" [formField]="form.startDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
       <mat-datepicker #startDate></mat-datepicker>
     </mat-form-field>
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Finish Date</mat-label>
-      <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
+      <input matInput [matDatepicker]="finishDate" [formField]="form.finishDate" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Group Column -->
-  <ng-container matColumnDef="group">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
-  </ng-container>
+@if (resource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (resource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="resource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Group Column -->
+    <ng-container matColumnDef="group">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.group }}</mat-cell>
+    </ng-container>
 
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <a [routerLink]="row.url" [queryParams]="{ startDate: info.startDate, finishDate: info.finishDate }">
-        {{ row.name }}
-      </a>
-    </mat-cell>
-  </ng-container>
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <a [routerLink]="row.url" [queryParams]="{ startDate: info().startDate, finishDate: info().finishDate }">
+          {{ row.name }}
+        </a>
+      </mat-cell>
+    </ng-container>
 
-  <!-- Opening Column -->
-  <ng-container matColumnDef="opening">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Opening</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.opening | number: '1.2-2' }}</mat-cell>
-  </ng-container>
+    <!-- Opening Column -->
+    <ng-container matColumnDef="opening">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Opening</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.opening | number: '1.2-2' }}</mat-cell>
+    </ng-container>
 
-  <!-- Purchaase Column -->
-  <ng-container matColumnDef="purchase">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Purchase</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.purchase | number: '1.2-2' }}</mat-cell>
-  </ng-container>
+    <!-- Purchaase Column -->
+    <ng-container matColumnDef="purchase">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Purchase</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.purchase | number: '1.2-2' }}</mat-cell>
+    </ng-container>
 
-  <!-- Issue Column -->
-  <ng-container matColumnDef="issue">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Issue</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.issue | number: '1.2-2' }}</mat-cell>
-  </ng-container>
+    <!-- Issue Column -->
+    <ng-container matColumnDef="issue">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Issue</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.issue | number: '1.2-2' }}</mat-cell>
+    </ng-container>
 
-  <!-- Closing Column -->
-  <ng-container matColumnDef="closing">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Closing</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.closing | number: '1.2-2' }}</mat-cell>
-  </ng-container>
+    <!-- Closing Column -->
+    <ng-container matColumnDef="closing">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Closing</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.closing | number: '1.2-2' }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="(this.info().body ?? []).length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/stock-movement/stock-movement.component.ts b/overlord/src/app/stock-movement/stock-movement.component.ts
index 1c80e32c..05cdee32 100644
--- a/overlord/src/app/stock-movement/stock-movement.component.ts
+++ b/overlord/src/app/stock-movement/stock-movement.component.ts
@@ -1,25 +1,34 @@
 import { DecimalPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, computed, linkedSignal, signal, input } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import moment from 'moment';
 
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { StockMovement } from './stock-movement';
-import { StockMovementDataSource } from './stock-movement-datasource';
+import { StockMovementService } from './stock-movement.service';
+
+export interface StockMovementFormData {
+  startDate: Date;
+  finishDate: Date;
+}
 
 @Component({
   selector: 'app-stock-movement',
   templateUrl: './stock-movement.component.html',
   styleUrls: ['./stock-movement.component.css'],
+
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -29,21 +38,67 @@ import { StockMovementDataSource } from './stock-movement-datasource';
     RouterModule,
     MatPaginatorModule,
     DecimalPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class StockMovementComponent implements OnInit {
+export class StockMovementComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  private ser = inject(StockMovementService);
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
-  info: StockMovement = new StockMovement();
-  dataSource: StockMovementDataSource = new StockMovementDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    startDate: FormControl<moment.Moment>;
-    finishDate: FormControl<moment.Moment>;
-  }>;
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
+  resource = this.ser.list(this.startDate, this.finishDate);
+  info = computed(() => this.resource.value() ?? new StockMovement());
+  sortedList = computed(() => {
+    const data = this.info().body ?? [];
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'group':
+          return compare(a.name, b.name, isAsc);
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'opening':
+          return compare(a.opening, b.opening, isAsc);
+        case 'closing':
+          return compare(a.closing, b.closing, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  formModel = linkedSignal({
+    source: this.info,
+    computation: (v): StockMovementFormData => ({
+      startDate: v.startDate ? moment(v.startDate, 'DD-MMM-YYYY').toDate() : new Date(),
+      finishDate: v.finishDate ? moment(v.finishDate, 'DD-MMM-YYYY').toDate() : new Date(),
+    }),
+  });
+
+  form = form(this.formModel);
 
   selectedRowId = '';
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -52,28 +107,7 @@ export class StockMovementComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-    this.startDate.nativeElement.focus();
-    this.startDate.nativeElement.select();
-  }
-
-  constructor() {
-    this.form = new FormGroup({
-      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
-      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: StockMovement };
-
-      this.info = data.info;
-      this.form.setValue({
-        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
-        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new StockMovementDataSource(this.info.body, this.paginator, this.sort);
-    });
+    this.form().focusBoundControl();
   }
 
   show() {
@@ -87,7 +121,7 @@ export class StockMovementComponent implements OnInit {
   }
 
   prepareSubmit(): StockMovement {
-    const formModel = this.form.value;
+    const formModel = this.formModel();
 
     return {
       startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
@@ -95,4 +129,16 @@ export class StockMovementComponent implements OnInit {
       body: [],
     };
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/stock-movement/stock-movement.resolver.spec.ts b/overlord/src/app/stock-movement/stock-movement.resolver.spec.ts
deleted file mode 100644
index 2abdef58..00000000
--- a/overlord/src/app/stock-movement/stock-movement.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { StockMovement } from './stock-movement';
-import { stockMovementResolver } from './stock-movement.resolver';
-
-describe('stockMovementResolver', () => {
-  const executeResolver: ResolveFn<StockMovement> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => stockMovementResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/stock-movement/stock-movement.resolver.ts b/overlord/src/app/stock-movement/stock-movement.resolver.ts
deleted file mode 100644
index d03cc976..00000000
--- a/overlord/src/app/stock-movement/stock-movement.resolver.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { StockMovement } from './stock-movement';
-import { StockMovementService } from './stock-movement.service';
-
-export const stockMovementResolver: ResolveFn<StockMovement> = (route) => {
-  const startDate = route.queryParamMap.get('startDate') || null;
-  const finishDate = route.queryParamMap.get('finishDate') || null;
-  return inject(StockMovementService).list(startDate, finishDate);
-};
diff --git a/overlord/src/app/stock-movement/stock-movement.routes.ts b/overlord/src/app/stock-movement/stock-movement.routes.ts
index 667f4ab2..97f430a1 100644
--- a/overlord/src/app/stock-movement/stock-movement.routes.ts
+++ b/overlord/src/app/stock-movement/stock-movement.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { StockMovementComponent } from './stock-movement.component';
-import { stockMovementResolver } from './stock-movement.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Stock Movement',
     },
-    resolve: {
-      info: stockMovementResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/stock-movement/stock-movement.service.ts b/overlord/src/app/stock-movement/stock-movement.service.ts
index 49b210e7..36f4ad2b 100644
--- a/overlord/src/app/stock-movement/stock-movement.service.ts
+++ b/overlord/src/app/stock-movement/stock-movement.service.ts
@@ -1,14 +1,10 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { HttpClient, httpResource, HttpParams } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { StockMovement } from './stock-movement';
 
 const url = '/api/stock-movement';
-const serviceName = 'StockMovementService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,16 +12,18 @@ export class StockMovementService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(startDate: string | null, finishDate: string | null): Observable<StockMovement> {
-    const options = { params: new HttpParams() };
-    if (startDate !== null) {
-      options.params = options.params.set('s', startDate);
-    }
-    if (finishDate !== null) {
-      options.params = options.params.set('f', finishDate);
-    }
-    return this.http
-      .get<StockMovement>(url, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<StockMovement>;
+  list(startDate: Signal<string | null>, finishDate: Signal<string | null>) {
+    return httpResource<StockMovement>(() => {
+      let params = new HttpParams();
+      const start = startDate();
+      if (start) {
+        params = params.set('s', start);
+      }
+      const finish = finishDate();
+      if (finish) {
+        params = params.set('f', finish);
+      }
+      return { url, params };
+    });
   }
 }
diff --git a/overlord/src/app/tag-dialog/tag-dialog.component.html b/overlord/src/app/tag-dialog/tag-dialog.component.html
index fb37f52d..42ab6e7d 100644
--- a/overlord/src/app/tag-dialog/tag-dialog.component.html
+++ b/overlord/src/app/tag-dialog/tag-dialog.component.html
@@ -1,10 +1,10 @@
 <h1 mat-dialog-title>Choose Tags</h1>
 <div mat-dialog-content>
-  <form [formGroup]="form" class="flex-col">
+  <form class="flex-col" [formRoot]="form">
     <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>Create New</mat-label>
-        <input type="text" matInput formControlName="name" autocomplete="off" />
+        <input type="text" matInput [formField]="form.name" autocomplete="off" />
       </mat-form-field>
     </div>
     @for (t of tags; track t) {
diff --git a/overlord/src/app/tag-dialog/tag-dialog.component.ts b/overlord/src/app/tag-dialog/tag-dialog.component.ts
index 666471f4..a03bc86e 100644
--- a/overlord/src/app/tag-dialog/tag-dialog.component.ts
+++ b/overlord/src/app/tag-dialog/tag-dialog.component.ts
@@ -1,6 +1,6 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { Component, inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, OnInit, linkedSignal } from '@angular/core';
+import { FormField, FormRoot, form as createForm } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
@@ -13,6 +13,10 @@ import { Tag } from '../tag/tag';
 import { TagService } from '../tag/tag.service';
 import { TagList } from './tag-list';
 
+export interface TagDialogFormData {
+  name: string;
+}
+
 @Component({
   selector: 'app-tag-dialog',
   templateUrl: './tag-dialog.component.html',
@@ -21,7 +25,8 @@ import { TagList } from './tag-list';
     CdkScrollableModule,
     MatCheckboxModule,
     MatDialogModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatButtonModule,
@@ -38,20 +43,17 @@ export class TagDialogComponent implements OnInit {
   private ser = inject(TagService);
 
   tags: TagList[] = [];
-  form: FormGroup<{
-    name: FormControl<string | null>;
-  }>;
+  formModel = linkedSignal({
+    source: () => null,
+    computation: (): TagDialogFormData => ({
+      name: '',
+    }),
+  });
 
-  constructor() {
-    this.form = new FormGroup({
-      name: new FormControl(''),
-    });
-  }
+  form = createForm(this.formModel);
 
   ngOnInit() {
-    this.form.patchValue({
-      name: null,
-    });
+    this.formModel.update((m) => ({ ...m, name: '' }));
     console.log(this.data);
 
     this.tags = this.data.tags.map((x) => {
@@ -76,7 +78,7 @@ export class TagDialogComponent implements OnInit {
 
   accept(): void {
     const tags = this.tags.filter((x) => !x.indeterminate).map((x) => ({ name: x.name, enabled: x.checked }));
-    const name = this.form.value.name;
+    const name = this.formModel().name;
     if (name) {
       tags.push({ name: name, enabled: true });
     }
@@ -87,7 +89,7 @@ export class TagDialogComponent implements OnInit {
         this.dialogRef.close(true);
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
diff --git a/overlord/src/app/tag/tag-detail/tag-detail.component.html b/overlord/src/app/tag/tag-detail/tag-detail.component.html
index 22c697c5..1b0e1023 100644
--- a/overlord/src/app/tag/tag-detail/tag-detail.component.html
+++ b/overlord/src/app/tag/tag-detail/tag-detail.component.html
@@ -1,17 +1,24 @@
 <h2>Tag</h2>
 
-<form [formGroup]="form" class="flex flex-col wrapped">
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
-    </mat-form-field>
-  </div>
-</form>
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <form class="flex flex-col wrapped" [formRoot]="form">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput [formField]="form.name" (keyup.enter)="save()" />
+      </mat-form-field>
+    </div>
+  </form>
 
-<div class="row-container">
-  <button mat-raised-button (click)="save()" color="primary" class="">Save</button>
-  @if (!!item.id) {
-    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-  }
-</div>
+  <div class="row-container">
+    <button mat-raised-button (click)="save()" color="primary" class="">Save</button>
+    @if (!!item().id) {
+      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+    }
+  </div>
+}
diff --git a/overlord/src/app/tag/tag-detail/tag-detail.component.ts b/overlord/src/app/tag/tag-detail/tag-detail.component.ts
index 930b22c6..d83bdfca 100644
--- a/overlord/src/app/tag/tag-detail/tag-detail.component.ts
+++ b/overlord/src/app/tag/tag-detail/tag-detail.component.ts
@@ -1,63 +1,63 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, afterNextRender, linkedSignal, input, computed } from '@angular/core';
+import { FormField, FormRoot, form as createForm } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { Tag } from '../tag';
 import { TagService } from '../tag.service';
 
+export interface TagDetailFormData {
+  name: string;
+}
+
 @Component({
   selector: 'app-tag-detail',
   templateUrl: './tag-detail.component.html',
   styleUrls: ['./tag-detail.component.css'],
-  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
+  imports: [
+    FormField,
+    FormRoot,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class TagDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class TagDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
   private ser = inject(TagService);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    name: FormControl<string | null>;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  item: Tag = new Tag();
+  item = computed(() => this.itemResource.value() ?? new Tag());
+
+  formModel = linkedSignal({
+    source: this.item,
+    computation: (itemVal): TagDetailFormData => ({
+      name: itemVal.name ?? '',
+    }),
+  });
+
+  form = createForm(this.formModel, () => {});
 
   constructor() {
-    this.form = new FormGroup({
-      name: new FormControl<string | null>(null),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: Tag };
-
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: Tag) {
-    this.item = item;
-    this.form.setValue({
-      name: this.item.name,
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
@@ -65,19 +65,19 @@ export class TagDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/tags');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
+    this.ser.delete(this.item().id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/tags');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -96,8 +96,9 @@ export class TagDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): Tag {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    return this.item;
+    const formModel = this.formModel();
+    const item = this.item();
+    item.name = formModel.name ?? '';
+    return item;
   }
 }
diff --git a/overlord/src/app/tag/tag-list.resolver.spec.ts b/overlord/src/app/tag/tag-list.resolver.spec.ts
deleted file mode 100644
index a0134cbe..00000000
--- a/overlord/src/app/tag/tag-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Tag } from '../tag/tag';
-import { tagListResolver } from './tag-list.resolver';
-
-describe('tagListResolver', () => {
-  const executeResolver: ResolveFn<Tag[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => tagListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/tag/tag-list.resolver.ts b/overlord/src/app/tag/tag-list.resolver.ts
deleted file mode 100644
index 608d19f0..00000000
--- a/overlord/src/app/tag/tag-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Tag } from './tag';
-import { TagService } from './tag.service';
-
-export const tagListResolver: ResolveFn<Tag[]> = () => {
-  return inject(TagService).list();
-};
diff --git a/overlord/src/app/tag/tag-list/tag-list-datasource.ts b/overlord/src/app/tag/tag-list/tag-list-datasource.ts
deleted file mode 100644
index 28fe0527..00000000
--- a/overlord/src/app/tag/tag-list/tag-list-datasource.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { Tag } from '../tag';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class TagListDataSource extends DataSource<Tag> {
-  constructor(
-    public data: Tag[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<Tag[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: Tag[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: Tag[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/tag/tag-list/tag-list.component.html b/overlord/src/app/tag/tag-list/tag-list.component.html
index fded0937..82e7c12c 100644
--- a/overlord/src/app/tag/tag-list/tag-list.component.html
+++ b/overlord/src/app/tag/tag-list/tag-list.component.html
@@ -6,24 +6,30 @@
   </a>
 </h2>
 
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="['/tags', row.id]">{{ row.name }}</a></mat-cell
-    >
-  </ng-container>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (listResource.error()) {
+  <app-error-state [message]="'Failed to load tags.'" (retryAction)="listResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="['/tags', row.id]">{{ row.name }}</a></mat-cell
+      >
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="list().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/tag/tag-list/tag-list.component.ts b/overlord/src/app/tag/tag-list/tag-list.component.ts
index 9a548b05..b9458844 100644
--- a/overlord/src/app/tag/tag-list/tag-list.component.ts
+++ b/overlord/src/app/tag/tag-list/tag-list.component.ts
@@ -1,36 +1,77 @@
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
-import { Tag } from '../tag';
-import { TagListDataSource } from './tag-list-datasource';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { TagService } from '../tag.service';
 
 @Component({
   selector: 'app-tag-list',
   templateUrl: './tag-list.component.html',
   styleUrls: ['./tag-list.component.css'],
-  imports: [RouterModule, MatIconModule, MatTableModule, MatSortModule, MatPaginatorModule, MatButtonModule],
+  imports: [
+    RouterModule,
+    MatIconModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    MatButtonModule,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class TagListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class TagListComponent {
+  private ser = inject(TagService);
+
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  listResource = this.ser.list();
+  list = computed(() => this.listResource.value() ?? []);
+  sortedList = computed(() => {
+    const data = this.list();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  list: Tag[] = [];
-  dataSource: TagListDataSource = new TagListDataSource(this.list, this.paginator, this.sort);
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name'];
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: Tag[] };
-
-      this.list = data.list;
-    });
-    this.dataSource = new TagListDataSource(this.list, this.paginator, this.sort);
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/tag/tag.resolver.spec.ts b/overlord/src/app/tag/tag.resolver.spec.ts
deleted file mode 100644
index d370de66..00000000
--- a/overlord/src/app/tag/tag.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { Tag } from '../tag/tag';
-import { tagResolver } from './tag.resolver';
-
-describe('tagResolver', () => {
-  const executeResolver: ResolveFn<Tag> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => tagResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/tag/tag.resolver.ts b/overlord/src/app/tag/tag.resolver.ts
deleted file mode 100644
index 68bc8653..00000000
--- a/overlord/src/app/tag/tag.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Tag } from './tag';
-import { TagService } from './tag.service';
-
-export const tagResolver: ResolveFn<Tag> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(TagService).get(id);
-};
diff --git a/overlord/src/app/tag/tag.routes.ts b/overlord/src/app/tag/tag.routes.ts
index 44e6af53..da98da5a 100644
--- a/overlord/src/app/tag/tag.routes.ts
+++ b/overlord/src/app/tag/tag.routes.ts
@@ -2,9 +2,7 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { TagDetailComponent } from './tag-detail/tag-detail.component';
-import { tagListResolver } from './tag-list.resolver';
 import { TagListComponent } from './tag-list/tag-list.component';
-import { tagResolver } from './tag.resolver';
 
 export const routes: Routes = [
   {
@@ -14,9 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Tags',
     },
-    resolve: {
-      list: tagListResolver,
-    },
   },
   {
     path: 'new',
@@ -25,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Tags',
     },
-    resolve: {
-      item: tagResolver,
-    },
   },
   {
     path: ':id',
@@ -36,8 +28,5 @@ export const routes: Routes = [
     data: {
       permission: 'Tags',
     },
-    resolve: {
-      item: tagResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/tag/tag.service.ts b/overlord/src/app/tag/tag.service.ts
index 6b36a95b..abcd4da8 100644
--- a/overlord/src/app/tag/tag.service.ts
+++ b/overlord/src/app/tag/tag.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { Tag } from './tag';
 
 const url = '/api/tags';
-const serviceName = 'TagService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,36 +14,34 @@ export class TagService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<Tag> {
-    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
-    return this.http
-      .get<Tag>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Tag>;
+  get(id: Signal<string | null>) {
+    return httpResource<Tag>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<Tag[]> {
-    return this.http
-      .get<Tag[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Tag[]>;
+  list() {
+    return httpResource<Tag[]>(() => `${url}/list`);
   }
 
-  autocomplete(query: string): Observable<Tag[]> {
-    const options = { params: new HttpParams().set('q', query) };
-    return this.http
-      .get<Tag[]>(`${url}/query`, options)
-      .pipe(catchError(this.log.handleError(serviceName, 'autocomplete'))) as Observable<Tag[]>;
+  autocomplete(query: Signal<string | null>) {
+    return httpResource<Tag[]>(() => {
+      const q = query();
+      return q ? `${url}/query?q=${encodeURIComponent(q)}` : undefined;
+    });
   }
 
   save(tag: Tag): Observable<Tag> {
     return this.http
       .post<Tag>(`${url}`, tag)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<Tag>;
+      .pipe(catchError(this.log.handleError('TagService', 'save'))) as Observable<Tag>;
   }
 
   update(tag: Tag): Observable<Tag> {
     return this.http
       .put<Tag>(`${url}/${tag.id}`, tag)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<Tag>;
+      .pipe(catchError(this.log.handleError('TagService', 'update'))) as Observable<Tag>;
   }
 
   saveOrUpdate(tag: Tag): Observable<Tag> {
@@ -58,12 +54,12 @@ export class TagService {
   delete(id: string): Observable<Tag> {
     return this.http
       .delete<Tag>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<Tag>;
+      .pipe(catchError(this.log.handleError('TagService', 'delete'))) as Observable<Tag>;
   }
 
   vouchers(tags: { name: string; enabled: boolean }[], voucherIds: string[]): Observable<boolean> {
     return this.http
       .post<boolean>(`${url}/vouchers`, { tags: tags, voucherIds: voucherIds })
-      .pipe(catchError(this.log.handleError(serviceName, 'Set Voucher Tags'))) as Observable<boolean>;
+      .pipe(catchError(this.log.handleError('TagService', 'Set Voucher Tags'))) as Observable<boolean>;
   }
 }
diff --git a/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail-product-datasource.ts b/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail-product-datasource.ts
deleted file mode 100644
index d967e58d..00000000
--- a/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail-product-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { Product } from '../temporal-product';
-
-export class TemporalProductDetailProductDatasource extends DataSource<Product> {
-  constructor(private data: Observable<Product[]>) {
-    super();
-  }
-
-  connect(): Observable<Product[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail-sku-datasource.ts b/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail-sku-datasource.ts
deleted file mode 100644
index b6613695..00000000
--- a/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail-sku-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { StockKeepingUnit } from '../temporal-product';
-
-export class TemporalProductDetailSkuDatasource extends DataSource<StockKeepingUnit> {
-  constructor(private data: Observable<StockKeepingUnit[]>) {
-    super();
-  }
-
-  connect(): Observable<StockKeepingUnit[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}
diff --git a/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html b/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html
index 936be6b4..855ecb24 100644
--- a/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html
+++ b/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html
@@ -1,288 +1,323 @@
 <h2>Product</h2>
-<div class="two-col">
-  <div class="col">
-    <h2>Product Versions</h2>
-    <form [formGroup]="productForm" class="flex-col">
-      <!-- handle / name / fraction units -->
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Handle</mat-label>
-          <input matInput formControlName="handle" />
-        </mat-form-field>
-      </div>
-
-      <div class="row-container">
-        <mat-form-field class="flex-auto basis-3-4">
-          <mat-label>Name</mat-label>
-          <input matInput #name formControlName="name" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1-4">
-          <mat-label>Fraction Units</mat-label>
-          <input matInput formControlName="fractionUnits" />
-        </mat-form-field>
-      </div>
-
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Description</mat-label>
-          <input matInput formControlName="description" />
-        </mat-form-field>
-      </div>
-
-      <div class="row-container">
-        <mat-checkbox formControlName="isPurchased" class="flex-auto">Purchased?</mat-checkbox>
-        <mat-checkbox formControlName="isSold" class="flex-auto">Sold?</mat-checkbox>
-      </div>
-
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Product Group</mat-label>
-          <mat-select formControlName="productGroup">
-            @for (pg of productGroups; track pg) {
-              <mat-option [value]="pg">
-                {{ pg.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Allergen</mat-label>
-          <input matInput formControlName="allergen" />
-        </mat-form-field>
-      </div>
-
-      <!-- nutritional info shows based on currently selected group in the form -->
-      @if (productForm.get('productGroup')?.value?.nutritional ?? false) {
-        <h3>Nutritional Information</h3>
-        <div class="nutrition-grid">
-          <mat-form-field class="flex-auto">
-            <mat-label>Protein</mat-label>
-            <input matInput formControlName="protein" />
-          </mat-form-field>
-          <mat-form-field class="flex-auto">
-            <mat-label>Carbohydrate</mat-label>
-            <input matInput formControlName="carbohydrate" />
-          </mat-form-field>
-          <mat-form-field class="flex-auto">
-            <mat-label>Total Sugar</mat-label>
-            <input matInput formControlName="totalSugar" />
-          </mat-form-field>
-          <mat-form-field class="flex-auto">
-            <mat-label>Added Sugar</mat-label>
-            <input matInput formControlName="addedSugar" />
-          </mat-form-field>
-          <mat-form-field class="flex-auto">
-            <mat-label>Total Fat</mat-label>
-            <input matInput formControlName="totalFat" />
-          </mat-form-field>
-          <mat-form-field class="flex-auto">
-            <mat-label>Saturated Fat</mat-label>
-            <input matInput formControlName="saturatedFat" />
-          </mat-form-field>
-          <mat-form-field class="flex-auto">
-            <mat-label>Trans Fat</mat-label>
-            <input matInput formControlName="transFat" />
-          </mat-form-field>
-          <mat-form-field class="flex-auto">
-            <mat-label>Cholestrol</mat-label>
-            <input matInput formControlName="cholestrol" />
-          </mat-form-field>
-          <mat-form-field class="flex-auto">
-            <mat-label>Sodium</mat-label>
-            <input matInput formControlName="sodium" />
-          </mat-form-field>
-        </div>
-      }
-
-      @if (productForm.get('productGroup')?.value?.iceCream ?? false) {
-        <h3>Ice Cream Information</h3>
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <div class="two-col">
+    <div class="col">
+      <h2>Product Versions</h2>
+      <form class="flex-col" [formRoot]="form.productForm">
+        <!-- handle / name / fraction units -->
         <div class="row-container">
           <mat-form-field class="flex-auto">
-            <mat-label>MSNF</mat-label>
-            <input matInput formControlName="msnf" />
-          </mat-form-field>
-          <mat-form-field class="flex-auto">
-            <mat-label>Other Solids</mat-label>
-            <input matInput formControlName="otherSolids" />
-          </mat-form-field>
-          <mat-form-field class="flex-auto">
-            <mat-label>Total Solids</mat-label>
-            <input matInput formControlName="totalSolids" />
-          </mat-form-field>
-          <mat-form-field class="flex-auto">
-            <mat-label>Water</mat-label>
-            <input matInput formControlName="water" />
+            <mat-label>Handle</mat-label>
+            <input matInput [formField]="form.productForm.handle" />
           </mat-form-field>
         </div>
-      }
 
-      <div class="row-container">
-        <mat-form-field class="flex-auto basis-1-2">
-          <mat-label>Valid From</mat-label>
-          <input matInput [matDatepicker]="productValidFromPicker" formControlName="validFrom" autocomplete="off" />
-          <mat-datepicker-toggle matSuffix [for]="productValidFromPicker"></mat-datepicker-toggle>
-          <mat-datepicker #productValidFromPicker></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1-2">
-          <mat-label>Valid Till</mat-label>
-          <input matInput [matDatepicker]="productValidTillPicker" formControlName="validTill" autocomplete="off" />
-          <mat-datepicker-toggle matSuffix [for]="productValidTillPicker"></mat-datepicker-toggle>
-          <mat-datepicker #productValidTillPicker></mat-datepicker>
-        </mat-form-field>
-      </div>
-      <div class="row-container buttons">
-        <button mat-raised-button (click)="updateProduct()" [disabled]="!selectedProduct">Update</button>
-      </div>
-    </form>
-    <table mat-table [dataSource]="productDataSource" class="mat-elevation-z1 full-width">
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef>Name</th>
-        <td mat-cell *matCellDef="let p">{{ p.name }}</td>
-      </ng-container>
+        <div class="row-container">
+          <mat-form-field class="flex-auto basis-3-4">
+            <mat-label>Name</mat-label>
+            <input matInput [formField]="form.productForm.name" />
+          </mat-form-field>
+          <mat-form-field class="flex-auto basis-1-4">
+            <mat-label>Fraction Units</mat-label>
+            <input matInput [formField]="form.productForm.fractionUnits" />
+          </mat-form-field>
+        </div>
 
-      <ng-container matColumnDef="fractionUnits">
-        <th mat-header-cell *matHeaderCellDef>Fraction Units</th>
-        <td mat-cell *matCellDef="let p">{{ p.fractionUnits }}</td>
-      </ng-container>
+        <div class="row-container">
+          <mat-form-field class="flex-auto">
+            <mat-label>Description</mat-label>
+            <input matInput [formField]="form.productForm.description" />
+          </mat-form-field>
+        </div>
 
-      <ng-container matColumnDef="productGroup">
-        <th mat-header-cell *matHeaderCellDef>Product Group</th>
-        <td mat-cell *matCellDef="let p">{{ p.productGroup?.name }}</td>
-      </ng-container>
+        <div class="row-container">
+          <mat-checkbox [formField]="form.productForm.isPurchased" class="flex-auto">Purchased?</mat-checkbox>
+          <mat-checkbox [formField]="form.productForm.isSold" class="flex-auto">Sold?</mat-checkbox>
+        </div>
 
-      <ng-container matColumnDef="validFrom">
-        <th mat-header-cell *matHeaderCellDef>Valid From</th>
-        <td mat-cell *matCellDef="let p">{{ p.validFrom }}</td>
-      </ng-container>
+        <div class="row-container">
+          <mat-form-field class="flex-auto">
+            <mat-label>Product Group</mat-label>
+            <mat-select [formField]="form.productForm.productGroup">
+              @for (pg of productGroups(); track pg) {
+                <mat-option [value]="pg.id">
+                  {{ pg.name }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
 
-      <ng-container matColumnDef="validTill">
-        <th mat-header-cell *matHeaderCellDef>Valid Till</th>
-        <td mat-cell *matCellDef="let p">{{ p.validTill }}</td>
-      </ng-container>
+        <div class="row-container">
+          <mat-form-field class="flex-auto">
+            <mat-label>Allergen</mat-label>
+            <input matInput [formField]="form.productForm.allergen" />
+          </mat-form-field>
+        </div>
 
-      <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef>Actions</th>
-        <td mat-cell *matCellDef="let p">
-          <button mat-icon-button (click)="editProduct(p)">
-            <mat-icon>edit</mat-icon>
+        <!-- nutritional info shows based on currently selected group in the form -->
+        @if (selectedProductGroup()?.nutritional ?? false) {
+          <h3>Nutritional Information</h3>
+          <div class="nutrition-grid">
+            <mat-form-field class="flex-auto">
+              <mat-label>Protein (N x 6.38) %</mat-label>
+              <input matInput type="number" [formField]="form.productForm.protein" />
+            </mat-form-field>
+            <mat-form-field class="flex-auto">
+              <mat-label>Carbohydrate %</mat-label>
+              <input matInput type="number" [formField]="form.productForm.carbohydrate" />
+            </mat-form-field>
+            <mat-form-field class="flex-auto">
+              <mat-label>Total Sugar %</mat-label>
+              <input matInput type="number" [formField]="form.productForm.totalSugar" />
+            </mat-form-field>
+            <mat-form-field class="flex-auto">
+              <mat-label>Added Sugar</mat-label>
+              <input matInput type="number" [formField]="form.productForm.addedSugar" />
+            </mat-form-field>
+            <mat-form-field class="flex-auto">
+              <mat-label>Total Fat</mat-label>
+              <input matInput type="number" [formField]="form.productForm.totalFat" />
+            </mat-form-field>
+            <mat-form-field class="flex-auto">
+              <mat-label>Saturated Fat</mat-label>
+              <input matInput type="number" [formField]="form.productForm.saturatedFat" />
+            </mat-form-field>
+            <mat-form-field class="flex-auto">
+              <mat-label>Trans Fat</mat-label>
+              <input matInput type="number" [formField]="form.productForm.transFat" />
+            </mat-form-field>
+            <mat-form-field class="flex-auto">
+              <mat-label>Cholestrol</mat-label>
+              <input matInput type="number" [formField]="form.productForm.cholestrol" />
+            </mat-form-field>
+            <mat-form-field class="flex-auto">
+              <mat-label>Sodium</mat-label>
+              <input matInput type="number" [formField]="form.productForm.sodium" />
+            </mat-form-field>
+          </div>
+        }
+
+        @if (selectedProductGroup()?.iceCream ?? false) {
+          <h3>Ice Cream Information</h3>
+          <div class="row-container">
+            <mat-form-field class="flex-auto">
+              <mat-label>MSNF</mat-label>
+              <input matInput type="number" [formField]="form.productForm.msnf" />
+            </mat-form-field>
+            <mat-form-field class="flex-auto">
+              <mat-label>Other Solids</mat-label>
+              <input matInput type="number" [formField]="form.productForm.otherSolids" />
+            </mat-form-field>
+            <mat-form-field class="flex-auto">
+              <mat-label>Total Solids</mat-label>
+              <input matInput type="number" [formField]="form.productForm.totalSolids" />
+            </mat-form-field>
+            <mat-form-field class="flex-auto">
+              <mat-label>Water</mat-label>
+              <input matInput type="number" [formField]="form.productForm.water" />
+            </mat-form-field>
+          </div>
+        }
+
+        <div class="row-container">
+          <mat-form-field class="flex-auto basis-1-2">
+            <mat-label>Valid From</mat-label>
+            <input
+              matInput
+              [matDatepicker]="productValidFromPicker"
+              [formField]="form.productForm.validFrom"
+              autocomplete="off"
+            />
+            <mat-datepicker-toggle matSuffix [for]="productValidFromPicker"></mat-datepicker-toggle>
+            <mat-datepicker #productValidFromPicker></mat-datepicker>
+          </mat-form-field>
+          <mat-form-field class="flex-auto basis-1-2">
+            <mat-label>Valid Till</mat-label>
+            <input
+              matInput
+              [matDatepicker]="productValidTillPicker"
+              [formField]="form.productForm.validTill"
+              autocomplete="off"
+            />
+            <mat-datepicker-toggle matSuffix [for]="productValidTillPicker"></mat-datepicker-toggle>
+            <mat-datepicker #productValidTillPicker></mat-datepicker>
+          </mat-form-field>
+        </div>
+        <div class="row-container buttons">
+          <button
+            mat-raised-button
+            color="primary"
+            (click)="updateProduct()"
+            [disabled]="selectedProductIndex() === null"
+          >
+            Update
           </button>
-          <button mat-icon-button color="warn" (click)="deleteProduct(p)">
-            <mat-icon>delete</mat-icon>
-          </button>
-        </td>
-      </ng-container>
+        </div>
+      </form>
+      <mat-table [dataSource]="form.products().value() ?? []" class="mat-elevation-z1 full-width">
+        <ng-container matColumnDef="name">
+          <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+          <mat-cell *matCellDef="let p">{{ p.name }}</mat-cell>
+        </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="productDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: productDisplayedColumns"></tr>
-    </table>
+        <ng-container matColumnDef="fractionUnits">
+          <mat-header-cell *matHeaderCellDef>Fraction Units</mat-header-cell>
+          <mat-cell *matCellDef="let p">{{ p.fractionUnits }}</mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="productGroup">
+          <mat-header-cell *matHeaderCellDef>Product Group</mat-header-cell>
+          <mat-cell *matCellDef="let p">{{ getPGName(p.productGroup) }}</mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="validFrom">
+          <mat-header-cell *matHeaderCellDef>Valid From</mat-header-cell>
+          <mat-cell *matCellDef="let p">{{ formatDateOrNull(p.validFrom) }}</mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="validTill">
+          <mat-header-cell *matHeaderCellDef>Valid Till</mat-header-cell>
+          <mat-cell *matCellDef="let p">{{ formatDateOrNull(p.validTill) }}</mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
+          <mat-cell *matCellDef="let p">
+            <button mat-icon-button (click)="editProduct(p)">
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button mat-icon-button color="warn" (click)="deleteProduct(p)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="productDisplayedColumns"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: productDisplayedColumns"></mat-row>
+      </mat-table>
+    </div>
+    <div class="col">
+      <h2>SKU Versions</h2>
+      <form class="flex-col" [formRoot]="form.skuForm">
+        <div class="row-container">
+          <mat-form-field class="flex-auto">
+            <mat-label>Units</mat-label>
+            <input matInput [formField]="form.skuForm.units" />
+          </mat-form-field>
+
+          <mat-form-field class="flex-auto">
+            <mat-label>Fraction</mat-label>
+            <input matInput type="number" [formField]="form.skuForm.fraction" />
+          </mat-form-field>
+        </div>
+
+        <div class="row-container">
+          <mat-form-field class="flex-auto">
+            <mat-label>Yield</mat-label>
+            <input matInput type="number" [formField]="form.skuForm.productYield" />
+          </mat-form-field>
+
+          <mat-form-field class="flex-auto">
+            <mat-label>Cost Price</mat-label>
+            <input matInput type="number" [formField]="form.skuForm.costPrice" />
+          </mat-form-field>
+
+          <mat-form-field class="flex-auto">
+            <mat-label>Sale Price</mat-label>
+            <input matInput type="number" [formField]="form.skuForm.salePrice" />
+          </mat-form-field>
+        </div>
+        <div class="row-container">
+          <mat-form-field class="flex-auto basis-1-2">
+            <mat-label>Valid From</mat-label>
+            <input
+              matInput
+              [matDatepicker]="skuValidFromPicker"
+              [formField]="form.skuForm.validFrom"
+              autocomplete="off"
+            />
+            <mat-datepicker-toggle matSuffix [for]="skuValidFromPicker"></mat-datepicker-toggle>
+            <mat-datepicker #skuValidFromPicker></mat-datepicker>
+          </mat-form-field>
+          <mat-form-field class="flex-auto basis-1-2">
+            <mat-label>Valid Till</mat-label>
+            <input
+              matInput
+              [matDatepicker]="skuValidTillPicker"
+              [formField]="form.skuForm.validTill"
+              autocomplete="off"
+            />
+            <mat-datepicker-toggle matSuffix [for]="skuValidTillPicker"></mat-datepicker-toggle>
+            <mat-datepicker #skuValidTillPicker></mat-datepicker>
+          </mat-form-field>
+        </div>
+        <div class="row-container buttons">
+          <button mat-raised-button color="primary" (click)="updateSku()" [disabled]="selectedSkuIndex() === null">
+            Update
+          </button>
+        </div>
+      </form>
+      <mat-table [dataSource]="form.skus().value() ?? []" class="mat-elevation-z1 full-width">
+        <ng-container matColumnDef="units">
+          <mat-header-cell *matHeaderCellDef>Units</mat-header-cell>
+          <mat-cell *matCellDef="let s">{{ s.units }}</mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="fraction">
+          <mat-header-cell *matHeaderCellDef>Fraction</mat-header-cell>
+          <mat-cell *matCellDef="let s">{{ s.fraction }}</mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="productYield">
+          <mat-header-cell *matHeaderCellDef>Yield</mat-header-cell>
+          <mat-cell *matCellDef="let s">{{ s.productYield }}</mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="costPrice">
+          <mat-header-cell *matHeaderCellDef>Cost Price</mat-header-cell>
+          <mat-cell *matCellDef="let s">{{ s.costPrice | currency: 'INR' }}</mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="salePrice">
+          <mat-header-cell *matHeaderCellDef>Sale Price</mat-header-cell>
+          <mat-cell *matCellDef="let s">{{ s.salePrice | currency: 'INR' }}</mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="validFrom">
+          <mat-header-cell *matHeaderCellDef>Valid From</mat-header-cell>
+          <mat-cell *matCellDef="let s">{{ formatDateOrNull(s.validFrom) }}</mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="validTill">
+          <mat-header-cell *matHeaderCellDef>Valid Till</mat-header-cell>
+          <mat-cell *matCellDef="let s">{{ formatDateOrNull(s.validTill) }}</mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
+          <mat-cell *matCellDef="let s">
+            <button mat-icon-button (click)="editSku(s)">
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button mat-icon-button color="warn" (click)="deleteSku(s)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="skuDisplayedColumns"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: skuDisplayedColumns"></mat-row>
+      </mat-table>
+    </div>
   </div>
-  <div class="col">
-    <h2>SKU Versions</h2>
-    <form [formGroup]="skuForm" class="flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Units</mat-label>
-          <input matInput formControlName="units" />
-        </mat-form-field>
-
-        <mat-form-field class="flex-auto">
-          <mat-label>Fraction</mat-label>
-          <input matInput type="number" formControlName="fraction" />
-        </mat-form-field>
-      </div>
-
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Yield</mat-label>
-          <input matInput type="number" formControlName="productYield" />
-        </mat-form-field>
-
-        <mat-form-field class="flex-auto">
-          <mat-label>Cost Price</mat-label>
-          <input matInput type="number" formControlName="costPrice" />
-        </mat-form-field>
-
-        <mat-form-field class="flex-auto">
-          <mat-label>Sale Price</mat-label>
-          <input matInput type="number" formControlName="salePrice" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto basis-1-2">
-          <mat-label>Valid From</mat-label>
-          <input matInput [matDatepicker]="skuValidFromPicker" formControlName="validFrom" autocomplete="off" />
-          <mat-datepicker-toggle matSuffix [for]="skuValidFromPicker"></mat-datepicker-toggle>
-          <mat-datepicker #skuValidFromPicker></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1-2">
-          <mat-label>Valid Till</mat-label>
-          <input matInput [matDatepicker]="skuValidTillPicker" formControlName="validTill" autocomplete="off" />
-          <mat-datepicker-toggle matSuffix [for]="skuValidTillPicker"></mat-datepicker-toggle>
-          <mat-datepicker #skuValidTillPicker></mat-datepicker>
-        </mat-form-field>
-      </div>
-      <div class="row-container buttons">
-        <button mat-raised-button (click)="updateSku()" [disabled]="!selectedSku">Update</button>
-      </div>
-    </form>
-    <table mat-table [dataSource]="skuDataSource" class="mat-elevation-z1 full-width">
-      <ng-container matColumnDef="units">
-        <th mat-header-cell *matHeaderCellDef>Units</th>
-        <td mat-cell *matCellDef="let s">{{ s.units }}</td>
-      </ng-container>
-
-      <!-- additional SKU columns -->
-      <ng-container matColumnDef="fraction">
-        <th mat-header-cell *matHeaderCellDef>Fraction</th>
-        <td mat-cell *matCellDef="let s">{{ s.fraction }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="productYield">
-        <th mat-header-cell *matHeaderCellDef>Yield</th>
-        <td mat-cell *matCellDef="let s">{{ s.productYield }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="costPrice">
-        <th mat-header-cell *matHeaderCellDef>Cost Price</th>
-        <td mat-cell *matCellDef="let s">{{ s.costPrice }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="salePrice">
-        <th mat-header-cell *matHeaderCellDef>Sale Price</th>
-        <td mat-cell *matCellDef="let s">{{ s.salePrice }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="validFrom">
-        <th mat-header-cell *matHeaderCellDef>Valid From</th>
-        <td mat-cell *matCellDef="let s">{{ s.validFrom }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="validTill">
-        <th mat-header-cell *matHeaderCellDef>Valid Till</th>
-        <td mat-cell *matCellDef="let s">{{ s.validTill }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef>Actions</th>
-        <td mat-cell *matCellDef="let s">
-          <button mat-icon-button (click)="editSku(s)">
-            <mat-icon>edit</mat-icon>
-          </button>
-          <button mat-icon-button color="warn" (click)="deleteSku(s)">
-            <mat-icon>delete</mat-icon>
-          </button>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="skuDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: skuDisplayedColumns"></tr>
-    </table>
+  <div class="row-container">
+    <button mat-raised-button color="primary" class="" (click)="update()">Update</button>
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
   </div>
-</div>
-<div class="row-container">
-  <button mat-raised-button color="primary" class="" (click)="update()">Update</button>
-  <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-</div>
+}
diff --git a/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts b/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts
index bf801369..5a4c41dd 100644
--- a/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts
+++ b/overlord/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts
@@ -1,5 +1,6 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CurrencyPipe } from '@angular/common';
+import { afterNextRender, Component, computed, inject, input, linkedSignal, signal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -11,16 +12,103 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import moment from 'moment';
-import { BehaviorSubject } from 'rxjs';
 
 import { ProductGroup } from '../../core/product-group';
+import { ProductGroupService } from '../../product-group/product-group.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { Product, StockKeepingUnit, TemporalProduct } from '../temporal-product';
 import { TemporalProductService } from '../temporal-product.service';
-import { TemporalProductDetailProductDatasource } from './temporal-product-detail-product-datasource';
-import { TemporalProductDetailSkuDatasource } from './temporal-product-detail-sku-datasource';
+
+export interface TemporalProductFormData {
+  id?: string;
+  versionId?: string;
+  handle: string;
+  name: string;
+  description: string;
+  fractionUnits: string;
+  isPurchased: boolean;
+  isSold: boolean;
+  productGroup: string;
+  allergen: string;
+  protein: number;
+  carbohydrate: number;
+  totalSugar: number;
+  addedSugar: number;
+  totalFat: number;
+  saturatedFat: number;
+  transFat: number;
+  cholestrol: number;
+  sodium: number;
+  msnf: number;
+  otherSolids: number;
+  totalSolids: number;
+  water: number;
+  validFrom: Date | null;
+  validTill: Date | null;
+}
+
+export interface TemporalProductSkuFormData {
+  id?: string;
+  versionId?: string;
+  units: string;
+  fraction: number;
+  productYield: number;
+  costPrice: number;
+  salePrice: number;
+  validFrom: Date | null;
+  validTill: Date | null;
+}
+
+export interface TemporalProductDetailFormModel {
+  products: TemporalProductFormData[];
+  skus: TemporalProductSkuFormData[];
+  productForm: TemporalProductFormData;
+  skuForm: TemporalProductSkuFormData;
+}
+
+function createEmptyProductForm(): TemporalProductFormData {
+  return {
+    handle: '',
+    name: '',
+    description: '',
+    fractionUnits: '',
+    isPurchased: true,
+    isSold: false,
+    productGroup: '',
+    allergen: '',
+    protein: 0,
+    carbohydrate: 0,
+    totalSugar: 0,
+    addedSugar: 0,
+    totalFat: 0,
+    saturatedFat: 0,
+    transFat: 0,
+    cholestrol: 0,
+    sodium: 0,
+    msnf: 0,
+    otherSolids: 0,
+    totalSolids: 0,
+    water: 0,
+    validFrom: null,
+    validTill: null,
+  };
+}
+
+function createEmptySkuForm(): TemporalProductSkuFormData {
+  return {
+    units: '',
+    fraction: 1,
+    productYield: 1,
+    costPrice: 0,
+    salePrice: 0,
+    validFrom: null,
+    validTill: null,
+  };
+}
 
 @Component({
   selector: 'app-product-detail',
@@ -36,18 +124,23 @@ import { TemporalProductDetailSkuDatasource } from './temporal-product-detail-sk
     MatOptionModule,
     MatSelectModule,
     MatTableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
+    CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class TemporalProductDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private ser = inject(TemporalProductService);
+  private pgSer = inject(ProductGroupService);
 
-  // columns updated to match new Product/StockKeepingUnit properties
-  // include handle and active flag in the table so users can distinguish versions
   productDisplayedColumns = ['name', 'fractionUnits', 'productGroup', 'validFrom', 'validTill', 'actions'];
   skuDisplayedColumns = [
     'units',
@@ -60,361 +153,257 @@ export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
     'actions',
   ];
 
-  @ViewChild('name', { static: true }) nameElement?: ElementRef;
+  selectedProductIndex = signal<number | null>(null);
+  selectedSkuIndex = signal<number | null>(null);
 
-  public selectedProduct: Product | null;
-  public selectedSku: StockKeepingUnit | null;
+  itemResource = this.ser.get(computed(() => this.id() ?? ''));
+  item = linkedSignal(() => this.itemResource.value() ?? new TemporalProduct());
 
-  productForm: FormGroup<{
-    handle: FormControl<string>;
-    name: FormControl<string>;
-    description: FormControl<string>;
-    fractionUnits: FormControl<string>;
+  formModel = linkedSignal<TemporalProduct, TemporalProductDetailFormModel>({
+    source: this.item,
+    computation: (itemVal): TemporalProductDetailFormModel => {
+      const products: TemporalProductFormData[] = (itemVal.products || []).map((p) => ({
+        id: p.id,
+        versionId: p.versionId,
+        handle: p.handle || '',
+        name: p.name || '',
+        description: p.description || '',
+        fractionUnits: p.fractionUnits || '',
+        isPurchased: p.isPurchased ?? true,
+        isSold: p.isSold ?? false,
+        productGroup: p.productGroup?.id ?? '',
+        allergen: p.allergen || '',
+        protein: p.protein || 0,
+        carbohydrate: p.carbohydrate || 0,
+        totalSugar: p.totalSugar || 0,
+        addedSugar: p.addedSugar || 0,
+        totalFat: p.totalFat || 0,
+        saturatedFat: p.saturatedFat || 0,
+        transFat: p.transFat || 0,
+        cholestrol: p.cholestrol || 0,
+        sodium: p.sodium || 0,
+        msnf: p.msnf || 0,
+        otherSolids: p.otherSolids || 0,
+        totalSolids: p.totalSolids || 0,
+        water: p.water || 0,
+        validFrom: p.validFrom ? moment(p.validFrom, 'DD-MMM-YYYY').toDate() : null,
+        validTill: p.validTill ? moment(p.validTill, 'DD-MMM-YYYY').toDate() : null,
+      }));
 
-    isPurchased: FormControl<boolean>;
-    isSold: FormControl<boolean>;
-    productGroup: FormControl<ProductGroup>;
+      const skus: TemporalProductSkuFormData[] = (itemVal.skus || []).map((s) => ({
+        id: s.id,
+        versionId: s.versionId,
+        units: s.units || '',
+        fraction: s.fraction ?? 1,
+        productYield: s.productYield ?? 1,
+        costPrice: s.costPrice ?? 0,
+        salePrice: s.salePrice ?? 0,
+        validFrom: s.validFrom ? moment(s.validFrom, 'DD-MMM-YYYY').toDate() : null,
+        validTill: s.validTill ? moment(s.validTill, 'DD-MMM-YYYY').toDate() : null,
+      }));
 
-    allergen: FormControl<string>;
-    protein: FormControl<number>;
-    carbohydrate: FormControl<number>;
-    totalSugar: FormControl<number>;
-    addedSugar: FormControl<number>;
-    totalFat: FormControl<number>;
-    saturatedFat: FormControl<number>;
-    transFat: FormControl<number>;
-    cholestrol: FormControl<number>;
-    sodium: FormControl<number>;
+      return {
+        products,
+        skus,
+        productForm: createEmptyProductForm(),
+        skuForm: createEmptySkuForm(),
+      };
+    },
+  });
 
-    msnf: FormControl<number>;
-    otherSolids: FormControl<number>;
-    totalSolids: FormControl<number>;
-    water: FormControl<number>;
+  form = form(this.formModel);
 
-    validFrom: FormControl<Date | null>;
-    validTill: FormControl<Date | null>;
-  }>;
+  productGroupsResource = this.pgSer.list();
+  productGroups = computed(() => this.productGroupsResource.value() || []);
 
-  skuForm: FormGroup<{
-    units: FormControl<string>;
-    fraction: FormControl<number>;
-    productYield: FormControl<number>;
-    costPrice: FormControl<number>;
-    salePrice: FormControl<number>;
-    validFrom: FormControl<Date | null>;
-    validTill: FormControl<Date | null>;
-  }>;
-
-  productGroups: ProductGroup[] = [];
-  item: TemporalProduct = new TemporalProduct();
-  public products = new BehaviorSubject<Product[]>([]);
-  public skus = new BehaviorSubject<StockKeepingUnit[]>([]);
-  productDataSource: TemporalProductDetailProductDatasource = new TemporalProductDetailProductDatasource(this.products);
-  skuDataSource: TemporalProductDetailSkuDatasource = new TemporalProductDetailSkuDatasource(this.skus);
+  selectedProductGroup = computed(() => {
+    const pgId = this.form.productForm.productGroup().value();
+    return this.productGroups().find((x: ProductGroup) => x.id === pgId);
+  });
 
   constructor() {
-    // Create form and include all additional product properties present on the Product model
-    this.productForm = new FormGroup({
-      handle: new FormControl<string>('', { nonNullable: true }),
-      name: new FormControl<string>('', { nonNullable: true }),
-      description: new FormControl<string>('', { nonNullable: true }),
-      fractionUnits: new FormControl<string>('', { nonNullable: true }),
-
-      isPurchased: new FormControl<boolean>(true, { nonNullable: true }),
-      isSold: new FormControl<boolean>(false, { nonNullable: true }),
-      productGroup: new FormControl<ProductGroup>(new ProductGroup(), { nonNullable: true }),
-
-      allergen: new FormControl<string>('', { nonNullable: true }),
-      protein: new FormControl<number>(0, { nonNullable: true }),
-      carbohydrate: new FormControl<number>(0, { nonNullable: true }),
-      totalSugar: new FormControl<number>(0, { nonNullable: true }),
-      addedSugar: new FormControl<number>(0, { nonNullable: true }),
-      totalFat: new FormControl<number>(0, { nonNullable: true }),
-      saturatedFat: new FormControl<number>(0, { nonNullable: true }),
-      transFat: new FormControl<number>(0, { nonNullable: true }),
-      cholestrol: new FormControl<number>(0, { nonNullable: true }),
-      sodium: new FormControl<number>(0, { nonNullable: true }),
-
-      msnf: new FormControl<number>(0, { nonNullable: true }),
-      otherSolids: new FormControl<number>(0, { nonNullable: true }),
-      totalSolids: new FormControl<number>(0, { nonNullable: true }),
-      water: new FormControl<number>(0, { nonNullable: true }),
-
-      validFrom: new FormControl<Date | null>(null),
-      validTill: new FormControl<Date | null>(null),
-    });
-    this.skuForm = new FormGroup({
-      units: new FormControl<string>('', { nonNullable: true }),
-      fraction: new FormControl<number>(1, { nonNullable: true }),
-      productYield: new FormControl<number>(1, { nonNullable: true }),
-      costPrice: new FormControl<number>(0, { nonNullable: true }),
-      salePrice: new FormControl<number>(0, { nonNullable: true }),
-
-      validFrom: new FormControl<Date | null>(null),
-      validTill: new FormControl<Date | null>(null),
-    });
-    this.selectedProduct = null;
-    this.selectedSku = null;
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as {
-        item: TemporalProduct;
-        productGroups: ProductGroup[];
-      };
-      this.productGroups = data.productGroups;
-      this.item = data.item;
-      this.skus.next(this.item.skus);
-      this.products.next(this.item.products);
+    afterNextRender(() => {
+      this.form.productForm.name().focusBoundControl();
     });
   }
 
-  private parseDateOrNull(d: string | null | undefined): Date | null {
-    return !d ? null : moment(d, 'DD-MMM-YYYY').toDate();
+  getPGName(pgId?: string): string {
+    if (!pgId) return '';
+    return this.productGroups().find((x: ProductGroup) => x.id === pgId)?.name ?? '';
   }
 
-  private formatDateOrNull(d: Date | null | undefined): string | null {
-    return !d ? null : moment(d).format('DD-MMM-YYYY');
+  formatDateOrNull(d: Date | string | null | undefined): string {
+    if (!d) return '';
+    return moment(d).format('DD-MMM-YYYY');
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      if (this.nameElement !== undefined) {
-        this.nameElement.nativeElement.focus();
-      }
-    }, 0);
-  }
-
-  editProduct(p: Product) {
-    this.selectedProduct = p;
-
-    this.productForm.setValue({
-      handle: p.handle ?? '',
-      name: p.name ?? '',
-      description: p.description ?? '',
-      fractionUnits: p.fractionUnits ?? '',
-
-      isPurchased: p.isPurchased ?? false,
-      isSold: p.isSold ?? false,
-      productGroup: this.productGroups.find((x) => x.id === p.productGroup?.id) ?? new ProductGroup(),
-
-      allergen: p.allergen ?? '',
-      protein: p.protein ?? 0,
-      carbohydrate: p.carbohydrate ?? 0,
-      totalSugar: p.totalSugar ?? 0,
-      addedSugar: p.addedSugar ?? 0,
-      totalFat: p.totalFat ?? 0,
-      saturatedFat: p.saturatedFat ?? 0,
-      transFat: p.transFat ?? 0,
-      cholestrol: p.cholestrol ?? 0,
-      sodium: p.sodium ?? 0,
-
-      msnf: p.msnf ?? 0,
-      otherSolids: p.otherSolids ?? 0,
-      totalSolids: p.totalSolids ?? 0,
-      water: p.water ?? 0,
-
-      validFrom: this.parseDateOrNull(p.validFrom),
-      validTill: this.parseDateOrNull(p.validTill),
-    });
-    setTimeout(() => this.nameElement?.nativeElement?.focus?.(), 0);
+  editProduct(row: TemporalProductFormData) {
+    const index = this.formModel().products.indexOf(row);
+    this.selectedProductIndex.set(index);
+    this.formModel.update((m) => ({
+      ...m,
+      productForm: { ...row },
+    }));
+    this.form.productForm.name().focusBoundControl();
   }
 
   updateProduct() {
-    if (!this.selectedProduct) {
+    const index = this.selectedProductIndex();
+    if (index === null || index < 0) {
       return;
     }
-    const formModel = this.productForm.value;
-
-    const p = this.selectedProduct;
-
-    p.handle = formModel.handle ?? '';
-    p.name = formModel.name ?? '';
-    p.description = formModel.description ?? '';
-    p.fractionUnits = formModel.fractionUnits ?? '';
-
-    p.isPurchased = formModel.isPurchased ?? false;
-    p.isSold = formModel.isSold ?? false;
-
-    if (p.productGroup === null || p.productGroup === undefined) {
-      p.productGroup = new ProductGroup();
-    }
-    p.productGroup = formModel.productGroup;
-
-    p.allergen = formModel.allergen ?? '';
-    p.protein = formModel.protein ?? 0;
-    p.carbohydrate = formModel.carbohydrate ?? 0;
-    p.totalSugar = formModel.totalSugar ?? 0;
-    p.addedSugar = formModel.addedSugar ?? 0;
-    p.totalFat = formModel.totalFat ?? 0;
-    p.saturatedFat = formModel.saturatedFat ?? 0;
-    p.transFat = formModel.transFat ?? 0;
-    p.cholestrol = formModel.cholestrol ?? 0;
-    p.sodium = formModel.sodium ?? 0;
-
-    p.msnf = formModel.msnf ?? 0;
-    p.otherSolids = formModel.otherSolids ?? 0;
-    p.totalSolids = formModel.totalSolids ?? 0;
-    p.water = formModel.water ?? 0;
-
-    p.validFrom = this.formatDateOrNull(formModel.validFrom);
-    p.validTill = this.formatDateOrNull(formModel.validTill);
-    this.selectedProduct = null;
-
-    // Reset form
-    this.productForm.reset({
-      handle: '',
-      name: '',
-      description: '',
-      fractionUnits: '',
-      isPurchased: true,
-      isSold: false,
-      productGroup: new ProductGroup(),
-      allergen: '',
-      protein: 0,
-      carbohydrate: 0,
-      totalSugar: 0,
-      addedSugar: 0,
-      totalFat: 0,
-      saturatedFat: 0,
-      transFat: 0,
-      cholestrol: 0,
-      sodium: 0,
-      msnf: 0,
-      otherSolids: 0,
-      totalSolids: 0,
-      water: 0,
-      validFrom: null,
-      validTill: null,
-    });
-  }
-
-  deleteProduct(p: Product) {
-    this.item.products.splice(this.item.products.indexOf(p), 1);
-    this.products.next(this.item.products);
-    if (!this.selectedProduct) return;
-
-    const idx = (this.item.products ?? []).indexOf(this.selectedProduct);
-    if (idx >= 0) {
-      this.item.products.splice(idx, 1);
+    const currentPf = this.form().value().productForm;
+    if (!currentPf) {
+      return;
     }
 
-    this.selectedProduct = null;
+    const updatedProducts = this.formModel().products.map((p, i) => (i === index ? { ...currentPf } : p));
 
-    // Reset form
-    this.productForm.reset({
-      handle: '',
-      name: '',
-      description: '',
-      fractionUnits: '',
-      isPurchased: true,
-      isSold: false,
-      productGroup: new ProductGroup(),
-      allergen: '',
-      protein: 0,
-      carbohydrate: 0,
-      totalSugar: 0,
-      addedSugar: 0,
-      totalFat: 0,
-      saturatedFat: 0,
-      transFat: 0,
-      cholestrol: 0,
-      sodium: 0,
-      msnf: 0,
-      otherSolids: 0,
-      totalSolids: 0,
-      water: 0,
-      validFrom: null,
-      validTill: null,
-    });
+    this.formModel.update((m) => ({
+      ...m,
+      products: updatedProducts,
+      productForm: createEmptyProductForm(),
+    }));
+    this.selectedProductIndex.set(null);
   }
 
-  editSku(s: StockKeepingUnit) {
-    this.selectedSku = s;
+  deleteProduct(row: TemporalProductFormData) {
+    const updatedProducts = this.formModel().products.filter((p) => p !== row);
+    const selectedIndex = this.selectedProductIndex();
+    const rowIndex = this.formModel().products.indexOf(row);
+    this.formModel.update((m) => ({
+      ...m,
+      products: updatedProducts,
+      productForm: selectedIndex === rowIndex ? createEmptyProductForm() : m.productForm,
+    }));
+    if (selectedIndex === rowIndex) {
+      this.selectedProductIndex.set(null);
+    }
+  }
 
-    this.skuForm.setValue({
-      units: s.units ?? '',
-      fraction: s.fraction ?? 1,
-      productYield: s.productYield ?? 1,
-      costPrice: s.costPrice ?? 0,
-      salePrice: s.salePrice ?? 0,
-      validFrom: this.parseDateOrNull(s.validFrom),
-      validTill: this.parseDateOrNull(s.validTill),
-    });
+  editSku(row: TemporalProductSkuFormData) {
+    const index = this.formModel().skus.indexOf(row);
+    this.selectedSkuIndex.set(index);
+    this.formModel.update((m) => ({
+      ...m,
+      skuForm: { ...row },
+    }));
+    this.form.skuForm.units().focusBoundControl();
   }
 
   updateSku() {
-    if (!this.selectedSku) return;
-    const formModel = this.skuForm.value;
-
-    const s = this.selectedSku;
-    s.units = formModel.units ?? '';
-    s.fraction = formModel.fraction ?? 1;
-    s.productYield = formModel.productYield ?? 1;
-    s.costPrice = formModel.costPrice ?? 0;
-    s.salePrice = formModel.salePrice ?? 0;
-
-    s.validFrom = this.formatDateOrNull(formModel.validFrom);
-    s.validTill = this.formatDateOrNull(formModel.validTill);
-    this.selectedSku = null;
-    this.skuForm.reset({
-      units: '',
-      fraction: 1,
-      productYield: 1,
-      costPrice: 0,
-      salePrice: 0,
-      validFrom: null,
-      validTill: null,
-    });
-  }
-
-  deleteSku(s: StockKeepingUnit) {
-    this.item.skus.splice(this.item.skus.indexOf(s), 1);
-    this.skus.next(this.item.skus);
-    if (!this.selectedSku) return;
-
-    const idx = (this.item.skus ?? []).indexOf(this.selectedSku);
-    if (idx >= 0) {
-      this.item.skus.splice(idx, 1);
+    const index = this.selectedSkuIndex();
+    if (index === null || index < 0) {
+      return;
+    }
+    const currentSf = this.form().value().skuForm;
+    if (!currentSf) {
+      return;
     }
 
-    this.selectedSku = null;
+    const updatedSkus = this.formModel().skus.map((s, i) => (i === index ? { ...currentSf } : s));
 
-    // Reset form
-    this.skuForm.reset({
-      units: '',
-      fraction: 1,
-      productYield: 1,
-      costPrice: 0,
-      salePrice: 0,
-      validFrom: null,
-      validTill: null,
+    this.formModel.update((m) => ({
+      ...m,
+      skus: updatedSkus,
+      skuForm: createEmptySkuForm(),
+    }));
+    this.selectedSkuIndex.set(null);
+  }
+
+  deleteSku(row: TemporalProductSkuFormData) {
+    const updatedSkus = this.formModel().skus.filter((s) => s !== row);
+    const selectedIndex = this.selectedSkuIndex();
+    const rowIndex = this.formModel().skus.indexOf(row);
+    this.formModel.update((m) => ({
+      ...m,
+      skus: updatedSkus,
+      skuForm: selectedIndex === rowIndex ? createEmptySkuForm() : m.skuForm,
+    }));
+    if (selectedIndex === rowIndex) {
+      this.selectedSkuIndex.set(null);
+    }
+  }
+
+  getItem(): TemporalProduct {
+    const formModel = this.formModel();
+    const tp = new TemporalProduct();
+
+    tp.products = formModel.products.map((p) => {
+      const prod = new Product();
+      prod.id = p.id;
+      prod.versionId = p.versionId;
+      prod.handle = p.handle ?? '';
+      prod.name = p.name ?? '';
+      prod.description = p.description ?? '';
+      prod.fractionUnits = p.fractionUnits ?? '';
+      prod.isPurchased = p.isPurchased ?? true;
+      prod.isSold = p.isSold ?? false;
+      prod.productGroup = this.productGroups().find((x: ProductGroup) => x.id === p.productGroup);
+
+      prod.allergen = p.allergen ?? '';
+      prod.protein = p.protein || 0;
+      prod.carbohydrate = p.carbohydrate || 0;
+      prod.totalSugar = p.totalSugar || 0;
+      prod.addedSugar = p.addedSugar || 0;
+      prod.totalFat = p.totalFat || 0;
+      prod.saturatedFat = p.saturatedFat || 0;
+      prod.transFat = p.transFat || 0;
+      prod.cholestrol = p.cholestrol || 0;
+      prod.sodium = p.sodium || 0;
+
+      prod.msnf = p.msnf || 0;
+      prod.otherSolids = p.otherSolids || 0;
+      prod.totalSolids = p.totalSolids || 0;
+      prod.water = p.water || 0;
+
+      prod.validFrom = p.validFrom ? this.formatDateOrNull(p.validFrom) : null;
+      prod.validTill = p.validTill ? this.formatDateOrNull(p.validTill) : null;
+      return prod;
     });
+
+    tp.skus = formModel.skus.map((s) => {
+      const sku = new StockKeepingUnit();
+      sku.id = s.id;
+      sku.versionId = s.versionId;
+      sku.units = s.units ?? '';
+      sku.fraction = Number(s.fraction) || 1;
+      sku.productYield = Number(s.productYield) || 1;
+      sku.costPrice = Number(s.costPrice) || 0;
+      sku.salePrice = Number(s.salePrice) || 0;
+      sku.validFrom = s.validFrom ? this.formatDateOrNull(s.validFrom) : null;
+      sku.validTill = s.validTill ? this.formatDateOrNull(s.validTill) : null;
+      return sku;
+    });
+
+    return tp;
   }
 
   update() {
-    this.ser.update(this.item).subscribe({
+    this.ser.update(this.getItem()).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/temporal-products');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Error');
+        this.snackBar.open(error as string, 'Error');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.products[0].id as string).subscribe({
-      next: () => {
-        this.snackBar.open('', 'Success');
-        this.router.navigateByUrl('/temporal-products');
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Error');
-      },
-    });
+    const firstProdId = this.formModel().products[0]?.id;
+    if (firstProdId) {
+      this.ser.delete(firstProdId).subscribe({
+        next: () => {
+          this.snackBar.open('', 'Success');
+          this.router.navigateByUrl('/temporal-products');
+        },
+        error: (error) => {
+          this.snackBar.open(error as string, 'Error');
+        },
+      });
+    }
   }
 
   confirmDelete(): void {
diff --git a/overlord/src/app/temporal-product/temporal-product-list.resolver.spec.ts b/overlord/src/app/temporal-product/temporal-product-list.resolver.spec.ts
deleted file mode 100644
index 250290ad..00000000
--- a/overlord/src/app/temporal-product/temporal-product-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { inject, TestBed } from '@angular/core/testing';
-
-import { TemporalProductListResolverService } from './temporal-product-list-resolver.service';
-
-describe('TemporalProductListResolverService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [TemporalProductListResolverService],
-    });
-  });
-
-  it('should be created', inject(
-    [TemporalProductListResolverService],
-    (service: TemporalProductListResolverService) => {
-      expect(service).toBeTruthy();
-    },
-  ));
-});
diff --git a/overlord/src/app/temporal-product/temporal-product-list.resolver.ts b/overlord/src/app/temporal-product/temporal-product-list.resolver.ts
deleted file mode 100644
index 52e43edd..00000000
--- a/overlord/src/app/temporal-product/temporal-product-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { TemporalProduct } from './temporal-product';
-import { TemporalProductService } from './temporal-product.service';
-
-export const temporalProductListResolver: ResolveFn<TemporalProduct[]> = () => {
-  return inject(TemporalProductService).list();
-};
diff --git a/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list-datasource.ts b/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list-datasource.ts
deleted file mode 100644
index 1b80f6b5..00000000
--- a/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list-datasource.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { merge, Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-
-import { TemporalProduct } from '../temporal-product';
-
-export class TemporalProductListDatasource extends DataSource<TemporalProduct> {
-  public data: TemporalProduct[];
-  public filteredData: TemporalProduct[];
-  public search: string;
-  public productGroup: string;
-
-  constructor(
-    private readonly searchFilter: Observable<string>,
-    private readonly productGroupFilter: Observable<string>,
-    private readonly dataObs: Observable<TemporalProduct[]>,
-  ) {
-    super();
-    this.data = [];
-    this.filteredData = [];
-    this.search = '';
-    this.productGroup = '';
-  }
-
-  connect(): Observable<TemporalProduct[]> {
-    const dataMutations = [
-      this.dataObs.pipe(
-        tap((x) => {
-          this.data = x;
-        }),
-      ),
-      this.searchFilter.pipe(
-        tap((x) => {
-          this.search = x;
-        }),
-      ),
-      this.productGroupFilter.pipe(
-        tap((x) => {
-          this.productGroup = x;
-        }),
-      ),
-    ];
-    return merge(...dataMutations).pipe(
-      map(() => this.getFilteredData(this.data, this.search, this.productGroup)),
-      tap((x: TemporalProduct[]) => {
-        this.filteredData = x;
-      }),
-    );
-  }
-
-  disconnect() {}
-
-  private getFilteredData(data: TemporalProduct[], search: string, productGroup: string): TemporalProduct[] {
-    const tokens = (search ?? '').toLowerCase().split(/\s+/).filter(Boolean);
-
-    return data.filter((tp: TemporalProduct) => {
-      search = search.toLowerCase();
-
-      const products = tp.products ?? [];
-      const skus = tp.skus ?? [];
-
-      // 1) Search: match ANY product/sku fields
-      const matchesSearch =
-        tokens.length === 0 ||
-        tokens.every(
-          (token) =>
-            products.some((p) => {
-              const hay = `${p.name ?? ''} ${p.fractionUnits ?? ''} ${p.productGroup?.name ?? ''}`.toLowerCase();
-              return hay.includes(token);
-            }) ||
-            skus.some((k) => {
-              const hay = `${k.units ?? ''}`.toLowerCase();
-              return hay.includes(token);
-            }),
-        );
-
-      const matchesProductGroup = !productGroup || products.some((k) => (k.productGroup?.id ?? '') === productGroup);
-      return matchesSearch && matchesProductGroup;
-    });
-  }
-}
diff --git a/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html b/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html
index 450ddcec..42de0e2c 100644
--- a/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html
+++ b/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html
@@ -1,15 +1,15 @@
 <h2>Temporal Products</h2>
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container sm:max-lg:flex-col">
     <mat-form-field class="flex-auto basis-2-5">
       <mat-label>Filter</mat-label>
-      <input type="text" matInput formControlName="filter" autocomplete="off" />
+      <input type="text" matInput [formField]="form.filter" autocomplete="off" />
     </mat-form-field>
     <mat-form-field class="flex-auto basis-30">
       <mat-label>Product Group</mat-label>
-      <mat-select formControlName="productGroup" (selectionChange)="filterOn($event.value)">
+      <mat-select [formField]="form.productGroup" (selectionChange)="filterOn($event.value)">
         <mat-option>-- All Products --</mat-option>
-        @for (pg of productGroups; track pg) {
+        @for (pg of productGroups(); track pg) {
           <mat-option [value]="pg.id">
             {{ pg.name }}
           </mat-option>
@@ -18,48 +18,54 @@
     </mat-form-field>
   </div>
 </form>
-<mat-table [dataSource]="dataSource">
-  <!-- Name Column -->
-  <ng-container matColumnDef="product">
-    <mat-header-cell *matHeaderCellDef>Products</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        @for (p of row.products; track p) {
-          <li>
-            <a [routerLink]="['/temporal-products', p.id]">
-              <b>{{ p.name }}</b>
-            </a>
-            <div class="text-sm">
-              <b>Valid:</b>
-              {{ p.validFrom ?? '&#8734;' }}
-              <mat-icon>linear_scale</mat-icon>
-              {{ p.validTill ?? '&#8734;' }}
-            </div>
-          </li>
-        }
-      </ul>
-    </mat-cell>
-  </ng-container>
+@if (resource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (resource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="resource.reload()" />
+} @else {
+  <mat-table [dataSource]="dataSource()">
+    <!-- Name Column -->
+    <ng-container matColumnDef="product">
+      <mat-header-cell *matHeaderCellDef>Products</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <ul>
+          @for (p of row.products; track p) {
+            <li>
+              <a [routerLink]="['/temporal-products', p.id]">
+                <b>{{ p.name }}</b>
+              </a>
+              <div class="text-sm">
+                <b>Valid:</b>
+                {{ p.validFrom ?? '&#8734;' }}
+                <mat-icon>linear_scale</mat-icon>
+                {{ p.validTill ?? '&#8734;' }}
+              </div>
+            </li>
+          }
+        </ul>
+      </mat-cell>
+    </ng-container>
 
-  <ng-container matColumnDef="sku">
-    <mat-header-cell *matHeaderCellDef>Skus</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        @for (s of row.skus; track s) {
-          <li>
-            {{ s.units }}
-          </li>
-        }
-      </ul>
-    </mat-cell>
-  </ng-container>
+    <ng-container matColumnDef="sku">
+      <mat-header-cell *matHeaderCellDef>Skus</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <ul>
+          @for (s of row.skus; track s) {
+            <li>
+              {{ s.units }}
+            </li>
+          }
+        </ul>
+      </mat-cell>
+    </ng-container>
 
-  <!-- Info Column -->
-  <ng-container matColumnDef="info">
-    <mat-header-cell *matHeaderCellDef class="center">Details</mat-header-cell>
-    <mat-cell *matCellDef="let row"> </mat-cell>
-  </ng-container>
+    <!-- Info Column -->
+    <ng-container matColumnDef="info">
+      <mat-header-cell *matHeaderCellDef class="center">Details</mat-header-cell>
+      <mat-cell *matCellDef="let row"> </mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
+}
diff --git a/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts b/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts
index 2b7e5017..0d4d9225 100644
--- a/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts
+++ b/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts
@@ -1,24 +1,30 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, computed, linkedSignal } from '@angular/core';
+import { FormField, FormRoot, form as createForm } from '@angular/forms/signals';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterLink } from '@angular/router';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { RouterLink } from '@angular/router';
 
-import { ProductGroup } from '../../core/product-group';
-import { TemporalProduct } from '../temporal-product';
-import { TemporalProductListDatasource } from './temporal-product-list-datasource';
+import { Product, StockKeepingUnit } from '../../core/product';
+import { ProductGroupService } from '../../product-group/product-group.service';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { TemporalProductService } from '../temporal-product.service';
+
+export interface TemporalProductListFormData {
+  filter: string;
+  productGroup: Product | StockKeepingUnit | string | null;
+}
 
 @Component({
   selector: 'app-product-list',
   templateUrl: './temporal-product-list.component.html',
   styleUrls: ['./temporal-product-list.component.css'],
+
   imports: [
     CommonModule,
     MatFormFieldModule,
@@ -27,60 +33,57 @@ import { TemporalProductListDatasource } from './temporal-product-list-datasourc
     MatOptionModule,
     MatSelectModule,
     MatTableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     RouterLink,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class TemporalProductListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class TemporalProductListComponent {
+  private ser = inject(TemporalProductService);
+  private productGroupSer = inject(ProductGroupService);
 
-  searchFilter = new Observable<string>();
-  productGroupFilter = new BehaviorSubject<string>('');
-  data: BehaviorSubject<TemporalProduct[]> = new BehaviorSubject<TemporalProduct[]>([]);
-  dataSource: TemporalProductListDatasource = new TemporalProductListDatasource(
-    this.searchFilter,
-    this.productGroupFilter,
-    this.data,
-  );
+  formModel = linkedSignal({
+    source: () => null,
+    computation: (): TemporalProductListFormData => ({
+      filter: '',
+      productGroup: '',
+    }),
+  });
 
-  form: FormGroup<{
-    filter: FormControl<string>;
-    productGroup: FormControl<string | null>;
-  }>;
+  form = createForm(this.formModel);
+
+  productGroupsResource = this.productGroupSer.list();
+  productGroups = computed(() => this.productGroupsResource.value() ?? []);
+
+  resource = this.ser.list();
+
+  dataSource = computed(() => {
+    let data = this.resource.value() ?? [];
+    const filterValue = (this.formModel().filter ?? '').trim().toLowerCase();
+    const groupValue = this.formModel().productGroup;
+
+    if (filterValue || groupValue) {
+      data = data.filter((d) => {
+        let match = true;
+        if (filterValue) {
+          match = match && d.products[0].name.toLowerCase().includes(filterValue);
+        }
+        if (groupValue) {
+          match = match && d.products[0].productGroup?.id === groupValue;
+        }
+        return match;
+      });
+    }
+    return data;
+  });
 
-  list: TemporalProduct[] = [];
-  productGroups: ProductGroup[] = [];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns: string[] = ['product', 'sku', 'info'];
 
-  constructor() {
-    this.form = new FormGroup({
-      filter: new FormControl<string>('', { nonNullable: true }),
-      productGroup: new FormControl<string | null>(''),
-    });
-    this.data.subscribe((data: TemporalProduct[]) => {
-      this.list = data;
-    });
-    this.searchFilter = this.form.controls.filter.valueChanges.pipe(debounceTime(150), distinctUntilChanged());
-  }
-
   filterOn(val: string) {
-    this.productGroupFilter.next(val);
-  }
-
-  ngOnInit() {
-    this.dataSource = new TemporalProductListDatasource(this.searchFilter, this.productGroupFilter, this.data);
-    this.route.data.subscribe((value) => {
-      const data = value as {
-        list: TemporalProduct[];
-        productGroups: ProductGroup[];
-      };
-      this.loadData(data.list, data.productGroups);
-    });
-  }
-
-  loadData(list: TemporalProduct[], productGroups: ProductGroup[]) {
-    this.productGroups = productGroups;
-    this.data.next(list);
+    this.formModel.update((m) => ({ ...m, productGroup: val }));
   }
 }
diff --git a/overlord/src/app/temporal-product/temporal-product.resolver.spec.ts b/overlord/src/app/temporal-product/temporal-product.resolver.spec.ts
deleted file mode 100644
index 129c4dd0..00000000
--- a/overlord/src/app/temporal-product/temporal-product.resolver.spec.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { inject, TestBed } from '@angular/core/testing';
-
-import { TemporalProductResolverService } from './temporal-product-resolver.service';
-
-describe('TemporalProductResolverService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [TemporalProductResolverService],
-    });
-  });
-
-  it('should be created', inject([TemporalProductResolverService], (service: TemporalProductResolverService) => {
-    expect(service).toBeTruthy();
-  }));
-});
diff --git a/overlord/src/app/temporal-product/temporal-product.resolver.ts b/overlord/src/app/temporal-product/temporal-product.resolver.ts
deleted file mode 100644
index 7652b7fa..00000000
--- a/overlord/src/app/temporal-product/temporal-product.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { TemporalProduct } from './temporal-product';
-import { TemporalProductService } from './temporal-product.service';
-
-export const temporalProductResolver: ResolveFn<TemporalProduct> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(TemporalProductService).get(id as string);
-};
diff --git a/overlord/src/app/temporal-product/temporal-product.service.ts b/overlord/src/app/temporal-product/temporal-product.service.ts
index c20808a9..943132df 100644
--- a/overlord/src/app/temporal-product/temporal-product.service.ts
+++ b/overlord/src/app/temporal-product/temporal-product.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Injectable, inject } from '@angular/core';
+import { HttpClient, httpResource, HttpHeaders } from '@angular/common/http';
+import { Injectable, Signal, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
@@ -11,34 +11,28 @@ const httpOptions = {
 };
 
 const url = '/api/temporal-products';
-const serviceName = 'ProductService';
-
 @Injectable({ providedIn: 'root' })
 export class TemporalProductService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string): Observable<TemporalProduct> {
-    return this.http
-      .get<TemporalProduct>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<TemporalProduct>;
+  get(id: Signal<string>) {
+    return httpResource<TemporalProduct>(() => `${url}/${id()}`);
   }
 
-  list(): Observable<TemporalProduct[]> {
-    return this.http
-      .get<TemporalProduct[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<TemporalProduct[]>;
+  list() {
+    return httpResource<TemporalProduct[]>(() => `${url}/list`);
   }
 
   update(product: TemporalProduct): Observable<void> {
     return this.http
       .put<TemporalProduct>(`${url}/${product.products[0].id}`, product, httpOptions)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<void>;
+      .pipe(catchError(this.log.handleError('TemporalProductService', 'update'))) as Observable<void>;
   }
 
   delete(id: string): Observable<void> {
     return this.http
       .delete<TemporalProduct>(`${url}/${id}`, httpOptions)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<void>;
+      .pipe(catchError(this.log.handleError('TemporalProductService', 'delete'))) as Observable<void>;
   }
 }
diff --git a/overlord/src/app/temporal-product/temporal-products.routes.ts b/overlord/src/app/temporal-product/temporal-products.routes.ts
index 302bb388..68e10266 100644
--- a/overlord/src/app/temporal-product/temporal-products.routes.ts
+++ b/overlord/src/app/temporal-product/temporal-products.routes.ts
@@ -1,11 +1,8 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-import { productGroupListResolver } from '../product-group/product-group-list.resolver';
 import { TemporalProductDetailComponent } from './temporal-product-detail/temporal-product-detail.component';
-import { temporalProductListResolver } from './temporal-product-list.resolver';
 import { TemporalProductListComponent } from './temporal-product-list/temporal-product-list.component';
-import { temporalProductResolver } from './temporal-product.resolver';
 
 export const routes: Routes = [
   {
@@ -15,10 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Temporal Products',
     },
-    resolve: {
-      list: temporalProductListResolver,
-      productGroups: productGroupListResolver,
-    },
   },
   {
     path: 'new',
@@ -27,10 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Temporal Products',
     },
-    resolve: {
-      item: temporalProductResolver,
-      productGroups: productGroupListResolver,
-    },
   },
   {
     path: ':id',
@@ -39,9 +28,5 @@ export const routes: Routes = [
     data: {
       permission: 'Temporal Products',
     },
-    resolve: {
-      item: temporalProductResolver,
-      productGroups: productGroupListResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/transaction-import/transaction-import.component.ts b/overlord/src/app/transaction-import/transaction-import.component.ts
index b39552e1..340899aa 100644
--- a/overlord/src/app/transaction-import/transaction-import.component.ts
+++ b/overlord/src/app/transaction-import/transaction-import.component.ts
@@ -1,6 +1,6 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
@@ -22,7 +22,7 @@ import { ColumnMapping, PreviewRow, TransactionImportService } from './transacti
 @Component({
   selector: 'app-transaction-import',
   standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+
   imports: [
     CommonModule,
     FormsModule,
@@ -48,7 +48,8 @@ export class TransactionImportComponent {
   private router = inject(Router);
 
   // Step 1
-  accounts = signal<Account[]>([]);
+  accountsResource = this.accountService.list();
+  accounts = computed(() => this.accountsResource.value() ?? []);
   primaryAccountId = signal<string | null>(null);
   selectedFile = signal<File | null>(null);
 
@@ -85,19 +86,14 @@ export class TransactionImportComponent {
 
   constructor() {
     this.titleService.setTitle('Import Transactions');
-    this.loadAccounts();
     this.selection.changed.subscribe(() => {
       this.selectedRows.set(this.selection.selected);
     });
   }
 
-  loadAccounts() {
-    this.accountService.list().subscribe((accounts) => {
-      this.accounts.set(accounts);
-    });
-  }
-
-  filteredAccounts = signal<Account[]>([]);
+  searchQuery = signal<string | null>(null);
+  filteredAccountsResource = this.accountService.autocomplete(this.searchQuery);
+  filteredAccounts = computed(() => this.filteredAccountsResource.value() ?? []);
   primaryAccountName = signal<string>('');
 
   onPrimaryAccountSearch(query: string) {
@@ -107,9 +103,9 @@ export class TransactionImportComponent {
     this.primaryAccountName.set(query);
     this.primaryAccountId.set(null);
     if (query && query.length >= 2) {
-      this.accountService.autocomplete(query).subscribe((res) => this.filteredAccounts.set(res));
+      this.searchQuery.set(query);
     } else {
-      this.filteredAccounts.set([]);
+      this.searchQuery.set(null);
     }
   }
 
@@ -128,9 +124,9 @@ export class TransactionImportComponent {
     // Notify angular about row update for template binding
     this.previewRows.set([...this.previewRows()]);
     if (query && query.length >= 2) {
-      this.accountService.autocomplete(query).subscribe((res) => this.filteredAccounts.set(res));
+      this.searchQuery.set(query);
     } else {
-      this.filteredAccounts.set([]);
+      this.searchQuery.set(null);
     }
   }
 
diff --git a/overlord/src/app/trial-balance/trial-balance-datasource.ts b/overlord/src/app/trial-balance/trial-balance-datasource.ts
deleted file mode 100644
index 38e2e74f..00000000
--- a/overlord/src/app/trial-balance/trial-balance-datasource.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { TrialBalanceItem } from './trial-balance-item';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-export class TrialBalanceDataSource extends DataSource<TrialBalanceItem> {
-  constructor(
-    public data: TrialBalanceItem[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<TrialBalanceItem[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: TrialBalanceItem[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: TrialBalanceItem[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a: TrialBalanceItem, b: TrialBalanceItem) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'type':
-          return compare(a.type, b.type, isAsc);
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        case 'debit':
-          return compare(+a.debit, +b.debit, isAsc);
-        case 'credit':
-          return compare(+a.credit, +b.credit, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/trial-balance/trial-balance.component.html b/overlord/src/app/trial-balance/trial-balance.component.html
index 03f480bd..c576adc9 100644
--- a/overlord/src/app/trial-balance/trial-balance.component.html
+++ b/overlord/src/app/trial-balance/trial-balance.component.html
@@ -1,50 +1,56 @@
 <h2>Trial Balance</h2>
 
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto basis-4-5">
       <mat-label>Date</mat-label>
-      <input matInput #dateElement [matDatepicker]="dateInput" formControlName="date" autocomplete="off" />
+      <input matInput #dateElement [matDatepicker]="dateInput" [formField]="form.date" autocomplete="off" />
       <mat-datepicker-toggle matSuffix [for]="dateInput"></mat-datepicker-toggle>
       <mat-datepicker #dateInput></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="show()" class="flex-auto">Show</button>
   </div>
 </form>
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Type Column -->
-  <ng-container matColumnDef="type">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
-  </ng-container>
+@if (resource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (resource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="resource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Type Column -->
+    <ng-container matColumnDef="type">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.type }}</mat-cell>
+    </ng-container>
 
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-  </ng-container>
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+    </ng-container>
 
-  <!-- Debit Column -->
-  <ng-container matColumnDef="debit">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | accounting }}</mat-cell>
-  </ng-container>
+    <!-- Debit Column -->
+    <ng-container matColumnDef="debit">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Debit</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.debit | currency: 'INR' | accounting }}</mat-cell>
+    </ng-container>
 
-  <!-- Credit Column -->
-  <ng-container matColumnDef="credit">
-    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
-    <mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | accounting }}</mat-cell>
-  </ng-container>
+    <!-- Credit Column -->
+    <ng-container matColumnDef="credit">
+      <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Credit</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.credit | currency: 'INR' | accounting }}</mat-cell>
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250, 300]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="(this.info().body ?? []).length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250, 300]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/trial-balance/trial-balance.component.ts b/overlord/src/app/trial-balance/trial-balance.component.ts
index 611e7a2d..298cc9c1 100644
--- a/overlord/src/app/trial-balance/trial-balance.component.ts
+++ b/overlord/src/app/trial-balance/trial-balance.component.ts
@@ -1,26 +1,34 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, HostListener, inject, computed, linkedSignal, signal, input } from '@angular/core';
+import { FormField, FormRoot, form as createForm } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 
 import { AccountingPipe } from '../shared/accounting.pipe';
+import { ErrorStateComponent } from '../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
 import { TrialBalance } from './trial-balance';
-import { TrialBalanceDataSource } from './trial-balance-datasource';
+import { TrialBalanceService } from './trial-balance.service';
+
+export interface TrialBalanceFormData {
+  date: Date;
+}
 
 @Component({
   selector: 'app-trial-balance',
   templateUrl: './trial-balance.component.html',
   styleUrls: ['./trial-balance.component.css'],
+
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatDatepickerModule,
@@ -30,20 +38,64 @@ import { TrialBalanceDataSource } from './trial-balance-datasource';
     MatPaginatorModule,
     CurrencyPipe,
     AccountingPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class TrialBalanceComponent implements OnInit {
+export class TrialBalanceComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
+  private ser = inject(TrialBalanceService);
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
-  info: TrialBalance = new TrialBalance();
-  dataSource: TrialBalanceDataSource = new TrialBalanceDataSource(this.info.body, this.paginator, this.sort);
-  form: FormGroup<{
-    date: FormControl<moment.Moment>;
-  }>;
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  date = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  resource = this.ser.list(this.date);
+
+  info = computed(() => this.resource.value() ?? new TrialBalance());
+  formModel = linkedSignal({
+    source: this.info,
+    computation: (v): TrialBalanceFormData => ({
+      date: v.date ? moment(v.date, 'DD-MMM-YYYY').toDate() : new Date(),
+    }),
+  });
+
+  form = createForm(this.formModel, () => {});
+  sortedList = computed(() => {
+    const data = this.info().body ?? [];
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'type':
+          return compare(a.name, b.name, isAsc);
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'debit':
+          return compare(a.debit, b.debit, isAsc);
+        case 'credit':
+          return compare(a.credit, b.credit, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['type', 'name', 'debit', 'credit'];
@@ -51,27 +103,7 @@ export class TrialBalanceComponent implements OnInit {
   @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
-
-    this.dateElement.nativeElement.focus();
-    this.dateElement.nativeElement.select();
-  }
-
-  constructor() {
-    this.form = new FormGroup({
-      date: new FormControl(moment(new Date()), { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { info: TrialBalance };
-
-      this.info = data.info;
-      this.form.setValue({
-        date: moment(this.info.date, 'DD-MMM-YYYY'),
-      });
-      this.dataSource = new TrialBalanceDataSource(this.info.body, this.paginator, this.sort);
-    });
+    this.form().focusBoundControl();
   }
 
   show() {
@@ -80,10 +112,22 @@ export class TrialBalanceComponent implements OnInit {
   }
 
   getInfo(): TrialBalance {
-    const formModel = this.form.value;
+    const formModel = this.formModel();
 
     return new TrialBalance({
       date: moment(formModel.date).format('DD-MMM-YYYY'),
     });
   }
+
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
+  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/trial-balance/trial-balance.resolver.spec.ts b/overlord/src/app/trial-balance/trial-balance.resolver.spec.ts
deleted file mode 100644
index c4d8a736..00000000
--- a/overlord/src/app/trial-balance/trial-balance.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { TrialBalance } from './trial-balance';
-import { trialBalanceResolver } from './trial-balance.resolver';
-
-describe('trialBalanceResolver', () => {
-  const executeResolver: ResolveFn<TrialBalance> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => trialBalanceResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/trial-balance/trial-balance.resolver.ts b/overlord/src/app/trial-balance/trial-balance.resolver.ts
deleted file mode 100644
index 36013a5c..00000000
--- a/overlord/src/app/trial-balance/trial-balance.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { TrialBalance } from './trial-balance';
-import { TrialBalanceService } from './trial-balance.service';
-
-export const trialBalanceResolver: ResolveFn<TrialBalance> = (route) => {
-  const date = route.paramMap.get('date');
-  return inject(TrialBalanceService).list(date);
-};
diff --git a/overlord/src/app/trial-balance/trial-balance.routes.ts b/overlord/src/app/trial-balance/trial-balance.routes.ts
index e9f47388..7aa2c04b 100644
--- a/overlord/src/app/trial-balance/trial-balance.routes.ts
+++ b/overlord/src/app/trial-balance/trial-balance.routes.ts
@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { TrialBalanceComponent } from './trial-balance.component';
-import { trialBalanceResolver } from './trial-balance.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Trial Balance',
     },
-    resolve: {
-      info: trialBalanceResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
   {
@@ -24,9 +20,6 @@ export const routes: Routes = [
     data: {
       permission: 'Trial Balance',
     },
-    resolve: {
-      info: trialBalanceResolver,
-    },
     runGuardsAndResolvers: 'always',
   },
 ];
diff --git a/overlord/src/app/trial-balance/trial-balance.service.ts b/overlord/src/app/trial-balance/trial-balance.service.ts
index f293cb32..a168243d 100644
--- a/overlord/src/app/trial-balance/trial-balance.service.ts
+++ b/overlord/src/app/trial-balance/trial-balance.service.ts
@@ -1,14 +1,10 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs/internal/Observable';
-import { catchError } from 'rxjs/operators';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { TrialBalance } from './trial-balance';
 
 const url = '/api/trial-balance';
-const serviceName = 'TrialBalanceService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,10 +12,11 @@ export class TrialBalanceService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(date: string | null): Observable<TrialBalance> {
-    const listUrl = date === null ? url : `${url}/${date}`;
-    return this.http
-      .get<TrialBalance>(listUrl)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<TrialBalance>;
+  list(date: Signal<string | null>) {
+    return httpResource<TrialBalance>(() => {
+      const d = date();
+      const listUrl = d === null ? url : `${url}/${d}`;
+      return listUrl;
+    });
   }
 }
diff --git a/overlord/src/app/user/user-detail/user-detail.component.html b/overlord/src/app/user/user-detail/user-detail.component.html
index 738562fe..f9aebc53 100644
--- a/overlord/src/app/user/user-detail/user-detail.component.html
+++ b/overlord/src/app/user/user-detail/user-detail.component.html
@@ -1,33 +1,40 @@
 <h2>User</h2>
 
-<form [formGroup]="form" class="flex flex-col wrapped">
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" />
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Password</mat-label>
-      <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" />
-      <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
-    </mat-form-field>
-  </div>
-  <div class="row-container">
-    <mat-checkbox formControlName="lockedOut" class="flex-auto">Is Locked Out?</mat-checkbox>
-  </div>
-  <mat-divider></mat-divider>
-  <div formArrayName="roles">
-    @for (r of item.roles; track r; let i = $index) {
-      <div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
-        <mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
-      </div>
-    }
-  </div>
-</form>
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <form class="flex flex-col wrapped" [formRoot]="form">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput #nameElement [formField]="form.name" />
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Password</mat-label>
+        <input matInput [formField]="form.password" [type]="hide ? 'password' : 'text'" />
+        <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-checkbox [formField]="form.lockedOut" class="flex-auto">Is Locked Out?</mat-checkbox>
+    </div>
+    <mat-divider></mat-divider>
+    <div>
+      @for (r of form.roles; track r; let i = $index) {
+        <div class="row-container">
+          <mat-checkbox [formField]="r.enabled" class="flex-auto">{{ r.name().value() }}</mat-checkbox>
+        </div>
+      }
+    </div>
+  </form>
 
-<div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()">Save</button>
-  <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-</div>
+  <div class="row-container">
+    <button mat-raised-button color="primary" (click)="save()">Save</button>
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  </div>
+}
diff --git a/overlord/src/app/user/user-detail/user-detail.component.ts b/overlord/src/app/user/user-detail/user-detail.component.ts
index 89f10771..0eb2697a 100644
--- a/overlord/src/app/user/user-detail/user-detail.component.ts
+++ b/overlord/src/app/user/user-detail/user-detail.component.ts
@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, input, computed, linkedSignal, afterNextRender } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
@@ -8,96 +8,80 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { User } from '../../core/user';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { UserService } from '../user.service';
 
+export interface UserDetailFormData {
+  name: string;
+  password: string;
+  lockedOut: boolean;
+  roles: { id: string; name: string; enabled: boolean }[];
+}
 @Component({
   selector: 'app-user-detail',
   templateUrl: './user-detail.component.html',
   styleUrls: ['./user-detail.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatIconModule,
     MatCheckboxModule,
     MatDividerModule,
     MatButtonModule,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class UserDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class UserDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
   private ser = inject(UserService);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    name: FormControl<string | null>;
-    password: FormControl<string | null>;
-    lockedOut: FormControl<boolean>;
-    roles: FormArray<
-      FormGroup<{
-        role: FormControl<boolean>;
-      }>
-    >;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  item: User = new User();
-  hide: boolean;
+  item = computed(() => this.itemResource.value() ?? new User());
+
+  formModel = linkedSignal({
+    source: this.item,
+    computation: (itemVal): UserDetailFormData => ({
+      name: itemVal.name ?? '',
+      password: '',
+      lockedOut: itemVal.lockedOut,
+      roles: itemVal.roles.map((x) => ({ id: x.id ?? '', name: x.name, enabled: x.enabled })),
+    }),
+  });
+
+  form = createForm(this.formModel);
+
+  hide = true;
 
   constructor() {
-    this.hide = true;
-    this.form = new FormGroup({
-      name: new FormControl<string | null>(null),
-      password: new FormControl<string | null>(null),
-      lockedOut: new FormControl<boolean>(false, { nonNullable: true }),
-      roles: new FormArray<FormGroup<{ role: FormControl<boolean> }>>([]),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
+      // this.form.name().focusBoundControl();
     });
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: User };
-
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: User) {
-    this.item = item;
-    this.form.controls.name.setValue(item.name);
-    this.form.controls.password.setValue(null);
-    this.form.controls.lockedOut.setValue(item.lockedOut);
-    this.form.controls.roles.clear();
-    this.item.roles.forEach((x) =>
-      this.form.controls.roles.push(
-        new FormGroup({
-          role: new FormControl<boolean>(x.enabled, { nonNullable: true }),
-        }),
-      ),
-    );
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   save() {
-    if (this.route.snapshot.paramMap.get('id') === 'me') {
+    if (this.id() === 'me') {
       this.ser.updateMe(this.getItem()).subscribe({
         next: () => {
           this.snackBar.open('', 'Success');
           this.router.navigateByUrl('/');
         },
         error: (error) => {
-          this.snackBar.open(error, 'Danger');
+          this.snackBar.open(error as string, 'Danger');
         },
       });
     } else {
@@ -107,20 +91,20 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
           this.router.navigateByUrl('/users');
         },
         error: (error) => {
-          this.snackBar.open(error, 'Danger');
+          this.snackBar.open(error as string, 'Danger');
         },
       });
     }
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
+    this.ser.delete(this.item().id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/users');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -139,14 +123,13 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): User {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    this.item.password = formModel.password ?? '';
-    this.item.lockedOut = formModel.lockedOut ?? true;
-    const array = this.form.controls.roles;
-    this.item.roles.forEach((item, index) => {
-      item.enabled = array.controls[index].value.role ?? false;
+    const formModel = this.formModel();
+    return new User({
+      ...this.item(),
+      name: formModel.name ?? '',
+      password: formModel.password ?? '',
+      lockedOut: formModel.lockedOut ?? true,
+      roles: formModel.roles.map((x) => ({ id: x.id ?? '', name: x.name, enabled: x.enabled })),
     });
-    return this.item;
   }
 }
diff --git a/overlord/src/app/user/user-list.resolver.spec.ts b/overlord/src/app/user/user-list.resolver.spec.ts
deleted file mode 100644
index b0edb25c..00000000
--- a/overlord/src/app/user/user-list.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { User } from '../core/user';
-import { userListResolver } from './user-list.resolver';
-
-describe('userListResolver', () => {
-  const executeResolver: ResolveFn<User[]> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => userListResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/user/user-list.resolver.ts b/overlord/src/app/user/user-list.resolver.ts
deleted file mode 100644
index deecc7c5..00000000
--- a/overlord/src/app/user/user-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { User } from '../core/user';
-import { UserService } from './user.service';
-
-export const userListResolver: ResolveFn<User[]> = () => {
-  return inject(UserService).list();
-};
diff --git a/overlord/src/app/user/user-list/user-list-datasource.ts b/overlord/src/app/user/user-list/user-list-datasource.ts
deleted file mode 100644
index 86661fa8..00000000
--- a/overlord/src/app/user/user-list/user-list-datasource.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { EventEmitter } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort, Sort } from '@angular/material/sort';
-import { merge, Observable, of as observableOf } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { User } from '../../core/user';
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-const compare = (a: string | number, b: string | number, isAsc: boolean) => (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-
-export class UserListDataSource extends DataSource<User> {
-  constructor(
-    public data: User[],
-    private paginator?: MatPaginator,
-    private sort?: MatSort,
-  ) {
-    super();
-  }
-
-  connect(): Observable<User[]> {
-    const dataMutations: (EventEmitter<PageEvent> | EventEmitter<Sort>)[] = [];
-    if (this.paginator) {
-      dataMutations.push((this.paginator as MatPaginator).page);
-    }
-    if (this.sort) {
-      dataMutations.push((this.sort as MatSort).sortChange);
-    }
-
-    // Set the paginators length
-    if (this.paginator) {
-      this.paginator.length = this.data.length;
-    }
-
-    return merge(observableOf(this.data), ...dataMutations).pipe(
-      map(() => this.getPagedData(this.getSortedData([...this.data]))),
-    );
-  }
-
-  disconnect() {}
-
-  private getPagedData(data: User[]) {
-    if (this.paginator === undefined) {
-      return data;
-    }
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: User[]) {
-    if (this.sort === undefined) {
-      return data;
-    }
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    const sort = this.sort as MatSort;
-    return data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
diff --git a/overlord/src/app/user/user-list/user-list.component.html b/overlord/src/app/user/user-list/user-list.component.html
index c5f2657c..c2be0160 100644
--- a/overlord/src/app/user/user-list/user-list.component.html
+++ b/overlord/src/app/user/user-list/user-list.component.html
@@ -6,50 +6,56 @@
   </a>
 </h2>
 
-<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      ><a [routerLink]="['/users', row.id]">{{ row.name }}</a></mat-cell
-    >
-  </ng-container>
+@if (listResource.isLoading()) {
+  <app-skeleton-loader type="table" [count]="1" />
+} @else if (listResource.error()) {
+  <app-error-state [message]="'Failed to load list.'" (retryAction)="listResource.reload()" />
+} @else {
+  <mat-table #table [dataSource]="dataSource()" matSort (matSortChange)="sortData($event)">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        ><a [routerLink]="['/users', row.id]">{{ row.name }}</a></mat-cell
+      >
+    </ng-container>
 
-  <!-- Locked Out Column -->
-  <ng-container matColumnDef="lockedOut">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>Is Locked Out?</mat-header-cell>
-    <mat-cell *matCellDef="let row">{{ row.lockedOut }}</mat-cell>
-  </ng-container>
+    <!-- Locked Out Column -->
+    <ng-container matColumnDef="lockedOut">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Is Locked Out?</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.lockedOut }}</mat-cell>
+    </ng-container>
 
-  <!-- Roles Column -->
-  <ng-container matColumnDef="roles">
-    <mat-header-cell *matHeaderCellDef>Roles</mat-header-cell>
-    <mat-cell *matCellDef="let row">
-      <ul>
-        @for (role of row.roles; track role) {
-          <li>{{ role }}</li>
-        }
-      </ul>
-    </mat-cell>
-  </ng-container>
+    <!-- Roles Column -->
+    <ng-container matColumnDef="roles">
+      <mat-header-cell *matHeaderCellDef>Roles</mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <ul>
+          @for (role of row.roles; track role) {
+            <li>{{ role }}</li>
+          }
+        </ul>
+      </mat-cell>
+    </ng-container>
 
-  <!-- Last Login Column -->
-  <ng-container matColumnDef="last">
-    <mat-header-cell *matHeaderCellDef>Last Login</mat-header-cell>
-    <mat-cell *matCellDef="let row"
-      >{{ row.lastDevice }} &#64; {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
-    >
-  </ng-container>
+    <!-- Last Login Column -->
+    <ng-container matColumnDef="last">
+      <mat-header-cell *matHeaderCellDef>Last Login</mat-header-cell>
+      <mat-cell *matCellDef="let row"
+        >{{ row.lastDevice }} &#64; {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
+      >
+    </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-</mat-table>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
 
-<mat-paginator
-  #paginator
-  [length]="dataSource.data.length"
-  [pageIndex]="0"
-  [pageSize]="50"
-  [pageSizeOptions]="[25, 50, 100, 250]"
->
-</mat-paginator>
+  <mat-paginator
+    (page)="handlePageEvent($event)"
+    [length]="list().length"
+    [pageIndex]="pageIndex()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
+  </mat-paginator>
+}
diff --git a/overlord/src/app/user/user-list/user-list.component.ts b/overlord/src/app/user/user-list/user-list.component.ts
index 7e8d0554..30dbc61c 100644
--- a/overlord/src/app/user/user-list/user-list.component.ts
+++ b/overlord/src/app/user/user-list/user-list.component.ts
@@ -1,35 +1,78 @@
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
+import { MatButton } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
-import { User } from '../../core/user';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
 import { LocalTimePipe } from '../../shared/local-time.pipe';
-import { UserListDataSource } from './user-list-datasource';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { UserService } from '../user.service';
 
 @Component({
   selector: 'app-user-list',
   templateUrl: './user-list.component.html',
   styleUrls: ['./user-list.component.css'],
-  imports: [RouterModule, MatTableModule, MatIconModule, MatSortModule, MatPaginatorModule, LocalTimePipe],
+  imports: [
+    RouterModule,
+    MatTableModule,
+    MatButton,
+    MatIconModule,
+    MatSortModule,
+    MatPaginatorModule,
+    LocalTimePipe,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class UserListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class UserListComponent {
+  private ser = inject(UserService);
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');
+  listResource = this.ser.list();
+  list = computed(() => this.listResource.value() ?? []);
+  sortedList = computed(() => {
+    const data = this.list();
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
 
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  list: User[] = [];
-  dataSource: UserListDataSource = new UserListDataSource(this.list);
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'lockedOut', 'roles', 'last'];
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: User[] };
-      this.list = data.list;
-    });
-    this.dataSource = new UserListDataSource(this.list, this.paginator, this.sort);
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
   }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);
diff --git a/overlord/src/app/user/user.resolver.spec.ts b/overlord/src/app/user/user.resolver.spec.ts
deleted file mode 100644
index 6ba1a178..00000000
--- a/overlord/src/app/user/user.resolver.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ResolveFn } from '@angular/router';
-
-import { User } from '../core/user';
-import { userResolver } from './user.resolver';
-
-describe('userResolver', () => {
-  const executeResolver: ResolveFn<User> = (...resolverParameters) =>
-    TestBed.runInInjectionContext(() => userResolver(...resolverParameters));
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-  });
-
-  it('should be created', () => {
-    expect(executeResolver).toBeTruthy();
-  });
-});
diff --git a/overlord/src/app/user/user.resolver.ts b/overlord/src/app/user/user.resolver.ts
deleted file mode 100644
index fd123954..00000000
--- a/overlord/src/app/user/user.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { User } from '../core/user';
-import { UserService } from './user.service';
-
-export const userResolver: ResolveFn<User> = (route) => {
-  const id = route.paramMap.get('id');
-  return inject(UserService).get(id);
-};
diff --git a/overlord/src/app/user/user.routes.ts b/overlord/src/app/user/user.routes.ts
index 532d0c97..3cfd4722 100644
--- a/overlord/src/app/user/user.routes.ts
+++ b/overlord/src/app/user/user.routes.ts
@@ -2,9 +2,7 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { UserDetailComponent } from './user-detail/user-detail.component';
-import { userListResolver } from './user-list.resolver';
 import { UserListComponent } from './user-list/user-list.component';
-import { userResolver } from './user.resolver';
 
 export const routes: Routes = [
   {
@@ -14,9 +12,6 @@ export const routes: Routes = [
     data: {
       permission: 'Users',
     },
-    resolve: {
-      list: userListResolver,
-    },
   },
   {
     path: 'new',
@@ -25,16 +20,10 @@ export const routes: Routes = [
     data: {
       permission: 'Users',
     },
-    resolve: {
-      item: userResolver,
-    },
   },
   {
     path: ':id',
     component: UserDetailComponent,
     canActivate: [authGuard],
-    resolve: {
-      item: userResolver,
-    },
   },
 ];
diff --git a/overlord/src/app/user/user.service.ts b/overlord/src/app/user/user.service.ts
index 59f4b896..0153e8c0 100644
--- a/overlord/src/app/user/user.service.ts
+++ b/overlord/src/app/user/user.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { inject, Injectable, Signal } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -7,8 +7,6 @@ import { ErrorLoggerService } from '../core/error-logger.service';
 import { User } from '../core/user';
 
 const url = '/api/users';
-const serviceName = 'UserService';
-
 @Injectable({
   providedIn: 'root',
 })
@@ -16,41 +14,37 @@ export class UserService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  get(id: string | null): Observable<User> {
-    const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
-    return this.http
-      .get<User>(getUrl)
-      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<User>;
+  get(id: Signal<string | null>) {
+    return httpResource<User>(() => {
+      const getUrl: string = id() === null ? `${url}` : `${url}/${id()}`;
+      return getUrl;
+    });
   }
 
-  list(): Observable<User[]> {
-    return this.http
-      .get<User[]>(`${url}/list`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<User[]>;
+  list() {
+    return httpResource<User[]>(() => `${url}/list`);
   }
 
-  listOfNames(): Observable<string[]> {
-    return this.http
-      .get<string[]>(`${url}/active`)
-      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<string[]>;
+  listOfNames() {
+    return httpResource<string[]>(() => `${url}/active`);
   }
 
   save(user: User): Observable<User> {
     return this.http
       .post<User>(`${url}`, user)
-      .pipe(catchError(this.log.handleError(serviceName, 'save'))) as Observable<User>;
+      .pipe(catchError(this.log.handleError('UserService', 'save'))) as Observable<User>;
   }
 
   update(user: User): Observable<User> {
     return this.http
       .put<User>(`${url}/${user.id}`, user)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<User>;
+      .pipe(catchError(this.log.handleError('UserService', 'update'))) as Observable<User>;
   }
 
   updateMe(user: User): Observable<User> {
     return this.http
       .put<User>(`${url}/me`, user)
-      .pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<User>;
+      .pipe(catchError(this.log.handleError('UserService', 'update'))) as Observable<User>;
   }
 
   saveOrUpdate(user: User): Observable<User> {
@@ -63,6 +57,6 @@ export class UserService {
   delete(id: string): Observable<User> {
     return this.http
       .delete<User>(`${url}/${id}`)
-      .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<User>;
+      .pipe(catchError(this.log.handleError('UserService', 'delete'))) as Observable<User>;
   }
 }
diff --git a/overlord/src/layout.sass b/overlord/src/layout.sass
index 56133631..4d9cffdc 100644
--- a/overlord/src/layout.sass
+++ b/overlord/src/layout.sass
@@ -88,3 +88,127 @@
 .warn 
   background-color: red
 
+
+
+
+/* Chat gpt for recipe detail */
+.flex-col
+  display: flex
+  flex-direction: column
+  gap: 14px
+
+.page
+  padding: 18px
+  max-width: 1200px
+  margin: 0 auto
+
+.page-header
+  display: flex
+  align-items: flex-start
+  justify-content: space-between
+  gap: 16px
+  margin-bottom: 14px
+
+.page-title h1
+  margin: 0
+  font-size: 24px
+  font-weight: 750
+
+.page-subtitle
+  margin-top: 4px
+  opacity: 0.75
+
+.header-actions
+  display: flex
+  gap: 10px
+  flex-wrap: wrap
+
+.card
+  background: white
+  border: 1px solid rgba(0,0,0,0.08)
+  border-radius: 14px
+  padding: 14px
+
+.card-title
+  display: flex
+  align-items: center
+  gap: 10px
+  font-weight: 700
+  margin-bottom: 12px
+
+.chip
+  margin-left: auto
+  font-weight: 600
+  font-size: 12px
+  padding: 4px 10px
+  border-radius: 999px
+  border: 1px solid rgba(0,0,0,0.10)
+  opacity: 0.85
+
+.helper-text
+  font-size: 12px
+  opacity: 0.75
+  margin: -4px 0 10px 0
+
+.table-wrap
+  margin-top: 10px
+  border: 1px solid rgba(0,0,0,0.08)
+  border-radius: 12px
+  overflow: hidden
+
+.cell-title
+  font-weight: 650
+
+.cell-sub
+  font-size: 12px
+  opacity: 0.72
+
+.empty-hint
+  padding: 12px
+  font-size: 12px
+  opacity: 0.75
+
+.big-btn
+  height: 52px
+
+.two-col
+  display: grid
+  grid-template-columns: 1fr 1fr
+  gap: 14px
+
+.footer-actions
+  margin-top: 16px
+  display: flex
+  gap: 10px
+  align-items: center
+  justify-content: flex-end
+  flex-wrap: wrap
+
+.big-primary
+  height: 56px
+  padding: 0 18px
+  font-weight: 700
+
+@media (max-width: 900px)
+  .two-col
+    grid-template-columns: 1fr
+
+/* Print-friendly baseline (for later PDF export / recipe book pages) */
+@media print
+  .page-header,
+  .header-actions,
+  .footer-actions
+    display: none !important
+
+  @page
+    size: A4
+    margin: 16mm 14mm 18mm 14mm
+
+  .page
+    padding: 0
+    max-width: none
+
+  .card
+    border: none
+    border-radius: 0
+    padding: 0
\ No newline at end of file
diff --git a/overlord/src/styles.sass b/overlord/src/styles.sass
index 5cd02bd0..52bea1e7 100644
--- a/overlord/src/styles.sass
+++ b/overlord/src/styles.sass
@@ -41,3 +41,118 @@ button.mat-warn
   background: var(--mat-sys-error) !important
   color: var(--mat-sys-on-error) !important
 
+
+// ---------------- Recipe book print layout (A4) ----------------
+
+.recipe-print
+  background: #fff
+  color: #111
+  max-width: 210mm
+  margin: 0 auto
+  padding: 12mm 14mm
+  box-sizing: border-box
+  font-family: 'Helvetica Neue', Montserrat, sans-serif
+
+.recipe-print__title
+  margin: 0
+  font-size: 28px
+  line-height: 1.2
+
+.recipe-print__meta
+  display: flex
+  flex-wrap: wrap
+  gap: 10px 18px
+  margin-top: 6px
+  font-size: 12px
+
+.recipe-print__hr
+  margin: 12px 0
+  border: none
+  border-top: 1px solid rgba(0, 0, 0, 0.12)
+
+.recipe-print__section
+  margin: 0 0 14px
+
+.recipe-print__section h2
+  margin: 0 0 8px
+  font-size: 16px
+  text-transform: uppercase
+  letter-spacing: 0.04em
+
+.recipe-print__ingredients
+  margin: 0
+  padding-left: 18px
+  font-size: 13px
+
+.recipe-print__ingredients li
+  margin: 2px 0
+
+.recipe-print__steps
+  margin: 0
+  padding-left: 18px
+  font-size: 13px
+
+.recipe-print__steps li
+  margin: 10px 0
+  break-inside: avoid
+
+.recipe-print__steps .step-head
+  font-weight: 700
+
+.recipe-print__steps .phase
+  display: inline-block
+  border: 1px solid rgba(0, 0, 0, 0.25)
+  border-radius: 999px
+  padding: 0 8px
+  margin-right: 8px
+  font-size: 11px
+  font-weight: 700
+
+.recipe-print__steps .step-text
+  margin-top: 4px
+  white-space: pre-wrap
+
+.recipe-print__steps .step-notes
+  margin-top: 4px
+  opacity: 0.9
+  white-space: pre-wrap
+
+.recipe-print__photos
+  display: grid
+  grid-template-columns: repeat(2, 1fr)
+  gap: 10px
+
+.recipe-print__photos figure
+  margin: 0
+  break-inside: avoid
+
+.recipe-print__photos img
+  width: 100%
+  height: auto
+  border-radius: 8px
+  border: 1px solid rgba(0, 0, 0, 0.12)
+
+.recipe-print__photos figcaption
+  font-size: 12px
+  margin-top: 4px
+
+.recipe-print__notes p
+  margin: 6px 0
+  white-space: pre-wrap
+
+.page-break-before
+  break-before: page
+  page-break-before: always
+
+@media print
+  @page
+    size: A4
+    margin: 12mm
+
+  body
+    background: #fff !important
+
+  .recipe-print
+    padding: 0
+    max-width: none
+    margin: 0
\ No newline at end of file
diff --git a/overlord/tsconfig.app.json b/overlord/tsconfig.app.json
index 0a6a03bd..8bcd825f 100644
--- a/overlord/tsconfig.app.json
+++ b/overlord/tsconfig.app.json
@@ -6,5 +6,13 @@
     "types": []
   },
   "include": ["src/**/*.ts"],
-  "exclude": ["src/**/*.spec.ts"]
+  "exclude": ["src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }
diff --git a/overlord/yarn.lock b/overlord/yarn.lock
index 132b67a3..c5593b9d 100644
--- a/overlord/yarn.lock
+++ b/overlord/yarn.lock
@@ -2,132 +2,6 @@
 # yarn lockfile v1
 
 
-"@algolia/abtesting@1.14.1":
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@algolia/abtesting/-/abtesting-1.14.1.tgz#91e6ca4004d25a54cc272cb765929351bdfd4379"
-  integrity sha512-Dkj0BgPiLAaim9sbQ97UKDFHJE/880wgStAM18U++NaJ/2Cws34J5731ovJifr6E3Pv4T2CqvMXf8qLCC417Ew==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-    "@algolia/requester-browser-xhr" "5.48.1"
-    "@algolia/requester-fetch" "5.48.1"
-    "@algolia/requester-node-http" "5.48.1"
-
-"@algolia/client-abtesting@5.48.1":
-  version "5.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/client-abtesting/-/client-abtesting-5.48.1.tgz#8b281afa7a79dd25a130cc4a7589bee030cc3f78"
-  integrity sha512-LV5qCJdj+/m9I+Aj91o+glYszrzd7CX6NgKaYdTOj4+tUYfbS62pwYgUfZprYNayhkQpVFcrW8x8ZlIHpS23Vw==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-    "@algolia/requester-browser-xhr" "5.48.1"
-    "@algolia/requester-fetch" "5.48.1"
-    "@algolia/requester-node-http" "5.48.1"
-
-"@algolia/client-analytics@5.48.1":
-  version "5.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-5.48.1.tgz#b1a735b3586052a500ad2fd2a8a02d7345739ac2"
-  integrity sha512-/AVoMqHhPm14CcHq7mwB+bUJbfCv+jrxlNvRjXAuO+TQa+V37N8k1b0ijaRBPdmSjULMd8KtJbQyUyabXOu6Kg==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-    "@algolia/requester-browser-xhr" "5.48.1"
-    "@algolia/requester-fetch" "5.48.1"
-    "@algolia/requester-node-http" "5.48.1"
-
-"@algolia/client-common@5.48.1":
-  version "5.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-5.48.1.tgz#2332a88d2937eb4a2e3ae6d05786dec4f161fdeb"
-  integrity sha512-VXO+qu2Ep6ota28ktvBm3sG53wUHS2n7bgLWmce5jTskdlCD0/JrV4tnBm1l7qpla1CeoQb8D7ShFhad+UoSOw==
-
-"@algolia/client-insights@5.48.1":
-  version "5.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/client-insights/-/client-insights-5.48.1.tgz#ba0718de714832420c44e20a33fc4df7ab3088f3"
-  integrity sha512-zl+Qyb0nLg+Y5YvKp1Ij+u9OaPaKg2/EPzTwKNiVyOHnQJlFxmXyUZL1EInczAZsEY8hVpPCLtNfhMhfxluXKQ==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-    "@algolia/requester-browser-xhr" "5.48.1"
-    "@algolia/requester-fetch" "5.48.1"
-    "@algolia/requester-node-http" "5.48.1"
-
-"@algolia/client-personalization@5.48.1":
-  version "5.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-5.48.1.tgz#634c5826ab9c329cefe7897f341f21e508f3d818"
-  integrity sha512-r89Qf9Oo9mKWQXumRu/1LtvVJAmEDpn8mHZMc485pRfQUMAwSSrsnaw1tQ3sszqzEgAr1c7rw6fjBI+zrAXTOw==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-    "@algolia/requester-browser-xhr" "5.48.1"
-    "@algolia/requester-fetch" "5.48.1"
-    "@algolia/requester-node-http" "5.48.1"
-
-"@algolia/client-query-suggestions@5.48.1":
-  version "5.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/client-query-suggestions/-/client-query-suggestions-5.48.1.tgz#cd23455fe5b6a152beb57d52df7b83a24bdd2b19"
-  integrity sha512-TPKNPKfghKG/bMSc7mQYD9HxHRUkBZA4q1PEmHgICaSeHQscGqL4wBrKkhfPlDV1uYBKW02pbFMUhsOt7p4ZpA==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-    "@algolia/requester-browser-xhr" "5.48.1"
-    "@algolia/requester-fetch" "5.48.1"
-    "@algolia/requester-node-http" "5.48.1"
-
-"@algolia/client-search@5.48.1":
-  version "5.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-5.48.1.tgz#026bd64e08432c10f85f9362a7bd33413997d945"
-  integrity sha512-4Fu7dnzQyQmMFknYwTiN/HxPbH4DyxvQ1m+IxpPp5oslOgz8m6PG5qhiGbqJzH4HiT1I58ecDiCAC716UyVA8Q==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-    "@algolia/requester-browser-xhr" "5.48.1"
-    "@algolia/requester-fetch" "5.48.1"
-    "@algolia/requester-node-http" "5.48.1"
-
-"@algolia/ingestion@1.48.1":
-  version "1.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/ingestion/-/ingestion-1.48.1.tgz#6015f95959f92825a71678b7d7b6fc8384e8fffa"
-  integrity sha512-/RFq3TqtXDUUawwic/A9xylA2P3LDMO8dNhphHAUOU51b1ZLHrmZ6YYJm3df1APz7xLY1aht6okCQf+/vmrV9w==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-    "@algolia/requester-browser-xhr" "5.48.1"
-    "@algolia/requester-fetch" "5.48.1"
-    "@algolia/requester-node-http" "5.48.1"
-
-"@algolia/monitoring@1.48.1":
-  version "1.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/monitoring/-/monitoring-1.48.1.tgz#2ef327e286c6be9a111a48f1061d0ab38e514031"
-  integrity sha512-Of0jTeAZRyRhC7XzDSjJef0aBkgRcvRAaw0ooYRlOw57APii7lZdq+layuNdeL72BRq1snaJhoMMwkmLIpJScw==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-    "@algolia/requester-browser-xhr" "5.48.1"
-    "@algolia/requester-fetch" "5.48.1"
-    "@algolia/requester-node-http" "5.48.1"
-
-"@algolia/recommend@5.48.1":
-  version "5.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/recommend/-/recommend-5.48.1.tgz#256952a4bd4d07a524b6bb36d6a92636d42193f4"
-  integrity sha512-bE7JcpFXzxF5zHwj/vkl2eiCBvyR1zQ7aoUdO+GDXxGp0DGw7nI0p8Xj6u8VmRQ+RDuPcICFQcCwRIJT5tDJFw==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-    "@algolia/requester-browser-xhr" "5.48.1"
-    "@algolia/requester-fetch" "5.48.1"
-    "@algolia/requester-node-http" "5.48.1"
-
-"@algolia/requester-browser-xhr@5.48.1":
-  version "5.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.48.1.tgz#e50c5b406cb27ece45dd2cab8dc9a3058e7e7f74"
-  integrity sha512-MK3wZ2koLDnvH/AmqIF1EKbJlhRS5j74OZGkLpxI4rYvNi9Jn/C7vb5DytBnQ4KUWts7QsmbdwHkxY5txQHXVw==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-
-"@algolia/requester-fetch@5.48.1":
-  version "5.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-fetch/-/requester-fetch-5.48.1.tgz#537e5dc32b451b7f41f0d6a5111324a30ffa0250"
-  integrity sha512-2oDT43Y5HWRSIQMPQI4tA/W+TN/N2tjggZCUsqQV440kxzzoPGsvv9QP1GhQ4CoDa+yn6ygUsGp6Dr+a9sPPSg==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-
-"@algolia/requester-node-http@5.48.1":
-  version "5.48.1"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-5.48.1.tgz#587a5774e30a6fd0aac237a37987134183130302"
-  integrity sha512-xcaCqbhupVWhuBP1nwbk1XNvwrGljozutEiLx06mvqDf3o8cHyEgQSHS4fKJM+UAggaWVnnFW+Nne5aQ8SUJXg==
-  dependencies:
-    "@algolia/client-common" "5.48.1"
-
 "@ampproject/remapping@2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
@@ -136,184 +10,179 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@angular-devkit/architect@0.2102.9", "@angular-devkit/architect@>= 0.2100.0 < 0.2200.0":
-  version "0.2102.9"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.2102.9.tgz#93ba1bc830d5f15488d0ba7708ba047896cc7e5b"
-  integrity sha512-OlPEtd5pPZSFdkXEIyZ93jsfBrkvUrVPb3xs4z2WPRnBRk9jyey40eKnmql86KRHfdn4WjHpmde4NDgtDpZRxQ==
+"@angular-devkit/architect@0.2201.4", "@angular-devkit/architect@>= 0.2200.0 < 0.2300.0":
+  version "0.2201.4"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.2201.4.tgz#55784db27897aaeaed48b1d93fce1a0007542a62"
+  integrity sha512-a2J9hdBYFobhMx9G0KwCdo6+LrWIOOyIeijrA/QSZiPOjg8dAprhMh7BEQkF3eT6R1q7wDGP+IElVR9LsBlXQw==
   dependencies:
-    "@angular-devkit/core" "21.2.9"
+    "@angular-devkit/core" "22.1.4"
     rxjs "7.8.2"
 
-"@angular-devkit/core@21.2.9", "@angular-devkit/core@>= 21.0.0 < 22.0.0":
-  version "21.2.9"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-21.2.9.tgz#c172a7fddf9ab780712c2859ea1f5daeea30ecdb"
-  integrity sha512-04rdOGEzjLWFHlyAwqtuikginFeQ2jfXS5HqqKNP0VtG6Uu9NUDAEW5UDvXgqkEMfCDwGZbmg2iRHxp3AmAKVw==
+"@angular-devkit/core@22.1.4", "@angular-devkit/core@>= 22.0.0 < 23.0.0":
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-22.1.4.tgz#ac3401d204e761e7cb7f22f02d31bc9cf5d1e161"
+  integrity sha512-40jG/6chng9fQuWtpg1kadPO17sRTurNh0aav6Uxebn65PfNpTpvhPIYVIcRgv4tCKdMd++YH95A8SiaIOwqig==
   dependencies:
-    ajv "8.18.0"
+    ajv "8.20.0"
     ajv-formats "3.0.1"
     jsonc-parser "3.3.1"
-    picomatch "4.0.4"
+    picomatch "4.0.5"
     rxjs "7.8.2"
     source-map "0.7.6"
 
-"@angular-devkit/schematics@21.2.9", "@angular-devkit/schematics@>= 21.0.0 < 22.0.0":
-  version "21.2.9"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-21.2.9.tgz#e68cce42564110877be9d1590b4a67c1c2665033"
-  integrity sha512-Gyyuq2Vet70AMkbC+e0L6rjzjZWjSOyKTlOJvd99GjjyWQf6eezjd8IcF17ppKJsML6YUagO2I6AlWROq5yJmg==
+"@angular-devkit/schematics@22.1.4", "@angular-devkit/schematics@>= 22.0.0 < 23.0.0":
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-22.1.4.tgz#087ef5b69e3d52d458d44fb0738584f53badef41"
+  integrity sha512-UBJ7jc7B0vRfmrVwlvpmuudo1D7AfpO6ugf1BxvkM4sw5m8cJpZtaIJFKBorv0QZo78CyDOroQfQdXaijjB2ZA==
   dependencies:
-    "@angular-devkit/core" "21.2.9"
+    "@angular-devkit/core" "22.1.4"
     jsonc-parser "3.3.1"
-    magic-string "0.30.21"
-    ora "9.3.0"
+    magic-string "1.0.0"
+    ora "9.4.1"
     rxjs "7.8.2"
 
-"@angular-eslint/builder@21.3.1":
-  version "21.3.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/builder/-/builder-21.3.1.tgz#ffd36633e1313b98ff5b7f936fc818c46ae0a0ec"
-  integrity sha512-1f1Lyp5e7OH6txiV224HaY3G1uRCj91OSKq7hT2Vw9NRw6zWFc1anBpDeLVjpL9ptUxzUGIQR5jEV54hOPayoQ==
+"@angular-eslint/builder@22.1.0":
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/builder/-/builder-22.1.0.tgz#d38388a397239e2c65addb0ca6428dd4e7199ace"
+  integrity sha512-gmdk06PK0whNJlapIQjRnhud2/n+oIIDBIoLUHWFFxhHRs+ZstVc6+81gf+sYDOm1Ehmb0V3nZAg3YpT1Mk0Eg==
   dependencies:
-    "@angular-devkit/architect" ">= 0.2100.0 < 0.2200.0"
-    "@angular-devkit/core" ">= 21.0.0 < 22.0.0"
+    "@angular-devkit/architect" ">= 0.2200.0 < 0.2300.0"
+    "@angular-devkit/core" ">= 22.0.0 < 23.0.0"
 
-"@angular-eslint/bundled-angular-compiler@21.3.1":
-  version "21.3.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-21.3.1.tgz#025c0bc7fe57ed2f489b39cac77df82f69758988"
-  integrity sha512-jjbnJPUXQeQBJ8RM+ahlbt4GH2emVN8JvG3AhFbPci1FrqXi9cOOfkbwLmvpoyTli4LF8gy7g4ctFqnlRgqryw==
+"@angular-eslint/bundled-angular-compiler@22.1.0":
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-22.1.0.tgz#603becba751c43afcfa19503022e129584e49056"
+  integrity sha512-iOtOQ2jtrtko1rIQo6i+g3ezxGL0lyYv80j4GccFTK1JGh4K+AqYkmaBvfUfNtqoE/7VcKsOoyxaFt6iIpKhaQ==
 
-"@angular-eslint/eslint-plugin-template@21.3.1":
-  version "21.3.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-21.3.1.tgz#5cea7f07106625722d563ddee4abd4ea40cafeaa"
-  integrity sha512-ndPWJodkcEOu2PVUxlUwyz4D2u3r9KO7veWmStVNOLeNrICJA+nQvrz2BWCu0l48rO0K5ezsy0JFcQDVwE/5mw==
+"@angular-eslint/eslint-plugin-template@22.1.0":
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-22.1.0.tgz#30642c56aa8a634dc45e2dc103840ad27937c142"
+  integrity sha512-GK/Mwhwvj+MX6DefD29/IfuYjcai5CsCbYJ6Qb9P6IAzZaQqw+EN+CiXxIwzMnzm2edLcJzAsX8iBk4X7sVi2Q==
   dependencies:
-    "@angular-eslint/bundled-angular-compiler" "21.3.1"
-    "@angular-eslint/utils" "21.3.1"
+    "@angular-eslint/bundled-angular-compiler" "22.1.0"
+    "@angular-eslint/utils" "22.1.0"
     aria-query "5.3.2"
     axobject-query "4.1.0"
 
-"@angular-eslint/eslint-plugin@21.3.1":
-  version "21.3.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/eslint-plugin/-/eslint-plugin-21.3.1.tgz#a8de8f8fc12067917c60fb92f7c003dea65ba5a0"
-  integrity sha512-08NNTxwawRLTWPLl8dg1BnXMwimx93y4wMEwx2aWQpJbIt4pmNvwJzd+NgoD/Ag2VdLS/gOMadhJH5fgaYKsPQ==
+"@angular-eslint/eslint-plugin@22.1.0":
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/eslint-plugin/-/eslint-plugin-22.1.0.tgz#d445da381aaf79a6afbdab76a825141bddbf995a"
+  integrity sha512-nRwdbUiW7vF0gbwtxw2hRGPZYZCNWOTLZKw4HM+I37o5YFIA0CFLtbyRKgZWs6JZCIqzTYSwCyKNsW41Qw0FwQ==
   dependencies:
-    "@angular-eslint/bundled-angular-compiler" "21.3.1"
-    "@angular-eslint/utils" "21.3.1"
+    "@angular-eslint/bundled-angular-compiler" "22.1.0"
+    "@angular-eslint/utils" "22.1.0"
     ts-api-utils "^2.1.0"
 
-"@angular-eslint/schematics@21.3.1":
-  version "21.3.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/schematics/-/schematics-21.3.1.tgz#b4ef8ad13f6290dc8f6a61fadb89ff2c26bae254"
-  integrity sha512-1U2u4ZsZvwT30aXRLsIJf6tULIiioo9BtASNsldpYecU3/m/1+F61lCYG79qt7YWbif9KABPYZlFTJUFGN8HWA==
+"@angular-eslint/schematics@22.1.0":
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/schematics/-/schematics-22.1.0.tgz#e9e7bd786d8496177d85dd9180c501e69338afb7"
+  integrity sha512-/Z7MEO9ys9P5w5itM2mpNW4R/QNAVxtDdcU5LVFulSx/lo7zCDx1rZ/tLDuzbN5k5RGQy5ZkdRIs0MoscsGXQQ==
   dependencies:
-    "@angular-devkit/core" ">= 21.0.0 < 22.0.0"
-    "@angular-devkit/schematics" ">= 21.0.0 < 22.0.0"
-    "@angular-eslint/eslint-plugin" "21.3.1"
-    "@angular-eslint/eslint-plugin-template" "21.3.1"
+    "@angular-devkit/core" ">= 22.0.0 < 23.0.0"
+    "@angular-devkit/schematics" ">= 22.0.0 < 23.0.0"
+    "@angular-eslint/eslint-plugin" "22.1.0"
+    "@angular-eslint/eslint-plugin-template" "22.1.0"
     ignore "7.0.5"
-    semver "7.7.4"
+    semver "7.8.5"
     strip-json-comments "3.1.1"
 
-"@angular-eslint/template-parser@21.3.1":
-  version "21.3.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/template-parser/-/template-parser-21.3.1.tgz#27e3749ccd51acbe0ced4056d5426af1a8b45102"
-  integrity sha512-moERVCTekQKOvR8RMuEOtWSO3VS1qrzA3keI1dPto/JVB8Nqp9w3R5ZpEoXHzh4zgEryosxmPgdi6UczJe2ouQ==
+"@angular-eslint/template-parser@22.1.0":
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/template-parser/-/template-parser-22.1.0.tgz#ff92e9a4809bc8fb0b3904c3b4aa8dcf0075fa18"
+  integrity sha512-gcufZLI/Rl2fOWtBk2MgMRkH1t+OrbJGxIsfT0w3pVjKm0zwi7njM/dtPbVjCHzsGhx7szQMvY0i0UwTBVYkSw==
   dependencies:
-    "@angular-eslint/bundled-angular-compiler" "21.3.1"
+    "@angular-eslint/bundled-angular-compiler" "22.1.0"
     eslint-scope "9.1.2"
 
-"@angular-eslint/utils@21.3.1":
-  version "21.3.1"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/utils/-/utils-21.3.1.tgz#78814618bb6d00481374f3fff592d712040457a0"
-  integrity sha512-Q3SGA1/36phZhmsp1mYrKzp/jcmqofRr861MYn46FaWIKSYXBYRzl+H3FIJKBu5CE36Bggu6hbNpwGPuUp+MCg==
+"@angular-eslint/utils@22.1.0":
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/utils/-/utils-22.1.0.tgz#d85addc71f157dc75c578f2e1909b752518ba46e"
+  integrity sha512-zDPJqgOxlkG20UJWsVDSvnEtC2MfIP0+yKMaQUBL+2nrEknV/fVLrz7ApnerWiDrGTcAms5si49KV10MarMpRA==
   dependencies:
-    "@angular-eslint/bundled-angular-compiler" "21.3.1"
+    "@angular-eslint/bundled-angular-compiler" "22.1.0"
 
-"@angular/animations@^21.1.5":
-  version "21.2.11"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-21.2.11.tgz#d98e9d590db192c87d769f7e14eb4bac47d3ffb2"
-  integrity sha512-CpyK3XxcjuYj8cl/eaKZYxrIpVOG7Ci49YSPIzyY5bzxMv7znOoRuPnEMV/EENfiQ12IraWCBh9dd7g37PBjOw==
+"@angular/animations@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-22.1.2.tgz#b57265dfa352c1c07396aceabf0b6e2a32a498d4"
+  integrity sha512-SHvopFG8I92isKE6lgoWVVmmt6fSGKt76bfrBuJ9qvrKWYqWmWUh87Z5J3XRPUM8zdzuEkXjcTbn+GTGOGRiaA==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/build@^21.1.4":
-  version "21.2.9"
-  resolved "https://registry.yarnpkg.com/@angular/build/-/build-21.2.9.tgz#0ae2c40bf6f15bf6055c96e434ee2b5fa3edbba1"
-  integrity sha512-XYP5ALB56NWvcQisznmvQdVU6WJdUCAuCAEN2eDZNVd9X1IqRNfewQfFH6FyHo7SrK4GHDReqm6xWW6rs0+weQ==
+"@angular/build@^22.1.4":
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/@angular/build/-/build-22.1.4.tgz#99fff97ee69d1bd912fc901e335f60dc06a7576b"
+  integrity sha512-y5wxiyUu1DjYNG5jiFjjgFp7O5bkyYjWzy2kfyTGq+DjKMEveTzNH3tBkZrE33EJ4wYyfx+rQ01IG9nZbhfdvA==
   dependencies:
     "@ampproject/remapping" "2.3.0"
-    "@angular-devkit/architect" "0.2102.9"
-    "@babel/core" "7.29.0"
-    "@babel/helper-annotate-as-pure" "7.27.3"
+    "@angular-devkit/architect" "0.2201.4"
+    "@babel/core" "8.0.1"
+    "@babel/helper-annotate-as-pure" "8.0.0"
     "@babel/helper-split-export-declaration" "7.24.7"
-    "@inquirer/confirm" "5.1.21"
-    "@vitejs/plugin-basic-ssl" "2.1.4"
-    beasties "0.4.1"
+    "@inquirer/confirm" "6.1.1"
+    "@vitejs/plugin-basic-ssl" "2.3.0"
+    beasties "0.4.3"
     browserslist "^4.26.0"
-    esbuild "0.27.3"
-    https-proxy-agent "7.0.6"
-    istanbul-lib-instrument "6.0.3"
+    esbuild "0.28.2"
+    https-proxy-agent "9.1.0"
     jsonc-parser "3.3.1"
-    listr2 "9.0.5"
-    magic-string "0.30.21"
+    listr2 "10.2.2"
+    magic-string "1.0.0"
     mrmime "2.0.1"
-    parse5-html-rewriting-stream "8.0.0"
-    picomatch "4.0.4"
-    piscina "5.1.4"
-    rolldown "1.0.0-rc.4"
-    sass "1.97.3"
-    semver "7.7.4"
+    oxc-parser "0.142.0"
+    parse5-html-rewriting-stream "8.0.1"
+    picomatch "4.0.5"
+    piscina "5.2.0"
+    rolldown "1.2.0"
+    sass "1.101.0"
+    semver "7.8.5"
     source-map-support "0.5.21"
-    tinyglobby "0.2.15"
-    undici "7.24.4"
-    vite "7.3.2"
-    watchpack "2.5.1"
+    tinyglobby "0.2.17"
+    vite "8.1.5"
+    watchpack "2.5.2"
   optionalDependencies:
-    lmdb "3.5.1"
+    lmdb "3.5.6"
 
-"@angular/cdk@^21.1.5":
-  version "21.2.9"
-  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-21.2.9.tgz#d52d1101aa1f5549ea415ce906fcfc0ac557c6be"
-  integrity sha512-0JXsr8f7xjV2815esTSq4+zGqWMa0CyNT/DV1F7lYS6qkYXcFdYUzGcd/WjNL05VKkajkSkWmTi6uyVsOpYdGA==
+"@angular/cdk@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-22.1.2.tgz#660037c01a024584eb26269e1062421860f5ffb8"
+  integrity sha512-YwTzVnTgZIQDLq3lnnPLINIB24e0SiDn7XxBxHSrOzD/+Y0zLAid5XIiMALXWOqa7rfdhfVh1kEeM93RRLnllQ==
   dependencies:
     parse5 "^8.0.0"
     tslib "^2.3.0"
 
-"@angular/cli@^21.1.4":
-  version "21.2.9"
-  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-21.2.9.tgz#7102c2566ad120047f7e5c54dbfe00639700c7a5"
-  integrity sha512-KldNb7vCEVOeyEUK57dguP3dTjYeikBmAohjAouu8JLtY8OOI+tf/TA31Gco/rxZ3nGqBwkvrqpD4rcDf5AhUA==
+"@angular/cli@^22.1.4":
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-22.1.4.tgz#2d143bb4eed672efa2b69c1ade9fd0215b4ecc72"
+  integrity sha512-Yt6q7a1vXh0ICFHnRdUOmx/gEXZ87zpkvE1eUWREUqeQ3ARkwqNZVzF3IP+s9NpDDrnc+EB9cqel9SnGZ/0z2Q==
   dependencies:
-    "@angular-devkit/architect" "0.2102.9"
-    "@angular-devkit/core" "21.2.9"
-    "@angular-devkit/schematics" "21.2.9"
-    "@inquirer/prompts" "7.10.1"
-    "@listr2/prompt-adapter-inquirer" "3.0.5"
-    "@modelcontextprotocol/sdk" "1.26.0"
-    "@schematics/angular" "21.2.9"
-    "@yarnpkg/lockfile" "1.1.0"
-    algoliasearch "5.48.1"
-    ini "6.0.0"
+    "@angular-devkit/architect" "0.2201.4"
+    "@angular-devkit/core" "22.1.4"
+    "@angular-devkit/schematics" "22.1.4"
+    "@inquirer/prompts" "8.5.2"
+    "@listr2/prompt-adapter-inquirer" "4.2.4"
+    "@modelcontextprotocol/sdk" "1.30.0"
+    "@schematics/angular" "22.1.4"
     jsonc-parser "3.3.1"
-    listr2 "9.0.5"
-    npm-package-arg "13.0.2"
-    pacote "21.3.1"
-    parse5-html-rewriting-stream "8.0.0"
-    semver "7.7.4"
-    yargs "18.0.0"
-    zod "4.3.6"
+    listr2 "10.2.2"
+    npm-package-arg "14.0.0"
+    parse5-html-rewriting-stream "8.0.1"
+    semver "7.8.5"
+    yargs "18.1.0"
+    zod "4.4.3"
 
-"@angular/common@^21.1.5":
-  version "21.2.11"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-21.2.11.tgz#d8d88c85e0dd215035c1a77ade2baaf263af2914"
-  integrity sha512-3Z3SABXpzM6fkX21WCRP6IwrjxNQVHM/3Fk2OXScExOAzpaOpS2bDgS4NB6rtCbmzKL/NFSp7ZPIZigfdqnWGw==
+"@angular/common@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-22.1.2.tgz#da972b75818a8985bc464f39b0ceb1e14997e189"
+  integrity sha512-8TzyYPBDvSItV8Vqq8k5u8a9fWaomC9bMEr8z1vVLRZDIPhNQ/UcCyuTYbC7GZkeqrrKGu5m8tjUrA09RCwuaQ==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/compiler-cli@^21.1.5":
-  version "21.2.11"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-21.2.11.tgz#8703bb14b5c3fa8612157eeeb5a3b00307489021"
-  integrity sha512-qp/LgptDYJvpEHVVdwBEtkcbybre/ftanu0qJMpH3mu5FC4HEEOChl+9m7UVrmL4jC1ZkoZcgtzsGKAQr8mw2g==
+"@angular/compiler-cli@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-22.1.2.tgz#eb9d27221decdf25cc39bc3d2bc5acc8f29b4c41"
+  integrity sha512-GWRtvQQz/LvKejF/Zpls+hGnnJkvaPPtd3TZnxfZQ1fYCs7b7gpi0YM9PP02TJz51vhlsgkPYJwgtJAKDJEHNQ==
   dependencies:
-    "@babel/core" "7.29.0"
+    "@babel/core" "8.0.1"
     "@jridgewell/sourcemap-codec" "^1.4.14"
     chokidar "^5.0.0"
     convert-source-map "^1.5.1"
@@ -322,153 +191,138 @@
     tslib "^2.3.0"
     yargs "^18.0.0"
 
-"@angular/compiler@^21.1.5":
-  version "21.2.11"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-21.2.11.tgz#d5301f74f961390142fc105899b8dac4876a361e"
-  integrity sha512-/KdE0kPQr24K/aNsdIDS2or555+8CrQxyRB5MxPKy3/8d6EvilEY/UN7pB7A5xgRQtUPMea08ZzLFJVp1qNbDA==
+"@angular/compiler@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-22.1.2.tgz#e57b92326ff025ede2d372195177a601a72cc83f"
+  integrity sha512-aQv0p5MeXuguCeftUUxK4H8Hbw1hC5Zyu+cFsGbsi025LZ9Ngw+BW+iUHDQZAcqHvWDw2wgGOdKh4e7IkcfRyQ==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/core@^21.1.5":
-  version "21.2.11"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-21.2.11.tgz#636565bf0b1622d58365055a1d24be69ad917525"
-  integrity sha512-EULAfQ0m/I9hZJes74OFlrnfDWqlfV0esE0CkHehO5IEF9rd769+dfuGEAJAzrz+/6Q3PhS0bWDYiT68z1H8Ag==
+"@angular/core@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-22.1.2.tgz#bfaa88718aac9ec195014ee80807cdd71ba6af0e"
+  integrity sha512-t7BrgfdeqbdSbFe3CsGX8ySMeKDlZNBPxFMCOanAAqd6W0H1Kh1WFILBs3DIg0NfjpybfSRJAzKcagOFQWNtiw==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/forms@^21.1.5":
-  version "21.2.11"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-21.2.11.tgz#6e50e9e6b581310e769b603193f8f51d8862c268"
-  integrity sha512-F67V612wHxPXHrbp825VirYfGPKBUM8PvL9atN2Ku1fsdGSFPU3hTxu1HU8fKYLLBpKYVVuqFqzaU/qIpTXGYA==
+"@angular/forms@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-22.1.2.tgz#4ba15aec5c11c9d80107881b34930a8252aea125"
+  integrity sha512-pKDYSNKje/jox74KzswBdX4sL7kJ8OFkJwLnqng8oc7a/NVl/Vf4/Xq4kyowRAdtPcZfLTUnZG6s0qbegfV5mg==
   dependencies:
     "@standard-schema/spec" "^1.0.0"
     tslib "^2.3.0"
+    zod "^4.0.10"
 
-"@angular/language-service@^21.1.5":
-  version "21.2.11"
-  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-21.2.11.tgz#99b4e8be66ef9b57c0e372d7d2996afe0642baeb"
-  integrity sha512-M5BVtsfgjUdR/9SkVFBQ/WoAoSSybeYOeAzuBThwmAz4CA+yvZtyuJNlaUQ2IaF7f5TCtg05Pg9YRgKOusK3HQ==
+"@angular/language-service@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-22.1.2.tgz#83d27a8ce32c710357b2c00c1ddf014d03419d7b"
+  integrity sha512-5TIeUhO3xJVaAOEfwq8xFLlAy7Jlg2W62daw2LE+uoZOxsdabQLk+sBrzyy8hYf0HOYuKDiT1FxDC4C00imH8A==
 
-"@angular/material-moment-adapter@^21.1.5":
-  version "21.2.9"
-  resolved "https://registry.yarnpkg.com/@angular/material-moment-adapter/-/material-moment-adapter-21.2.9.tgz#db3380ee7a2b1b8083009ae85e302aca467bbfe8"
-  integrity sha512-Nzg78sKAcuEn05TC3bHt2I8Fu56Y6fCQ0h2iE7wvvfO74a6YdWAb5J4l4yrS+2tXTRATWYpsqG3UkKZd4pKBtQ==
+"@angular/material-moment-adapter@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/material-moment-adapter/-/material-moment-adapter-22.1.2.tgz#7d3901323311ef572186d37a9c5963bae9dedb82"
+  integrity sha512-huMm6Ev7UlVJYMie6VmkP0/Xkk+8HnoCJXblfLM0untw+7YDVTQKnft0SHCBjgjlqU6SAlOr27U2MqjBTz6/DQ==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/material@^21.1.5":
-  version "21.2.9"
-  resolved "https://registry.yarnpkg.com/@angular/material/-/material-21.2.9.tgz#58cb687e792c268aac8a7324ee685755a6096aca"
-  integrity sha512-uU5Sy0rSd4Y4WjqTcrqs3MpfY/Uy5tmDPSAAvwD0y5y4QVOLoV8uhTQDI/nNg2Lh9NoJKvykZE1ITRMvjfRALQ==
+"@angular/material@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-22.1.2.tgz#18439da01958a4fae93364b133e58c1a49c05d46"
+  integrity sha512-KX0bVUppfwjDfUepsjpG1CAQGUGHI0l5e0QYpFcskB+1wNRCocBGsIO1br5z6neYu0rzsbhtWocjCeH05gwi7w==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/platform-browser-dynamic@^21.1.5":
-  version "21.2.11"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-21.2.11.tgz#23a469ab88bdee61d47c01d0ff32efa4894412df"
-  integrity sha512-wdlYzXkc6X6f8mj2jLlaDJlRiwmurffAf37NCXMNqgTTc0j0iD/DLd3JQScMVCJ9bZ0se02EF5X3Z82W0vmmPA==
+"@angular/platform-browser-dynamic@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-22.1.2.tgz#6f81f7c9e863bd5266193e60508f567546aae34a"
+  integrity sha512-nNARbs9zXfoJL72zsTso6GHt1VuIGXWEpyZtzxcC32qQFG1YbzVqGkQTwZ0mZ2/Ctv8dAZ6PPiDo8sbYvAvUDw==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/platform-browser@^21.1.5":
-  version "21.2.11"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-21.2.11.tgz#923ec980df2bf93b9c908c3d683e6bb6f0f85bd0"
-  integrity sha512-Uz/KwGjSEvbE8J9kNSSetzxhBWjCXv9OuxH1w2WkW6jLNU3vgvzuKX7SXDyUys6KJv5TqkClJ9BLeU11QbmJdw==
+"@angular/platform-browser@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-22.1.2.tgz#0026cf8d0222dc63de306b1cac0bee1a383568d2"
+  integrity sha512-MQO735ve/tk4gLsWbw8NyBD/DxPfbbmf1pM/vp6K7tZz2xyysMXilqF/k8PBdQBZVOofST8S13inZHQ35nHuRA==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/router@^21.1.5":
-  version "21.2.11"
-  resolved "https://registry.yarnpkg.com/@angular/router/-/router-21.2.11.tgz#9ee1e9c18d911b0f13f5aeb1301987b29ce88f9b"
-  integrity sha512-IB7/KuRDsxAjCOxYNccq2LdCTKuu59cx5MmOhrt+TarvkNE/xdlFkP7vtrCl44DJt0q7/tveWvsn5oqTw7rN7A==
+"@angular/router@^22.1.2":
+  version "22.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-22.1.2.tgz#7f89569d73b7450b747800c86d3c9caedd1c2a13"
+  integrity sha512-C2c6NJ9HZUfb1L07M554Zpgvi0TvpOBO6Og9L36v/jsv42m7tpOenvqQVPa8R3va7eqLEszCL7wLFcWeJ8naew==
   dependencies:
     tslib "^2.3.0"
 
-"@babel/code-frame@^7.28.6", "@babel/code-frame@^7.29.0":
-  version "7.29.0"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.29.0.tgz#7cd7a59f15b3cc0dcd803038f7792712a7d0b15c"
-  integrity sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==
+"@babel/code-frame@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-8.0.0.tgz#f374ea9392011ffecf223805dd0d9315606e5bbf"
+  integrity sha512-dYYg153EyN2Ekbqw2zAsbd6/JR+9N2SEoC7YV2GyyqMM7x9bLDTjBD6XBhSMLH0wtIVyJj03jWNriQhaN+eoCw==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.28.5"
-    js-tokens "^4.0.0"
-    picocolors "^1.1.1"
+    "@babel/helper-validator-identifier" "^8.0.0"
+    js-tokens "^10.0.0"
 
-"@babel/compat-data@^7.28.6":
-  version "7.29.3"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.29.3.tgz#e3f5347f0589596c91d227ccb6a541d37fb1307b"
-  integrity sha512-LIVqM46zQWZhj17qA8wb4nW/ixr2y1Nw+r1etiAWgRM6U1IqP+LNhL1yg440jYZR72jCWcWbLWzIosH+uP1fqg==
+"@babel/compat-data@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-8.0.0.tgz#e780eb6052d8ceeaeadd3a6cd82dda470a945622"
+  integrity sha512-DOjnob/cXOUgDOozCDeq/aK2p5y8dUIVdf6tNhEV1HQRd6I8aQ4f4fbtHRVEvb6lP3BGomrKHiS8ICAASSVQSw==
 
-"@babel/core@7.29.0", "@babel/core@^7.23.9":
-  version "7.29.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.29.0.tgz#5286ad785df7f79d656e88ce86e650d16ca5f322"
-  integrity sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==
+"@babel/core@8.0.1":
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-8.0.1.tgz#dcb133d3ddcfb2b5a6558da03bf240319da0b8c8"
+  integrity sha512-5FgxM4dLQpMJHSiVATk8foW263dVHQHBVpXYiimNECVWG01f4nFyEbQixeT6Mwvg7TayREJ2gpKl3o2RoMdnqw==
   dependencies:
-    "@babel/code-frame" "^7.29.0"
-    "@babel/generator" "^7.29.0"
-    "@babel/helper-compilation-targets" "^7.28.6"
-    "@babel/helper-module-transforms" "^7.28.6"
-    "@babel/helpers" "^7.28.6"
-    "@babel/parser" "^7.29.0"
-    "@babel/template" "^7.28.6"
-    "@babel/traverse" "^7.29.0"
-    "@babel/types" "^7.29.0"
-    "@jridgewell/remapping" "^2.3.5"
+    "@babel/code-frame" "^8.0.0"
+    "@babel/generator" "^8.0.0"
+    "@babel/helper-compilation-targets" "^8.0.0"
+    "@babel/helpers" "^8.0.0"
+    "@babel/parser" "^8.0.0"
+    "@babel/template" "^8.0.0"
+    "@babel/traverse" "^8.0.0"
+    "@babel/types" "^8.0.0"
+    "@types/gensync" "^1.0.5"
     convert-source-map "^2.0.0"
-    debug "^4.1.0"
+    empathic "^2.0.1"
     gensync "^1.0.0-beta.2"
+    import-meta-resolve "^4.2.0"
     json5 "^2.2.3"
-    semver "^6.3.1"
+    obug "^2.1.1"
+    semver "^7.7.3"
 
-"@babel/generator@^7.29.0":
-  version "7.29.1"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.29.1.tgz#d09876290111abbb00ef962a7b83a5307fba0d50"
-  integrity sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==
+"@babel/generator@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-8.0.0.tgz#24b7b53a74fa8e74cc2377e054fecef4dcdada96"
+  integrity sha512-NT9NrVwJsbSV6Y2FSstWa71EETOnzrjkL5/wX3D2mYHtKM+qvqB1DvR4D0Setb/gDBsHzRICifwEWMO8CnTF6g==
   dependencies:
-    "@babel/parser" "^7.29.0"
-    "@babel/types" "^7.29.0"
+    "@babel/parser" "^8.0.0"
+    "@babel/types" "^8.0.0"
     "@jridgewell/gen-mapping" "^0.3.12"
     "@jridgewell/trace-mapping" "^0.3.28"
+    "@types/jsesc" "^2.5.0"
     jsesc "^3.0.2"
 
-"@babel/helper-annotate-as-pure@7.27.3":
-  version "7.27.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz#f31fd86b915fc4daf1f3ac6976c59be7084ed9c5"
-  integrity sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==
+"@babel/helper-annotate-as-pure@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-8.0.0.tgz#e094d0ea95f319cdc399fe25ec82e4b3dddb8461"
+  integrity sha512-NSpMkMsvvZqzThJ0p1B02cbtA2ObEyfBvq950bmNkyxsxvcxwhvvCB036rKhlEnuBBo30bOrk13u3FzlKSoRrw==
   dependencies:
-    "@babel/types" "^7.27.3"
+    "@babel/types" "^8.0.0"
 
-"@babel/helper-compilation-targets@^7.28.6":
-  version "7.28.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz#32c4a3f41f12ed1532179b108a4d746e105c2b25"
-  integrity sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==
+"@babel/helper-compilation-targets@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-8.0.0.tgz#63f230f427c9ea82323d829c935f6190d93b3736"
+  integrity sha512-JwculLABZvyPvyLBpwU/E/IbH2uM3mnxNtIJpxnIfb24y1PrdVxK5Dqjle4DpgqpGRnwgC7G8IkzPdSXZrO1Ew==
   dependencies:
-    "@babel/compat-data" "^7.28.6"
-    "@babel/helper-validator-option" "^7.27.1"
+    "@babel/compat-data" "^8.0.0"
+    "@babel/helper-validator-option" "^8.0.0"
     browserslist "^4.24.0"
-    lru-cache "^5.1.1"
-    semver "^6.3.1"
+    lru-cache "^11.0.0"
+    semver "^7.7.3"
 
-"@babel/helper-globals@^7.28.0":
-  version "7.28.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-globals/-/helper-globals-7.28.0.tgz#b9430df2aa4e17bc28665eadeae8aa1d985e6674"
-  integrity sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==
-
-"@babel/helper-module-imports@^7.28.6":
-  version "7.28.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz#60632cbd6ffb70b22823187201116762a03e2d5c"
-  integrity sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==
-  dependencies:
-    "@babel/traverse" "^7.28.6"
-    "@babel/types" "^7.28.6"
-
-"@babel/helper-module-transforms@^7.28.6":
-  version "7.28.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz#9312d9d9e56edc35aeb6e95c25d4106b50b9eb1e"
-  integrity sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.28.6"
-    "@babel/helper-validator-identifier" "^7.28.5"
-    "@babel/traverse" "^7.28.6"
+"@babel/helper-globals@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-globals/-/helper-globals-8.0.0.tgz#c93789d6c1c2f1b65a97a07515c471a049559bf1"
+  integrity sha512-lLozHOM6sWWlxNo8CYqHy4MBZeTvHXNgVPBfPOGsjPKUzHC2Az9QwB6gxdQmpwHl6GlQtbGgS+lj5887guDiLw==
 
 "@babel/helper-split-export-declaration@7.24.7":
   version "7.24.7"
@@ -477,413 +331,318 @@
   dependencies:
     "@babel/types" "^7.24.7"
 
-"@babel/helper-string-parser@^7.27.1":
-  version "7.27.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz#54da796097ab19ce67ed9f88b47bb2ec49367687"
-  integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
+"@babel/helper-string-parser@^7.29.7":
+  version "7.29.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz#7f0871d99824d23137d60f86fcf6130fd5a1b51f"
+  integrity sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==
 
-"@babel/helper-validator-identifier@^7.28.5":
-  version "7.28.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz#010b6938fab7cb7df74aa2bbc06aa503b8fe5fb4"
-  integrity sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==
+"@babel/helper-string-parser@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-8.0.0.tgz#4d47d9ad35d0f5bd7d202b348bf558328a347977"
+  integrity sha512-6mJgmFFFIIO82vvoLt9XtRC7/TkzXfts1t/SpRX4IHSzMgqoPYCWesVu1udUPUWioAE/2fcG6WuI8zrkE1gwrg==
 
-"@babel/helper-validator-option@^7.27.1":
-  version "7.27.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz#fa52f5b1e7db1ab049445b421c4471303897702f"
-  integrity sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==
+"@babel/helper-validator-identifier@^7.29.7":
+  version "7.29.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz#bd87084ced0c796ec46bda492de6e83d29e89fc2"
+  integrity sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==
 
-"@babel/helpers@^7.28.6":
-  version "7.29.2"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.29.2.tgz#9cfbccb02b8e229892c0b07038052cc1a8709c49"
-  integrity sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==
+"@babel/helper-validator-identifier@^8.0.0", "@babel/helper-validator-identifier@^8.0.4":
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-8.0.4.tgz#60e427a9be7a101af52f14588def2dad8a9f9881"
+  integrity sha512-4wFaiLd0bVo4cIoTXI3zKI038NIWE/cr3jvBjejOVYVxV/m8Ltav1USiGzG1fmS5J2RhgEOgXNNK46cRPnRsrg==
+
+"@babel/helper-validator-option@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-8.0.0.tgz#53307a6882254fa8d940017a701a8f7ec603a1a9"
+  integrity sha512-U4Dybxh4WESWHt5XhBeExi4DrY0/DNK1aHpQbsrQXCUbFHuMweT0TpLEWKvaraV2Y6fS+ZXunsZ8zIuZIgvF2Q==
+
+"@babel/helpers@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-8.0.0.tgz#2c612d4b7fdbd5f1d2fa7321015e36b02d1a2d79"
+  integrity sha512-wfbi91pM3py96oIiJEz7qIpyXDytgr9zQC1HEWwlGNVRAEmItuU/0a41ZUKu1sJGyhhOIpc4t5vk4PYzt8wpsg==
   dependencies:
-    "@babel/template" "^7.28.6"
-    "@babel/types" "^7.29.0"
+    "@babel/template" "^8.0.0"
+    "@babel/types" "^8.0.0"
 
-"@babel/parser@^7.23.9", "@babel/parser@^7.28.6", "@babel/parser@^7.29.0":
-  version "7.29.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.29.3.tgz#116f70a77958307fceac27747573032f8a62f88e"
-  integrity sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==
+"@babel/parser@^8.0.0", "@babel/parser@^8.0.4":
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-8.0.4.tgz#244e21ca23ab54c6f5373af2122cb3a618f9dd39"
+  integrity sha512-srpptsAkEbbNIC/q8nT7o+m6CQe8CJUTV/t7MYc9NnWlgYVtHOb7JH6SorxMhN0kuRJjVqXbKClG6xSbPtzz+g==
   dependencies:
-    "@babel/types" "^7.29.0"
+    "@babel/types" "^8.0.4"
 
 "@babel/runtime@^7.12.5", "@babel/runtime@^7.26.10", "@babel/runtime@^7.28.6":
-  version "7.29.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.29.2.tgz#9a6e2d05f4b6692e1801cd4fb176ad823930ed5e"
-  integrity sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==
+  version "7.29.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.29.7.tgz#12022450c45a4da6d8d8287b18a4ff2ddb23f768"
+  integrity sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==
 
-"@babel/template@^7.28.6":
-  version "7.28.6"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.28.6.tgz#0e7e56ecedb78aeef66ce7972b082fce76a23e57"
-  integrity sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==
+"@babel/template@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-8.0.0.tgz#18c12626b0d6d23a0443771655864ed7566a3452"
+  integrity sha512-eAD0QW/AlbamBbw0FeGiwasbCVPq5ncW0HNVyLP3B9czqLyh4gvw+5JTSNt6le9+ziAU7mqDZsKTHf3jTb4chQ==
   dependencies:
-    "@babel/code-frame" "^7.28.6"
-    "@babel/parser" "^7.28.6"
-    "@babel/types" "^7.28.6"
+    "@babel/code-frame" "^8.0.0"
+    "@babel/parser" "^8.0.0"
+    "@babel/types" "^8.0.0"
 
-"@babel/traverse@^7.28.6", "@babel/traverse@^7.29.0":
-  version "7.29.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.29.0.tgz#f323d05001440253eead3c9c858adbe00b90310a"
-  integrity sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==
+"@babel/traverse@^8.0.0":
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-8.0.4.tgz#71fc3f8861a4548e7f2938fdecac73e25d1db1ed"
+  integrity sha512-bZnmqzGG8UZneG1lLxBoWIH0G6Gr1D846Yu4/3XnY6FhCndMR49u26nTY08u/dAxWmLWF9vGQOuC+84FfIUoeg==
   dependencies:
-    "@babel/code-frame" "^7.29.0"
-    "@babel/generator" "^7.29.0"
-    "@babel/helper-globals" "^7.28.0"
-    "@babel/parser" "^7.29.0"
-    "@babel/template" "^7.28.6"
-    "@babel/types" "^7.29.0"
-    debug "^4.3.1"
+    "@babel/code-frame" "^8.0.0"
+    "@babel/generator" "^8.0.0"
+    "@babel/helper-globals" "^8.0.0"
+    "@babel/parser" "^8.0.4"
+    "@babel/template" "^8.0.0"
+    "@babel/types" "^8.0.4"
+    obug "^2.1.1"
 
-"@babel/types@^7.24.7", "@babel/types@^7.27.3", "@babel/types@^7.28.6", "@babel/types@^7.29.0":
-  version "7.29.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.29.0.tgz#9f5b1e838c446e72cf3cd4b918152b8c605e37c7"
-  integrity sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==
+"@babel/types@^7.24.7":
+  version "7.29.8"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.29.8.tgz#1229eef31d85156d70fa3f4cd859376d0eaf6863"
+  integrity sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==
   dependencies:
-    "@babel/helper-string-parser" "^7.27.1"
-    "@babel/helper-validator-identifier" "^7.28.5"
+    "@babel/helper-string-parser" "^7.29.7"
+    "@babel/helper-validator-identifier" "^7.29.7"
 
-"@esbuild/aix-ppc64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz#815b39267f9bffd3407ea6c376ac32946e24f8d2"
-  integrity sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==
+"@babel/types@^8.0.0", "@babel/types@^8.0.4":
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-8.0.4.tgz#8c208701320c9f0323b5b6a233d093e52c1e3b41"
+  integrity sha512-eY+Yn3dCqTGmyiq2QRU66lA5FL8lqqqvecHt0fF3uHONIa7ToYsaCiWV8lOKqAs0Rb2SjixiKFROngnulPtt2g==
+  dependencies:
+    "@babel/helper-string-parser" "^8.0.0"
+    "@babel/helper-validator-identifier" "^8.0.4"
 
-"@esbuild/aix-ppc64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz#82b74f92aa78d720b714162939fb248c90addf53"
-  integrity sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==
+"@emnapi/core@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.11.1.tgz#b9e1064f3a6b1631e241e638eb48d736bfd372a6"
+  integrity sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==
+  dependencies:
+    "@emnapi/wasi-threads" "1.2.2"
+    tslib "^2.4.0"
 
-"@esbuild/android-arm64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz#19b882408829ad8e12b10aff2840711b2da361e8"
-  integrity sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==
+"@emnapi/core@1.11.2":
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.11.2.tgz#fab0a0f3c492d11f5a9ac9065d0d73955ee1c1c9"
+  integrity sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==
+  dependencies:
+    "@emnapi/wasi-threads" "1.2.2"
+    tslib "^2.4.0"
 
-"@esbuild/android-arm64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.27.7.tgz#f78cb8a3121fc205a53285adb24972db385d185d"
-  integrity sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==
+"@emnapi/runtime@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.11.1.tgz#58f1f3d5d81a9b12f793ab688c96371901027c24"
+  integrity sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==
+  dependencies:
+    tslib "^2.4.0"
 
-"@esbuild/android-arm@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.27.3.tgz#90be58de27915efa27b767fcbdb37a4470627d7b"
-  integrity sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==
+"@emnapi/runtime@1.11.2":
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.11.2.tgz#eb22f04d76febfdf4f87fdaff54c8a53f6bf0dbd"
+  integrity sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==
+  dependencies:
+    tslib "^2.4.0"
 
-"@esbuild/android-arm@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.27.7.tgz#593e10a1450bbfcac6cb321f61f468453bac209d"
-  integrity sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==
+"@emnapi/wasi-threads@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz#4c93becf5bfa3b13d1bbdcc06aee38321ad8139a"
+  integrity sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==
+  dependencies:
+    tslib "^2.4.0"
 
-"@esbuild/android-x64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.27.3.tgz#d7dcc976f16e01a9aaa2f9b938fbec7389f895ac"
-  integrity sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==
+"@esbuild/aix-ppc64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.28.2.tgz#bf6e10303bcf2e7c686975fa52f937ec2728d8bc"
+  integrity sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==
 
-"@esbuild/android-x64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.27.7.tgz#453143d073326033d2d22caf9e48de4bae274b07"
-  integrity sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==
+"@esbuild/android-arm64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.28.2.tgz#0c6246bc8d2c4d172aac2db3fb1190d72bd65504"
+  integrity sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==
 
-"@esbuild/darwin-arm64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz#9f6cac72b3a8532298a6a4493ed639a8988e8abd"
-  integrity sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==
+"@esbuild/android-arm@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.28.2.tgz#2d84ece6a4e2684d92be26ee13d42757d831c381"
+  integrity sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==
 
-"@esbuild/darwin-arm64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.27.7.tgz#6f23000fb9b40b7e04b7d0606c0693bd0632f322"
-  integrity sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==
+"@esbuild/android-x64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.28.2.tgz#fc38d4d6358d8dc1cf53f09f7589fe436eb64801"
+  integrity sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==
 
-"@esbuild/darwin-x64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz#ac61d645faa37fd650340f1866b0812e1fb14d6a"
-  integrity sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==
+"@esbuild/darwin-arm64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.28.2.tgz#f83afeeac1d7dac01c7a2fd012b3e451a0591fcc"
+  integrity sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==
 
-"@esbuild/darwin-x64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.27.7.tgz#27393dd18bb1263c663979c5f1576e00c2d024be"
-  integrity sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==
+"@esbuild/darwin-x64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.28.2.tgz#510147c055a795588dbbe14fd6b1b8ad0a2f30de"
+  integrity sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==
 
-"@esbuild/freebsd-arm64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz#b8625689d73cf1830fe58c39051acdc12474ea1b"
-  integrity sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==
+"@esbuild/freebsd-arm64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.2.tgz#093b9200ecf0b115ba4e5e248a7485c9c5f8bd5e"
+  integrity sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==
 
-"@esbuild/freebsd-arm64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.7.tgz#22e4638fa502d1c0027077324c97640e3adf3a62"
-  integrity sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==
+"@esbuild/freebsd-x64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.28.2.tgz#0be22b6df925d213e841ea87123af5df80b0faf7"
+  integrity sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==
 
-"@esbuild/freebsd-x64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz#07be7dd3c9d42fe0eccd2ab9f9ded780bc53bead"
-  integrity sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==
+"@esbuild/linux-arm64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.28.2.tgz#1bdbc651cda9ba9995c53ed9c71ceaa65094762d"
+  integrity sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==
 
-"@esbuild/freebsd-x64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.27.7.tgz#9224b8e4fea924ce2194e3efc3e9aebf822192d6"
-  integrity sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==
+"@esbuild/linux-arm@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.28.2.tgz#beb12ad72b84f72d28488cc1b8ee9f7eb141d753"
+  integrity sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==
 
-"@esbuild/linux-arm64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz#bf31918fe5c798586460d2b3d6c46ed2c01ca0b6"
-  integrity sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==
+"@esbuild/linux-ia32@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.28.2.tgz#b81f9d55529b45c206a46a138214b1aa6879696b"
+  integrity sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==
 
-"@esbuild/linux-arm64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.27.7.tgz#4f5d1c27527d817b35684ae21419e57c2bda0966"
-  integrity sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==
+"@esbuild/linux-loong64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.28.2.tgz#598667241a04c99b76ed6ef940ac50038c419f98"
+  integrity sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==
 
-"@esbuild/linux-arm@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz#28493ee46abec1dc3f500223cd9f8d2df08f9d11"
-  integrity sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==
+"@esbuild/linux-mips64el@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.28.2.tgz#1c51eb9cea903f53d97b5af3b1841db70f5596ca"
+  integrity sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==
 
-"@esbuild/linux-arm@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.27.7.tgz#b9e9d070c8c1c0449cf12b20eac37d70a4595921"
-  integrity sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==
+"@esbuild/linux-ppc64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.28.2.tgz#63dd61f17ceb31a81227f413feac8a71bc2c51f2"
+  integrity sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==
 
-"@esbuild/linux-ia32@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz#750752a8b30b43647402561eea764d0a41d0ee29"
-  integrity sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==
+"@esbuild/linux-riscv64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.28.2.tgz#3763b08fde5cf25ab1facb8e7752edfe45fbfc27"
+  integrity sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==
 
-"@esbuild/linux-ia32@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.27.7.tgz#3f80fb696aa96051a94047f35c85b08b21c36f9e"
-  integrity sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==
+"@esbuild/linux-s390x@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.28.2.tgz#1a137ff293a82906eb3176385bd7e8e0e5cfb7cb"
+  integrity sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==
 
-"@esbuild/linux-loong64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz#a5a92813a04e71198c50f05adfaf18fc1e95b9ed"
-  integrity sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==
+"@esbuild/linux-x64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.28.2.tgz#268b36211c146ca54f8fe12c578a8d6ef8979485"
+  integrity sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==
 
-"@esbuild/linux-loong64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.27.7.tgz#9be1f2c28210b13ebb4156221bba356fe1675205"
-  integrity sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==
+"@esbuild/netbsd-arm64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.2.tgz#22571ad951d62bb6accc82d8d1fad5c8c1ac0ba1"
+  integrity sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==
 
-"@esbuild/linux-mips64el@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz#deb45d7fd2d2161eadf1fbc593637ed766d50bb1"
-  integrity sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==
+"@esbuild/netbsd-x64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.28.2.tgz#42fcc57297eb0a0ca3f5fc475291f4c1a3f7c0de"
+  integrity sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==
 
-"@esbuild/linux-mips64el@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.27.7.tgz#4ab5ee67a3dfcbcb5e8fd7883dae6e735b1163b8"
-  integrity sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==
+"@esbuild/openbsd-arm64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.2.tgz#9eb32af104ac3dacf4edca01f596664aab0c73ef"
+  integrity sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==
 
-"@esbuild/linux-ppc64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz#6f39ae0b8c4d3d2d61a65b26df79f6e12a1c3d78"
-  integrity sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==
+"@esbuild/openbsd-x64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.28.2.tgz#febed2402d6088225e91f20fb4ce2522ad0a4efd"
+  integrity sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==
 
-"@esbuild/linux-ppc64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.27.7.tgz#dac78c689f6499459c4321e5c15032c12307e7ea"
-  integrity sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==
+"@esbuild/openharmony-arm64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.2.tgz#85641c3d466428bfbccea5f21c26836663fef5ce"
+  integrity sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==
 
-"@esbuild/linux-riscv64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz#4c5c19c3916612ec8e3915187030b9df0b955c1d"
-  integrity sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==
+"@esbuild/sunos-x64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.28.2.tgz#a736f9d8962481045fc4c3e54f5479f22c870fb4"
+  integrity sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==
 
-"@esbuild/linux-riscv64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.27.7.tgz#050f7d3b355c3a98308e935bc4d6325da91b0027"
-  integrity sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==
+"@esbuild/win32-arm64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.28.2.tgz#ee5ab40fad186201b652a33f8a5eb149e9e42532"
+  integrity sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==
 
-"@esbuild/linux-s390x@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz#9ed17b3198fa08ad5ccaa9e74f6c0aff7ad0156d"
-  integrity sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==
+"@esbuild/win32-ia32@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.28.2.tgz#c40d28a6d99a127da6711f2afd74b11cb63b06a7"
+  integrity sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==
 
-"@esbuild/linux-s390x@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.27.7.tgz#d61f715ce61d43fe5844ad0d8f463f88cbe4fef6"
-  integrity sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==
-
-"@esbuild/linux-x64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz#12383dcbf71b7cf6513e58b4b08d95a710bf52a5"
-  integrity sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==
-
-"@esbuild/linux-x64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.27.7.tgz#ca8e1aa478fc8209257bf3ac8f79c4dc2982f32a"
-  integrity sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==
-
-"@esbuild/netbsd-arm64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz#dd0cb2fa543205fcd931df44f4786bfcce6df7d7"
-  integrity sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==
-
-"@esbuild/netbsd-arm64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.7.tgz#1650f2c1b948deeb3ef948f2fc30614723c09690"
-  integrity sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==
-
-"@esbuild/netbsd-x64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz#028ad1807a8e03e155153b2d025b506c3787354b"
-  integrity sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==
-
-"@esbuild/netbsd-x64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.27.7.tgz#65772ab342c4b3319bf0705a211050aac1b6e320"
-  integrity sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==
-
-"@esbuild/openbsd-arm64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz#e3c16ff3490c9b59b969fffca87f350ffc0e2af5"
-  integrity sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==
-
-"@esbuild/openbsd-arm64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.7.tgz#37ed7cfa66549d7955852fce37d0c3de4e715ea1"
-  integrity sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==
-
-"@esbuild/openbsd-x64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz#c5a4693fcb03d1cbecbf8b422422468dfc0d2a8b"
-  integrity sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==
-
-"@esbuild/openbsd-x64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.27.7.tgz#01bf3d385855ef50cb33db7c4b52f957c34cd179"
-  integrity sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==
-
-"@esbuild/openharmony-arm64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz#082082444f12db564a0775a41e1991c0e125055e"
-  integrity sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==
-
-"@esbuild/openharmony-arm64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.7.tgz#6c1f94b34086599aabda4eac8f638294b9877410"
-  integrity sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==
-
-"@esbuild/sunos-x64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz#5ab036c53f929e8405c4e96e865a424160a1b537"
-  integrity sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==
-
-"@esbuild/sunos-x64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.27.7.tgz#4b0dd17ae0a6941d2d0fd35a906392517071a90d"
-  integrity sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==
-
-"@esbuild/win32-arm64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz#38de700ef4b960a0045370c171794526e589862e"
-  integrity sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==
-
-"@esbuild/win32-arm64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.27.7.tgz#34193ab5565d6ff68ca928ac04be75102ccb2e77"
-  integrity sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==
-
-"@esbuild/win32-ia32@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz#451b93dc03ec5d4f38619e6cd64d9f9eff06f55c"
-  integrity sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==
-
-"@esbuild/win32-ia32@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.27.7.tgz#eb67f0e4482515d8c1894ede631c327a4da9fc4d"
-  integrity sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==
-
-"@esbuild/win32-x64@0.27.3":
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz#0eaf705c941a218a43dba8e09f1df1d6cd2f1f17"
-  integrity sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==
-
-"@esbuild/win32-x64@0.27.7":
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.27.7.tgz#8fe30b3088b89b4873c3a6cc87597ae3920c0a8b"
-  integrity sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==
+"@esbuild/win32-x64@0.28.2":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.28.2.tgz#b21affb804cc167c133d95f45b3a1dc1323b9a87"
+  integrity sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==
 
 "@eslint-community/eslint-utils@^4.8.0", "@eslint-community/eslint-utils@^4.9.1":
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz#4e90af67bc51ddee6cdef5284edf572ec376b595"
-  integrity sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.10.1.tgz#8911bd72b2c3640a543609e0400b8c4d2e7e7cb6"
+  integrity sha512-cuadcxVFE8sDK6iWJbs8Sn0av2Nrh2QSGQhVlBW9AaAHqHwjWsZHT8LJ4hFGPh7ASBV2deFdM7H/DPjulmh8rg==
   dependencies:
     eslint-visitor-keys "^3.4.3"
 
-"@eslint-community/regexpp@^4.12.1", "@eslint-community/regexpp@^4.12.2":
+"@eslint-community/regexpp@^4.12.2":
   version "4.12.2"
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.2.tgz#bccdf615bcf7b6e8db830ec0b8d21c9a25de597b"
   integrity sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==
 
-"@eslint/config-array@^0.21.2":
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/@eslint/config-array/-/config-array-0.21.2.tgz#f29e22057ad5316cf23836cee9a34c81fffcb7e6"
-  integrity sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==
+"@eslint/config-array@^0.23.5":
+  version "0.23.5"
+  resolved "https://registry.yarnpkg.com/@eslint/config-array/-/config-array-0.23.5.tgz#56e86d243049195d8acc0c06a1b3dfdc3fa3de95"
+  integrity sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==
   dependencies:
-    "@eslint/object-schema" "^2.1.7"
+    "@eslint/object-schema" "^3.0.5"
     debug "^4.3.1"
-    minimatch "^3.1.5"
+    minimatch "^10.2.4"
 
-"@eslint/config-helpers@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@eslint/config-helpers/-/config-helpers-0.4.2.tgz#1bd006ceeb7e2e55b2b773ab318d300e1a66aeda"
-  integrity sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==
+"@eslint/config-helpers@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@eslint/config-helpers/-/config-helpers-0.7.0.tgz#09ee4aa07b73f059ec2d4c74bf4b2ff02b322377"
+  integrity sha512-DObd/KKUsU+FaFv4PLxSRenpXfQWmPXXP3pPZ6/K1PCrMu2vQpMDMuQe/BqYeoLcz8ro0bVDF1RxOJgfVEdhUw==
   dependencies:
-    "@eslint/core" "^0.17.0"
+    "@eslint/core" "^1.2.1"
 
-"@eslint/core@^0.17.0":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@eslint/core/-/core-0.17.0.tgz#77225820413d9617509da9342190a2019e78761c"
-  integrity sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==
+"@eslint/core@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@eslint/core/-/core-1.2.1.tgz#c1da7cd1b82fa8787f98b5629fb811848a1b63ce"
+  integrity sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==
   dependencies:
     "@types/json-schema" "^7.0.15"
 
-"@eslint/eslintrc@^3.3.5":
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.3.5.tgz#c131793cfc1a7b96f24a83e0a8bbd4b881558c60"
-  integrity sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==
+"@eslint/js@10.0.1":
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-10.0.1.tgz#1e8a876f50117af8ab67e47d5ad94d38d6622583"
+  integrity sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==
+
+"@eslint/object-schema@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-3.0.5.tgz#88e9bf4d11d2b19c082e78ebe7ce88724a5eb091"
+  integrity sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==
+
+"@eslint/plugin-kit@^0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@eslint/plugin-kit/-/plugin-kit-0.7.2.tgz#4b0962f3f2c7ce8bc98b3ecfe34525c09d2cb729"
+  integrity sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==
   dependencies:
-    ajv "^6.14.0"
-    debug "^4.3.2"
-    espree "^10.0.1"
-    globals "^14.0.0"
-    ignore "^5.2.0"
-    import-fresh "^3.2.1"
-    js-yaml "^4.1.1"
-    minimatch "^3.1.5"
-    strip-json-comments "^3.1.1"
-
-"@eslint/js@9.39.4":
-  version "9.39.4"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.39.4.tgz#a3f83bfc6fd9bf33a853dfacd0b49b398eb596c1"
-  integrity sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==
-
-"@eslint/object-schema@^2.1.7":
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.7.tgz#6e2126a1347e86a4dedf8706ec67ff8e107ebbad"
-  integrity sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==
-
-"@eslint/plugin-kit@^0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz#9779e3fd9b7ee33571a57435cf4335a1794a6cb2"
-  integrity sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==
-  dependencies:
-    "@eslint/core" "^0.17.0"
+    "@eslint/core" "^1.2.1"
     levn "^0.4.1"
 
-"@gar/promise-retry@^1.0.0", "@gar/promise-retry@^1.0.2":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@gar/promise-retry/-/promise-retry-1.0.3.tgz#65e726428e794bc4453948e0a41e6de4215ce8b0"
-  integrity sha512-GmzA9ckNokPypTg10pgpeHNQe7ph+iIKKmhKu3Ob9ANkswreCx7R3cKmY781K8QK3AqVL3xVh9A42JvIAbkkSA==
-
 "@harperfast/extended-iterable@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@harperfast/extended-iterable/-/extended-iterable-1.0.3.tgz#471489c5058331017e821bf6c33de70fc2c073ee"
   integrity sha512-sSAYhQca3rDWtQUHSAPeO7axFIUJOI6hn1gjRC5APVE1a90tuyT8f5WIgRsFhhWA7htNkju2veB9eWL6YHi/Lw==
 
-"@hono/node-server@^1.19.9":
-  version "1.19.14"
-  resolved "https://registry.yarnpkg.com/@hono/node-server/-/node-server-1.19.14.tgz#e30f844bc77e3ce7be442aac3b1f73ad8b58d181"
-  integrity sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw==
+"@hono/node-server@^1.19.9 || ^2.0.5":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@hono/node-server/-/node-server-2.1.1.tgz#9cfa8649e9ecbcd48edf505b103002402ea51e70"
+  integrity sha512-ELuehkj5VCBdgEw9zs+ivkKwyzzUCSQuE96YmiPvn1ECBoZCczbFXJLeEGMTYjphP6gydh4pHMqEYPVMYUVgQg==
 
 "@humanfs/core@^0.19.2":
   version "0.19.2"
@@ -916,162 +675,144 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.4.3.tgz#c2b9d2e374ee62c586d3adbea87199b1d7a7a6ba"
   integrity sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==
 
-"@inquirer/ansi@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@inquirer/ansi/-/ansi-1.0.2.tgz#674a4c4d81ad460695cb2a1fc69d78cd187f337e"
-  integrity sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==
+"@inquirer/ansi@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@inquirer/ansi/-/ansi-2.0.7.tgz#86de22810cac3ed406ec10f8d66016815b8226b4"
+  integrity sha512-3eTuUO1vH2cZm2ZKHeQxnOqlTi9EfZDGgIe3BL3I4u+rJHocr9Fz86M4fjYABPvFnQG/gGK551HqDiIcETwU6Q==
 
-"@inquirer/checkbox@^4.3.2":
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/@inquirer/checkbox/-/checkbox-4.3.2.tgz#e1483e6519d6ffef97281a54d2a5baa0d81b3f3b"
-  integrity sha512-VXukHf0RR1doGe6Sm4F0Em7SWYLTHSsbGfJdS9Ja2bX5/D5uwVOEjr07cncLROdBvmnvCATYEWlHqYmXv2IlQA==
+"@inquirer/checkbox@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@inquirer/checkbox/-/checkbox-5.2.1.tgz#7f148b3153a776cee202015b10f9a985068d188d"
+  integrity sha512-b6xmA/VlTe0ZgDQHDui+Nav470u7u49nRd8/iuhOcQPO9Ch7lGuogydhi2VOmNlZ+zXcM8IcPuNSwQcdJaF/kw==
   dependencies:
-    "@inquirer/ansi" "^1.0.2"
-    "@inquirer/core" "^10.3.2"
-    "@inquirer/figures" "^1.0.15"
-    "@inquirer/type" "^3.0.10"
-    yoctocolors-cjs "^2.1.3"
+    "@inquirer/ansi" "^2.0.7"
+    "@inquirer/core" "^11.2.1"
+    "@inquirer/figures" "^2.0.7"
+    "@inquirer/type" "^4.0.7"
 
-"@inquirer/confirm@5.1.21", "@inquirer/confirm@^5.1.21":
-  version "5.1.21"
-  resolved "https://registry.yarnpkg.com/@inquirer/confirm/-/confirm-5.1.21.tgz#610c4acd7797d94890a6e2dde2c98eb1e891dd12"
-  integrity sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==
+"@inquirer/confirm@6.1.1", "@inquirer/confirm@^6.1.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@inquirer/confirm/-/confirm-6.1.1.tgz#9c6a7d79c6132b2af57fdb75747f056204e55356"
+  integrity sha512-eb8DBZcz/2qHWQda4rk2JiQk5h9QV/cVHi1yjt0f69WFZMRFn0sJTye3EAP8icut8UDMjQPsaH5KbcOogefrFQ==
   dependencies:
-    "@inquirer/core" "^10.3.2"
-    "@inquirer/type" "^3.0.10"
+    "@inquirer/core" "^11.2.1"
+    "@inquirer/type" "^4.0.7"
 
-"@inquirer/core@^10.3.2":
-  version "10.3.2"
-  resolved "https://registry.yarnpkg.com/@inquirer/core/-/core-10.3.2.tgz#535979ff3ff4fe1e7cc4f83e2320504c743b7e20"
-  integrity sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==
+"@inquirer/core@^11.2.1":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/@inquirer/core/-/core-11.2.1.tgz#54ccd8f7d47852140b6066cbd77d63b2c2b168fd"
+  integrity sha512-Qd6GJT1yVyrZZCfN8W2qKF5ApmqryXRhRKCuip8h01x2w/esJQ2XIYc6f9abMIHgKQdBfFTSOdbHRLAhuM09UA==
   dependencies:
-    "@inquirer/ansi" "^1.0.2"
-    "@inquirer/figures" "^1.0.15"
-    "@inquirer/type" "^3.0.10"
+    "@inquirer/ansi" "^2.0.7"
+    "@inquirer/figures" "^2.0.7"
+    "@inquirer/type" "^4.0.7"
     cli-width "^4.1.0"
-    mute-stream "^2.0.0"
+    fast-wrap-ansi "^0.2.0"
+    mute-stream "^3.0.0"
     signal-exit "^4.1.0"
-    wrap-ansi "^6.2.0"
-    yoctocolors-cjs "^2.1.3"
 
-"@inquirer/editor@^4.2.23":
-  version "4.2.23"
-  resolved "https://registry.yarnpkg.com/@inquirer/editor/-/editor-4.2.23.tgz#fe046a3bfdae931262de98c1052437d794322e0b"
-  integrity sha512-aLSROkEwirotxZ1pBaP8tugXRFCxW94gwrQLxXfrZsKkfjOYC1aRvAZuhpJOb5cu4IBTJdsCigUlf2iCOu4ZDQ==
+"@inquirer/editor@^5.2.2":
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/@inquirer/editor/-/editor-5.2.2.tgz#7c73e2fc0e7bd4c40cfd38a180ae5bbd24d32b90"
+  integrity sha512-ZRVd/oD+sYsUd5zVm0NflqEzlqfYCyHNsqkHl2oWXEUHs12tCbcSFi+wVFEvD8+LGRaMUsVrE7qeo6lSG/S1Vg==
   dependencies:
-    "@inquirer/core" "^10.3.2"
-    "@inquirer/external-editor" "^1.0.3"
-    "@inquirer/type" "^3.0.10"
+    "@inquirer/core" "^11.2.1"
+    "@inquirer/external-editor" "^3.0.3"
+    "@inquirer/type" "^4.0.7"
 
-"@inquirer/expand@^4.0.23":
-  version "4.0.23"
-  resolved "https://registry.yarnpkg.com/@inquirer/expand/-/expand-4.0.23.tgz#a38b5f32226d75717c370bdfed792313b92bdc05"
-  integrity sha512-nRzdOyFYnpeYTTR2qFwEVmIWypzdAx/sIkCMeTNTcflFOovfqUk+HcFhQQVBftAh9gmGrpFj6QcGEqrDMDOiew==
+"@inquirer/expand@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@inquirer/expand/-/expand-5.1.1.tgz#e2afeac247d97dd64ee18aa81e902bdd1fe0ea70"
+  integrity sha512-YmQpenjbFSHAK3sOd44puHh3V1KXXr+JiNpUztoSQ4drLh2rTVzTap/YtlAVu/5xavifIlBfNEzJ/neZJ1a/1g==
   dependencies:
-    "@inquirer/core" "^10.3.2"
-    "@inquirer/type" "^3.0.10"
-    yoctocolors-cjs "^2.1.3"
+    "@inquirer/core" "^11.2.1"
+    "@inquirer/type" "^4.0.7"
 
-"@inquirer/external-editor@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@inquirer/external-editor/-/external-editor-1.0.3.tgz#c23988291ee676290fdab3fd306e64010a6d13b8"
-  integrity sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==
+"@inquirer/external-editor@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@inquirer/external-editor/-/external-editor-3.0.3.tgz#d79e772542cf8d340642e9dabd3a1ea7f5a30104"
+  integrity sha512-6thf5I8q7lZwzGLAxPaaGEREEkZ3nyePPDQ1oyobblxmEE8mqTLguScP7pDjUTAibiyb4hfXl+qjUEJ+di/aNA==
   dependencies:
     chardet "^2.1.1"
-    iconv-lite "^0.7.0"
+    iconv-lite "^0.7.2"
 
-"@inquirer/figures@^1.0.15":
-  version "1.0.15"
-  resolved "https://registry.yarnpkg.com/@inquirer/figures/-/figures-1.0.15.tgz#dbb49ed80df11df74268023b496ac5d9acd22b3a"
-  integrity sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==
+"@inquirer/figures@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@inquirer/figures/-/figures-2.0.7.tgz#f5cc5843732a81304d06a0db4b53cc7dbda15541"
+  integrity sha512-aJ8TBPOGB6f/2qziPfElISTCEd5XOYTFckA2SGjhNmiKzfK/u4ot3v0DUzGVdUnKjN10EqnnEPck36BkyfLnJw==
 
-"@inquirer/input@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@inquirer/input/-/input-4.3.1.tgz#778683b4c4c4d95d05d4b05c4a854964b73565b4"
-  integrity sha512-kN0pAM4yPrLjJ1XJBjDxyfDduXOuQHrBB8aLDMueuwUGn+vNpF7Gq7TvyVxx8u4SHlFFj4trmj+a2cbpG4Jn1g==
+"@inquirer/input@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@inquirer/input/-/input-5.1.2.tgz#9305cb170dfc3a5323e5eac885a945e7cddd5c4b"
+  integrity sha512-9K/DDBSQpOyZSkt6sOVP9Vo0TR7atX2kuILsUu0x3wVcVbe97lJwIJKMLdMw25tDYuXl/qp6erT0Xs1rfmcfZg==
   dependencies:
-    "@inquirer/core" "^10.3.2"
-    "@inquirer/type" "^3.0.10"
+    "@inquirer/core" "^11.2.1"
+    "@inquirer/type" "^4.0.7"
 
-"@inquirer/number@^3.0.23":
-  version "3.0.23"
-  resolved "https://registry.yarnpkg.com/@inquirer/number/-/number-3.0.23.tgz#3fdec2540d642093fd7526818fd8d4bdc7335094"
-  integrity sha512-5Smv0OK7K0KUzUfYUXDXQc9jrf8OHo4ktlEayFlelCjwMXz0299Y8OrI+lj7i4gCBY15UObk76q0QtxjzFcFcg==
+"@inquirer/number@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@inquirer/number/-/number-4.1.1.tgz#b133668d8e0e099b4133abb915221501e0ff75d7"
+  integrity sha512-XF4IXAbPnGPgw0wsbC/i2tPcyfdZgDpUlhsqU0SfT4IRIGWha6Xm9VRgN5yYxJq+jnyXlfXI/nQ3ulfk0iEICA==
   dependencies:
-    "@inquirer/core" "^10.3.2"
-    "@inquirer/type" "^3.0.10"
+    "@inquirer/core" "^11.2.1"
+    "@inquirer/type" "^4.0.7"
 
-"@inquirer/password@^4.0.23":
-  version "4.0.23"
-  resolved "https://registry.yarnpkg.com/@inquirer/password/-/password-4.0.23.tgz#b9f5187c8c92fd7aa9eceb9d8f2ead0d7e7b000d"
-  integrity sha512-zREJHjhT5vJBMZX/IUbyI9zVtVfOLiTO66MrF/3GFZYZ7T4YILW5MSkEYHceSii/KtRk+4i3RE7E1CUXA2jHcA==
+"@inquirer/password@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@inquirer/password/-/password-5.1.1.tgz#f21efb614da9c905095262f51781fd2a721fceac"
+  integrity sha512-3XBfF7DAsp5qeDsvN5Rd1HmbNokVvEQoUM0QLrRcybC9nX96w3Pbmu7qUsb3IT3J3jBvs2+mTXaKHOUsgHMLzg==
   dependencies:
-    "@inquirer/ansi" "^1.0.2"
-    "@inquirer/core" "^10.3.2"
-    "@inquirer/type" "^3.0.10"
+    "@inquirer/ansi" "^2.0.7"
+    "@inquirer/core" "^11.2.1"
+    "@inquirer/type" "^4.0.7"
 
-"@inquirer/prompts@7.10.1":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@inquirer/prompts/-/prompts-7.10.1.tgz#e1436c0484cf04c22548c74e2cd239e989d5f847"
-  integrity sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==
+"@inquirer/prompts@8.5.2":
+  version "8.5.2"
+  resolved "https://registry.yarnpkg.com/@inquirer/prompts/-/prompts-8.5.2.tgz#09c0132ada2bbba94c91d341115e1e41cb3f1525"
+  integrity sha512-IYR/3C/paEVVQYQvdDlFZVjRCJVYHHON0XXMH91KO9GSxs0TdKYWlUdvfQl2EfAHDxUaN3IBffkE/BDTh5nJ6g==
   dependencies:
-    "@inquirer/checkbox" "^4.3.2"
-    "@inquirer/confirm" "^5.1.21"
-    "@inquirer/editor" "^4.2.23"
-    "@inquirer/expand" "^4.0.23"
-    "@inquirer/input" "^4.3.1"
-    "@inquirer/number" "^3.0.23"
-    "@inquirer/password" "^4.0.23"
-    "@inquirer/rawlist" "^4.1.11"
-    "@inquirer/search" "^3.2.2"
-    "@inquirer/select" "^4.4.2"
+    "@inquirer/checkbox" "^5.2.1"
+    "@inquirer/confirm" "^6.1.1"
+    "@inquirer/editor" "^5.2.2"
+    "@inquirer/expand" "^5.1.1"
+    "@inquirer/input" "^5.1.2"
+    "@inquirer/number" "^4.1.1"
+    "@inquirer/password" "^5.1.1"
+    "@inquirer/rawlist" "^5.3.1"
+    "@inquirer/search" "^4.2.1"
+    "@inquirer/select" "^5.2.1"
 
-"@inquirer/rawlist@^4.1.11":
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/@inquirer/rawlist/-/rawlist-4.1.11.tgz#313c8c3ffccb7d41e990c606465726b4a898a033"
-  integrity sha512-+LLQB8XGr3I5LZN/GuAHo+GpDJegQwuPARLChlMICNdwW7OwV2izlCSCxN6cqpL0sMXmbKbFcItJgdQq5EBXTw==
+"@inquirer/rawlist@^5.3.1":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@inquirer/rawlist/-/rawlist-5.3.1.tgz#66f6b8e6aa82d47399c433b8262128e7c1a4f9ce"
+  integrity sha512-QqdTqQddL3qPX/PPrjobpsO25NZ4dWXgTLenrR445L2ptLEYE6Z+PD5c5CNDJNx4ugRgELAIpSIJxZaO2jJ2Og==
   dependencies:
-    "@inquirer/core" "^10.3.2"
-    "@inquirer/type" "^3.0.10"
-    yoctocolors-cjs "^2.1.3"
+    "@inquirer/core" "^11.2.1"
+    "@inquirer/type" "^4.0.7"
 
-"@inquirer/search@^3.2.2":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@inquirer/search/-/search-3.2.2.tgz#4cc6fd574dcd434e4399badc37c742c3fd534ac8"
-  integrity sha512-p2bvRfENXCZdWF/U2BXvnSI9h+tuA8iNqtUKb9UWbmLYCRQxd8WkvwWvYn+3NgYaNwdUkHytJMGG4MMLucI1kA==
+"@inquirer/search@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@inquirer/search/-/search-4.2.1.tgz#c8f4b78ab3f866fdf0503fac0cd08c4a6661c11e"
+  integrity sha512-xJj8QWKRSrfKoBIITLZK61dD3zwo0Rz11fgDImku30/Oe81zMdIdGgrLY2h6RkJ+KZ/GhNYIRMKnH/62qBTA5g==
   dependencies:
-    "@inquirer/core" "^10.3.2"
-    "@inquirer/figures" "^1.0.15"
-    "@inquirer/type" "^3.0.10"
-    yoctocolors-cjs "^2.1.3"
+    "@inquirer/core" "^11.2.1"
+    "@inquirer/figures" "^2.0.7"
+    "@inquirer/type" "^4.0.7"
 
-"@inquirer/select@^4.4.2":
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/@inquirer/select/-/select-4.4.2.tgz#2ac8fca960913f18f1d1b35323ed8fcd27d89323"
-  integrity sha512-l4xMuJo55MAe+N7Qr4rX90vypFwCajSakx59qe/tMaC1aEHWLyw68wF4o0A4SLAY4E0nd+Vt+EyskeDIqu1M6w==
+"@inquirer/select@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@inquirer/select/-/select-5.2.1.tgz#3a05e76e58d9e1bb095e912c3e7093aa04cd4604"
+  integrity sha512-FlDndEUww8m7BfukO2nJa25vhD+H5jxxCv4oGioKqzyWz3nPHhhw4LKdYRSlXuAx7DsdWia7iyaBPKKS95Evfw==
   dependencies:
-    "@inquirer/ansi" "^1.0.2"
-    "@inquirer/core" "^10.3.2"
-    "@inquirer/figures" "^1.0.15"
-    "@inquirer/type" "^3.0.10"
-    yoctocolors-cjs "^2.1.3"
+    "@inquirer/ansi" "^2.0.7"
+    "@inquirer/core" "^11.2.1"
+    "@inquirer/figures" "^2.0.7"
+    "@inquirer/type" "^4.0.7"
 
-"@inquirer/type@^3.0.10", "@inquirer/type@^3.0.8":
-  version "3.0.10"
-  resolved "https://registry.yarnpkg.com/@inquirer/type/-/type-3.0.10.tgz#11ed564ec78432a200ea2601a212d24af8150d50"
-  integrity sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==
-
-"@isaacs/fs-minipass@^4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz#2d59ae3ab4b38fb4270bfa23d30f8e2e86c7fe32"
-  integrity sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==
-  dependencies:
-    minipass "^7.0.4"
-
-"@istanbuljs/schema@^0.1.3":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.6.tgz#8dc9afa2ac1506cb1a58f89940f1c124446c8df3"
-  integrity sha512-+Sg6GCR/wy1oSmQDFq4LQDAhm3ETKnorxN+y5nbLULOR3P0c14f2Wurzj3/xqPXtasLFfHd5iRFQ7AJt4KH2cw==
+"@inquirer/type@^4.0.6", "@inquirer/type@^4.0.7":
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/@inquirer/type/-/type-4.0.7.tgz#9c6f0d857fe6ad549a3a932343b64e76acb34b10"
+  integrity sha512-t28inv14nMQ1PhKpsJPY+kEs/c00qzeCOS2gTNRyTjG5d6qsVA2fItxW4hkvGZ5lvanGLdtCzVIx5dwdRpN1+g==
 
 "@jridgewell/gen-mapping@^0.3.12", "@jridgewell/gen-mapping@^0.3.5":
   version "0.3.13"
@@ -1081,14 +822,6 @@
     "@jridgewell/sourcemap-codec" "^1.5.0"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@jridgewell/remapping@^2.3.5":
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/@jridgewell/remapping/-/remapping-2.3.5.tgz#375c476d1972947851ba1e15ae8f123047445aa1"
-  integrity sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==
-  dependencies:
-    "@jridgewell/gen-mapping" "^0.3.5"
-    "@jridgewell/trace-mapping" "^0.3.24"
-
 "@jridgewell/resolve-uri@^3.1.0":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
@@ -1107,54 +840,54 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@listr2/prompt-adapter-inquirer@3.0.5":
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-3.0.5.tgz#5e5def882a7fc493cb97224b3174e0c02cd84184"
-  integrity sha512-WELs+hj6xcilkloBXYf9XXK8tYEnKsgLj01Xl5ONUJpKjmT5hGVUzNUS5tooUxs7pGMrw+jFD/41WpqW4V3LDA==
+"@listr2/prompt-adapter-inquirer@4.2.4":
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-4.2.4.tgz#28fcb5727d88e364bb4d404fefc34134ff62a41e"
+  integrity sha512-/KRI2DMD7JGSYaREF0Ygl7AefJ/2ase4Gc5cBiKqT5l4tFjsSJfhFGcc5nSkgl0Sp9LkCQNzl/cqbVJYP2L3dw==
   dependencies:
-    "@inquirer/type" "^3.0.8"
+    "@inquirer/type" "^4.0.6"
 
-"@lmdb/lmdb-darwin-arm64@3.5.1":
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-3.5.1.tgz#b1fe8b88fa023ccbf5800b1e630285b7eab1538f"
-  integrity sha512-tpfN4kKrrMpQ+If1l8bhmoNkECJi0iOu6AEdrTJvWVC+32sLxTARX5Rsu579mPImRP9YFWfWgeRQ5oav7zApQQ==
+"@lmdb/lmdb-darwin-arm64@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-3.5.6.tgz#81ab45551e1d839dc709bdf24ca133cfb52ccfb4"
+  integrity sha512-mY5FG4TjPAkY4P0w+OhHaUka5mDh2TX2WKYIwuKzJ1zeW3VvRgxdam/lGJTquI+bthTx5CSHDW+BAQCnNAzkEA==
 
-"@lmdb/lmdb-darwin-x64@3.5.1":
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-3.5.1.tgz#ab5c9937d2019563227291a22aa7e140481eb5eb"
-  integrity sha512-+a2tTfc3rmWhLAolFUWRgJtpSuu+Fw/yjn4rF406NMxhfjbMuiOUTDRvRlMFV+DzyjkwnokisskHbCWkS3Ly5w==
+"@lmdb/lmdb-darwin-x64@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-3.5.6.tgz#ce7577fd38136c61f3b346b520cb3af299bc0f54"
+  integrity sha512-foa+pwitysO8k+xhs7psBFfTKnVgR69NlZRRTHaFVDqphh7AdGpLeyRzKw/ofatr/sN6TiHRRW6mmop0ZrrppQ==
 
-"@lmdb/lmdb-linux-arm64@3.5.1":
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-3.5.1.tgz#e05fce5ae4b40990052e184038c8f29a75565e00"
-  integrity sha512-aoERa5B6ywXdyFeYGQ1gbQpkMkDbEo45qVoXE5QpIRavqjnyPwjOulMkmkypkmsbJ5z4Wi0TBztON8agCTG0Vg==
+"@lmdb/lmdb-linux-arm64@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-3.5.6.tgz#2ffb1710ef0547f8de40d50c5ada6d1895923797"
+  integrity sha512-HmiyFFdJa38s1heCMSooSPaBSFTHJ3C+ERPp28xAPlDX1YiALJVOgbry065nXd8Y7KISWjnw05zpG1RX8IfftA==
 
-"@lmdb/lmdb-linux-arm@3.5.1":
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-3.5.1.tgz#95cb7e1186d6f57a7b1b0da4f7bd459eeb1ce812"
-  integrity sha512-0EgcE6reYr8InjD7V37EgXcYrloqpxVPINy3ig1MwDSbl6LF/vXTYRH9OE1Ti1D8YZnB35ZH9aTcdfSb5lql2A==
+"@lmdb/lmdb-linux-arm@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-3.5.6.tgz#a480c7fac3769a1b71337702cd6c938b300a8599"
+  integrity sha512-QR4YRyR5h5Z8eGXrNQjiyo2NNDfqi3tCc9dQG5Is1blCt+qWw1ZoBWhlWAr5d+jshkifMIJjVHzHGKbkKzF8Tw==
 
-"@lmdb/lmdb-linux-x64@3.5.1":
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-3.5.1.tgz#8f289fbd336357c22ba0218449d863020b74cacd"
-  integrity sha512-SqNDY1+vpji7bh0sFH5wlWyFTOzjbDOl0/kB5RLLYDAFyd/uw3n7wyrmas3rYPpAW7z18lMOi1yKlTPv967E3g==
+"@lmdb/lmdb-linux-x64@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-3.5.6.tgz#6b50738a5d779fe090ce1ab7bfb41a9c88ea92f3"
+  integrity sha512-ADzCuCF2cTNiX9kDScqcz1fjnAkxPpQNneV3KFTdV3wWtVlI2sTGzySoMTgDpinkMMFj1NTJlxA6XR8fwc4hlA==
 
-"@lmdb/lmdb-win32-arm64@3.5.1":
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-win32-arm64/-/lmdb-win32-arm64-3.5.1.tgz#c667bf2adb59d69a5ecd5986b7898a35925182de"
-  integrity sha512-50v0O1Lt37cwrmR9vWZK5hRW0Aw+KEmxJJ75fge/zIYdvNKB/0bSMSVR5Uc2OV9JhosIUyklOmrEvavwNJ8D6w==
+"@lmdb/lmdb-win32-arm64@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-win32-arm64/-/lmdb-win32-arm64-3.5.6.tgz#5a5872d6a275bfa8d4423d78906f7202ec352c97"
+  integrity sha512-J7A9aEQsQiv0TYtBGL7NDIPp2lOS8nnl+zm4sWZm1xlsTTaQ4PgD096Adzdrk27rw3UxCkDXdCUa4ax41oztBQ==
 
-"@lmdb/lmdb-win32-x64@3.5.1":
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-3.5.1.tgz#da0f989e868d2ce02c9ed24c082f561354ab4d0f"
-  integrity sha512-qwosvPyl+zpUlp3gRb7UcJ3H8S28XHCzkv0Y0EgQToXjQP91ZD67EHSCDmaLjtKhe+GVIW5om1KUpzVLA0l6pg==
+"@lmdb/lmdb-win32-x64@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-3.5.6.tgz#8e26cbb62abb1454130fe73bd475df3b24a97567"
+  integrity sha512-1g7G0knRX2iV/voDu54yxrGqw5Dk0w2oIYb7dgJq8IkOi+m7wbD8Q3QpPFjh0C01G58S88dqGn03len6UPCXsg==
 
-"@modelcontextprotocol/sdk@1.26.0":
-  version "1.26.0"
-  resolved "https://registry.yarnpkg.com/@modelcontextprotocol/sdk/-/sdk-1.26.0.tgz#5b35d73062125f126cc70b0be83cbab53bcdde74"
-  integrity sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg==
+"@modelcontextprotocol/sdk@1.30.0":
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/@modelcontextprotocol/sdk/-/sdk-1.30.0.tgz#dfa8a48347ec2d2c0d47917d7dc57f754e37f5ff"
+  integrity sha512-xKd8OIzlqNzcqcNumGAa6g+PW2kjD5vrpcKOnfldAUPP3j7lnqMPwlTXQm8gF+UwH72z0lqaRbjr9hqGz0eITA==
   dependencies:
-    "@hono/node-server" "^1.19.9"
+    "@hono/node-server" "^1.19.9 || ^2.0.5"
     ajv "^8.17.1"
     ajv-formats "^3.0.1"
     content-type "^1.0.5"
@@ -1172,35 +905,35 @@
     zod "^3.25 || ^4.0"
     zod-to-json-schema "^3.25.1"
 
-"@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.3.tgz#9edec61b22c3082018a79f6d1c30289ddf3d9d11"
-  integrity sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw==
+"@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.4.tgz#22619f76a6b10ba78c8b74025b0d9754cad69cc7"
+  integrity sha512-LCkGo6JDfaBhgST7UpPWgNgLINpcpabaHfyz5OBx75nUYxBsaEPxjnyNjWpeb/xBup/682QnBfRBy2/LvPutZQ==
 
-"@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-3.0.3.tgz#33677a275204898ad8acbf62734fc4dc0b6a4855"
-  integrity sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw==
+"@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-3.0.4.tgz#c2fc0573afe08b0cf213e66eef76842b121d1577"
+  integrity sha512-zExlW9zUJKZH/tOtVMttwjKa4Xm/3KcNjnE3dPN92uCktwavMxpgCA3MoJK/DOnTWsQgo224OaST27/mPNAf+w==
 
-"@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-3.0.3.tgz#19edf7cdc2e7063ee328403c1d895a86dd28f4bb"
-  integrity sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg==
+"@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-3.0.4.tgz#4e3822f5522e18ed92611b894dc5db1bc882f39d"
+  integrity sha512-dgX0P/9wGPJeHFBG+ZmhgE6bmtMt7NP5CRBGyyktpopdk/mW4POnrpQsSLtKI1dwpc+pPLuXHDh6vvskyQE/sw==
 
-"@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-3.0.3.tgz#94fb0543ba2e28766c3fc439cabbe0440ae70159"
-  integrity sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw==
+"@msgpackr-extract/msgpackr-extract-linux-arm@3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-3.0.4.tgz#27ec4bc7eb6c311c982a50f1a6e1e1414638a6f8"
+  integrity sha512-Tg3yX65f5GbtXLkrYEHE5oibZG9epyYWas7FogTTEJeDEF9JlXJzKgXaNhT3UXlTOeA+AfZpYZYZ0uPj7Cfquw==
 
-"@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-3.0.3.tgz#4a0609ab5fe44d07c9c60a11e4484d3c38bbd6e3"
-  integrity sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg==
+"@msgpackr-extract/msgpackr-extract-linux-x64@3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-3.0.4.tgz#37317d833c7d01d086f6155fa59c478adb6839f6"
+  integrity sha512-8TNXMEjJc3QEy7R/x1INhgiU+XakDAFUzBhaz7+Rbrs8NH5UQeHQxxmzsSBJGyV6I1jW79undiQm8tOI+D+8FQ==
 
-"@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.3.tgz#0aa5502d547b57abfc4ac492de68e2006e417242"
-  integrity sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ==
+"@msgpackr-extract/msgpackr-extract-win32-x64@3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.4.tgz#a1c79dcc9ae5f8c02aea8c2f144e5af6a822e5e8"
+  integrity sha512-CmCXPQrkbwExx3j946/PtHWHbYJiCRBRDl4BlkRQcJB/YOwQxJRTpoo7aTsortjgoJ1x7opzTSxn7C+ASSLVjQ==
 
 "@napi-rs/nice-android-arm-eabi@1.1.1":
   version "1.1.1"
@@ -1310,467 +1043,402 @@
     "@napi-rs/nice-win32-ia32-msvc" "1.1.1"
     "@napi-rs/nice-win32-x64-msvc" "1.1.1"
 
-"@napi-rs/wasm-runtime@^1.1.1":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz#a46bbfedc29751b7170c5d23bc1d8ee8c7e3c1e1"
-  integrity sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==
+"@napi-rs/wasm-runtime@^1.1.6":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.2.3.tgz#97e3d45d7424dc5da1d4e32f3bf3b292f6c1b44c"
+  integrity sha512-UMduMbqO5s5zF2NkNacMT/yK5Y5QiKvWr2+50bzIIxFDwVJ2h49b+oyjaCGPhJxd2/gC2x39EHv/gHVuu36x2Q==
   dependencies:
-    "@tybys/wasm-util" "^0.10.1"
+    "@tybys/wasm-util" "^0.10.3"
 
-"@npmcli/agent@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@npmcli/agent/-/agent-4.0.0.tgz#2bb2b1c0a170940511554a7986ae2a8be9fedcce"
-  integrity sha512-kAQTcEN9E8ERLVg5AsGwLNoFb+oEG6engbqAU2P43gD4JEIkNGMHdVQ096FsOAAYpZPB0RSt0zgInKIAS1l5QA==
+"@oxc-parser/binding-android-arm-eabi@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-android-arm-eabi/-/binding-android-arm-eabi-0.142.0.tgz#12951a56ed573c0246ceacbc94e29d7e90d3925a"
+  integrity sha512-ZiRGDutGsv1G6bL/ozy/koC0Sv39T1DqyoC4KD1DOy9ZoACm1O5UWhEK2c02Qdk+4lfLVkvFa/mQ0fm/4h1BtQ==
+
+"@oxc-parser/binding-android-arm64@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-android-arm64/-/binding-android-arm64-0.142.0.tgz#c29c254ac550771a4de17f2a815d153ebf82487e"
+  integrity sha512-WZkvGRLNQTz8lR9zP5nLjUdlroRCopBu3g9zF1p/laE6DzT1UbQo8Rdz5MWhaJUPYg/6gp+jo7HUgsyKaN1FtQ==
+
+"@oxc-parser/binding-darwin-arm64@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-darwin-arm64/-/binding-darwin-arm64-0.142.0.tgz#dd2c46a9d4a5599d127b050cb7229cf1a28dc019"
+  integrity sha512-l4khS8LQOOVYsGRVARo1gSaCT/aBSceUVXgtovWc2+drnxVuDr082WA3OCHVdVzIz5JIrP/y9CWsSKxBDNmYGg==
+
+"@oxc-parser/binding-darwin-x64@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-darwin-x64/-/binding-darwin-x64-0.142.0.tgz#45d169072658ee22f4cb9b4f93c320259905d28f"
+  integrity sha512-QBsNF3nqlXmcH2B1YOPqQYmCJoy4HuIjUxGbBO/k5JAJUl68ghU2psRY2zPk+RyBaWqKP/qfL4oaFgEMCdwskA==
+
+"@oxc-parser/binding-freebsd-x64@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-freebsd-x64/-/binding-freebsd-x64-0.142.0.tgz#add219d6a838028268f8158168e566ae264dcfb8"
+  integrity sha512-b7Q7m4Cqc6XqNhri3R+QhU+GVy646Pn+bkdhrDdWym/Fdi0ZUa+d73H9dm5H91JtbtAQ/z1d8XKMW3oOV8a4tQ==
+
+"@oxc-parser/binding-linux-arm-gnueabihf@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.142.0.tgz#ea64a9a807dd246d43fba59def1a0f9f729079ee"
+  integrity sha512-3riVS5IhdH3uCZj1Y9ftDQlR0dvLsIlw/edrRqk8JhgNd5K0XSs+UBtgh50N13CAlW9/TXj6sVGXaKNBocd0Yg==
+
+"@oxc-parser/binding-linux-arm-musleabihf@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.142.0.tgz#a304dc50b69c723f38ec9349e1a55d92725666a6"
+  integrity sha512-NmXUOpgpTSkhl795TiXmWppTwmSJ92RC1qvD6e4XOF+slgmo3e6Ah+kEu+6AN8s7NAOEwqGmir58MgSQSWmBSA==
+
+"@oxc-parser/binding-linux-arm64-gnu@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.142.0.tgz#597e255b0a4350e61d530e915775beb3b40d88b6"
+  integrity sha512-gc0EXsKtXgerujmU2Bql3u1L1HsSQ2774R83idq/FoNMPVV/RY/1ErFsvnit7KoiP/sLvzQixeUo4Ut0ic0wmw==
+
+"@oxc-parser/binding-linux-arm64-musl@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.142.0.tgz#255ea22fe9dca6d6e528e9b1082906aa167c84b2"
+  integrity sha512-F2XvmWSE0uWpie+jHKKIFgdVOe9ypGhkEZxKx5DuW215K6cbAC274yYaPkcM7EqY4Df3Weyhpcz3lsURyH2LVg==
+
+"@oxc-parser/binding-linux-ppc64-gnu@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.142.0.tgz#86e7bc2cebe2e1ea5d1b4127271968cc8da3bca0"
+  integrity sha512-wLMbT21U/QxknQsk+VvNF0b9D2/aGWhcaQQQ+VYlE8FwD5+GoWZIPPXNzyHmkYyhm0KB3itL+TBavjMatqNnYA==
+
+"@oxc-parser/binding-linux-riscv64-gnu@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.142.0.tgz#9494de6f64ae967f9e33390cc758cb09742390ed"
+  integrity sha512-+G8F/4ckwT7FCJV4H2bt09xEzJbjNCfuL4Sp1AYNaFtFMVtgIGMuJlteT82U+K0UIZ/DzAR/LDlMFnEuajG7Kw==
+
+"@oxc-parser/binding-linux-riscv64-musl@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.142.0.tgz#86094e70a5a68f1273ba6020be3598ea70d711c7"
+  integrity sha512-hTsHtTLxMAfCo+rpF5K3qZJKW2NpPN/CHd4mYB3y7XlSdspHkd2gehDIofP64AacA9nWQw2tY3O7wR6UY8IVOA==
+
+"@oxc-parser/binding-linux-s390x-gnu@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.142.0.tgz#560228fe1c257425143a9b483bdd15c717c35730"
+  integrity sha512-6y7qYY3TCUDYjqswImdTGl92y+KA/80twALegQPN27kfY+bG7Ib1+L3jbmrCZQx6wrVnai9IPsEZp07I0hx7JQ==
+
+"@oxc-parser/binding-linux-x64-gnu@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.142.0.tgz#8a3cd3272eb8f0d12c75ae18c9bf873b7fe637a1"
+  integrity sha512-i69kAWU+2LgoH5bR+zWiiu+UzAw7Oxkwv7COeJTeY19pn4e70nKQcr9Pm6cL2Z0Z54d+gl9qADlK/0yyuCPiBA==
+
+"@oxc-parser/binding-linux-x64-musl@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-linux-x64-musl/-/binding-linux-x64-musl-0.142.0.tgz#0033a6136bc2d49f316ea73333c9bd52c1cb94bd"
+  integrity sha512-4SQs678MmjYVrmhAgCWD4o0vpaFszXw9xLX5p2Z9MMFcltxiLkA88wQjh80YHjPrXtpyZ2CWI5m+1yNKM0m2Pw==
+
+"@oxc-parser/binding-openharmony-arm64@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-openharmony-arm64/-/binding-openharmony-arm64-0.142.0.tgz#abd8fcd6baa64b0530d26a12a9e834670173e029"
+  integrity sha512-YHpx9N7Ln3a++Tc8rv+H7mrK1zyJQOAwCFg8LZ3lTs1T5afGWeZrLPhPT9HLnIwSjCyJqPWVMIrMxbjcmBr2oQ==
+
+"@oxc-parser/binding-wasm32-wasi@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-wasm32-wasi/-/binding-wasm32-wasi-0.142.0.tgz#0e9317b01f1ef22a9c06cdcb261e266491555de8"
+  integrity sha512-3pLDyY3+oogW73RM5uehNgAiR/Xfb7fvO2Q1Z1gIqZ2+50XDVQmBVlRkHXZTU4gKnQHpwETNsYQVsJ3joVB2iA==
   dependencies:
-    agent-base "^7.1.0"
-    http-proxy-agent "^7.0.0"
-    https-proxy-agent "^7.0.1"
-    lru-cache "^11.2.1"
-    socks-proxy-agent "^8.0.3"
+    "@emnapi/core" "1.11.2"
+    "@emnapi/runtime" "1.11.2"
+    "@napi-rs/wasm-runtime" "^1.1.6"
 
-"@npmcli/fs@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-5.0.0.tgz#674619771907342b3d1ac197aaf1deeb657e3539"
-  integrity sha512-7OsC1gNORBEawOa5+j2pXN9vsicaIOH5cPXxoR6fJOmH6/EXpJB2CajXOu1fPRFun2m1lktEFX11+P89hqO/og==
-  dependencies:
-    semver "^7.3.5"
+"@oxc-parser/binding-win32-arm64-msvc@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.142.0.tgz#2e5fc33327d632482510b4a4fda8e8f2140edfc7"
+  integrity sha512-Had/VeVY28Oyb0K+Q4FV8KCzoBycIh93oDK6pCbya9lkzdq+ikMHMgBubsdqqlybjJmQRawCQRrnBRHyQwYvcQ==
 
-"@npmcli/git@^7.0.0":
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/@npmcli/git/-/git-7.0.2.tgz#680c3271fe51401c07ee41076be678851e600ff0"
-  integrity sha512-oeolHDjExNAJAnlYP2qzNjMX/Xi9bmu78C9dIGr4xjobrSKbuMYCph8lTzn4vnW3NjIqVmw/f8BCfouqyJXlRg==
-  dependencies:
-    "@gar/promise-retry" "^1.0.0"
-    "@npmcli/promise-spawn" "^9.0.0"
-    ini "^6.0.0"
-    lru-cache "^11.2.1"
-    npm-pick-manifest "^11.0.1"
-    proc-log "^6.0.0"
-    semver "^7.3.5"
-    which "^6.0.0"
+"@oxc-parser/binding-win32-ia32-msvc@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.142.0.tgz#d10783beee866182c9101788d3c20349df1df925"
+  integrity sha512-GGi3+YphVHavvgs6gum2UXoNCqzHAmPt/nXkn8ZQZstV2Q1qZD1Mn8fz/nWrDkefHQtrG/+1/XrbMxsBTo6Svw==
 
-"@npmcli/installed-package-contents@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@npmcli/installed-package-contents/-/installed-package-contents-4.0.0.tgz#18e5070704cfe0278f9ae48038558b6efd438426"
-  integrity sha512-yNyAdkBxB72gtZ4GrwXCM0ZUedo9nIbOMKfGjt6Cu6DXf0p8y1PViZAKDC8q8kv/fufx0WTjRBdSlyrvnP7hmA==
-  dependencies:
-    npm-bundled "^5.0.0"
-    npm-normalize-package-bin "^5.0.0"
+"@oxc-parser/binding-win32-x64-msvc@0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-parser/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.142.0.tgz#bad12594427efa9b345596de61e1232d0c052cb8"
+  integrity sha512-Ny/Wv4Us1LGC/ljwNTp+Hx3r/pH15EFfeDF0p+n898gt+TtRd6C9SccHcuUhDiNTb8s5tt7jdeAMDRQZ4Vq6hg==
 
-"@npmcli/node-gyp@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@npmcli/node-gyp/-/node-gyp-5.0.0.tgz#35475a58b5d791764a7252231197a14deefe8e47"
-  integrity sha512-uuG5HZFXLfyFKqg8QypsmgLQW7smiRjVc45bqD/ofZZcR/uxEjgQU8qDPv0s9TEeMUiAAU/GC5bR6++UdTirIQ==
+"@oxc-project/types@=0.139.0":
+  version "0.139.0"
+  resolved "https://registry.yarnpkg.com/@oxc-project/types/-/types-0.139.0.tgz#38d76b9dbf934c2a02be174fb32ceebf182fe742"
+  integrity sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw==
 
-"@npmcli/package-json@^7.0.0":
-  version "7.0.5"
-  resolved "https://registry.yarnpkg.com/@npmcli/package-json/-/package-json-7.0.5.tgz#e29481dfc586d1625a6553799e6bec52ae0487a5"
-  integrity sha512-iVuTlG3ORq2iaVa1IWUxAO/jIp77tUKBhoMjuzYW2kL4MLN1bi/ofqkZ7D7OOwh8coAx1/S2ge0rMdGv8sLSOQ==
-  dependencies:
-    "@npmcli/git" "^7.0.0"
-    glob "^13.0.0"
-    hosted-git-info "^9.0.0"
-    json-parse-even-better-errors "^5.0.0"
-    proc-log "^6.0.0"
-    semver "^7.5.3"
-    spdx-expression-parse "^4.0.0"
+"@oxc-project/types@=0.140.0":
+  version "0.140.0"
+  resolved "https://registry.yarnpkg.com/@oxc-project/types/-/types-0.140.0.tgz#2acc1bd45ff24951059d01ce7552d26e1574c5ac"
+  integrity sha512-h5LUOzGArYemnW1NMz/DuuQhBi96J6JL2Bk8zE4kvqxB5Sg3jxmCiH4uyOWHDkiKSt5vWlG4FIwCR/DbstcNRQ==
 
-"@npmcli/promise-spawn@^9.0.0":
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/@npmcli/promise-spawn/-/promise-spawn-9.0.1.tgz#20e80cbdd2f24ad263a15de3ebbb1673cb82005b"
-  integrity sha512-OLUaoqBuyxeTqUvjA3FZFiXUfYC1alp3Sa99gW3EUDz3tZ3CbXDdcZ7qWKBzicrJleIgucoWamWH1saAmH/l2Q==
-  dependencies:
-    which "^6.0.0"
+"@oxc-project/types@^0.142.0":
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/@oxc-project/types/-/types-0.142.0.tgz#0b4bd7841ef3dd267a69184b97452cc0b313fb52"
+  integrity sha512-7W+2q5AKQVU36fkaryontrHn3YDt1RyUYXatw9i5H8ocYe2sPKSFB6eS8WNPeRKiN1qAWWZUPm7gwFzJGrccqQ==
 
-"@npmcli/redact@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@npmcli/redact/-/redact-4.0.0.tgz#c91121e02b7559a997614a2c1057cd7fc67608c4"
-  integrity sha512-gOBg5YHMfZy+TfHArfVogwgfBeQnKbbGo3pSUyK/gSI0AVu+pEiDVcKlQb0D8Mg1LNRZILZ6XG8I5dJ4KuAd9Q==
+"@parcel/watcher-android-arm64@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.6.0.tgz#99aaa3223d43807c9340af439cad7e9b6d26ada6"
+  integrity sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==
 
-"@npmcli/run-script@^10.0.0":
-  version "10.0.4"
-  resolved "https://registry.yarnpkg.com/@npmcli/run-script/-/run-script-10.0.4.tgz#99cddae483ce3dbf1a10f5683a4e6aaa02345ac0"
-  integrity sha512-mGUWr1uMnf0le2TwfOZY4SFxZGXGfm4Jtay/nwAa2FLNAKXUoUwaGwBMNH36UHPtinWfTSJ3nqFQr0091CxVGg==
-  dependencies:
-    "@npmcli/node-gyp" "^5.0.0"
-    "@npmcli/package-json" "^7.0.0"
-    "@npmcli/promise-spawn" "^9.0.0"
-    node-gyp "^12.1.0"
-    proc-log "^6.0.0"
+"@parcel/watcher-darwin-arm64@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.6.0.tgz#024496e586b4744f09ce532bbe89fe38ef02a64e"
+  integrity sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==
 
-"@oxc-project/types@=0.113.0":
-  version "0.113.0"
-  resolved "https://registry.yarnpkg.com/@oxc-project/types/-/types-0.113.0.tgz#e323164a2d0cdc72c3eb980cd2a471e641df8d52"
-  integrity sha512-Tp3XmgxwNQ9pEN9vxgJBAqdRamHibi76iowQ38O2I4PMpcvNRQNVsU2n1x1nv9yh0XoTrGFzf7cZSGxmixxrhA==
+"@parcel/watcher-darwin-x64@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.6.0.tgz#a4621df1359a93d39a332d9bab5ff09016a0608f"
+  integrity sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==
 
-"@parcel/watcher-android-arm64@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz#5f32e0dba356f4ac9a11068d2a5c134ca3ba6564"
-  integrity sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==
+"@parcel/watcher-freebsd-x64@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.6.0.tgz#7f565ed1a5b3a5e604e6a4799121518265d62a3d"
+  integrity sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==
 
-"@parcel/watcher-darwin-arm64@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz#88d3e720b59b1eceffce98dac46d7c40e8be5e8e"
-  integrity sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==
+"@parcel/watcher-linux-arm-glibc@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.6.0.tgz#ad7d3825e67b81999165da42593022045abc0889"
+  integrity sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==
 
-"@parcel/watcher-darwin-x64@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz#bf05d76a78bc15974f15ec3671848698b0838063"
-  integrity sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==
+"@parcel/watcher-linux-arm-musl@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.6.0.tgz#fe7d1cccb2c483215c090e938cf5cf404d2f9a8c"
+  integrity sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==
 
-"@parcel/watcher-freebsd-x64@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz#8bc26e9848e7303ac82922a5ae1b1ef1bdb48a53"
-  integrity sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==
+"@parcel/watcher-linux-arm64-glibc@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.6.0.tgz#7e239dcb4646c4c79f006a7131a48238249530da"
+  integrity sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==
 
-"@parcel/watcher-linux-arm-glibc@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz#1328fee1deb0c2d7865079ef53a2ba4cc2f8b40a"
-  integrity sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==
+"@parcel/watcher-linux-arm64-musl@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.6.0.tgz#c58b8d9c6d8d81594be00dd83aab741c1aaf7e0e"
+  integrity sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==
 
-"@parcel/watcher-linux-arm-musl@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz#bad0f45cb3e2157746db8b9d22db6a125711f152"
-  integrity sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==
+"@parcel/watcher-linux-x64-glibc@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.6.0.tgz#5184fa9a770478d86e56875f4ee163a0abdc8791"
+  integrity sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==
 
-"@parcel/watcher-linux-arm64-glibc@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz#b75913fbd501d9523c5f35d420957bf7d0204809"
-  integrity sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==
+"@parcel/watcher-linux-x64-musl@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.6.0.tgz#2d1c55aa7246cbc7670e2612058a8a542c9cf246"
+  integrity sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==
 
-"@parcel/watcher-linux-arm64-musl@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz#da5621a6a576070c8c0de60dea8b46dc9c3827d4"
-  integrity sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==
+"@parcel/watcher-win32-arm64@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.6.0.tgz#15e09432040fee9e2213aa9c10ed589012526def"
+  integrity sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==
 
-"@parcel/watcher-linux-x64-glibc@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz#ce437accdc4b30f93a090b4a221fd95cd9b89639"
-  integrity sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==
-
-"@parcel/watcher-linux-x64-musl@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz#02400c54b4a67efcc7e2327b249711920ac969e2"
-  integrity sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==
-
-"@parcel/watcher-win32-arm64@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz#caae3d3c7583ca0a7171e6bd142c34d20ea1691e"
-  integrity sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==
-
-"@parcel/watcher-win32-ia32@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz#9ac922550896dfe47bfc5ae3be4f1bcaf8155d6d"
-  integrity sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==
-
-"@parcel/watcher-win32-x64@2.5.6":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz#73fdafba2e21c448f0e456bbe13178d8fe11739d"
-  integrity sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==
+"@parcel/watcher-win32-x64@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.6.0.tgz#9bee199a2a4accd557b451ac2c1c793f305ae012"
+  integrity sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==
 
 "@parcel/watcher@^2.4.1":
-  version "2.5.6"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.5.6.tgz#3f932828c894f06d0ad9cfefade1756ecc6ef1f1"
-  integrity sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.6.0.tgz#99661f6220070b76a766aba6b7e313a087a1be4f"
+  integrity sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==
   dependencies:
     detect-libc "^2.0.3"
     is-glob "^4.0.3"
     node-addon-api "^7.0.0"
-    picomatch "^4.0.3"
+    picomatch "^4.0.4"
   optionalDependencies:
-    "@parcel/watcher-android-arm64" "2.5.6"
-    "@parcel/watcher-darwin-arm64" "2.5.6"
-    "@parcel/watcher-darwin-x64" "2.5.6"
-    "@parcel/watcher-freebsd-x64" "2.5.6"
-    "@parcel/watcher-linux-arm-glibc" "2.5.6"
-    "@parcel/watcher-linux-arm-musl" "2.5.6"
-    "@parcel/watcher-linux-arm64-glibc" "2.5.6"
-    "@parcel/watcher-linux-arm64-musl" "2.5.6"
-    "@parcel/watcher-linux-x64-glibc" "2.5.6"
-    "@parcel/watcher-linux-x64-musl" "2.5.6"
-    "@parcel/watcher-win32-arm64" "2.5.6"
-    "@parcel/watcher-win32-ia32" "2.5.6"
-    "@parcel/watcher-win32-x64" "2.5.6"
+    "@parcel/watcher-android-arm64" "2.6.0"
+    "@parcel/watcher-darwin-arm64" "2.6.0"
+    "@parcel/watcher-darwin-x64" "2.6.0"
+    "@parcel/watcher-freebsd-x64" "2.6.0"
+    "@parcel/watcher-linux-arm-glibc" "2.6.0"
+    "@parcel/watcher-linux-arm-musl" "2.6.0"
+    "@parcel/watcher-linux-arm64-glibc" "2.6.0"
+    "@parcel/watcher-linux-arm64-musl" "2.6.0"
+    "@parcel/watcher-linux-x64-glibc" "2.6.0"
+    "@parcel/watcher-linux-x64-musl" "2.6.0"
+    "@parcel/watcher-win32-arm64" "2.6.0"
+    "@parcel/watcher-win32-x64" "2.6.0"
 
-"@rolldown/binding-android-arm64@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.4.tgz#bb275690413cd0109d49ba5dd4491e1c0296ad0e"
-  integrity sha512-vRq9f4NzvbdZavhQbjkJBx7rRebDKYR9zHfO/Wg486+I7bSecdUapzCm5cyXoK+LHokTxgSq7A5baAXUZkIz0w==
+"@rolldown/binding-android-arm64@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.5.tgz#f58cb9a0a8128ed0582282720528547fc5c035f3"
+  integrity sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ==
 
-"@rolldown/binding-darwin-arm64@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.4.tgz#cd59b855ee90e464e8b6e97919089d00d98590e1"
-  integrity sha512-kFgEvkWLqt3YCgKB5re9RlIrx9bRsvyVUnaTakEpOPuLGzLpLapYxE9BufJNvPg8GjT6mB1alN4yN1NjzoeM8Q==
+"@rolldown/binding-android-arm64@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.0.tgz#18b16c76ef035d88a12905e84a5875fd39a869b4"
+  integrity sha512-9yB1l95IrJuNGDFdOYe79vdApdz6WWBCObE+rQ2LUliYUlcyFwSYIb2xb5/Ifw7dAtMy2ZqNyd8QTSOc7duAKw==
 
-"@rolldown/binding-darwin-x64@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.4.tgz#5c1411b969c26ffd88b661b1a38bafcf1519a431"
-  integrity sha512-JXmaOJGsL/+rsmMfutcDjxWM2fTaVgCHGoXS7nE8Z3c9NAYjGqHvXrAhMUZvMpHS/k7Mg+X7n/MVKb7NYWKKww==
+"@rolldown/binding-darwin-arm64@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.1.5.tgz#441144c05a4a831aa75269abc3a4a324374ea707"
+  integrity sha512-51Bnx9pNiMRKSUNtBfySkNJ9vMU9Hh3I1ozDd6gyPPYzaXCfnptUcEZxXGYFn+ul2dtcMUiqGR1Yai2K10uoTw==
 
-"@rolldown/binding-freebsd-x64@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.4.tgz#5b06b2792df246bb3fcc64630bd92af9feff3f87"
-  integrity sha512-ep3Catd6sPnHTM0P4hNEvIv5arnDvk01PfyJIJ+J3wVCG1eEaPo09tvFqdtcaTrkwQy0VWR24uz+cb4IsK53Qw==
+"@rolldown/binding-darwin-arm64@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.0.tgz#2d66d02ade26d1ef79f98f65d7598fd9dae0a77b"
+  integrity sha512-pexNaW9ACLUOaBITOpU6qVu4VrsOFIjTv6bzgu0YUATo4eUJx0V605PxwZfndpPOn0ilqGqvGQ0M8UW0IE24jg==
 
-"@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.4.tgz#93d9a3259cc41054425c8134d8ba41c9f92984f1"
-  integrity sha512-LwA5ayKIpnsgXJEwWc3h8wPiS33NMIHd9BhsV92T8VetVAbGe2qXlJwNVDGHN5cOQ22R9uYvbrQir2AB+ntT2w==
+"@rolldown/binding-darwin-x64@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.1.5.tgz#c82e30652cef52c4af925d5c66c8955a40319816"
+  integrity sha512-Tm+gbfC0aHu1tBA/JvKQh32S0K6YgCHkiAF4/W6xX0K0RmNuc94VeK419dJoE65R5aRxmo+noZQSWrAMF6yb6g==
 
-"@rolldown/binding-linux-arm64-gnu@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.4.tgz#aa9e8f5b3874dc29bf54940eb55cb23274956e32"
-  integrity sha512-AC1WsGdlV1MtGay/OQ4J9T7GRadVnpYRzTcygV1hKnypbYN20Yh4t6O1Sa2qRBMqv1etulUknqXjc3CTIsBu6A==
+"@rolldown/binding-darwin-x64@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.0.tgz#2f8a8beecd275e4291730c3f5b21b45399c81c4d"
+  integrity sha512-NqKYaq0355ZmNMG4QGpxtEDxsc7tGDhjhCm4PpE0cwnBW+5Il95LJyq414niEiaKLVjnVHBEjSo1wngKxJNiFw==
 
-"@rolldown/binding-linux-arm64-musl@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.4.tgz#e3b56288dcb2ba9219c3e3ff62bf0395c0dc9de4"
-  integrity sha512-lU+6rgXXViO61B4EudxtVMXSOfiZONR29Sys5VGSetUY7X8mg9FCKIIjcPPj8xNDeYzKl+H8F/qSKOBVFJChCQ==
+"@rolldown/binding-freebsd-x64@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.1.5.tgz#c32e9ce7fa1c0fb2b80913a2a3a05c3e907d06b0"
+  integrity sha512-JMzDKCCXq93YccG5gz3hvOs1oXRKAf0XYpfOS88e+wZrC8Iugj6j68867vrYZkvpDDpKn/KoKORThmchMpF6TA==
 
-"@rolldown/binding-linux-x64-gnu@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.4.tgz#003570df20ba503ed71f052d1b201535fd6a217d"
-  integrity sha512-DZaN1f0PGp/bSvKhtw50pPsnln4T13ycDq1FrDWRiHmWt1JeW+UtYg9touPFf8yt993p8tS2QjybpzKNTxYEwg==
+"@rolldown/binding-freebsd-x64@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.0.tgz#2b66b88e282ea2ebd2ab721ea88d209d600508c0"
+  integrity sha512-3vPoHzh6eBTz9IbB0/qZdSr0Qeks2echn+I4cHu2joV74VriPDdldswksEDzrl1mBB+oPRi+67+3Ib59paxIPQ==
 
-"@rolldown/binding-linux-x64-musl@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.4.tgz#e1e22ee0b8913e45bf769291a7c7db57aa20b7fe"
-  integrity sha512-RnGxwZLN7fhMMAItnD6dZ7lvy+TI7ba+2V54UF4dhaWa/p8I/ys1E73KO6HmPmgz92ZkfD8TXS1IMV8+uhbR9g==
+"@rolldown/binding-linux-arm-gnueabihf@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.1.5.tgz#ce90b5e22316adeb502ea010582f498cd0604f27"
+  integrity sha512-uML21j2K5TfPGutKxub+M+nLjZIrWjXQ5Grx4lCe/nimTj9B4L63zHpjXLl4y0L3mcm2htEQIb06oCG/szerNw==
 
-"@rolldown/binding-openharmony-arm64@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.4.tgz#494ee66307a2b1192f24d6876564c1300ec90241"
-  integrity sha512-6lcI79+X8klGiGd8yHuTgQRjuuJYNggmEml+RsyN596P23l/zf9FVmJ7K0KVKkFAeYEdg0iMUKyIxiV5vebDNQ==
+"@rolldown/binding-linux-arm-gnueabihf@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.0.tgz#e3c3a54ab4b7855dd7b1388bd564344e78f2a9d8"
+  integrity sha512-E6NNefZ1bUVmKJq2tJkf45J4Zyczj7qm9rUT7NY+Xo2474Y13qWAwc2tvBt0BAVbmtXR1llkxXg0Ou1jbDf2SQ==
 
-"@rolldown/binding-wasm32-wasi@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.4.tgz#dc98418ee2e5668f7dcc4bf4155523a079b34a80"
-  integrity sha512-wz7ohsKCAIWy91blZ/1FlpPdqrsm1xpcEOQVveWoL6+aSPKL4VUcoYmmzuLTssyZxRpEwzuIxL/GDsvpjaBtOw==
+"@rolldown/binding-linux-arm64-gnu@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.1.5.tgz#91947110c4ddaa4eefb004e52688070977085201"
+  integrity sha512-navSiuTMogvnQoZoM/v+l3ZWo50/NTwSHSzheABx/RCnmUPaKwq9qSo4Br2OYRs21+Fz8uFqITZM3H4opOB0/Q==
+
+"@rolldown/binding-linux-arm64-gnu@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.0.tgz#1af753d6af0db3e408193d945f592f328947fd39"
+  integrity sha512-D+TgkdgM1vu+7/Fpf8+v0ARW+RXEP9Ccazgm8zQ4JFFd9Q7SrYQ2TakU5S5ihazQDgpKyAgZDOcIFsvoHmTZ8w==
+
+"@rolldown/binding-linux-arm64-musl@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.1.5.tgz#eb32b2d4108c1c702b91e8cde8a043eae5caa94d"
+  integrity sha512-lAryqH7IteztmCXQXk0etKj4wBQ7Gx5S6LjKhsgp9zb8I5bsuvU/2llH1hDQcjsFeqIsovMVN339/8pUDDBXxA==
+
+"@rolldown/binding-linux-arm64-musl@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.0.tgz#1caa273824312871204d2b58747425ea49739ef1"
+  integrity sha512-wUqdwJBbAv0APN87GecstdMUtLjjNTs0hBALpxETD73mccFxdmt/XeizXDtN5RAlBwNKmI+Tg+blect2G+8IeQ==
+
+"@rolldown/binding-linux-ppc64-gnu@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.1.5.tgz#ccb943c11e5a72655cbb02fc1163541ceb640782"
+  integrity sha512-fsK/sNBnxzBlL4O1JNrZakVQxPspqpED5dLtNsZS9oOKmtSpdNIzxH2kkol5HYTWJN47sE20ztMJPxfZ89qGOg==
+
+"@rolldown/binding-linux-ppc64-gnu@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.0.tgz#95a1a48e3051f1f8d9cab3703de62ea418c9924e"
+  integrity sha512-9DtF35qR9/NrfhM4oxLplCzVVjE+KKm8Pjemi0i/sdhAWkUasjmSo8WTTubNJClhSHCfyk2yeyoXDQEDPtDAAw==
+
+"@rolldown/binding-linux-s390x-gnu@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.1.5.tgz#a33731ee567e90b75fac6e5e55307e8a2b3038f0"
+  integrity sha512-gLYb4BIadlfTOYT5gO503n8zQjXflgzpD0FcyKh0Mzx3rqCZKnHoJWV9xe1KXUJ5lx2JfcSHr/mhzS0PC/McAA==
+
+"@rolldown/binding-linux-s390x-gnu@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.0.tgz#2d3f7543b193f8462a4c12e9aefd2ad72fbbe518"
+  integrity sha512-RzuHrBh8X8Hntd2N4VR02QGEciq/9JhcZoTpR/Cee6otRrlILGCf3cg2ygHuih+ZebUnWmMrDX6ITI85btO6rQ==
+
+"@rolldown/binding-linux-x64-gnu@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.1.5.tgz#a74c01aaacedfc11c39b6feba33a5fa0c654949f"
+  integrity sha512-FjcpEKUyJygHgs1o50VYNvkt5+7Le/VEdYt0AkRpkL33MnyQfwr8l5mXwMmfmTbyMPr5vJLC+8/Gd9gXnwU1QQ==
+
+"@rolldown/binding-linux-x64-gnu@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.0.tgz#0d428b854214bcaf0c8b81fc668c59932b20283b"
+  integrity sha512-MK7L0018jjh1jR3mh21G2j1zAVcpscJBlPo2z19pRjv2XOYGRhaV4LyiD8HO6nCDdZln9IFgCMIV5yt4E3klGQ==
+
+"@rolldown/binding-linux-x64-musl@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.1.5.tgz#28cd178494fa1e65dba412229b5ce55c4dd5cbd1"
+  integrity sha512-Me+PfPI2TMeOQk0gYWfLQZtTktrmzbr8cDboqX83XKc7UrgAi55gF+2dUkWdxd19n55Essp2yeca+O9N5rBxHg==
+
+"@rolldown/binding-linux-x64-musl@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.0.tgz#3ef09dc3980913b3db489e5b568db3f51b7c02f8"
+  integrity sha512-gyrxLQ9NfGb/9LoVnC4kb9miUghw1mghnkfYvNHSnVIXriabnfgGPUP4RLcJm87q3KgYz4FYUG8IDiWUT+CpSw==
+
+"@rolldown/binding-openharmony-arm64@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.1.5.tgz#f7c75fa913fc20884d26a7d488d4f5c597cd71c0"
+  integrity sha512-yc5WrLzXks6zCQfn9Oxr8pORKyl/pF+QjHmW/Qx3qu0oyrrNC+y2JLTU1E2rcWYAmzlnqngWXHQjy51VzW70Vw==
+
+"@rolldown/binding-openharmony-arm64@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.0.tgz#bc2afd9513b85fd3cc176e3d0cb32727f4611598"
+  integrity sha512-/6VFMQGRmrhP77KXDC+StIxGzcNp5JOIyYtw0CQ8gPlzhpiIRucYfoM5FaFamHd5BJYIdH86yfP46l1p3WdrFA==
+
+"@rolldown/binding-wasm32-wasi@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.1.5.tgz#c379581947787081df363ea106140fcd5fec252d"
+  integrity sha512-VbQGPX2b4r48TAMIM2cjgluIM1HYutm4pcTEJsle7iEP7sB1dFqtPLBVbdLAZCxy1txCcPxf4QFf4v8uvltPqA==
   dependencies:
-    "@napi-rs/wasm-runtime" "^1.1.1"
+    "@emnapi/core" "1.11.1"
+    "@emnapi/runtime" "1.11.1"
+    "@napi-rs/wasm-runtime" "^1.1.6"
 
-"@rolldown/binding-win32-arm64-msvc@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.4.tgz#a294ee643275bb099c1128ad294bd6101bae1eca"
-  integrity sha512-cfiMrfuWCIgsFmcVG0IPuO6qTRHvF7NuG3wngX1RZzc6dU8FuBFb+J3MIR5WrdTNozlumfgL4cvz+R4ozBCvsQ==
+"@rolldown/binding-wasm32-wasi@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.2.0.tgz#50c6eb1a34c699deb824a7fd2dbbe664e773a70f"
+  integrity sha512-rwdbUL465kisF24WEJLvP3JrEG6E5GRuIHt5wpMwHGERtHe4Wm2CIvtf5gTBgr2tGOHKh5NdKEAFS2VkOPE91g==
+  dependencies:
+    "@emnapi/core" "1.11.2"
+    "@emnapi/runtime" "1.11.2"
+    "@napi-rs/wasm-runtime" "^1.1.6"
 
-"@rolldown/binding-win32-x64-msvc@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.4.tgz#b9248d23625f6f59ec1af0b3140706cba6afc36c"
-  integrity sha512-p6UeR9y7ht82AH57qwGuFYn69S6CZ7LLKdCKy/8T3zS9VTrJei2/CGsTUV45Da4Z9Rbhc7G4gyWQ/Ioamqn09g==
+"@rolldown/binding-win32-arm64-msvc@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.5.tgz#f23c88694f7a729a12f395024aee38df80a16ba3"
+  integrity sha512-gHv82k63z4qpV5+Q1y/12KrK0ltWBukVDI8nZcbT7Tt/ZlOIVwppazneq0F93oDxTo3IgAMEDIoQh3E2n6mVsw==
 
-"@rolldown/pluginutils@1.0.0-rc.4":
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.4.tgz#267b477af268a082861c861e47f6a787dff59cc4"
-  integrity sha512-1BrrmTu0TWfOP1riA8uakjFc9bpIUGzVKETsOtzY39pPga8zELGDl8eu1Dx7/gjM5CAz14UknsUMpBO8L+YntQ==
+"@rolldown/binding-win32-arm64-msvc@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.0.tgz#548e33a9362f50ca326e49bdfd35d4e1aaa68d9a"
+  integrity sha512-+5suHwRiKGmhwyUaNT8a5QbrBvLFh2DbO910TEmGRH1aSxwrCezodvGQnulv4uiWEIv1Kq4ypRsJ5+O+ry1DiA==
 
-"@rollup/rollup-android-arm-eabi@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.3.tgz#31503ca40424374cd6c5198031cf4d5a73de9727"
-  integrity sha512-x35CNW/ANXG3hE/EZpRU8MXX1JDN86hBb2wMGAtltkz7pc6cxgjpy1OMMfDosOQ+2hWqIkag/fGok1Yady9nGw==
+"@rolldown/binding-win32-x64-msvc@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.1.5.tgz#3377c8de0e56a8857f11217561147090e874cb46"
+  integrity sha512-tTZuDBPw85tEN5PQi1pnEBzDy0Z49HtScLAbD5t6hyeU92A95pRWaSMw1GZZi/RwgSgUIl0xrSlXIT/9QzvYSA==
 
-"@rollup/rollup-android-arm64@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.3.tgz#7cbc30c88507013d0f982cfeb8884337ba1e0bb2"
-  integrity sha512-xw3xtkDApIOGayehp2+Rz4zimfkaX65r4t47iy+ymQB2G4iJCBBfj0ogVg5jpvjpn8UWn/+q9tprxleYeNp3Hw==
+"@rolldown/binding-win32-x64-msvc@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.0.tgz#7a655b9b4cac46a46eb18a0fae6bbc9ca22db4e4"
+  integrity sha512-WfFv6/qGufotqBSBzBYwgpCkJBk8Nj7697LL9vTz/XWc67e0r3oewu8iMRwQj3AUL45GVD7wVsPjCsAAtW66Wg==
 
-"@rollup/rollup-darwin-arm64@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.3.tgz#bc341a93bb2111326a2865f55d1d23baedecf40c"
-  integrity sha512-vo6Y5Qfpx7/5EaamIwi0WqW2+zfiusVihKatLvtN1VFVy3D13uERk/6gZLU1UiHRL6fDXqj/ELIeVRGnvcTE1g==
-
-"@rollup/rollup-darwin-x64@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.3.tgz#dfa0236581c55ecc0bcaeb2ea1f2e800c58dc3e2"
-  integrity sha512-D+0QGcZhBzTN82weOnsSlY7V7+RMmPuF1CkbxyMAGE8+ZHeUjyb76ZiWmBlCu//AQQONvxcqRbwZTajZKqjuOw==
-
-"@rollup/rollup-freebsd-arm64@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.3.tgz#4c5977413b87808a13b5edd524e46fafddb85b52"
-  integrity sha512-6HnvHCT7fDyj6R0Ph7A6x8dQS/S38MClRWeDLqc0MdfWkxjiu1HSDYrdPhqSILzjTIC/pnXbbJbo+ft+gy/9hQ==
-
-"@rollup/rollup-freebsd-x64@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.3.tgz#5cb2cee62ffee3ada4a0b44353e96cf98cfc7c3c"
-  integrity sha512-KHLgC3WKlUYW3ShFKnnosZDOJ0xjg9zp7au3sIm2bs/tGBeC2ipmvRh/N7JKi0t9Ue20C0dpEshi8WUubg+cnA==
-
-"@rollup/rollup-linux-arm-gnueabihf@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.3.tgz#04700cad36dd43ae81044fe7ee73e925845c4b85"
-  integrity sha512-DV6fJoxEYWJOvaZIsok7KrYl0tPvga5OZ2yvKHNNYyk/2roMLqQAbGhr78EQ5YhHpnhLKJD3S1WFusAkmUuV5g==
-
-"@rollup/rollup-linux-arm-musleabihf@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.3.tgz#548ebf3997b3a6dcc7cdd7da813ff0c46000ac0a"
-  integrity sha512-mQKoJAzvuOs6F+TZybQO4GOTSMUu7v0WdxEk24krQ/uUxXoPTtHjuaUuPmFhtBcM4K0ons8nrE3JyhTuCFtT/w==
-
-"@rollup/rollup-linux-arm64-gnu@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.3.tgz#0264608f504b33725639ebe93be02c40e71a35c1"
-  integrity sha512-Whjj2qoiJ6+OOJMGptTYazaJvjOJm+iKHpXQM1P3LzGjt7Ff++Tp7nH4N8J/BUA7R9IHfDyx4DJIflifwnbmIA==
-
-"@rollup/rollup-linux-arm64-musl@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.3.tgz#147cf4889502cd3b331a800b8ca6741f87873079"
-  integrity sha512-4YTNHKqGng5+yiZt3mg77nmyuCfmNfX4fPmyUapBcIk+BdwSwmCWGXOUxhXbBEkFHtoN5boLj/5NON+u5QC9tg==
-
-"@rollup/rollup-linux-loong64-gnu@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.3.tgz#0c27c6b5258dcb3d0290e3bd04ba6277c9d7e541"
-  integrity sha512-SU3kNlhkpI4UqlUc2VXPGK9o886ZsSeGfMAX2ba2b8DKmMXq4AL7KUrkSWVbb7koVqx41Yczx6dx5PNargIrEA==
-
-"@rollup/rollup-linux-loong64-musl@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.3.tgz#f0f18075ea0bfa2c992f8e3933b39b6ef91f7799"
-  integrity sha512-6lDLl5h4TXpB1mTf2rQWnAk/LcXrx9vBfu/DT5TIPhvMhRWaZ5MxkIc8u4lJAmBo6klTe1ywXIUHFjylW505sg==
-
-"@rollup/rollup-linux-ppc64-gnu@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.3.tgz#149bb5cb8893589ffaa1924b4eac4282e9fa4c69"
-  integrity sha512-BMo8bOw8evlup/8G+cj5xWtPyp93xPdyoSN16Zy90Q2QZ0ZYRhCt6ZJSwbrRzG9HApFabjwj2p25TUPDWrhzqQ==
-
-"@rollup/rollup-linux-ppc64-musl@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.3.tgz#200a063e298b05f996917d2aa53de749d54c0ca0"
-  integrity sha512-E0L8X1dZN1/Rph+5VPF6Xj2G7JJvMACVXtamTJIDrVI44Y3K+G8gQaMEAavbqCGTa16InptiVrX6eM6pmJ+7qA==
-
-"@rollup/rollup-linux-riscv64-gnu@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.3.tgz#6d6d6eb996197ba86f95f9a6c442bc862f0756d4"
-  integrity sha512-oZJ/WHaVfHUiRAtmTAeo3DcevNsVvH8mbvodjZy7D5QKvCefO371SiKRpxoDcCxB3PTRTLayWBkvmDQKTcX/sw==
-
-"@rollup/rollup-linux-riscv64-musl@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.3.tgz#9deb86001785cfcbc761457f50cd7c112fda0df9"
-  integrity sha512-Dhbyh7j9FybM3YaTgaHmVALwA8AkUwTPccyCQ79TG9AJUsMQqgN1DDEZNr4+QUfwiWvLDumW5vdwzoeUF+TNxQ==
-
-"@rollup/rollup-linux-s390x-gnu@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.3.tgz#d8228720c6e42da190d96c31a3495d70cf8284b9"
-  integrity sha512-cJd1X5XhHHlltkaypz1UcWLA8AcoIi1aWhsvaWDskD1oz2eKCypnqvTQ8ykMNI0RSmm7NkTdSqSSD7zM0xa6Ig==
-
-"@rollup/rollup-linux-x64-gnu@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.3.tgz#df6bb38617a66a842bd2aeac9560cd729d084258"
-  integrity sha512-DAZDBHQfG2oQuhY7mc6I3/qB4LU2fQCjRvxbDwd/Jdvb9fypP4IJ4qmtu6lNjes6B531AI8cg1aKC2di97bUxA==
-
-"@rollup/rollup-linux-x64-musl@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.3.tgz#75e3e72849266b4fdd65f2da6c62423051e35636"
-  integrity sha512-cRxsE8c13mZOh3vP+wLDxpQBRrOHDIGOWyDL93Sy0Ga8y515fBcC2pjUfFwUe5T7tqvTvWbCpg1URM/AXdWIXA==
-
-"@rollup/rollup-openbsd-x64@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.3.tgz#e1080f0efb8b15cda39b3e62de5fb806079ab6e9"
-  integrity sha512-QaWcIgRxqEdQdhJqW4DJctsH6HCmo5vHxY0krHSX4jMtOqfzC+dqDGuHM87bu4H8JBeibWx7jFz+h6/4C8wA5Q==
-
-"@rollup/rollup-openharmony-arm64@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.3.tgz#1fbda2d95c29dbfceb62785431754cd5aab86c72"
-  integrity sha512-AaXwSvUi3QIPtroAUw1t5yHGIyqKEXwH54WUocFolZhpGDruJcs8c+xPNDRn4XiQsS7MEwnYsHW2l0MBLDMkWg==
-
-"@rollup/rollup-win32-arm64-msvc@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.3.tgz#deab3470815f97996f1d0d3608549cf1b7e4ffc2"
-  integrity sha512-65LAKM/bAWDqKNEelHlcHvm2V+Vfb8C6INFxQXRHCvaVN1rJfwr4NvdP4FyzUaLqWfaCGaadf6UbTm8xJeYfEg==
-
-"@rollup/rollup-win32-ia32-msvc@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.3.tgz#817acae2ed4572960b59235ff2322381b6d82f26"
-  integrity sha512-EEM2gyhBF5MFnI6vMKdX1LAosE627RGBzIoGMdLloPZkXrUN0Ckqgr2Qi8+J3zip/8NVVro3/FjB+tjhZUgUHA==
-
-"@rollup/rollup-win32-x64-gnu@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.3.tgz#48129be99b0250d76b9c6d0ac983bef563a1c48a"
-  integrity sha512-E5Eb5H/DpxaoXH++Qkv28RcUJboMopmdDUALBczvHMf7hNIxaDZqwY5lK12UK1BHacSmvupoEWGu+n993Z0y1A==
-
-"@rollup/rollup-win32-x64-msvc@4.60.3":
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.3.tgz#cc6f094a3ffe5556bb4a831ee6fb572b8cd81a75"
-  integrity sha512-hPt/bgL5cE+Qp+/TPHBqptcAgPzgj46mPcg/16zNUmbQk0j+mOEQV/+Lqu8QRtDV3Ek95Q6FeFITpuhl6OTsAA==
+"@rolldown/pluginutils@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz#e3fcee093fbb5ce765e1ad088ff4de2889f6f9be"
+  integrity sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==
 
 "@rtsao/scc@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
   integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
 
-"@schematics/angular@21.2.9":
-  version "21.2.9"
-  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-21.2.9.tgz#1b4735cc5cbbdc2537c6af72247905cc54ad1916"
-  integrity sha512-1renEbBZz9Yw3A0GUOJ6x6E1jd2Vu/fX5tEGiFNbIoWaNwa71SlFTvKKqaYxiYQkrpc7oexVJ2ymuvOfgTbI1w==
+"@schematics/angular@22.1.4":
+  version "22.1.4"
+  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-22.1.4.tgz#38c29eae18e735f85cd531a4c641ebabcf791839"
+  integrity sha512-uiYKuiCnkTEbs4eOU1QJlM5NPw6BR1qgpct8VlrhS4n861WCCjTy5cxiAWJ3Doc0R72d44j3uoBfAEp7KEVn2w==
   dependencies:
-    "@angular-devkit/core" "21.2.9"
-    "@angular-devkit/schematics" "21.2.9"
+    "@angular-devkit/core" "22.1.4"
+    "@angular-devkit/schematics" "22.1.4"
     jsonc-parser "3.3.1"
-
-"@sigstore/bundle@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@sigstore/bundle/-/bundle-4.0.0.tgz#854eda43eb6a59352037e49000177c8904572f83"
-  integrity sha512-NwCl5Y0V6Di0NexvkTqdoVfmjTaQwoLM236r89KEojGmq/jMls8S+zb7yOwAPdXvbwfKDlP+lmXgAL4vKSQT+A==
-  dependencies:
-    "@sigstore/protobuf-specs" "^0.5.0"
-
-"@sigstore/core@^3.1.0", "@sigstore/core@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@sigstore/core/-/core-3.2.0.tgz#beaea6ea4d7d4caadadb7453168e35636b78830e"
-  integrity sha512-kxHrDQ9YgfrWUSXU0cjsQGv8JykOFZQ9ErNKbFPWzk3Hgpwu8x2hHrQ9IdA8yl+j9RTLTC3sAF3Tdq1IQCP4oA==
-
-"@sigstore/protobuf-specs@^0.5.0":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@sigstore/protobuf-specs/-/protobuf-specs-0.5.1.tgz#5401e444b6ab0db7d1969c91c43e7954927a52fe"
-  integrity sha512-/ScWUhhoFasJsSRGTVBwId1loQjjnjAfE4djL6ZhrXRpNCmPTnUKF5Jokd58ILseOMjzET3UrMOtJPS9sYeI0g==
-
-"@sigstore/sign@^4.1.0":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@sigstore/sign/-/sign-4.1.1.tgz#34765fe4a190d693340c0771a3d150a397bcfc55"
-  integrity sha512-Hf4xglukg0XXQ2RiD5vSoLjdPe8OBUPA8XeVjUObheuDcWdYWrnH/BNmxZCzkAy68MzmNCxXLeurJvs6hcP2OQ==
-  dependencies:
-    "@gar/promise-retry" "^1.0.2"
-    "@sigstore/bundle" "^4.0.0"
-    "@sigstore/core" "^3.2.0"
-    "@sigstore/protobuf-specs" "^0.5.0"
-    make-fetch-happen "^15.0.4"
-    proc-log "^6.1.0"
-
-"@sigstore/tuf@^4.0.1":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@sigstore/tuf/-/tuf-4.0.2.tgz#7d2fa2abcd5afa5baf752671d14a1c6ed0ed3196"
-  integrity sha512-TCAzTy0xzdP79EnxSjq9KQ3eaR7+FmudLC6eRKknVKZbV7ZNlGLClAAQb/HMNJ5n2OBNk2GT1tEmU0xuPr+SLQ==
-  dependencies:
-    "@sigstore/protobuf-specs" "^0.5.0"
-    tuf-js "^4.1.0"
-
-"@sigstore/verify@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@sigstore/verify/-/verify-3.1.0.tgz#4046d4186421db779501fe87fa5acaa5d4d21b08"
-  integrity sha512-mNe0Iigql08YupSOGv197YdHpPPr+EzDZmfCgMc7RPNaZTw5aLN01nBl6CHJOh3BGtnMIj83EeN4butBchc8Ag==
-  dependencies:
-    "@sigstore/bundle" "^4.0.0"
-    "@sigstore/core" "^3.1.0"
-    "@sigstore/protobuf-specs" "^0.5.0"
+    typescript "6.0.3"
 
 "@standard-schema/spec@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@standard-schema/spec/-/spec-1.1.0.tgz#a79b55dbaf8604812f52d140b2c9ab41bc150bb8"
   integrity sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==
 
-"@tufjs/canonical-json@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz#a52f61a3d7374833fca945b2549bc30a2dd40d0a"
-  integrity sha512-yVtV8zsdo8qFHe+/3kw81dSLyF7D576A5cCFCi4X7B39tWT7SekaEFUnvnWJHz+9qO7qJTah1JbrDjWKqFtdWA==
-
-"@tufjs/models@4.1.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@tufjs/models/-/models-4.1.0.tgz#494b39cf5e2f6855d80031246dd236d8086069b3"
-  integrity sha512-Y8cK9aggNRsqJVaKUlEYs4s7CvQ1b1ta2DVPyAimb0I2qhzjNk+A+mxvll/klL0RlfuIUei8BF7YWiua4kQqww==
-  dependencies:
-    "@tufjs/canonical-json" "2.0.0"
-    minimatch "^10.1.1"
-
-"@tybys/wasm-util@^0.10.1":
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.2.tgz#12b3a1b33db1f9cad4ddff1f604ab7dd00bf464e"
-  integrity sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==
+"@tybys/wasm-util@^0.10.3":
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.3.tgz#015cba9e9dd47ce14d03d2a8c5d547bfb169665d"
+  integrity sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==
   dependencies:
     tslib "^2.4.0"
 
@@ -1779,10 +1447,20 @@
   resolved "https://registry.yarnpkg.com/@types/esrecurse/-/esrecurse-4.3.1.tgz#6f636af962fbe6191b830bd676ba5986926bccec"
   integrity sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==
 
-"@types/estree@1.0.8", "@types/estree@^1.0.6", "@types/estree@^1.0.8":
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
-  integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
+"@types/estree@^1.0.6", "@types/estree@^1.0.8":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.9.tgz#cf3f0e876d7bee15a93ab925b82bf570a3904a24"
+  integrity sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==
+
+"@types/gensync@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/gensync/-/gensync-1.0.5.tgz#1819eba537d036dcf4ec7e8c8f15fbfe938e99a0"
+  integrity sha512-MbsRCT7mTikHwKZ0X+LVUTLRrZZRLipTuXEO9qOYO+zmjMVk81axyClMROf6uoPD9MRVu46bx8zoR0Ad9q3NAg==
+
+"@types/jsesc@^2.5.0":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@types/jsesc/-/jsesc-2.5.1.tgz#c34defc608ec94b68dc6a12a581b440942c6d503"
+  integrity sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==
 
 "@types/json-schema@^7.0.15":
   version "7.0.15"
@@ -1809,116 +1487,106 @@
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
   integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
 
-"@typescript-eslint/eslint-plugin@8.59.2":
-  version "8.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.59.2.tgz#f37b2c189a0177141fe3de3b08f2a83991bfdbfa"
-  integrity sha512-j/bwmkBvHUtPNxzuWe5z6BEk3q54YRyGlBXkSsmfoih7zNrBvl5A9A98anlp/7JbyZcWIJ8KXo/3Tq/DjFLtuQ==
+"@typescript-eslint/eslint-plugin@8.67.0":
+  version "8.67.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.67.0.tgz#52f9f0e47d5a7571c4336e69bfeea581509ef2cf"
+  integrity sha512-Un7Heoyj65NREbKAyIrFxeM143NZpExWmy1Nep4DLeQOeLlTeumPjoNKnBrU5D5moWXbPJgRa5Uwcdu0faVNGQ==
   dependencies:
     "@eslint-community/regexpp" "^4.12.2"
-    "@typescript-eslint/scope-manager" "8.59.2"
-    "@typescript-eslint/type-utils" "8.59.2"
-    "@typescript-eslint/utils" "8.59.2"
-    "@typescript-eslint/visitor-keys" "8.59.2"
+    "@typescript-eslint/scope-manager" "8.67.0"
+    "@typescript-eslint/type-utils" "8.67.0"
+    "@typescript-eslint/utils" "8.67.0"
+    "@typescript-eslint/visitor-keys" "8.67.0"
     ignore "^7.0.5"
     natural-compare "^1.4.0"
     ts-api-utils "^2.5.0"
 
-"@typescript-eslint/parser@8.59.2":
-  version "8.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.59.2.tgz#e2fd0084baa5dd0c24cd789af1c72cbc3a7a1c62"
-  integrity sha512-plR3pp6D+SSUn1HM7xvSkx12/DhoHInI2YF35KAcVFNZvlC0gtrWqx7Qq1oH2Ssgi0vlFRCTbP+DZc7B9+TtsQ==
+"@typescript-eslint/parser@8.67.0":
+  version "8.67.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.67.0.tgz#0158022ec9927e0afcd58a8cc2ad57e01d892f5c"
+  integrity sha512-fUBfTuuEulWqX6V8+O3PtScV01tzYYRUDTAirHFKoRAt7nOzoGiPt0M/bB47wWNy0coOOcgEwAMUtBpykMxl6w==
   dependencies:
-    "@typescript-eslint/scope-manager" "8.59.2"
-    "@typescript-eslint/types" "8.59.2"
-    "@typescript-eslint/typescript-estree" "8.59.2"
-    "@typescript-eslint/visitor-keys" "8.59.2"
+    "@typescript-eslint/scope-manager" "8.67.0"
+    "@typescript-eslint/types" "8.67.0"
+    "@typescript-eslint/typescript-estree" "8.67.0"
+    "@typescript-eslint/visitor-keys" "8.67.0"
     debug "^4.4.3"
 
-"@typescript-eslint/project-service@8.59.2":
-  version "8.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/project-service/-/project-service-8.59.2.tgz#f8b8cbf8692e3a51c2c394acf8cf6900f7e755af"
-  integrity sha512-+2hqvEkeyf/0FBor67duF0Ll7Ot8jyKzDQOSrxazF/danillRq2DwR9dLptsXpoZQqxE1UisSmoZewrlPas9Vw==
+"@typescript-eslint/project-service@8.67.0":
+  version "8.67.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/project-service/-/project-service-8.67.0.tgz#1552db007ca9206a1c6c7acf49e210bd17a8c56f"
+  integrity sha512-cvE8c7ulYeXN9fYuszhCeCsbzyVEXuhrRCybnBre7TUmqb5nRmBfQAwCj0O3WJFDeyAZt4VYv51vMCC9LHSdYw==
   dependencies:
-    "@typescript-eslint/tsconfig-utils" "^8.59.2"
-    "@typescript-eslint/types" "^8.59.2"
+    "@typescript-eslint/tsconfig-utils" "^8.67.0"
+    "@typescript-eslint/types" "^8.67.0"
     debug "^4.4.3"
 
-"@typescript-eslint/scope-manager@8.59.2":
-  version "8.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.59.2.tgz#63cbd0af2e3180949d6be81122cc555bc71e736d"
-  integrity sha512-JzfyEpEtOU89CcFSwyNS3mu4MLvLSXqnmX05+aKBDM+TdR5jzcGOEBwxwGNxrEQ7p/z6kK2WyioCGBf2zZBnvg==
+"@typescript-eslint/scope-manager@8.67.0":
+  version "8.67.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.67.0.tgz#4d4c2da09560d10dd7d947cba2d29d14d25af16d"
+  integrity sha512-EgvsleTwS4E+WzzSvem8fAUubLwatMNF1B5hHSLQxcvs7q2dtRhGyujHwLJSYlG41niJ7GP24Aha2+0mb1b2kg==
   dependencies:
-    "@typescript-eslint/types" "8.59.2"
-    "@typescript-eslint/visitor-keys" "8.59.2"
+    "@typescript-eslint/types" "8.67.0"
+    "@typescript-eslint/visitor-keys" "8.67.0"
 
-"@typescript-eslint/tsconfig-utils@8.59.2", "@typescript-eslint/tsconfig-utils@^8.59.2":
-  version "8.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.59.2.tgz#6e92bc412083753185a79c9f1431e78169d9232f"
-  integrity sha512-BKK4alN7oi4C/zv4VqHQ+uRU+lTa6JGIZ7s1juw7b3RHo9OfKB+bKX3u0iVZetdsUCBBkSbdWbarJbmN0fTeSw==
+"@typescript-eslint/tsconfig-utils@8.67.0", "@typescript-eslint/tsconfig-utils@^8.67.0":
+  version "8.67.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.67.0.tgz#f45a3eba6b9132fb47141ec03ce2f275f1ea991d"
+  integrity sha512-vV+LUSv5njUWsknE71fqKTlXUva+R76SaeORd6Zojcunk/6DvKFXONU3BrAs2H49mbygUXt6gbYunzwqNwlhdg==
 
-"@typescript-eslint/type-utils@8.59.2":
-  version "8.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.59.2.tgz#a60a1192a804fa472a92c41656853ac6a9ba7176"
-  integrity sha512-nhqaj1nmTdVVl/BP5omXNRGO38jn5iosis2vbdmupF2txCf8ylWT8lx+JlvMYYVqzGVKtjojUFoQ3JRWK+mfzQ==
+"@typescript-eslint/type-utils@8.67.0":
+  version "8.67.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.67.0.tgz#96bed105275559df3bcf0449b73a6414d35c59ce"
+  integrity sha512-aVWDXbRmdXO9siTfX4ditQI1T9+zVcNazT48EJCD0v40/9RIFoUgZ05CmGEq9H2gixRpjUn/iplwvlcvutJW/Q==
   dependencies:
-    "@typescript-eslint/types" "8.59.2"
-    "@typescript-eslint/typescript-estree" "8.59.2"
-    "@typescript-eslint/utils" "8.59.2"
+    "@typescript-eslint/types" "8.67.0"
+    "@typescript-eslint/typescript-estree" "8.67.0"
+    "@typescript-eslint/utils" "8.67.0"
     debug "^4.4.3"
     ts-api-utils "^2.5.0"
 
-"@typescript-eslint/types@8.59.2", "@typescript-eslint/types@^8.0.0", "@typescript-eslint/types@^8.38.0", "@typescript-eslint/types@^8.59.2":
-  version "8.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.59.2.tgz#01caabcd7e4715c33ad5e11cab260829714d6b9c"
-  integrity sha512-e82GVOE8Ps3E++Egvb6Y3Dw0S10u8NkQ9KXmtRhCWJJ8kDhOJTvtMAWnFL16kB1583goCWXsr0NieKCZMs2/0Q==
+"@typescript-eslint/types@8.67.0", "@typescript-eslint/types@^8.0.0", "@typescript-eslint/types@^8.67.0":
+  version "8.67.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.67.0.tgz#4a8d00cc1faba5c14feabc60f85b7a32652f34b6"
+  integrity sha512-sBtgslww8nsMYUjhdPBiSyUqSzT8uR6g93A2QXnQC8+cGdjz0CyaOdqHDRJb1AtORbZCNUJBBeFA/tNR2uQmww==
 
-"@typescript-eslint/typescript-estree@8.59.2":
-  version "8.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.59.2.tgz#6a217ef65b18dbd12c718fc86a675d1d7a1414cc"
-  integrity sha512-o0XPGNwcWw+FIwStOWn+BwBuEmL6QXP0rsvAFg7ET1dey1Nr6Wb1ac8p5HEsK0ygO/6mUxlk+YWQD9xcb/nnXg==
+"@typescript-eslint/typescript-estree@8.67.0":
+  version "8.67.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.67.0.tgz#116c3a47c06119c5a050e8851861d6497dd64bc2"
+  integrity sha512-EKQBCE9yNlRJYm7jdTW5AhDacDUmSwQb0FAJAmK2EKYrNXIsa2vxcSZx6PvJ/dEdI6lS+Y9W+EXckLj0iPFGcw==
   dependencies:
-    "@typescript-eslint/project-service" "8.59.2"
-    "@typescript-eslint/tsconfig-utils" "8.59.2"
-    "@typescript-eslint/types" "8.59.2"
-    "@typescript-eslint/visitor-keys" "8.59.2"
+    "@typescript-eslint/project-service" "8.67.0"
+    "@typescript-eslint/tsconfig-utils" "8.67.0"
+    "@typescript-eslint/types" "8.67.0"
+    "@typescript-eslint/visitor-keys" "8.67.0"
     debug "^4.4.3"
     minimatch "^10.2.2"
     semver "^7.7.3"
     tinyglobby "^0.2.15"
     ts-api-utils "^2.5.0"
 
-"@typescript-eslint/utils@8.59.2", "@typescript-eslint/utils@^8.0.0", "@typescript-eslint/utils@^8.38.0":
-  version "8.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.59.2.tgz#ff619a6a3075f4017fa91b8610b752a8ca3366aa"
-  integrity sha512-Juw3EinkXqjaffxz6roowvV7GZT/kET5vSKKZT6upl5TXdWkLkYmNPXwDDL2Vkt2DPn0nODIS4egC/0AGxKo/Q==
+"@typescript-eslint/utils@8.67.0", "@typescript-eslint/utils@^8.0.0", "@typescript-eslint/utils@^8.65.0":
+  version "8.67.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.67.0.tgz#3e478a3d69d330a1fc50c12746cc2ee0732ccfcd"
+  integrity sha512-U9D1FdwEWBwok3hxxSdhclMb0twvt9QnjIQ0VfQ1AiX2epnpSgv2ubVDsayOFyY8K6FX+AQ7E0FKWVG3iKsj1A==
   dependencies:
     "@eslint-community/eslint-utils" "^4.9.1"
-    "@typescript-eslint/scope-manager" "8.59.2"
-    "@typescript-eslint/types" "8.59.2"
-    "@typescript-eslint/typescript-estree" "8.59.2"
+    "@typescript-eslint/scope-manager" "8.67.0"
+    "@typescript-eslint/types" "8.67.0"
+    "@typescript-eslint/typescript-estree" "8.67.0"
 
-"@typescript-eslint/visitor-keys@8.59.2":
-  version "8.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.59.2.tgz#5ccc486913cd347883d69158836b1189a660bfe6"
-  integrity sha512-NwjLUnGy8/Zfx23fl50tRC8rYaYnM52xNRYFAXvmiil9yh1+K6aRVQMnzW6gQB/1DLgWt977lYQn7C+wtgXZiA==
+"@typescript-eslint/visitor-keys@8.67.0":
+  version "8.67.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.67.0.tgz#601d40af9acf82a28da2286f3edafc69bba9017f"
+  integrity sha512-fkv8dHRDqfGtTHuJeebdrQ7cX6Ad4WAS00rgHh9UGvMycF1mjBfsxry1XsLIFhWZ6Judlh6UdzK+TYlbpCXgnA==
   dependencies:
-    "@typescript-eslint/types" "8.59.2"
+    "@typescript-eslint/types" "8.67.0"
     eslint-visitor-keys "^5.0.0"
 
-"@vitejs/plugin-basic-ssl@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.1.4.tgz#c45abecc7f373343132870eb23b7fe84dfc018a1"
-  integrity sha512-HXciTXN/sDBYWgeAD4V4s0DN0g72x5mlxQhHxtYu3Tt8BLa6MzcJZUyDVFCdtjNs3bfENVHVzOsmooTVuNgAAw==
-
-"@yarnpkg/lockfile@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
-  integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
-
-abbrev@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-4.0.0.tgz#ec933f0e27b6cd60e89b5c6b2a304af42209bb05"
-  integrity sha512-a1wflyaL0tHtJSmLSOVybYhy22vRih4eduhhrkcjgrWGnRfrZtovJ2FRjxuTtkkj47O/baf0R86QU5OuYpz8fA==
+"@vitejs/plugin-basic-ssl@2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.3.0.tgz#f505b1c197d8cb4fd6e213a78847574ecc51e2f9"
+  integrity sha512-bdyo8rB3NnQbikdMpHaML9Z1OZPBu6fFOBo+OtxsBlvMJtysWskmBcnbIDhUqgC8tcxNv/a+BcV5U+2nQMm1OQ==
 
 accepts@^2.0.0:
   version "2.0.0"
@@ -1933,15 +1601,15 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.15.0:
-  version "8.16.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.16.0.tgz#4ce79c89be40afe7afe8f3adb902a1f1ce9ac08a"
-  integrity sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==
+acorn@^8.16.0:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.18.0.tgz#4faf01b2d6d326bfeed97aea1f52220b5f4c1940"
+  integrity sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==
 
-agent-base@^7.1.0, agent-base@^7.1.2:
-  version "7.1.4"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.4.tgz#e3cd76d4c548ee895d3c3fd8dc1f6c5b9032e7a8"
-  integrity sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==
+agent-base@9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-9.0.0.tgz#ec9efb08314e1e75b0852d74aabf9a387f99834e"
+  integrity sha512-TQf59BsZnytt8GdJKLPfUZ54g/iaUL2OWDSFCCvMOhsHduDQxO8xC4PNeyIkVcA5KwL2phPSv0douC0fgWzmnA==
 
 ajv-formats@3.0.1, ajv-formats@^3.0.1:
   version "3.0.1"
@@ -1950,10 +1618,10 @@ ajv-formats@3.0.1, ajv-formats@^3.0.1:
   dependencies:
     ajv "^8.0.0"
 
-ajv@8.18.0:
-  version "8.18.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.18.0.tgz#8864186b6738d003eb3a933172bb3833e10cefbc"
-  integrity sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==
+ajv@8.20.0, ajv@^8.0.0, ajv@^8.17.1:
+  version "8.20.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.20.0.tgz#304b3636add88ba7d936760dd50ece006dea95f9"
+  integrity sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==
   dependencies:
     fast-deep-equal "^3.1.3"
     fast-uri "^3.0.1"
@@ -1970,48 +1638,18 @@ ajv@^6.14.0:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.17.1:
-  version "8.20.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.20.0.tgz#304b3636add88ba7d936760dd50ece006dea95f9"
-  integrity sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==
+angular-eslint@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/angular-eslint/-/angular-eslint-22.1.0.tgz#b8e91d79f994eb44ad294d3aff04367732af3dde"
+  integrity sha512-LU5a6MOSeQTETnc4xaHi10p9S1cstNczr93sChi3rx8IzgH4+risIsjjQHVLSnQDrSGH2O8jAGCaChker7f7TQ==
   dependencies:
-    fast-deep-equal "^3.1.3"
-    fast-uri "^3.0.1"
-    json-schema-traverse "^1.0.0"
-    require-from-string "^2.0.2"
-
-algoliasearch@5.48.1:
-  version "5.48.1"
-  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-5.48.1.tgz#165217346b995e57eed51ed3b2b83f47badd83b4"
-  integrity sha512-Rf7xmeuIo7nb6S4mp4abW2faW8DauZyE2faBIKFaUfP3wnpOvNSbiI5AwVhqBNj0jPgBWEvhyCu0sLjN2q77Rg==
-  dependencies:
-    "@algolia/abtesting" "1.14.1"
-    "@algolia/client-abtesting" "5.48.1"
-    "@algolia/client-analytics" "5.48.1"
-    "@algolia/client-common" "5.48.1"
-    "@algolia/client-insights" "5.48.1"
-    "@algolia/client-personalization" "5.48.1"
-    "@algolia/client-query-suggestions" "5.48.1"
-    "@algolia/client-search" "5.48.1"
-    "@algolia/ingestion" "1.48.1"
-    "@algolia/monitoring" "1.48.1"
-    "@algolia/recommend" "5.48.1"
-    "@algolia/requester-browser-xhr" "5.48.1"
-    "@algolia/requester-fetch" "5.48.1"
-    "@algolia/requester-node-http" "5.48.1"
-
-angular-eslint@^21.2.0:
-  version "21.3.1"
-  resolved "https://registry.yarnpkg.com/angular-eslint/-/angular-eslint-21.3.1.tgz#f1777a3ae23ad833aacc8bcf65d6d4e4c3ca872a"
-  integrity sha512-VGQWTyuPAEO/AnZuqHxGBJMYSiZ0tbrHx/OgPCRTKHfbrFU4x+zivS84h9UWoDpDtius1RyD+ZReFjTAEWptiA==
-  dependencies:
-    "@angular-devkit/core" ">= 21.0.0 < 22.0.0"
-    "@angular-devkit/schematics" ">= 21.0.0 < 22.0.0"
-    "@angular-eslint/builder" "21.3.1"
-    "@angular-eslint/eslint-plugin" "21.3.1"
-    "@angular-eslint/eslint-plugin-template" "21.3.1"
-    "@angular-eslint/schematics" "21.3.1"
-    "@angular-eslint/template-parser" "21.3.1"
+    "@angular-devkit/core" ">= 22.0.0 < 23.0.0"
+    "@angular-devkit/schematics" ">= 22.0.0 < 23.0.0"
+    "@angular-eslint/builder" "22.1.0"
+    "@angular-eslint/eslint-plugin" "22.1.0"
+    "@angular-eslint/eslint-plugin-template" "22.1.0"
+    "@angular-eslint/schematics" "22.1.0"
+    "@angular-eslint/template-parser" "22.1.0"
     "@typescript-eslint/types" "^8.0.0"
     "@typescript-eslint/utils" "^8.0.0"
 
@@ -2022,33 +1660,16 @@ ansi-escapes@^7.0.0:
   dependencies:
     environment "^1.0.0"
 
-ansi-regex@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
-  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
-
 ansi-regex@^6.2.2:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.2.2.tgz#60216eea464d864597ce2832000738a0589650c1"
-  integrity sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==
-
-ansi-styles@^4.0.0, ansi-styles@^4.1.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
-  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
-  dependencies:
-    color-convert "^2.0.1"
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.3.0.tgz#247c8e7b70a1a43b10ce14c0226fcbf58e8815d5"
+  integrity sha512-WpDfL7NO6j7tH88IDBNVdUJxDh9nmCteAVW9dsep846XdwF4naCBK+/tGLX3KJgcpgMRXCFlTM2hKGoK9FsdrQ==
 
 ansi-styles@^6.2.1, ansi-styles@^6.2.3:
   version "6.2.3"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.3.tgz#c044d5dcc521a076413472597a1acb1f103c4041"
   integrity sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==
 
-argparse@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
-  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
-
 aria-query@5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
@@ -2154,15 +1775,15 @@ base64-arraybuffer@^1.0.2:
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
   integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
 
-baseline-browser-mapping@^2.10.12:
-  version "2.10.27"
-  resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.10.27.tgz#fee941c2a0b42cdf83c6427e4c830b1d0bdab2c3"
-  integrity sha512-zEs/ufmZoUd7WftKpKyXaT6RFxpQ5Qm9xytKRHvJfxFV9DFJkZph9RvJ1LcOUi0Z1ZVijMte65JbILeV+8QQEA==
+baseline-browser-mapping@^2.11.12:
+  version "2.11.15"
+  resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.11.15.tgz#9c0cac93d7d304f3d61bb41088a102cd62e68676"
+  integrity sha512-FwMjJJ7HnyZpWe+oWxegG0fezZyBZUagI5LZEoO3GCbtbKNwRfMH9Ue5d5v01PNePBy1QSfPSDTTeVL0Hb9EzA==
 
-beasties@0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/beasties/-/beasties-0.4.1.tgz#5c0cc2a89ba3b329d2e75fdd2e494ad661fdd954"
-  integrity sha512-2Imdcw3LznDuxAbJM26RHniOLAzE6WgrK8OuvVXCQtNBS8rsnD9zsSEa3fHl4hHpUY7BYTlrpvtPVbvu9G6neg==
+beasties@0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/beasties/-/beasties-0.4.3.tgz#987fc0d31126186de723e43858cfa235f530e87a"
+  integrity sha512-fIIeLOcbAB/K1kb1HBVJoiq1alHL4RCYBSo5e7HzrNkkgMggXR1Vqt/Z9JWnkfe/qdCo66Ux3QRwZioAIBdWRA==
   dependencies:
     css-select "^6.0.0"
     css-what "^7.0.0"
@@ -2175,19 +1796,19 @@ beasties@0.4.1:
     postcss-safe-parser "^7.0.1"
 
 body-parser@^2.2.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-2.2.2.tgz#1a32cdb966beaf68de50a9dfbe5b58f83cb8890c"
-  integrity sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-2.3.0.tgz#6d8662f4d8c336028b8ac9aa24251b0ca64ba437"
+  integrity sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==
   dependencies:
     bytes "^3.1.2"
-    content-type "^1.0.5"
+    content-type "^2.0.0"
     debug "^4.4.3"
-    http-errors "^2.0.0"
-    iconv-lite "^0.7.0"
+    http-errors "^2.0.1"
+    iconv-lite "^0.7.2"
     on-finished "^2.4.1"
-    qs "^6.14.1"
-    raw-body "^3.0.1"
-    type-is "^2.0.1"
+    qs "^6.15.2"
+    raw-body "^3.0.2"
+    type-is "^2.1.0"
 
 boolbase@^1.0.0:
   version "1.0.0"
@@ -2195,30 +1816,30 @@ boolbase@^1.0.0:
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
 brace-expansion@^1.1.7:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.14.tgz#d9de602370d91347cd9ddad1224d4fd701eb348b"
-  integrity sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==
+  version "1.1.18"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.18.tgz#3ce74d89885136be1535341f8c3d4425c29a5cab"
+  integrity sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==
   dependencies:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-brace-expansion@^5.0.5:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-5.0.5.tgz#dcc3a37116b79f3e1b46db994ced5d570e930fdb"
-  integrity sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==
+brace-expansion@^5.0.8:
+  version "5.0.9"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-5.0.9.tgz#7c72438809b5fa5babf54199a1f1c281a6984fcf"
+  integrity sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==
   dependencies:
     balanced-match "^4.0.2"
 
 browserslist@^4.24.0, browserslist@^4.26.0:
-  version "4.28.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.28.2.tgz#f50b65362ef48974ca9f50b3680566d786b811d2"
-  integrity sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==
+  version "4.28.8"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.28.8.tgz#a3c79ceb70028527e5da7dafc887f3200b5168c0"
+  integrity sha512-V2NpofLblG64mfOtSgDhOJESZEGogzDMBv/q+W6oc4LXWP/q75eOXoOaaOu1EOadB9U4Bwx/e0yzbvwKH8zalA==
   dependencies:
-    baseline-browser-mapping "^2.10.12"
-    caniuse-lite "^1.0.30001782"
-    electron-to-chromium "^1.5.328"
-    node-releases "^2.0.36"
-    update-browserslist-db "^1.2.3"
+    baseline-browser-mapping "^2.11.12"
+    caniuse-lite "^1.0.30001809"
+    electron-to-chromium "^1.5.402"
+    node-releases "^2.0.53"
+    update-browserslist-db "^1.3.0"
 
 buffer-from@^1.0.0:
   version "1.1.2"
@@ -2230,22 +1851,6 @@ bytes@^3.1.2, bytes@~3.1.2:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
-cacache@^20.0.0, cacache@^20.0.1:
-  version "20.0.4"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-20.0.4.tgz#9b547dc3db0c1f87cba6dbbff91fb17181b4bbb1"
-  integrity sha512-M3Lab8NPYlZU2exsL3bMVvMrMqgwCnMWfdZbK28bn3pK6APT/Te/I8hjRPNu1uwORY9a1eEQoifXbKPQMfMTOA==
-  dependencies:
-    "@npmcli/fs" "^5.0.0"
-    fs-minipass "^3.0.0"
-    glob "^13.0.0"
-    lru-cache "^11.1.0"
-    minipass "^7.0.3"
-    minipass-collect "^2.0.1"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.4"
-    p-map "^7.0.2"
-    ssri "^13.0.0"
-
 call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz#4b5428c222be985d79c3d82657479dbe0b59b2d6"
@@ -2272,15 +1877,10 @@ call-bound@^1.0.2, call-bound@^1.0.3, call-bound@^1.0.4:
     call-bind-apply-helpers "^1.0.2"
     get-intrinsic "^1.3.0"
 
-callsites@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
-  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
-
-caniuse-lite@^1.0.30001782:
-  version "1.0.30001791"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001791.tgz#dfb93d85c40ad380c57123e72e10f3c575786b51"
-  integrity sha512-yk0l/YSrOnFZk3UROpDLQD9+kC1l4meK/wed583AXrzoarMGJcbRi2Q4RaUYbKxYAsZ8sWmaSa/DsLmdBeI1vQ==
+caniuse-lite@^1.0.30001809:
+  version "1.0.30001809"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001809.tgz#e6cf71f14ddfe008f114dd2a846923be3c03a07b"
+  integrity sha512-xxWVywk6a6Arlk+hymeycyn/VgqEfLDxupvhH/xiY5SJ/18kmi9o6MiO320DCUzypORHLtvh0I4i04tUhCNHNQ==
 
 canvg@^3.0.11:
   version "3.0.11"
@@ -2296,30 +1896,15 @@ canvg@^3.0.11:
     stackblur-canvas "^2.0.0"
     svg-pathdata "^6.0.3"
 
-chalk@^4.0.0:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
-  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chalk@^5.6.2:
   version "5.6.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.6.2.tgz#b1238b6e23ea337af71c7f8a295db5af0c158aea"
   integrity sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==
 
 chardet@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-2.1.1.tgz#5c75593704a642f71ee53717df234031e65373c8"
-  integrity sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==
-
-chokidar@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.3.tgz#7be37a4c03c9aee1ecfe862a4a23b2c70c205d30"
-  integrity sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==
-  dependencies:
-    readdirp "^4.0.1"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-2.2.0.tgz#005d664f2cbd4961888d2e2c32c5a69e59d8eec4"
+  integrity sha512-rddelWYNPRrXq6PtNEN2S3f6t9ILzvqaN5pVgi4kqt9jHQaXIial9PznB5iSPVlQSLNaaH22ItWz3EJtQ10+OA==
 
 chokidar@^5.0.0:
   version "5.0.0"
@@ -2328,11 +1913,6 @@ chokidar@^5.0.0:
   dependencies:
     readdirp "^5.0.0"
 
-chownr@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-3.0.0.tgz#9855e64ecd240a9cc4267ce8a4aa5d24a1da15e4"
-  integrity sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==
-
 cli-cursor@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-5.0.0.tgz#24a4831ecf5a6b01ddeb32fb71a4b2088b0dce38"
@@ -2345,7 +1925,7 @@ cli-spinners@^3.2.0:
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-3.4.0.tgz#1f11f6d48c4e5bc6849fcb4efa0dc98f9e7299ea"
   integrity sha512-bXfOC4QcT1tKXGorxL3wbJm6XJPDqEnij2gQ2m7ESQuE+/z9YFIWnl/5RpTiKWbMq3EVKR4fRLJGn6DVfu0mpw==
 
-cli-truncate@^5.0.0:
+cli-truncate@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-5.2.0.tgz#c8e72aaca8339c773d128c36e0a17c6315b694eb"
   integrity sha512-xRwvIOMGrfOAnM1JYtqQImuaNtDEv9v6oIYAs4LIHwTiKee8uwvIi363igssOC0O5U04i4AlENs79LQLu9tEMw==
@@ -2367,28 +1947,6 @@ cliui@^9.0.1:
     strip-ansi "^7.1.0"
     wrap-ansi "^9.0.0"
 
-color-convert@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
-  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
-  dependencies:
-    color-name "~1.1.4"
-
-color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
-colorette@^2.0.20:
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
-  integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
-
-commander@^14.0.3:
-  version "14.0.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-14.0.3.tgz#425d79b48f9af82fcd9e4fc1ea8af6c5ec07bbc2"
-  integrity sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==
-
 complex.js@^2.2.5:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/complex.js/-/complex.js-2.4.3.tgz#72ee9c303a9b89ebcfeca0d39f74927d38721fce"
@@ -2409,6 +1967,11 @@ content-type@^1.0.5:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
 
+content-type@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-2.1.0.tgz#d9389c43c0a8cf6a355db464d21e07092a40493a"
+  integrity sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==
+
 convert-source-map@^1.5.1:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
@@ -2430,9 +1993,9 @@ cookie@^0.7.1:
   integrity sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==
 
 core-js@^3.6.0, core-js@^3.8.3:
-  version "3.49.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.49.0.tgz#8b4d520ac034311fa21aa616f017ada0e0dbbddd"
-  integrity sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==
+  version "3.50.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.50.0.tgz#a18646fcb0097650189b4504c803e887bcae4c0a"
+  integrity sha512-BRWgOLKkFeCgRudR6zrs8p9XJZcE14grzKMMssoYrk6krtuEZ7MTKPIY5RzOnqsEKIR9kst7wNzphttraT+Yqw==
 
 cors@^2.8.5:
   version "2.8.6"
@@ -2501,13 +2064,6 @@ data-view-byte-offset@^1.0.1:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
-debug@4, debug@^4.1.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.4.0, debug@^4.4.3:
-  version "4.4.3"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
-  integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
-  dependencies:
-    ms "^2.1.3"
-
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -2515,6 +2071,13 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.4.0, debug@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
+  integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
+  dependencies:
+    ms "^2.1.3"
+
 decimal.js@^10.4.3:
   version "10.6.0"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.6.0.tgz#e649a43e3ab953a72192ff5983865e509f37ed9a"
@@ -2582,9 +2145,9 @@ domhandler@^5.0.2, domhandler@^5.0.3:
     domelementtype "^2.3.0"
 
 dompurify@^3.3.1:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.4.2.tgz#f0ff81be682c485505097ba8195a058d8f575218"
-  integrity sha512-lHeS9SA/IKeIFFyYciHBr2n0v1VMPlSj843HdLOwjb2OxNwdq9Xykxqhk+FE42MzAdHvInbAolSE4mhahPpjXA==
+  version "3.4.14"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.4.14.tgz#a789edb2c7bcdb69a93713a34edb7e0a5245d8c9"
+  integrity sha512-dVoH9z+MY+C9IilgGCk3YfFqjLi3fChm2OiKJMzh6axrJ5qwxqWaZamgmHrpv22CN/KdbZJuGEGgfQoL00LTdg==
   optionalDependencies:
     "@types/trusted-types" "^2.0.7"
 
@@ -2611,20 +2174,20 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-electron-to-chromium@^1.5.328:
-  version "1.5.349"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.349.tgz#9b9c6a6d84d1107557c18a9336099ce0ee890e5b"
-  integrity sha512-QsWVGyRuY07Aqb234QytTfwd5d9AJlfNIQ5wIOl1L+PZDzI9d9+Fn0FRale/QYlFxt/bUnB0/nLd1jFPGxGK1A==
+electron-to-chromium@^1.5.402:
+  version "1.5.411"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.411.tgz#d56c7e43f91e2b3abb53b4eecd646e20d0b18b34"
+  integrity sha512-gglkxzokjHfawpGxq75XdBV2/l3BAPzrsMs70qgaZdTW5rpV1tC4MdgJVP9fN126bODA4ZJQkn1wryEzJyQXIg==
 
 emoji-regex@^10.3.0:
   version "10.6.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.6.0.tgz#bf3d6e8f7f8fd22a65d9703475bc0147357a6b0d"
   integrity sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==
 
-emoji-regex@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
-  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+empathic@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/empathic/-/empathic-2.0.1.tgz#37b1bede31093e04a03d2abce95ea323fee8ef49"
+  integrity sha512-YGRs8knHhKHVShLkFET/rWAU8kmHbOV5LwN938RHI0pljAJ1Gf6SzXsSmRaEzcXTtOOmVqJ5+WtQPL5uigY50Q==
 
 encodeurl@^2.0.0:
   version "2.0.0"
@@ -2636,11 +2199,6 @@ entities@^4.2.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
-entities@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-6.0.1.tgz#c28c34a43379ca7f61d074130b2f5f7020a30694"
-  integrity sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==
-
 entities@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-7.0.1.tgz#26e8a88889db63417dcb9a1e79a3f1bc92b5976b"
@@ -2651,22 +2209,22 @@ entities@^8.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-8.0.0.tgz#c1df5fe3602429747fa233d0dd26f142f0ce4743"
   integrity sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==
 
-env-paths@^2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
-  integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
-
 environment@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/environment/-/environment-1.1.0.tgz#8e86c66b180f363c7ab311787e0259665f45a9f1"
   integrity sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==
 
-err-code@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
-  integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
+es-abstract-get@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-abstract-get/-/es-abstract-get-1.0.0.tgz#1eae87101f42bedeb6a740e8c5051271aef89088"
+  integrity sha512-6PMWXpdhshVvFp+FoWYs1EvG1Nj0tvk0dZM+XcK0xMEM1czRVcP6ohqPWHy6qPagSpC8j4+p89WXlT+xXJs/fg==
+  dependencies:
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.2"
+    is-callable "^1.2.7"
+    object-inspect "^1.13.4"
 
-es-abstract@^1.23.2, es-abstract@^1.23.5, es-abstract@^1.23.9, es-abstract@^1.24.0:
+es-abstract@^1.23.2, es-abstract@^1.23.5, es-abstract@^1.23.9, es-abstract@^1.24.0, es-abstract@^1.24.2:
   version "1.24.2"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.24.2.tgz#2dbd38c180735ee983f77585140a2706a963ed9a"
   integrity sha512-2FpH9Q5i2RRwyEP1AylXe6nYLR5OhaJTZwmlcP0dL/+JCbgg7yyEo/sEK6HeGZRf3dFpWwThaRHVApXSkW3xeg==
@@ -2736,10 +2294,10 @@ es-errors@^1.3.0:
   resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
-es-object-atoms@^1.0.0, es-object-atoms@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
-  integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
+es-object-atoms@^1.0.0, es-object-atoms@^1.1.1, es-object-atoms@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.2.tgz#a2d0b373205724dfa525d23b0c3e1b1ca582c99b"
+  integrity sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==
   dependencies:
     es-errors "^1.3.0"
 
@@ -2761,77 +2319,48 @@ es-shim-unscopables@^1.0.2, es-shim-unscopables@^1.1.0:
     hasown "^2.0.2"
 
 es-to-primitive@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18"
-  integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.4.tgz#0c854291cf0d7b439d6b9e5771ea837ffaf1f991"
+  integrity sha512-yPDz7wqpg1/mmHLmS3tcfTfbw5f1eryXvyghYBffGdERwe+mV7ZcWzTR8LR17Kvqt3qfPurjlonmnq3MKXIOXw==
   dependencies:
+    es-abstract-get "^1.0.0"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
     is-callable "^1.2.7"
-    is-date-object "^1.0.5"
-    is-symbol "^1.0.4"
+    is-date-object "^1.1.0"
+    is-symbol "^1.1.1"
 
-esbuild@0.27.3:
-  version "0.27.3"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.27.3.tgz#5859ca8e70a3af956b26895ce4954d7e73bd27a8"
-  integrity sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==
+esbuild@0.28.2:
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.28.2.tgz#0f43bd1bad955b72d24e2261e3abe5957ccf0816"
+  integrity sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==
   optionalDependencies:
-    "@esbuild/aix-ppc64" "0.27.3"
-    "@esbuild/android-arm" "0.27.3"
-    "@esbuild/android-arm64" "0.27.3"
-    "@esbuild/android-x64" "0.27.3"
-    "@esbuild/darwin-arm64" "0.27.3"
-    "@esbuild/darwin-x64" "0.27.3"
-    "@esbuild/freebsd-arm64" "0.27.3"
-    "@esbuild/freebsd-x64" "0.27.3"
-    "@esbuild/linux-arm" "0.27.3"
-    "@esbuild/linux-arm64" "0.27.3"
-    "@esbuild/linux-ia32" "0.27.3"
-    "@esbuild/linux-loong64" "0.27.3"
-    "@esbuild/linux-mips64el" "0.27.3"
-    "@esbuild/linux-ppc64" "0.27.3"
-    "@esbuild/linux-riscv64" "0.27.3"
-    "@esbuild/linux-s390x" "0.27.3"
-    "@esbuild/linux-x64" "0.27.3"
-    "@esbuild/netbsd-arm64" "0.27.3"
-    "@esbuild/netbsd-x64" "0.27.3"
-    "@esbuild/openbsd-arm64" "0.27.3"
-    "@esbuild/openbsd-x64" "0.27.3"
-    "@esbuild/openharmony-arm64" "0.27.3"
-    "@esbuild/sunos-x64" "0.27.3"
-    "@esbuild/win32-arm64" "0.27.3"
-    "@esbuild/win32-ia32" "0.27.3"
-    "@esbuild/win32-x64" "0.27.3"
-
-esbuild@^0.27.0:
-  version "0.27.7"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.27.7.tgz#bcadce22b2f3fd76f257e3a64f83a64986fea11f"
-  integrity sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==
-  optionalDependencies:
-    "@esbuild/aix-ppc64" "0.27.7"
-    "@esbuild/android-arm" "0.27.7"
-    "@esbuild/android-arm64" "0.27.7"
-    "@esbuild/android-x64" "0.27.7"
-    "@esbuild/darwin-arm64" "0.27.7"
-    "@esbuild/darwin-x64" "0.27.7"
-    "@esbuild/freebsd-arm64" "0.27.7"
-    "@esbuild/freebsd-x64" "0.27.7"
-    "@esbuild/linux-arm" "0.27.7"
-    "@esbuild/linux-arm64" "0.27.7"
-    "@esbuild/linux-ia32" "0.27.7"
-    "@esbuild/linux-loong64" "0.27.7"
-    "@esbuild/linux-mips64el" "0.27.7"
-    "@esbuild/linux-ppc64" "0.27.7"
-    "@esbuild/linux-riscv64" "0.27.7"
-    "@esbuild/linux-s390x" "0.27.7"
-    "@esbuild/linux-x64" "0.27.7"
-    "@esbuild/netbsd-arm64" "0.27.7"
-    "@esbuild/netbsd-x64" "0.27.7"
-    "@esbuild/openbsd-arm64" "0.27.7"
-    "@esbuild/openbsd-x64" "0.27.7"
-    "@esbuild/openharmony-arm64" "0.27.7"
-    "@esbuild/sunos-x64" "0.27.7"
-    "@esbuild/win32-arm64" "0.27.7"
-    "@esbuild/win32-ia32" "0.27.7"
-    "@esbuild/win32-x64" "0.27.7"
+    "@esbuild/aix-ppc64" "0.28.2"
+    "@esbuild/android-arm" "0.28.2"
+    "@esbuild/android-arm64" "0.28.2"
+    "@esbuild/android-x64" "0.28.2"
+    "@esbuild/darwin-arm64" "0.28.2"
+    "@esbuild/darwin-x64" "0.28.2"
+    "@esbuild/freebsd-arm64" "0.28.2"
+    "@esbuild/freebsd-x64" "0.28.2"
+    "@esbuild/linux-arm" "0.28.2"
+    "@esbuild/linux-arm64" "0.28.2"
+    "@esbuild/linux-ia32" "0.28.2"
+    "@esbuild/linux-loong64" "0.28.2"
+    "@esbuild/linux-mips64el" "0.28.2"
+    "@esbuild/linux-ppc64" "0.28.2"
+    "@esbuild/linux-riscv64" "0.28.2"
+    "@esbuild/linux-s390x" "0.28.2"
+    "@esbuild/linux-x64" "0.28.2"
+    "@esbuild/netbsd-arm64" "0.28.2"
+    "@esbuild/netbsd-x64" "0.28.2"
+    "@esbuild/openbsd-arm64" "0.28.2"
+    "@esbuild/openbsd-x64" "0.28.2"
+    "@esbuild/openharmony-arm64" "0.28.2"
+    "@esbuild/sunos-x64" "0.28.2"
+    "@esbuild/win32-arm64" "0.28.2"
+    "@esbuild/win32-ia32" "0.28.2"
+    "@esbuild/win32-x64" "0.28.2"
 
 escalade@^3.1.1, escalade@^3.2.0:
   version "3.2.0"
@@ -2868,9 +2397,9 @@ eslint-import-resolver-node@^0.3.9:
     resolve "^2.0.0-next.6"
 
 eslint-module-utils@^2.12.1:
-  version "2.12.1"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz#f76d3220bfb83c057651359295ab5854eaad75ff"
-  integrity sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.14.0.tgz#611f8e1c6ceb29a93eb949e1cc670b8287764819"
+  integrity sha512-W2WCRZ9Dqntd+2u8jJcVMV2PKulc6RdLgUUoh/yQr3uB6lo/ZOeGx11sv60/8S4QFFKNslAlWhr9u0Ef7ZW6Ig==
   dependencies:
     debug "^3.2.7"
 
@@ -2899,26 +2428,25 @@ eslint-plugin-import@^2.31.0:
     string.prototype.trimend "^1.0.9"
     tsconfig-paths "^3.15.0"
 
-eslint-plugin-perfectionist@^4.15.0:
-  version "4.15.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-perfectionist/-/eslint-plugin-perfectionist-4.15.1.tgz#d38e80b2442d83b0a6482d2079cfd63dd53266d9"
-  integrity sha512-MHF0cBoOG0XyBf7G0EAFCuJJu4I18wy0zAoT1OHfx2o6EOx1EFTIzr2HGeuZa1kDcusoX0xJ9V7oZmaeFd773Q==
+eslint-plugin-perfectionist@^5.10.1:
+  version "5.10.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-perfectionist/-/eslint-plugin-perfectionist-5.10.1.tgz#3fb3401fe97eae57aa1194a1fd824ff95becb497"
+  integrity sha512-Kprsp9Us0GqAesYaAIzUViw57xYp5WBqzXrcE0Mtww++E5fexWXYBipMuuD7yvyH4vvpBH0+oJ+OMAmZ0oYXkw==
   dependencies:
-    "@typescript-eslint/types" "^8.38.0"
-    "@typescript-eslint/utils" "^8.38.0"
+    "@typescript-eslint/utils" "^8.65.0"
     natural-orderby "^5.0.0"
 
-eslint-plugin-simple-import-sort@^12.1.1:
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.1.1.tgz#e64bfdaf91c5b98a298619aa634a9f7aa43b709e"
-  integrity sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==
+eslint-plugin-simple-import-sort@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-14.0.0.tgz#a07d4aa63ebf043e8d55497b4e2a3035bf800849"
+  integrity sha512-NUJO0+XFCkk+o5EsAJruTgnfMEpeWrPWeJS15UVF60GgXmqz1BJ9/3hzlvG7lkL8Bubzos5cCLptThbFfPnSMQ==
 
 eslint-plugin-unused-imports@^4.1.4:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-4.4.1.tgz#a831f0a2937d7631eba30cb87091ab7d3a5da0e1"
   integrity sha512-oZGYUz1X3sRMGUB+0cZyK2VcvRX5lm/vB56PgNNcU+7ficUCKm66oZWKUubXWnOuPjQ8PvmXtCViXBMONPe7tQ==
 
-eslint-scope@9.1.2:
+eslint-scope@9.1.2, eslint-scope@^9.1.2:
   version "9.1.2"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-9.1.2.tgz#b9de6ace2fab1cff24d2e58d85b74c8fcea39802"
   integrity sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==
@@ -2928,55 +2456,39 @@ eslint-scope@9.1.2:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-scope@^8.4.0:
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.4.0.tgz#88e646a207fad61436ffa39eb505147200655c82"
-  integrity sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==
-  dependencies:
-    esrecurse "^4.3.0"
-    estraverse "^5.2.0"
-
 eslint-visitor-keys@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint-visitor-keys@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz#4cfea60fe7dd0ad8e816e1ed026c1d5251b512c1"
-  integrity sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==
-
-eslint-visitor-keys@^5.0.0:
+eslint-visitor-keys@^5.0.0, eslint-visitor-keys@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz#9e3c9489697824d2d4ce3a8ad12628f91e9f59be"
   integrity sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==
 
-eslint@^9.28.0:
-  version "9.39.4"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.39.4.tgz#855da1b2e2ad66dc5991195f35e262bcec8117b5"
-  integrity sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==
+eslint@^10.8.1:
+  version "10.8.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-10.8.1.tgz#fb37d514c19b6dd5b2d6b70169fd26fddfa97967"
+  integrity sha512-wqA7W2jbsC/BnV9Iv1UZpKVFkO1AdNoSmYW8NWG4HNOBbkAMvIqDZ27pI2f07dqn583NcIC44ckjAcOXDL1QbQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.8.0"
-    "@eslint-community/regexpp" "^4.12.1"
-    "@eslint/config-array" "^0.21.2"
-    "@eslint/config-helpers" "^0.4.2"
-    "@eslint/core" "^0.17.0"
-    "@eslint/eslintrc" "^3.3.5"
-    "@eslint/js" "9.39.4"
-    "@eslint/plugin-kit" "^0.4.1"
+    "@eslint-community/regexpp" "^4.12.2"
+    "@eslint/config-array" "^0.23.5"
+    "@eslint/config-helpers" "^0.7.0"
+    "@eslint/core" "^1.2.1"
+    "@eslint/plugin-kit" "^0.7.2"
     "@humanfs/node" "^0.16.6"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@humanwhocodes/retry" "^0.4.2"
     "@types/estree" "^1.0.6"
     ajv "^6.14.0"
-    chalk "^4.0.0"
     cross-spawn "^7.0.6"
     debug "^4.3.2"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^8.4.0"
-    eslint-visitor-keys "^4.2.1"
-    espree "^10.4.0"
-    esquery "^1.5.0"
+    eslint-scope "^9.1.2"
+    eslint-visitor-keys "^5.0.1"
+    espree "^11.2.0"
+    esquery "^1.7.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^8.0.0"
@@ -2986,21 +2498,20 @@ eslint@^9.28.0:
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
     json-stable-stringify-without-jsonify "^1.0.1"
-    lodash.merge "^4.6.2"
-    minimatch "^3.1.5"
+    minimatch "^10.2.5"
     natural-compare "^1.4.0"
     optionator "^0.9.3"
 
-espree@^10.0.1, espree@^10.4.0:
-  version "10.4.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-10.4.0.tgz#d54f4949d4629005a1fa168d937c3ff1f7e2a837"
-  integrity sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==
+espree@^11.2.0:
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-11.2.0.tgz#01d5e47dc332aaba3059008362454a8cc34ccaa5"
+  integrity sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==
   dependencies:
-    acorn "^8.15.0"
+    acorn "^8.16.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^4.2.1"
+    eslint-visitor-keys "^5.0.1"
 
-esquery@^1.5.0:
+esquery@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.7.0.tgz#08d048f261f0ddedb5bae95f46809463d9c9496d"
   integrity sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==
@@ -3029,15 +2540,15 @@ etag@^1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
-eventemitter3@^5.0.1:
+eventemitter3@^5.0.4:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.4.tgz#a86d66170433712dde814707ac52b5271ceb1feb"
   integrity sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==
 
 eventsource-parser@^3.0.0, eventsource-parser@^3.0.1:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/eventsource-parser/-/eventsource-parser-3.0.8.tgz#1c792503e4080455d00701bb1f7a1d60734d0e58"
-  integrity sha512-70QWGkr4snxr0OXLRWsFLeRBIRPuQOvt4s8QYjmUlmlkyTZkRqS7EDVRZtzU3TiyDbXSzaOeF0XUKy8PchzukQ==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/eventsource-parser/-/eventsource-parser-3.1.1.tgz#b96cbb7dace4f3774f58a9e3b1ae9a4a524872e2"
+  integrity sha512-EKN1vKAMcZ8MlYMpaNuxN6R9yakzH6uajHcHVTqWJzvu5pWw9DyhbP35HH8MVBQ+dZjAfDxk+A8NiR9KWaXiyQ==
 
 eventsource@^3.0.2:
   version "3.0.7"
@@ -3046,17 +2557,13 @@ eventsource@^3.0.2:
   dependencies:
     eventsource-parser "^3.0.1"
 
-exponential-backoff@^3.1.1:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/exponential-backoff/-/exponential-backoff-3.1.3.tgz#51cf92c1c0493c766053f9d3abee4434c244d2f6"
-  integrity sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==
-
 express-rate-limit@^8.2.1:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/express-rate-limit/-/express-rate-limit-8.5.0.tgz#ef4709a569b8e763ae2a2420f3d74537bbbe9795"
-  integrity sha512-XKhFohWaSBdVJNTi5TaHziqnPkv04I9UQV6q1Wy7Ui6GGQZVW12ojDFwqer14EvCXxjvPG0CyWXx7cAXpALB4Q==
+  version "8.6.2"
+  resolved "https://registry.yarnpkg.com/express-rate-limit/-/express-rate-limit-8.6.2.tgz#1a6c7fb6c5f5a83883c14f1d198fcdff60087c5d"
+  integrity sha512-YH4ru+eOJxQABscKFfRCy9R7x9QFGdezclVMwwgFFndzS2Xnm0uo6B0ABZsLhcpeptGv2qvuJVWlQr9gQZoC3A==
   dependencies:
-    ip-address "10.1.0"
+    debug "^4.4.3"
+    ip-address "^10.2.0"
 
 express@^5.2.1:
   version "5.2.1"
@@ -3116,10 +2623,29 @@ fast-png@^6.2.0:
     iobuffer "^5.3.2"
     pako "^2.1.0"
 
+fast-string-truncated-width@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/fast-string-truncated-width/-/fast-string-truncated-width-3.0.3.tgz#23afe0da67d752ca0727538f1e6967759728ce49"
+  integrity sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==
+
+fast-string-width@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/fast-string-width/-/fast-string-width-3.0.2.tgz#16dbabb491ce5585b5ecb675b65c165d71688eeb"
+  integrity sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==
+  dependencies:
+    fast-string-truncated-width "^3.0.2"
+
 fast-uri@^3.0.1:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.1.2.tgz#8af3d4fc9d3e71b11572cc2673b514a7d1a8c8ec"
-  integrity sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.1.5.tgz#610f37419a030270430cecd68d74e3d4d96725d0"
+  integrity sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==
+
+fast-wrap-ansi@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/fast-wrap-ansi/-/fast-wrap-ansi-0.2.2.tgz#95e952a0145bce3f59ad56e179f84c48d4072935"
+  integrity sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==
+  dependencies:
+    fast-string-width "^3.0.2"
 
 fdir@^6.5.0:
   version "6.5.0"
@@ -3127,9 +2653,9 @@ fdir@^6.5.0:
   integrity sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==
 
 fflate@^0.8.1:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.8.2.tgz#fc8631f5347812ad6028bbe4a2308b2792aa1dea"
-  integrity sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.8.3.tgz#bc27d8eb30343d4d512abb03480202ce65d825fc"
+  integrity sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==
 
 file-entry-cache@^8.0.0:
   version "8.0.0"
@@ -3167,9 +2693,9 @@ flat-cache@^4.0.0:
     keyv "^4.5.4"
 
 flatted@^3.2.9:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.4.2.tgz#f5c23c107f0f37de8dbdf24f13722b3b98d52726"
-  integrity sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.4.4.tgz#aeeca2a506303f0cee61c59e6c9f2a88d2f29fc6"
+  integrity sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==
 
 for-each@^0.3.3, for-each@^0.3.5:
   version "0.3.5"
@@ -3193,14 +2719,7 @@ fresh@^2.0.0:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-2.0.0.tgz#8dd7df6a1b3a1b3a5cf186c05a5dd267622635a4"
   integrity sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==
 
-fs-minipass@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-3.0.3.tgz#79a85981c4dc120065e96f62086bf6f9dc26cc54"
-  integrity sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==
-  dependencies:
-    minipass "^7.0.3"
-
-fsevents@~2.3.2, fsevents@~2.3.3:
+fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
@@ -3211,16 +2730,19 @@ function-bind@^1.1.2:
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
 function.prototype.name@^1.1.6, function.prototype.name@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.8.tgz#e68e1df7b259a5c949eeef95cdbde53edffabb78"
-  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.2.0.tgz#758f3e84fa542672454bd5e14cb081a5ce07f70c"
+  integrity sha512-jObKIik1P2QjPHP5nz5BaOtUlfgS0fWo8IUByNXkM+o+02sJOi94em77GwJKQSJ3gfPHdgzLNrHc1uokV4P/ew==
   dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.3"
-    define-properties "^1.2.1"
+    call-bind "^1.0.9"
+    call-bound "^1.0.4"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
     functions-have-names "^1.2.3"
-    hasown "^2.0.2"
+    has-property-descriptors "^1.0.2"
+    hasown "^2.0.4"
     is-callable "^1.2.7"
+    is-document.all "^1.0.0"
 
 functions-have-names@^1.2.3:
   version "1.2.3"
@@ -3243,9 +2765,9 @@ get-caller-file@^2.0.5:
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
 get-east-asian-width@^1.0.0, get-east-asian-width@^1.3.1, get-east-asian-width@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.5.0.tgz#ce7008fe345edcf5497a6f557cfa54bc318a9ce7"
-  integrity sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz#216900f91df11a8b2c198c3e1d93d6c035a776b9"
+  integrity sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==
 
 get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7, get-intrinsic@^1.3.0:
   version "1.3.0"
@@ -3287,25 +2809,6 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob-to-regexp@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
-  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
-
-glob@^13.0.0:
-  version "13.0.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-13.0.6.tgz#078666566a425147ccacfbd2e332deb66a2be71d"
-  integrity sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==
-  dependencies:
-    minimatch "^10.2.2"
-    minipass "^7.1.3"
-    path-scurry "^2.0.2"
-
-globals@^14.0.0:
-  version "14.0.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-14.0.0.tgz#898d7413c29babcf6bafe56fcadded858ada724e"
-  integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
-
 globalthis@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
@@ -3319,7 +2822,7 @@ gopd@^1.0.1, gopd@^1.2.0:
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
   integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
 
-graceful-fs@^4.1.2, graceful-fs@^4.2.6:
+graceful-fs@^4.1.2:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -3329,11 +2832,6 @@ has-bigints@^1.0.2:
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.1.0.tgz#28607e965ac967e03cd2a2c70a2636a1edad49fe"
   integrity sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==
 
-has-flag@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
-  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
-
 has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
@@ -3360,22 +2858,22 @@ has-tostringtag@^1.0.2:
   dependencies:
     has-symbols "^1.0.3"
 
-hasown@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.3.tgz#5e5c2b15b60370a4c7930c383dfb76bf17bc403c"
-  integrity sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==
+hasown@^2.0.2, hasown@^2.0.3, hasown@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.4.tgz#8c62d8cb90beb2aad5d0a5b67581ad9854c3f003"
+  integrity sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==
   dependencies:
     function-bind "^1.1.2"
 
 hono@^4.11.4:
-  version "4.12.17"
-  resolved "https://registry.yarnpkg.com/hono/-/hono-4.12.17.tgz#1465ab13d72d3f6dd8aa515ba3ba0672bba223d7"
-  integrity sha512-FbJJNb/XgX7YW0hX/V8w5oYLztKEsRLykCMZWt1WdLtsfjzMvmoqWBA4H4t5norinq8/rh20oiZYr+WSl4UzAQ==
+  version "4.13.3"
+  resolved "https://registry.yarnpkg.com/hono/-/hono-4.13.3.tgz#9715a35f637115f7455287ce6fdddcab21653d6b"
+  integrity sha512-r8AO2mYHoLxSHkgafNeC/BXyb2vWRxD3jem4Ts+ptav8oTG5FIRifAjuJEmZI4bSvvc2ns0GxmIYiZnHqN3mMw==
 
-hosted-git-info@^9.0.0:
-  version "9.0.3"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-9.0.3.tgz#637b511ce62a28e4261a92b8da0a4d6be3522cd4"
-  integrity sha512-Hc+ghLoSt6QaYZUv0WBiIvmMDZuZZ7oaDvdH8MbfOO4lOsxdXLEvuC6ePoGs9H1X9oCLyq6+NVN0MKqD+ydxyg==
+hosted-git-info@^10.1.0:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-10.1.1.tgz#50d93ed3ab3b81002122814cd56d5595f550d32c"
+  integrity sha512-DeOnSPAvOndYKfw075gt8yZzQ7S2hNztw34zBTfhIzLhmBTswIBg5/y+pqu/VD5cYWm5goAFTusDmUEmKZ0PEQ==
   dependencies:
     lru-cache "^11.1.0"
 
@@ -3397,11 +2895,6 @@ htmlparser2@^10.0.0:
     domutils "^3.2.2"
     entities "^7.0.1"
 
-http-cache-semantics@^4.1.1:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz#205f4db64f8562b76a4ff9235aa5279839a09dd5"
-  integrity sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==
-
 http-errors@^2.0.0, http-errors@^2.0.1, http-errors@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.1.tgz#36d2f65bc909c8790018dd36fb4d93da6caae06b"
@@ -3413,42 +2906,28 @@ http-errors@^2.0.0, http-errors@^2.0.1, http-errors@~2.0.1:
     statuses "~2.0.2"
     toidentifier "~1.0.1"
 
-http-proxy-agent@^7.0.0:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz#9a8b1f246866c028509486585f62b8f2c18c270e"
-  integrity sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==
+https-proxy-agent@9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-9.1.0.tgz#a9f60f79bc1578c37b166dd7f58b6bcb5c57e44b"
+  integrity sha512-ag87y7cJJ9/3+GxFr8Oy4O5faDsGRGnBGsJj/YjOSsSx/5eadKLYTMPlzuR6obgoCDDm0abAAZitXXQkMOPSpA==
   dependencies:
-    agent-base "^7.1.0"
+    agent-base "9.0.0"
     debug "^4.3.4"
-
-https-proxy-agent@7.0.6, https-proxy-agent@^7.0.1:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz#da8dfeac7da130b05c2ba4b59c9b6cd66611a6b9"
-  integrity sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==
-  dependencies:
-    agent-base "^7.1.2"
-    debug "4"
+    proxy-agent-negotiate "1.1.0"
 
 husky@^9.0.11:
   version "9.1.7"
   resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.7.tgz#d46a38035d101b46a70456a850ff4201344c0b2d"
   integrity sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==
 
-iconv-lite@^0.7.0, iconv-lite@^0.7.2, iconv-lite@~0.7.0:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.7.2.tgz#d0bdeac3f12b4835b7359c2ad89c422a4d1cc72e"
-  integrity sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==
+iconv-lite@^0.7.2, iconv-lite@~0.7.0:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.7.3.tgz#84ee12f963e7de50bc01a13e160a078b3b0f415f"
+  integrity sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
-ignore-walk@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-8.0.0.tgz#380c173badc3a18c57ff33440753f0052f572b14"
-  integrity sha512-FCeMZT4NiRQGh+YkeKMtWrOmBgWjHjMJ26WQWrRQyoyzqevdaGSakUaJW5xQYmjLlUVk2qUnCjYVBax9EKKg8A==
-  dependencies:
-    minimatch "^10.0.3"
-
-ignore@7.0.5, ignore@^7.0.5:
+ignore@7.0.5:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-7.0.5.tgz#4cb5f6cd7d4c7ab0365738c7aea888baa6d7efd9"
   integrity sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==
@@ -3458,18 +2937,20 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
 
-immutable@^5.0.2:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.1.5.tgz#93ee4db5c2a9ab42a4a783069f3c5d8847d40165"
-  integrity sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==
+ignore@^7.0.5:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-7.0.6.tgz#6a57aaef4c90df27ac3590875d29e8f11988c88e"
+  integrity sha512-BAg6QkE8W+TuQLrrw0Ugr7HegXduRuuj8/ti2kSOc+jz1dmx8/WNcjr6XGnq5YpDWxFwwaavqD0+jIUOKelTsw==
 
-import-fresh@^3.2.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.1.tgz#9cecb56503c0ada1f2741dbbd6546e4b13b57ccf"
-  integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
-  dependencies:
-    parent-module "^1.0.0"
-    resolve-from "^4.0.0"
+immutable@^5.1.5:
+  version "5.1.9"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.1.9.tgz#ac23c3a01992ab665e14ac9ffff298f28cd74a0c"
+  integrity sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==
+
+import-meta-resolve@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz#08cb85b5bd37ecc8eb1e0f670dc2767002d43734"
+  integrity sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==
 
 imurmurhash@^0.1.4:
   version "0.1.4"
@@ -3481,11 +2962,6 @@ inherits@~2.0.4:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-ini@6.0.0, ini@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-6.0.0.tgz#efc7642b276f6a37d22fdf56ef50889d7146bf30"
-  integrity sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==
-
 internal-slot@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961"
@@ -3500,15 +2976,10 @@ iobuffer@^5.3.2:
   resolved "https://registry.yarnpkg.com/iobuffer/-/iobuffer-5.4.0.tgz#f85dff957fd0579257472f0a4cfe5ed3430e63e1"
   integrity sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==
 
-ip-address@10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/ip-address/-/ip-address-10.1.0.tgz#d8dcffb34d0e02eb241427444a6e23f5b0595aa4"
-  integrity sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==
-
-ip-address@^10.1.1:
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/ip-address/-/ip-address-10.2.0.tgz#805fc178b20c518bd4c8548b24fe30892d7f3206"
-  integrity sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==
+ip-address@^10.2.0:
+  version "10.5.0"
+  resolved "https://registry.yarnpkg.com/ip-address/-/ip-address-10.5.0.tgz#fcd6d7dfe9e68416b7cb71afe9bc960b3e38c13b"
+  integrity sha512-R5SnVLJmgYYvf2F2ZgwSBnelz5G4q5AxIC277GDfUaNbrZKNANcBC7RHqYYePlszf4kBolVkJauG0ZjHHFh55g==
 
 ipaddr.js@1.9.1:
   version "1.9.1"
@@ -3555,12 +3026,12 @@ is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-core-module@^2.16.1:
-  version "2.16.1"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
-  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
+is-core-module@^2.16.1, is-core-module@^2.16.2:
+  version "2.16.2"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.2.tgz#3e07450a8080ebce3fbf0cac494f4d2ab324e082"
+  integrity sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==
   dependencies:
-    hasown "^2.0.2"
+    hasown "^2.0.3"
 
 is-data-view@^1.0.1, is-data-view@^1.0.2:
   version "1.0.2"
@@ -3571,7 +3042,7 @@ is-data-view@^1.0.1, is-data-view@^1.0.2:
     get-intrinsic "^1.2.6"
     is-typed-array "^1.1.13"
 
-is-date-object@^1.0.5, is-date-object@^1.1.0:
+is-date-object@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.1.0.tgz#ad85541996fc7aa8b2729701d27b7319f95d82f7"
   integrity sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==
@@ -3579,6 +3050,13 @@ is-date-object@^1.0.5, is-date-object@^1.1.0:
     call-bound "^1.0.2"
     has-tostringtag "^1.0.2"
 
+is-document.all@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-document.all/-/is-document.all-1.0.0.tgz#163a4bfb362c6ed7b118ce46cdecc4e37dee3195"
+  integrity sha512-+XSoyS05OdBbhFuELhgTCpFNHkpBOJqtsZfUFFpe5QTw+9Sjbh8zitxhQkYAo6wV7e1Vb8cAPvpCk9jGam/82g==
+  dependencies:
+    call-bound "^1.0.4"
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -3591,11 +3069,6 @@ is-finalizationregistry@^1.1.0:
   dependencies:
     call-bound "^1.0.3"
 
-is-fullwidth-code-point@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
-  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
-
 is-fullwidth-code-point@^5.0.0, is-fullwidth-code-point@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz#046b2a6d4f6b156b2233d3207d4b5a9783999b98"
@@ -3679,7 +3152,7 @@ is-string@^1.1.1:
     call-bound "^1.0.3"
     has-tostringtag "^1.0.2"
 
-is-symbol@^1.0.4, is-symbol@^1.1.1:
+is-symbol@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.1.1.tgz#f47761279f532e2b05a7024a7506dbbedacd0634"
   integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==
@@ -3730,48 +3203,20 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
-isexe@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-4.0.0.tgz#48f6576af8e87a18feb796b7ed5e2e5903b43dca"
-  integrity sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==
-
-istanbul-lib-coverage@^3.2.0:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz#2d166c4b0644d43a39f04bf6c2edd1e585f31756"
-  integrity sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==
-
-istanbul-lib-instrument@6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.3.tgz#fa15401df6c15874bcb2105f773325d78c666765"
-  integrity sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==
-  dependencies:
-    "@babel/core" "^7.23.9"
-    "@babel/parser" "^7.23.9"
-    "@istanbuljs/schema" "^0.1.3"
-    istanbul-lib-coverage "^3.2.0"
-    semver "^7.5.4"
-
 javascript-natural-sort@^0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59"
   integrity sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==
 
 jose@^6.1.3:
-  version "6.2.3"
-  resolved "https://registry.yarnpkg.com/jose/-/jose-6.2.3.tgz#0975197ad973251221c658a3cddc4b951a250c2d"
-  integrity sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw==
+  version "6.2.9"
+  resolved "https://registry.yarnpkg.com/jose/-/jose-6.2.9.tgz#344fa11af928f8000a4f81972c4d567d587170f0"
+  integrity sha512-XrchZOFZUl/T3vTwRe8XK+cJrGtMF4th1ARnDfwbBXFKThGhlsxEE4Zu03AD/bjJSt/9jT/mxrOCkJWOg77aPA==
 
-js-tokens@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
-  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-
-js-yaml@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.1.tgz#854c292467705b699476e1a2decc0c8a3458806b"
-  integrity sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==
-  dependencies:
-    argparse "^2.0.1"
+js-tokens@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-10.0.0.tgz#dffe7599b4a8bb7fe30aff8d0235234dffb79831"
+  integrity sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==
 
 jsesc@^3.0.2:
   version "3.1.0"
@@ -3783,11 +3228,6 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
-json-parse-even-better-errors@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-5.0.0.tgz#93c89f529f022e5dadc233409324f0167b1e903e"
-  integrity sha512-ZF1nxZ28VhQouRWhUcVlUIN3qwSgPuswK05s/HIaoetAoE/9tngVmCHjSxmSQPav1nd+lPtTL0YZ/2AFdR/iYQ==
-
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -3825,11 +3265,6 @@ jsonc-parser@3.3.1:
   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.3.1.tgz#f2a524b4f7fd11e3d791e559977ad60b98b798b4"
   integrity sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==
 
-jsonparse@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
-  integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
-
 jspdf@^4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/jspdf/-/jspdf-4.2.1.tgz#6ba0d263999313f91f369ee80ecf235046b2acd8"
@@ -3859,34 +3294,106 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lint-staged@^16.2.7:
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-16.4.0.tgz#a00b0e3abff59239cef6d7d9341e8f8473308e23"
-  integrity sha512-lBWt8hujh/Cjysw5GYVmZpFHXDCgZzhrOm8vbcUdobADZNOK/bRshr2kM3DfgrrtR1DQhfupW9gnIXOfiFi+bw==
-  dependencies:
-    commander "^14.0.3"
-    listr2 "^9.0.5"
-    picomatch "^4.0.3"
-    string-argv "^0.3.2"
-    tinyexec "^1.0.4"
-    yaml "^2.8.2"
+lightningcss-android-arm64@1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz#9a6841f88ae50fc83502903892b41af41bc2b907"
+  integrity sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==
 
-listr2@9.0.5, listr2@^9.0.5:
-  version "9.0.5"
-  resolved "https://registry.yarnpkg.com/listr2/-/listr2-9.0.5.tgz#92df7c4416a6da630eb9ef46da469b70de97b316"
-  integrity sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==
+lightningcss-darwin-arm64@1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz#c0f2c31c0bfd19fa4dd3f18e957a1f1a152097d6"
+  integrity sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==
+
+lightningcss-darwin-x64@1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz#cb0705965acb538c6683949ce6925fb3cdf7c361"
+  integrity sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==
+
+lightningcss-freebsd-x64@1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz#763538828b26bab2680dadafcc84ee78b0eb502b"
+  integrity sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==
+
+lightningcss-linux-arm-gnueabihf@1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz#6862e3176a331aedbdec1ed352b4d7d0dd0784de"
+  integrity sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==
+
+lightningcss-linux-arm64-gnu@1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz#c6a3a2ed15141daf6bdc2628930f8e39bdf473aa"
+  integrity sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==
+
+lightningcss-linux-arm64-musl@1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz#7fa1334971fc82845f9827df6ef8a0b20914bac6"
+  integrity sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==
+
+lightningcss-linux-x64-gnu@1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz#8b927862ea8c2bbc6831a46509244b50d9936e55"
+  integrity sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==
+
+lightningcss-linux-x64-musl@1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz#0c525bb077dfd94404c059cfe42dad797e96aeaf"
+  integrity sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==
+
+lightningcss-win32-arm64-msvc@1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz#850ee1103dac989cfab50e3ac22d1a69e394e63d"
+  integrity sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==
+
+lightningcss-win32-x64-msvc@1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz#e343ae152eed3609dc6e11949d1a3bf39a1c946f"
+  integrity sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==
+
+lightningcss@^1.32.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.33.0.tgz#c08867d71a79385c6e190214fd72fef3e5f95f0b"
+  integrity sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==
   dependencies:
-    cli-truncate "^5.0.0"
-    colorette "^2.0.20"
-    eventemitter3 "^5.0.1"
+    detect-libc "^2.0.3"
+  optionalDependencies:
+    lightningcss-android-arm64 "1.33.0"
+    lightningcss-darwin-arm64 "1.33.0"
+    lightningcss-darwin-x64 "1.33.0"
+    lightningcss-freebsd-x64 "1.33.0"
+    lightningcss-linux-arm-gnueabihf "1.33.0"
+    lightningcss-linux-arm64-gnu "1.33.0"
+    lightningcss-linux-arm64-musl "1.33.0"
+    lightningcss-linux-x64-gnu "1.33.0"
+    lightningcss-linux-x64-musl "1.33.0"
+    lightningcss-win32-arm64-msvc "1.33.0"
+    lightningcss-win32-x64-msvc "1.33.0"
+
+lint-staged@^17.3.0:
+  version "17.3.0"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-17.3.0.tgz#f13483b12f11790746e0ec82808ca0614ba80f4b"
+  integrity sha512-woZS3vNe3UKqBaLPvbLOtKRY4tLANpWQhom12MGWqC8Mh1lCOO+WgSwmX2amjJAqTY9BkXYW87fCUH5H9Ph6xw==
+  dependencies:
+    picomatch "^4.0.5"
+    string-argv "^0.3.2"
+    tinyexec "^1.2.4"
+  optionalDependencies:
+    yaml "^2.9.0"
+
+listr2@10.2.2:
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-10.2.2.tgz#01d987a6e3fb03b17612968617366f28fdeaf4d3"
+  integrity sha512-JtNtbZj8q5BnDMR7trpwvwk3RIrANtIVzEUm8w7amp6xelLgyuq+4WZoTH913XaQAoH/cNdYhaNzBPA2U3xbDw==
+  dependencies:
+    cli-truncate "^5.2.0"
+    eventemitter3 "^5.0.4"
     log-update "^6.1.0"
     rfdc "^1.4.1"
-    wrap-ansi "^9.0.0"
+    wrap-ansi "^10.0.0"
 
-lmdb@3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-3.5.1.tgz#36b41ad6f20cba355c7e9ddced54ac9e1418acf3"
-  integrity sha512-NYHA0MRPjvNX+vSw8Xxg6FLKxzAG+e7Pt8RqAQA/EehzHVXq9SxDqJIN3JL1hK0dweb884y8kIh6rkWvPyg9Wg==
+lmdb@3.5.6:
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-3.5.6.tgz#c45d2d40f65f91770d45dccbba8dba7f422a5388"
+  integrity sha512-j3uE8ReKNyUWDjhfEFSJqE/1DLtfTR5Z8yFzVHvBjAk37wNg7HdScjcv8ttPHRvrdgPQMPWxFFI0SsdBzI5lBw==
   dependencies:
     "@harperfast/extended-iterable" "^1.0.3"
     msgpackr "^1.11.2"
@@ -3895,13 +3402,13 @@ lmdb@3.5.1:
     ordered-binary "^1.5.3"
     weak-lru-cache "^1.2.2"
   optionalDependencies:
-    "@lmdb/lmdb-darwin-arm64" "3.5.1"
-    "@lmdb/lmdb-darwin-x64" "3.5.1"
-    "@lmdb/lmdb-linux-arm" "3.5.1"
-    "@lmdb/lmdb-linux-arm64" "3.5.1"
-    "@lmdb/lmdb-linux-x64" "3.5.1"
-    "@lmdb/lmdb-win32-arm64" "3.5.1"
-    "@lmdb/lmdb-win32-x64" "3.5.1"
+    "@lmdb/lmdb-darwin-arm64" "3.5.6"
+    "@lmdb/lmdb-darwin-x64" "3.5.6"
+    "@lmdb/lmdb-linux-arm" "3.5.6"
+    "@lmdb/lmdb-linux-arm64" "3.5.6"
+    "@lmdb/lmdb-linux-x64" "3.5.6"
+    "@lmdb/lmdb-win32-arm64" "3.5.6"
+    "@lmdb/lmdb-win32-x64" "3.5.6"
 
 locate-path@^6.0.0:
   version "6.0.0"
@@ -3910,11 +3417,6 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash.merge@^4.6.2:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
-  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
-
 log-symbols@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-7.0.1.tgz#f52e68037d96f589fc572ff2193dc424d48c195b"
@@ -3934,43 +3436,18 @@ log-update@^6.1.0:
     strip-ansi "^7.1.0"
     wrap-ansi "^9.0.0"
 
-lru-cache@^11.0.0, lru-cache@^11.1.0, lru-cache@^11.2.1:
-  version "11.3.6"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-11.3.6.tgz#f0306ad6e9f0a5dc25b16aeba4e8f57b7ec2df55"
-  integrity sha512-Gf/KoL3C/MlI7Bt0PGI9I+TeTC/I6r/csU58N4BSNc4lppLBeKsOdFYkK+dX0ABDUMJNfCHTyPpzwwO21Awd3A==
+lru-cache@^11.0.0, lru-cache@^11.1.0:
+  version "11.5.2"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-11.5.2.tgz#00e16665c90c620fba14a3c368732a976493f760"
+  integrity sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==
 
-lru-cache@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
-  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
-  dependencies:
-    yallist "^3.0.2"
-
-magic-string@0.30.21:
-  version "0.30.21"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.21.tgz#56763ec09a0fa8091df27879fd94d19078c00d91"
-  integrity sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==
+magic-string@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-1.0.0.tgz#e0f1c16d20b1a993d6481007f49fe1f5ca9b38ff"
+  integrity sha512-CGvjzMN08iv6w1mm4/x3Gh1hLb4VnyRUA15FFpl6CsCIGGoe36k7kY5KNz9QDbSBN5I/fWHM6ZlIkUTa5xdUEA==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.5.5"
 
-make-fetch-happen@^15.0.0, make-fetch-happen@^15.0.1, make-fetch-happen@^15.0.4:
-  version "15.0.5"
-  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-15.0.5.tgz#b0e3dd53d487b2733e4ea232c2bebf1bd16afb03"
-  integrity sha512-uCbIa8jWWmQZt4dSnEStkVC6gdakiinAm4PiGsywIkguF0eWMdcjDz0ECYhUolFU3pFLOev9VNPCEygydXnddg==
-  dependencies:
-    "@gar/promise-retry" "^1.0.0"
-    "@npmcli/agent" "^4.0.0"
-    "@npmcli/redact" "^4.0.0"
-    cacache "^20.0.1"
-    http-cache-semantics "^4.1.1"
-    minipass "^7.0.2"
-    minipass-fetch "^5.0.0"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.4"
-    negotiator "^1.0.0"
-    proc-log "^6.0.0"
-    ssri "^13.0.0"
-
 math-intrinsics@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
@@ -3992,9 +3469,9 @@ mathjs@^15.1.1:
     typed-function "^4.2.1"
 
 media-typer@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-1.1.0.tgz#6ab74b8f2d3320f2064b2a87a38e7931ff3a5561"
-  integrity sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-1.1.1.tgz#6f035400dfe3ab9d5607bc77546ce30cc2f9c6b8"
+  integrity sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==
 
 merge-descriptors@^2.0.0:
   version "2.0.0"
@@ -4018,14 +3495,14 @@ mimic-function@^5.0.0:
   resolved "https://registry.yarnpkg.com/mimic-function/-/mimic-function-5.0.1.tgz#acbe2b3349f99b9deaca7fb70e48b83e94e67076"
   integrity sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==
 
-minimatch@^10.0.3, minimatch@^10.1.1, minimatch@^10.2.2:
-  version "10.2.5"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-10.2.5.tgz#bd48687a0be38ed2961399105600f832095861d1"
-  integrity sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==
+minimatch@^10.2.2, minimatch@^10.2.4, minimatch@^10.2.5:
+  version "10.2.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-10.2.6.tgz#fd956bbe0b77241e9f15ac5dccb1c638060968ef"
+  integrity sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==
   dependencies:
-    brace-expansion "^5.0.5"
+    brace-expansion "^5.0.8"
 
-minimatch@^3.1.2, minimatch@^3.1.5:
+minimatch@^3.1.2:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.5.tgz#580c88f8d5445f2bd6aa8f3cadefa0de79fbd69e"
   integrity sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==
@@ -4037,64 +3514,6 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
-minipass-collect@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-2.0.1.tgz#1621bc77e12258a12c60d34e2276ec5c20680863"
-  integrity sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==
-  dependencies:
-    minipass "^7.0.3"
-
-minipass-fetch@^5.0.0:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/minipass-fetch/-/minipass-fetch-5.0.2.tgz#3973a605ddfd8abb865e50d6fc634853c8239729"
-  integrity sha512-2d0q2a8eCi2IRg/IGubCNRJoYbA1+YPXAzQVRFmB45gdGZafyivnZ5YSEfo3JikbjGxOdntGFvBQGqaSMXlAFQ==
-  dependencies:
-    minipass "^7.0.3"
-    minipass-sized "^2.0.0"
-    minizlib "^3.0.1"
-  optionalDependencies:
-    iconv-lite "^0.7.2"
-
-minipass-flush@^1.0.5:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.7.tgz#145c383d5ae294b36030aa80d4e872d08bebcb73"
-  integrity sha512-TbqTz9cUwWyHS2Dy89P3ocAGUGxKjjLuR9z8w4WUTGAVgEj17/4nhgo2Du56i0Fm3Pm30g4iA8Lcqctc76jCzA==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-pipeline@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz#68472f79711c084657c067c5c6ad93cddea8214c"
-  integrity sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-sized@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/minipass-sized/-/minipass-sized-2.0.0.tgz#2228ee97e3f74f6b22ba6d1319addb7621534306"
-  integrity sha512-zSsHhto5BcUVM2m1LurnXY6M//cGhVaegT71OfOXoprxT6o780GZd792ea6FfrQkuU4usHZIUczAQMRUE2plzA==
-  dependencies:
-    minipass "^7.1.2"
-
-minipass@^3.0.0:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.3.6.tgz#7bba384db3a1520d18c9c0e5251c3444e95dd94a"
-  integrity sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==
-  dependencies:
-    yallist "^4.0.0"
-
-minipass@^7.0.2, minipass@^7.0.3, minipass@^7.0.4, minipass@^7.1.2, minipass@^7.1.3:
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.3.tgz#79389b4eb1bb2d003a9bba87d492f2bd37bdc65b"
-  integrity sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==
-
-minizlib@^3.0.1, minizlib@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-3.1.0.tgz#6ad76c3a8f10227c9b51d1c9ac8e30b27f5a251c"
-  integrity sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==
-  dependencies:
-    minipass "^7.1.2"
-
 moment@^2.30.1:
   version "2.30.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
@@ -4111,35 +3530,35 @@ ms@^2.1.1, ms@^2.1.3:
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
 msgpackr-extract@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-3.0.3.tgz#e9d87023de39ce714872f9e9504e3c1996d61012"
-  integrity sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-3.0.4.tgz#d252698947f7a1a62478d22bfb789ba48dd4c1ac"
+  integrity sha512-4kmO/MdyUIkLIvTPr8VHLil4AtoKIoniWPIEk5+CDy0xnWC84azhSFmuJ7PxZdsYtiP5kEeQsORAVIeMgxT+Hw==
   dependencies:
     node-gyp-build-optional-packages "5.2.2"
   optionalDependencies:
-    "@msgpackr-extract/msgpackr-extract-darwin-arm64" "3.0.3"
-    "@msgpackr-extract/msgpackr-extract-darwin-x64" "3.0.3"
-    "@msgpackr-extract/msgpackr-extract-linux-arm" "3.0.3"
-    "@msgpackr-extract/msgpackr-extract-linux-arm64" "3.0.3"
-    "@msgpackr-extract/msgpackr-extract-linux-x64" "3.0.3"
-    "@msgpackr-extract/msgpackr-extract-win32-x64" "3.0.3"
+    "@msgpackr-extract/msgpackr-extract-darwin-arm64" "3.0.4"
+    "@msgpackr-extract/msgpackr-extract-darwin-x64" "3.0.4"
+    "@msgpackr-extract/msgpackr-extract-linux-arm" "3.0.4"
+    "@msgpackr-extract/msgpackr-extract-linux-arm64" "3.0.4"
+    "@msgpackr-extract/msgpackr-extract-linux-x64" "3.0.4"
+    "@msgpackr-extract/msgpackr-extract-win32-x64" "3.0.4"
 
 msgpackr@^1.11.2:
-  version "1.11.12"
-  resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.11.12.tgz#52ca309b13a66f05443413794ab37bb6217a4425"
-  integrity sha512-RBdJ1Un7yGlXWajrkxcSa93nvQ0w4zBf60c0yYv7YtBelP8H2FA7XsfBbMHtXKXUMUxH7zV3Zuozh+kUQWhHvg==
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.12.1.tgz#61d48d6becf4d5c4d659b2c5260240dc2c09bd44"
+  integrity sha512-4EUH9tQHnMmEgzW/MdAP0KIfa1T9AF+htl0ffe2n5vb2EKn9y2co8ccpgWko6S52Jy1PQZKwRnx5/KkYjtd9MQ==
   optionalDependencies:
     msgpackr-extract "^3.0.2"
 
-mute-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-2.0.0.tgz#a5446fc0c512b71c83c44d908d5c7b7b4c493b2b"
-  integrity sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==
+mute-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-3.0.0.tgz#cd8014dd2acb72e1e91bb67c74f0019e620ba2d1"
+  integrity sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==
 
-nanoid@^3.3.11:
-  version "3.3.12"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.12.tgz#ab3d912e217a6d0a514f00a72a16543a28982c05"
-  integrity sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==
+nanoid@^3.3.17:
+  version "3.3.18"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.18.tgz#f66a2de1199ffde0fcf21c8a5f13106b1c081913"
+  integrity sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==
 
 natural-compare@^1.4.0:
   version "1.4.0"
@@ -4167,9 +3586,9 @@ node-addon-api@^7.0.0:
   integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==
 
 node-exports-info@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/node-exports-info/-/node-exports-info-1.6.0.tgz#1aedafb01a966059c9a5e791a94a94d93f5c2a13"
-  integrity sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/node-exports-info/-/node-exports-info-1.6.2.tgz#243a3105677d6781cd26e6a72350fd928a5cb46f"
+  integrity sha512-kXs9Go0cah0qHVV2v389IXQLdLCeE1xfFtjOAF+iobu0OIoG1pje8At2vMHyaPMiPMnG/LWP50twML21eMcAag==
   dependencies:
     array.prototype.flatmap "^1.3.3"
     es-errors "^1.3.0"
@@ -4183,94 +3602,20 @@ node-gyp-build-optional-packages@5.2.2:
   dependencies:
     detect-libc "^2.0.1"
 
-node-gyp@^12.1.0:
-  version "12.3.0"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-12.3.0.tgz#a0e0d9364779451eaf4148b6f9a7366f98000b3f"
-  integrity sha512-QNcUWM+HgJplcPzBvFBZ9VXacyGZ4+VTOb80PwWR+TlVzoHbRKULNEzpRsnaoxG3Wzr7Qh7BYxGDU3CbKib2Yg==
+node-releases@^2.0.53:
+  version "2.0.53"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.53.tgz#0fe5ad8a7935e075172f574e56f0c20f07fa41af"
+  integrity sha512-D9UOmYG3UH1V+ENW56t5QXBwJw1YEY18ruVeus89Rw+SyIgjPkCO84bRzO3uNIYosJbNwiabWVn48o3uJLjxFQ==
+
+npm-package-arg@14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-14.0.0.tgz#0e3557c2af3029a70cd25dbe330eb1f77dcbfaf1"
+  integrity sha512-69XQh3k+dtGa1p+7RaR57IuG3rCko96xr/nUfN4yDYBXbTYICiWcOpsFKLN2GtGE9cyIljE+f1exnaYt9MvM+Q==
   dependencies:
-    env-paths "^2.2.0"
-    exponential-backoff "^3.1.1"
-    graceful-fs "^4.2.6"
-    nopt "^9.0.0"
-    proc-log "^6.0.0"
+    hosted-git-info "^10.1.0"
+    proc-log "^7.0.0"
     semver "^7.3.5"
-    tar "^7.5.4"
-    tinyglobby "^0.2.12"
-    undici "^6.25.0"
-    which "^6.0.0"
-
-node-releases@^2.0.36:
-  version "2.0.38"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.38.tgz#791569b9e4424a044e12c3abfad418ed83ce9947"
-  integrity sha512-3qT/88Y3FbH/Kx4szpQQ4HzUbVrHPKTLVpVocKiLfoYvw9XSGOX2FmD2d6DrXbVYyAQTF2HeF6My8jmzx7/CRw==
-
-nopt@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-9.0.0.tgz#6bff0836b2964d24508b6b41b5a9a49c4f4a1f96"
-  integrity sha512-Zhq3a+yFKrYwSBluL4H9XP3m3y5uvQkB/09CwDruCiRmR/UJYnn9W4R48ry0uGC70aeTPKLynBtscP9efFFcPw==
-  dependencies:
-    abbrev "^4.0.0"
-
-npm-bundled@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-5.0.0.tgz#5025d847cfd06c7b8d9432df01695d0133d9ee80"
-  integrity sha512-JLSpbzh6UUXIEoqPsYBvVNVmyrjVZ1fzEFbqxKkTJQkWBO3xFzFT+KDnSKQWwOQNbuWRwt5LSD6HOTLGIWzfrw==
-  dependencies:
-    npm-normalize-package-bin "^5.0.0"
-
-npm-install-checks@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/npm-install-checks/-/npm-install-checks-8.0.0.tgz#f5d18e909bb8318d85093e9d8f36ac427c1cbe30"
-  integrity sha512-ScAUdMpyzkbpxoNekQ3tNRdFI8SJ86wgKZSQZdUxT+bj0wVFpsEMWnkXP0twVe1gJyNF5apBWDJhhIbgrIViRA==
-  dependencies:
-    semver "^7.1.1"
-
-npm-normalize-package-bin@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-5.0.0.tgz#2b207ff260f2e525ddce93356614e2f736728f89"
-  integrity sha512-CJi3OS4JLsNMmr2u07OJlhcrPxCeOeP/4xq67aWNai6TNWWbTrlNDgl8NcFKVlcBKp18GPj+EzbNIgrBfZhsag==
-
-npm-package-arg@13.0.2, npm-package-arg@^13.0.0:
-  version "13.0.2"
-  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-13.0.2.tgz#72a80f2afe8329860e63854489415e9e9a2f78a7"
-  integrity sha512-IciCE3SY3uE84Ld8WZU23gAPPV9rIYod4F+rc+vJ7h7cwAJt9Vk6TVsK60ry7Uj3SRS3bqRRIGuTp9YVlk6WNA==
-  dependencies:
-    hosted-git-info "^9.0.0"
-    proc-log "^6.0.0"
-    semver "^7.3.5"
-    validate-npm-package-name "^7.0.0"
-
-npm-packlist@^10.0.1:
-  version "10.0.4"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-10.0.4.tgz#aa2e0e4daf910eae8c5745c2645cf8bb8813de01"
-  integrity sha512-uMW73iajD8hiH4ZBxEV3HC+eTnppIqwakjOYuvgddnalIw2lJguKviK1pcUJDlIWm1wSJkchpDZDSVVsZEYRng==
-  dependencies:
-    ignore-walk "^8.0.0"
-    proc-log "^6.0.0"
-
-npm-pick-manifest@^11.0.1:
-  version "11.0.3"
-  resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-11.0.3.tgz#76cf6593a351849006c36b38a7326798e2a76d13"
-  integrity sha512-buzyCfeoGY/PxKqmBqn1IUJrZnUi1VVJTdSSRPGI60tJdUhUoSQFhs0zycJokDdOznQentgrpf8LayEHyyYlqQ==
-  dependencies:
-    npm-install-checks "^8.0.0"
-    npm-normalize-package-bin "^5.0.0"
-    npm-package-arg "^13.0.0"
-    semver "^7.3.5"
-
-npm-registry-fetch@^19.0.0:
-  version "19.1.1"
-  resolved "https://registry.yarnpkg.com/npm-registry-fetch/-/npm-registry-fetch-19.1.1.tgz#51e96d21f409a9bc4f96af218a8603e884459024"
-  integrity sha512-TakBap6OM1w0H73VZVDf44iFXsOS3h+L4wVMXmbWOQroZgFhMch0juN6XSzBNlD965yIKvWg2dfu7NSiaYLxtw==
-  dependencies:
-    "@npmcli/redact" "^4.0.0"
-    jsonparse "^1.3.1"
-    make-fetch-happen "^15.0.0"
-    minipass "^7.0.2"
-    minipass-fetch "^5.0.0"
-    minizlib "^3.0.1"
-    npm-package-arg "^13.0.0"
-    proc-log "^6.0.0"
+    validate-npm-package-name "^8.0.0"
 
 nth-check@^2.1.1:
   version "2.1.1"
@@ -4345,6 +3690,11 @@ object.values@^1.2.1:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
+obug@^2.1.1:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/obug/-/obug-2.1.4.tgz#9090d8a548a522517915d2aa6aae907197ac6cf8"
+  integrity sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==
+
 on-finished@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
@@ -4378,10 +3728,10 @@ optionator@^0.9.3:
     type-check "^0.4.0"
     word-wrap "^1.2.5"
 
-ora@9.3.0:
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-9.3.0.tgz#187c87cc1062350f549f481de32bf91424c2b0e3"
-  integrity sha512-lBX72MWFduWEf7v7uWf5DHp9Jn5BI8bNPGuFgtXMmr2uDz2Gz2749y3am3agSDdkhHPHYmmxEGSKH85ZLGzgXw==
+ora@9.4.1:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-9.4.1.tgz#ba7644f3c7c92a8f830fbc48ca770b9eaf4bc55c"
+  integrity sha512-6VlU9MLXbjVQD04AZCMX28hVtA5bUoadvUqO76MUCVA0ilwJbMiHsITRPfyVm6p/BC0Av/BXMujx39WCe1LEqw==
   dependencies:
     chalk "^5.6.2"
     cli-cursor "^5.0.0"
@@ -4389,7 +3739,7 @@ ora@9.3.0:
     is-interactive "^2.0.0"
     is-unicode-supported "^2.1.0"
     log-symbols "^7.0.1"
-    stdin-discarder "^0.3.1"
+    stdin-discarder "^0.3.2"
     string-width "^8.1.0"
 
 ordered-binary@^1.5.3:
@@ -4398,14 +3748,43 @@ ordered-binary@^1.5.3:
   integrity sha512-QkCdPooczexPLiXIrbVOPYkR3VO3T6v2OyKRkR1Xbhpy7/LAVXwahnRCgRp78Oe/Ehf0C/HATAxfSr6eA1oX+w==
 
 own-keys@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
-  integrity sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.2.tgz#31448ec1f781ecb1447f6f6aa0d6534222af59de"
+  integrity sha512-19YVAg7T+WTrxggPukVq7DjTv6+PJ867TmhCvBsYwmbFCsZd344rq2Ld1p0wo8f8Qrrhgp82c6FJRqdXWtSEhg==
   dependencies:
-    get-intrinsic "^1.2.6"
+    call-bound "^1.0.4"
+    get-intrinsic "^1.3.0"
     object-keys "^1.1.1"
     safe-push-apply "^1.0.0"
 
+oxc-parser@0.142.0:
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/oxc-parser/-/oxc-parser-0.142.0.tgz#be0421d3e08eed60b56f280b6f57a7d123b51ef8"
+  integrity sha512-kKR+jPiRJYJDexVoziIg/FVGvr1fT1FZSSJOk6tVoMKKSlsf1Cso+cgGCJkOEDWOP174vRntCPFKg+AS7InWvw==
+  dependencies:
+    "@oxc-project/types" "^0.142.0"
+  optionalDependencies:
+    "@oxc-parser/binding-android-arm-eabi" "0.142.0"
+    "@oxc-parser/binding-android-arm64" "0.142.0"
+    "@oxc-parser/binding-darwin-arm64" "0.142.0"
+    "@oxc-parser/binding-darwin-x64" "0.142.0"
+    "@oxc-parser/binding-freebsd-x64" "0.142.0"
+    "@oxc-parser/binding-linux-arm-gnueabihf" "0.142.0"
+    "@oxc-parser/binding-linux-arm-musleabihf" "0.142.0"
+    "@oxc-parser/binding-linux-arm64-gnu" "0.142.0"
+    "@oxc-parser/binding-linux-arm64-musl" "0.142.0"
+    "@oxc-parser/binding-linux-ppc64-gnu" "0.142.0"
+    "@oxc-parser/binding-linux-riscv64-gnu" "0.142.0"
+    "@oxc-parser/binding-linux-riscv64-musl" "0.142.0"
+    "@oxc-parser/binding-linux-s390x-gnu" "0.142.0"
+    "@oxc-parser/binding-linux-x64-gnu" "0.142.0"
+    "@oxc-parser/binding-linux-x64-musl" "0.142.0"
+    "@oxc-parser/binding-openharmony-arm64" "0.142.0"
+    "@oxc-parser/binding-wasm32-wasi" "0.142.0"
+    "@oxc-parser/binding-win32-arm64-msvc" "0.142.0"
+    "@oxc-parser/binding-win32-ia32-msvc" "0.142.0"
+    "@oxc-parser/binding-win32-x64-msvc" "0.142.0"
+
 p-limit@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
@@ -4420,52 +3799,17 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
-p-map@^7.0.2:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-7.0.4.tgz#b81814255f542e252d5729dca4d66e5ec14935b8"
-  integrity sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==
-
-pacote@21.3.1:
-  version "21.3.1"
-  resolved "https://registry.yarnpkg.com/pacote/-/pacote-21.3.1.tgz#a46ce2432c2bd2581594e24ab7f5a86027fe4528"
-  integrity sha512-O0EDXi85LF4AzdjG74GUwEArhdvawi/YOHcsW6IijKNj7wm8IvEWNF5GnfuxNpQ/ZpO3L37+v8hqdVh8GgWYhg==
-  dependencies:
-    "@npmcli/git" "^7.0.0"
-    "@npmcli/installed-package-contents" "^4.0.0"
-    "@npmcli/package-json" "^7.0.0"
-    "@npmcli/promise-spawn" "^9.0.0"
-    "@npmcli/run-script" "^10.0.0"
-    cacache "^20.0.0"
-    fs-minipass "^3.0.0"
-    minipass "^7.0.2"
-    npm-package-arg "^13.0.0"
-    npm-packlist "^10.0.1"
-    npm-pick-manifest "^11.0.1"
-    npm-registry-fetch "^19.0.0"
-    proc-log "^6.0.0"
-    promise-retry "^2.0.1"
-    sigstore "^4.0.0"
-    ssri "^13.0.0"
-    tar "^7.4.3"
-
 pako@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
-  integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-2.2.0.tgz#246b9d4c841a8d308e484c0d03786651b143e63a"
+  integrity sha512-zJq6RP/5q+TO2OpFV3FHzlPnFjmkb7Nc99a5SNjJE+uu/PkpChs+NIZSSzbBoD+6kjiISXjfYdwj1ZRQ81dz/w==
 
-parent-module@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
-  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+parse5-html-rewriting-stream@8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/parse5-html-rewriting-stream/-/parse5-html-rewriting-stream-8.0.1.tgz#4472a20f2ce1d70022763b49a40b8da7d3d52cb9"
+  integrity sha512-NaRku2aMpUN1Sh1Gyk1KWUh2A7EJx2c6qYzvwsPtqhoHoaURshdrceYK3LunVCm3WHhm6FS7Vcczbvdh3/UIVw==
   dependencies:
-    callsites "^3.0.0"
-
-parse5-html-rewriting-stream@8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/parse5-html-rewriting-stream/-/parse5-html-rewriting-stream-8.0.0.tgz#3f442e5b5811a5456e2a56b68ea44ef153b44d92"
-  integrity sha512-wzh11mj8KKkno1pZEu+l2EVeWsuKDfR5KNWZOTsslfUX8lPDZx77m9T0kIoAVkFtD1nx6YF8oh4BnPHvxMtNMw==
-  dependencies:
-    entities "^6.0.0"
+    entities "^8.0.0"
     parse5 "^8.0.0"
     parse5-sax-parser "^8.0.0"
 
@@ -4503,14 +3847,6 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-scurry@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-2.0.2.tgz#6be0d0ee02a10d9e0de7a98bae65e182c9061f85"
-  integrity sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==
-  dependencies:
-    lru-cache "^11.0.0"
-    minipass "^7.1.2"
-
 path-to-regexp@^8.0.0:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-8.4.2.tgz#795c420c4f7ca45c5b887366f622ee0c9852cccd"
@@ -4526,15 +3862,15 @@ picocolors@^1.1.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
-picomatch@4.0.4, picomatch@^4.0.3, picomatch@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.4.tgz#fd6f5e00a143086e074dffe4c924b8fb293b0589"
-  integrity sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==
+picomatch@4.0.5, picomatch@^4.0.4, picomatch@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.5.tgz#51ea57a17d86f605f81039595fbc40ed06a55fab"
+  integrity sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==
 
-piscina@5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/piscina/-/piscina-5.1.4.tgz#86ca2b8e42bcbfc258dc7b09d918ee04b2327a67"
-  integrity sha512-7uU4ZnKeQq22t9AsmHGD2w4OYQGonwFnTypDypaWi7Qr2EvQIFVtG8J5D/3bE7W123Wdc9+v4CZDu5hJXVCtBg==
+piscina@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/piscina/-/piscina-5.2.0.tgz#3a9a568ab9e3a0556b5c94522ba305962de13e3b"
+  integrity sha512-DszUCKeVN/5G5QKo6jAVHL8fmKnkJvQ0ACiVgY7YGCq3TUB2oznAOayvZPIAdEThvhczkXR+qm3IHsNXpFCYfA==
   optionalDependencies:
     "@napi-rs/nice" "^1.0.4"
 
@@ -4543,7 +3879,7 @@ pkce-challenge@^5.0.0:
   resolved "https://registry.yarnpkg.com/pkce-challenge/-/pkce-challenge-5.0.1.tgz#3b4446865b17b1745e9ace2016a31f48ddf6230d"
   integrity sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==
 
-possible-typed-array-names@^1.0.0:
+possible-typed-array-names@^1.0.0, possible-typed-array-names@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz#93e3582bc0e5426586d9d07b79ee40fc841de4ae"
   integrity sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==
@@ -4558,12 +3894,12 @@ postcss-safe-parser@^7.0.1:
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz#36e4f7e608111a0ca940fd9712ce034718c40ec0"
   integrity sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==
 
-postcss@^8.4.49, postcss@^8.5.6:
-  version "8.5.14"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.14.tgz#a66c2d7808fadf69ebb5b84a03f8bafd76c4919c"
-  integrity sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==
+postcss@^8.4.49, postcss@^8.5.17:
+  version "8.5.26"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.26.tgz#6e75135780c7e10df3433bf2266c552d35c8c620"
+  integrity sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==
   dependencies:
-    nanoid "^3.3.11"
+    nanoid "^3.3.17"
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
@@ -4572,23 +3908,15 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@^3.8.1:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.8.3.tgz#560f2de55bf01b4c0503bc629d5df99b9a1d09b0"
-  integrity sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==
+prettier@^3.9.6:
+  version "3.9.6"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.9.6.tgz#b3ea5146515d40fc53f18aa63f74dfab1e10dbf6"
+  integrity sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==
 
-proc-log@^6.0.0, proc-log@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/proc-log/-/proc-log-6.1.0.tgz#18519482a37d5198e231133a70144a50f21f0215"
-  integrity sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==
-
-promise-retry@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/promise-retry/-/promise-retry-2.0.1.tgz#ff747a13620ab57ba688f5fc67855410c370da22"
-  integrity sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==
-  dependencies:
-    err-code "^2.0.2"
-    retry "^0.12.0"
+proc-log@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/proc-log/-/proc-log-7.0.0.tgz#46c9cc943ed4127272b49b34faa8855b44e3a976"
+  integrity sha512-FYgfaA69XZ93zaXLoMNQ+ViDXGGBgR8aLh03txzcFhV+9xOXx7+8DLCULrKKpR9+GsH9ZfHm82aSUPpozX0Ztg==
 
 proxy-addr@^2.0.7:
   version "2.0.7"
@@ -4598,17 +3926,23 @@ proxy-addr@^2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-agent-negotiate@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-agent-negotiate/-/proxy-agent-negotiate-1.1.0.tgz#de7d37aede9d71e74346125d6f484fac8092b615"
+  integrity sha512-N8IBcM3UgCVzz2L2Lqv8DVntDnnC8/hiV4nEDUPkqq72TPUgYWjQc+bdZlBPZK9LzPAvOY//gAt0S0DApoOXWQ==
+
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
-qs@^6.14.0, qs@^6.14.1:
-  version "6.15.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.15.1.tgz#bdb55aed06bfac257a90c44a446a73fba5575c8f"
-  integrity sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==
+qs@^6.14.0, qs@^6.15.2:
+  version "6.15.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.15.3.tgz#76852132a58ed5c7c0ef67e4441b9bb5d6061b3b"
+  integrity sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==
   dependencies:
-    side-channel "^1.1.0"
+    es-define-property "^1.0.1"
+    side-channel "^1.1.1"
 
 raf@^3.4.1:
   version "3.4.1"
@@ -4618,11 +3952,11 @@ raf@^3.4.1:
     performance-now "^2.1.0"
 
 range-parser@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
-  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.3.0.tgz#d7f19be812bb62721472b45d3be219ef09572b47"
+  integrity sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==
 
-raw-body@^3.0.0, raw-body@^3.0.1:
+raw-body@^3.0.0, raw-body@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-3.0.2.tgz#3e3ada5ae5568f9095d84376fd3a49b8fb000a51"
   integrity sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==
@@ -4632,22 +3966,17 @@ raw-body@^3.0.0, raw-body@^3.0.1:
     iconv-lite "~0.7.0"
     unpipe "~1.0.0"
 
-readdirp@^4.0.1:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-4.1.2.tgz#eb85801435fbf2a7ee58f19e0921b068fc69948d"
-  integrity sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==
-
 readdirp@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-5.0.0.tgz#fbf1f71a727891d685bb1786f9ba74084f6e2f91"
-  integrity sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-5.1.1.tgz#520bca06f9d1ae1b96cc0800dbe84b983d19422c"
+  integrity sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==
 
 reflect-metadata@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.2.2.tgz#400c845b6cba87a21f2c65c4aeb158f4fa4d9c5b"
   integrity sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==
 
-reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
+reflect.getprototypeof@^1.0.10, reflect.getprototypeof@^1.0.9:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"
   integrity sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==
@@ -4683,18 +4012,13 @@ require-from-string@^2.0.2:
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
   integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
 
-resolve-from@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
-  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
-
 resolve@^2.0.0-next.6:
-  version "2.0.0-next.6"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.6.tgz#b3961812be69ace7b3bc35d5bf259434681294af"
-  integrity sha512-3JmVl5hMGtJ3kMmB3zi3DL25KfkCEyy3Tw7Gmw7z5w8M9WlwoPFnIvwChzu1+cF3iaK3sp18hhPz8ANeimdJfA==
+  version "2.0.0-next.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.7.tgz#ba3b035d4b1ee7c522426eee73cabcb0fd5515dd"
+  integrity sha512-tqt+NBWwyaMgw3zDsnygx4CByWjQEJHOPMdslYhppaQSJUtL/D4JO9CcBBlhPoI8lz9oJIDXkwXfhF4aWqP8xQ==
   dependencies:
     es-errors "^1.3.0"
-    is-core-module "^2.16.1"
+    is-core-module "^2.16.2"
     node-exports-info "^1.6.0"
     object-keys "^1.1.1"
     path-parse "^1.0.7"
@@ -4708,11 +4032,6 @@ restore-cursor@^5.0.0:
     onetime "^7.0.0"
     signal-exit "^4.1.0"
 
-retry@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
-  integrity sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==
-
 rfdc@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
@@ -4723,61 +4042,53 @@ rgbcolor@^1.0.1:
   resolved "https://registry.yarnpkg.com/rgbcolor/-/rgbcolor-1.0.1.tgz#d6505ecdb304a6595da26fa4b43307306775945d"
   integrity sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==
 
-rolldown@1.0.0-rc.4:
-  version "1.0.0-rc.4"
-  resolved "https://registry.yarnpkg.com/rolldown/-/rolldown-1.0.0-rc.4.tgz#c22246260ab3da62caa209556e26d81fe516cf10"
-  integrity sha512-V2tPDUrY3WSevrvU2E41ijZlpF+5PbZu4giH+VpNraaadsJGHa4fR6IFwsocVwEXDoAdIv5qgPPxgrvKAOIPtA==
+rolldown@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/rolldown/-/rolldown-1.2.0.tgz#02157b8547dd99917da192375c0d4f9357d89830"
+  integrity sha512-u7tgm5l4Yw1iTqUL4EcYOAt7fFvCgQMLeidrnD4GALlC6aOznCjezYajgxeyKw27u0Q5N7fwgCzjVyPIWzwuBA==
   dependencies:
-    "@oxc-project/types" "=0.113.0"
-    "@rolldown/pluginutils" "1.0.0-rc.4"
+    "@oxc-project/types" "=0.140.0"
+    "@rolldown/pluginutils" "^1.0.0"
   optionalDependencies:
-    "@rolldown/binding-android-arm64" "1.0.0-rc.4"
-    "@rolldown/binding-darwin-arm64" "1.0.0-rc.4"
-    "@rolldown/binding-darwin-x64" "1.0.0-rc.4"
-    "@rolldown/binding-freebsd-x64" "1.0.0-rc.4"
-    "@rolldown/binding-linux-arm-gnueabihf" "1.0.0-rc.4"
-    "@rolldown/binding-linux-arm64-gnu" "1.0.0-rc.4"
-    "@rolldown/binding-linux-arm64-musl" "1.0.0-rc.4"
-    "@rolldown/binding-linux-x64-gnu" "1.0.0-rc.4"
-    "@rolldown/binding-linux-x64-musl" "1.0.0-rc.4"
-    "@rolldown/binding-openharmony-arm64" "1.0.0-rc.4"
-    "@rolldown/binding-wasm32-wasi" "1.0.0-rc.4"
-    "@rolldown/binding-win32-arm64-msvc" "1.0.0-rc.4"
-    "@rolldown/binding-win32-x64-msvc" "1.0.0-rc.4"
+    "@rolldown/binding-android-arm64" "1.2.0"
+    "@rolldown/binding-darwin-arm64" "1.2.0"
+    "@rolldown/binding-darwin-x64" "1.2.0"
+    "@rolldown/binding-freebsd-x64" "1.2.0"
+    "@rolldown/binding-linux-arm-gnueabihf" "1.2.0"
+    "@rolldown/binding-linux-arm64-gnu" "1.2.0"
+    "@rolldown/binding-linux-arm64-musl" "1.2.0"
+    "@rolldown/binding-linux-ppc64-gnu" "1.2.0"
+    "@rolldown/binding-linux-s390x-gnu" "1.2.0"
+    "@rolldown/binding-linux-x64-gnu" "1.2.0"
+    "@rolldown/binding-linux-x64-musl" "1.2.0"
+    "@rolldown/binding-openharmony-arm64" "1.2.0"
+    "@rolldown/binding-wasm32-wasi" "1.2.0"
+    "@rolldown/binding-win32-arm64-msvc" "1.2.0"
+    "@rolldown/binding-win32-x64-msvc" "1.2.0"
 
-rollup@^4.43.0:
-  version "4.60.3"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.60.3.tgz#789258d41d090687d0ca7e80e8583d733711ddd3"
-  integrity sha512-pAQK9HalE84QSm4Po3EmWIZPd3FnjkShVkiMlz1iligWYkWQ7wHYd1PF/T7QZ5TVSD6uSTon5gBVMSM4JfBV+A==
+rolldown@~1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/rolldown/-/rolldown-1.1.5.tgz#339aae250844351fc55b74e2652d3ebd6fba389d"
+  integrity sha512-t9z29cJjXf/vxQ8dyhCSpt6H6aSwHTk8cT5I3iy6SMXuFpk5mB6PL6XfC8PCwrPTx93udwKUm9HRteAlTGBLiA==
   dependencies:
-    "@types/estree" "1.0.8"
+    "@oxc-project/types" "=0.139.0"
+    "@rolldown/pluginutils" "^1.0.0"
   optionalDependencies:
-    "@rollup/rollup-android-arm-eabi" "4.60.3"
-    "@rollup/rollup-android-arm64" "4.60.3"
-    "@rollup/rollup-darwin-arm64" "4.60.3"
-    "@rollup/rollup-darwin-x64" "4.60.3"
-    "@rollup/rollup-freebsd-arm64" "4.60.3"
-    "@rollup/rollup-freebsd-x64" "4.60.3"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.60.3"
-    "@rollup/rollup-linux-arm-musleabihf" "4.60.3"
-    "@rollup/rollup-linux-arm64-gnu" "4.60.3"
-    "@rollup/rollup-linux-arm64-musl" "4.60.3"
-    "@rollup/rollup-linux-loong64-gnu" "4.60.3"
-    "@rollup/rollup-linux-loong64-musl" "4.60.3"
-    "@rollup/rollup-linux-ppc64-gnu" "4.60.3"
-    "@rollup/rollup-linux-ppc64-musl" "4.60.3"
-    "@rollup/rollup-linux-riscv64-gnu" "4.60.3"
-    "@rollup/rollup-linux-riscv64-musl" "4.60.3"
-    "@rollup/rollup-linux-s390x-gnu" "4.60.3"
-    "@rollup/rollup-linux-x64-gnu" "4.60.3"
-    "@rollup/rollup-linux-x64-musl" "4.60.3"
-    "@rollup/rollup-openbsd-x64" "4.60.3"
-    "@rollup/rollup-openharmony-arm64" "4.60.3"
-    "@rollup/rollup-win32-arm64-msvc" "4.60.3"
-    "@rollup/rollup-win32-ia32-msvc" "4.60.3"
-    "@rollup/rollup-win32-x64-gnu" "4.60.3"
-    "@rollup/rollup-win32-x64-msvc" "4.60.3"
-    fsevents "~2.3.2"
+    "@rolldown/binding-android-arm64" "1.1.5"
+    "@rolldown/binding-darwin-arm64" "1.1.5"
+    "@rolldown/binding-darwin-x64" "1.1.5"
+    "@rolldown/binding-freebsd-x64" "1.1.5"
+    "@rolldown/binding-linux-arm-gnueabihf" "1.1.5"
+    "@rolldown/binding-linux-arm64-gnu" "1.1.5"
+    "@rolldown/binding-linux-arm64-musl" "1.1.5"
+    "@rolldown/binding-linux-ppc64-gnu" "1.1.5"
+    "@rolldown/binding-linux-s390x-gnu" "1.1.5"
+    "@rolldown/binding-linux-x64-gnu" "1.1.5"
+    "@rolldown/binding-linux-x64-musl" "1.1.5"
+    "@rolldown/binding-openharmony-arm64" "1.1.5"
+    "@rolldown/binding-wasm32-wasi" "1.1.5"
+    "@rolldown/binding-win32-arm64-msvc" "1.1.5"
+    "@rolldown/binding-win32-x64-msvc" "1.1.5"
 
 router@^2.2.0:
   version "2.2.0"
@@ -4830,13 +4141,13 @@ safe-regex-test@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sass@1.97.3:
-  version "1.97.3"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.97.3.tgz#9cb59339514fa7e2aec592b9700953ac6e331ab2"
-  integrity sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==
+sass@1.101.0:
+  version "1.101.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.101.0.tgz#c2db5bbf2f956be7277f6223b899d0d4be3c899b"
+  integrity sha512-OL3GoQyoUdDt843DpVmDO6y2k1sc5IhUDSpu8XucEI+35neq5QivZ1iuegnpraEVTJXlQGK1gl27zKcTLEPbQw==
   dependencies:
-    chokidar "^4.0.0"
-    immutable "^5.0.2"
+    chokidar "^5.0.0"
+    immutable "^5.1.5"
     source-map-js ">=0.6.2 <2.0.0"
   optionalDependencies:
     "@parcel/watcher" "^2.4.1"
@@ -4846,10 +4157,10 @@ seedrandom@^3.0.5:
   resolved "https://registry.yarnpkg.com/seedrandom/-/seedrandom-3.0.5.tgz#54edc85c95222525b0c7a6f6b3543d8e0b3aa0a7"
   integrity sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==
 
-semver@7.7.4, semver@^7.0.0, semver@^7.1.1, semver@^7.3.5, semver@^7.5.3, semver@^7.5.4, semver@^7.7.3:
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.4.tgz#28464e36060e991fa7a11d0279d2d3f3b57a7e8a"
-  integrity sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==
+semver@7.8.5, semver@^7.0.0, semver@^7.3.5, semver@^7.7.3:
+  version "7.8.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.8.5.tgz#39b646037dd50c14fb451e7e4cac58ed8b863f69"
+  integrity sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==
 
 semver@^6.3.1:
   version "6.3.1"
@@ -4931,7 +4242,7 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-side-channel-list@^1.0.0:
+side-channel-list@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.1.tgz#c2e0b5a14a540aebee3bbc6c3f8666cc9b509127"
   integrity sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==
@@ -4960,14 +4271,14 @@ side-channel-weakmap@^1.0.2:
     object-inspect "^1.13.3"
     side-channel-map "^1.0.1"
 
-side-channel@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
-  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+side-channel@^1.1.0, side-channel@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.1.tgz#ea02c62e05dc4bea67d4442f0fb71ee192f8e0ab"
+  integrity sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==
   dependencies:
     es-errors "^1.3.0"
-    object-inspect "^1.13.3"
-    side-channel-list "^1.0.0"
+    object-inspect "^1.13.4"
+    side-channel-list "^1.0.1"
     side-channel-map "^1.0.1"
     side-channel-weakmap "^1.0.2"
 
@@ -4976,18 +4287,6 @@ signal-exit@^4.1.0:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
-sigstore@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/sigstore/-/sigstore-4.1.0.tgz#d34b92a544a05e003a2430209d26d8dfafd805a0"
-  integrity sha512-/fUgUhYghuLzVT/gaJoeVehLCgZiUxPCPMcyVNY0lIf/cTCz58K/WTI7PefDarXxp9nUKpEwg1yyz3eSBMTtgA==
-  dependencies:
-    "@sigstore/bundle" "^4.0.0"
-    "@sigstore/core" "^3.1.0"
-    "@sigstore/protobuf-specs" "^0.5.0"
-    "@sigstore/sign" "^4.1.0"
-    "@sigstore/tuf" "^4.0.1"
-    "@sigstore/verify" "^3.1.0"
-
 slice-ansi@^7.1.0:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-7.1.2.tgz#adf7be70aa6d72162d907cd0e6d5c11f507b5403"
@@ -5004,28 +4303,6 @@ slice-ansi@^8.0.0:
     ansi-styles "^6.2.3"
     is-fullwidth-code-point "^5.1.0"
 
-smart-buffer@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
-  integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
-
-socks-proxy-agent@^8.0.3:
-  version "8.0.5"
-  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz#b9cdb4e7e998509d7659d689ce7697ac21645bee"
-  integrity sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==
-  dependencies:
-    agent-base "^7.1.2"
-    debug "^4.3.4"
-    socks "^2.8.3"
-
-socks@^2.8.3:
-  version "2.8.8"
-  resolved "https://registry.yarnpkg.com/socks/-/socks-2.8.8.tgz#23bef6d02748eac847ad75610deb6c472554c67a"
-  integrity sha512-NlGELfPrgX2f1TAAcz0WawlLn+0r3FyhhCRpFFK2CemXenPYvzMWWZINv3eDNo9ucdwme7oCHRY0Jnbs4aIkog==
-  dependencies:
-    ip-address "^10.1.1"
-    smart-buffer "^4.2.0"
-
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
@@ -5049,31 +4326,6 @@ source-map@^0.6.0:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-spdx-exceptions@^2.1.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz#5d607d27fc806f66d7b64a766650fa890f04ed66"
-  integrity sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==
-
-spdx-expression-parse@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-4.0.0.tgz#a23af9f3132115465dac215c099303e4ceac5794"
-  integrity sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==
-  dependencies:
-    spdx-exceptions "^2.1.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-license-ids@^3.0.0:
-  version "3.0.23"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.23.tgz#b069e687b1291a32f126893ed76a27a745ee2133"
-  integrity sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw==
-
-ssri@^13.0.0:
-  version "13.0.1"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-13.0.1.tgz#2d8946614d33f4d0c84946bb370dce7a9379fd18"
-  integrity sha512-QUiRf1+u9wPTL/76GTYlKttDEBWV1ga9ZXW8BG6kfdeyyM8LGPix9gROyg9V2+P0xNyF3X2Go526xKFdMZrHSQ==
-  dependencies:
-    minipass "^7.0.3"
-
 stackblur-canvas@^2.0.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz#af931277d0b5096df55e1f91c530043e066989b6"
@@ -5084,7 +4336,7 @@ statuses@^2.0.1, statuses@^2.0.2, statuses@~2.0.2:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.2.tgz#8f75eecef765b5e1cfcdc080da59409ed424e382"
   integrity sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==
 
-stdin-discarder@^0.3.1:
+stdin-discarder@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/stdin-discarder/-/stdin-discarder-0.3.2.tgz#998ab3b9a988661e6036a9bfdc96f43649e8e83e"
   integrity sha512-eCPu1qRxPVkl5605OTWF8Wz40b4Mf45NY5LQmVPQ599knfs5QhASUm9GbJ5BDMDOXgrnh0wyEdvzmL//YMlw0A==
@@ -5102,15 +4354,6 @@ string-argv@^0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-string-width@^4.1.0:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^7.0.0, string-width@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-7.2.0.tgz#b5bb8e2165ce275d4d43476dd2700ad9091db6dc"
@@ -5120,36 +4363,37 @@ string-width@^7.0.0, string-width@^7.2.0:
     get-east-asian-width "^1.0.0"
     strip-ansi "^7.1.0"
 
-string-width@^8.1.0, string-width@^8.2.0:
-  version "8.2.1"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-8.2.1.tgz#165089cfa527cc88fbc23dd73313f5e334af1ea1"
-  integrity sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==
+string-width@^8.1.0, string-width@^8.2.0, string-width@^8.2.1:
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-8.2.2.tgz#7310516493df575742fe98af6fae87d85d5ed0ac"
+  integrity sha512-GaPUh5gfdrYzqeVNZvUfT23vYYxXzKYidUcnMtJg/3rxRV63EFZy3k6xfKlmfeJD0176lnUV/Usr3XcwSvFzpg==
   dependencies:
     get-east-asian-width "^1.5.0"
     strip-ansi "^7.1.2"
 
 string.prototype.trim@^1.2.10:
-  version "1.2.10"
-  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz#40b2dd5ee94c959b4dcfb1d65ce72e90da480c81"
-  integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.11.tgz#e6bd19cda3985d05a42dda31f3ddf4d35d3430e3"
+  integrity sha512-PwvK7BU+CMTJGYQCTZb5RWXIML92lftJLhQz1tBzgKiqGxJaMlBAa48POXaNAC2s4y8jr3EFqrkF9+44neS46w==
   dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.2"
+    call-bind "^1.0.9"
+    call-bound "^1.0.4"
     define-data-property "^1.1.4"
     define-properties "^1.2.1"
-    es-abstract "^1.23.5"
-    es-object-atoms "^1.0.0"
+    es-abstract "^1.24.2"
+    es-object-atoms "^1.1.2"
     has-property-descriptors "^1.0.2"
+    safe-regex-test "^1.1.0"
 
 string.prototype.trimend@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz#62e2731272cd285041b36596054e9f66569b6942"
-  integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.10.tgz#be6bcf4f3fe0460bdeccdb2cf4f971b310f8346e"
+  integrity sha512-2+3aDAOmPTmuFwjDnmJG2ctEkQKVki7vOSqaxkv42Mowj1V6PnvuwFCRrR5lChUux1TBskPjfkeTOhqczDMxTw==
   dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.2"
+    call-bind "^1.0.9"
+    call-bound "^1.0.4"
     define-properties "^1.2.1"
-    es-object-atoms "^1.0.0"
+    es-object-atoms "^1.1.2"
 
 string.prototype.trimstart@^1.0.8:
   version "1.0.8"
@@ -5160,13 +4404,6 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.1.0, strip-ansi@^7.1.2:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.2.0.tgz#d22a269522836a627af8d04b5c3fd2c7fa3e32e3"
@@ -5179,18 +4416,11 @@ strip-bom@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
 
-strip-json-comments@3.1.1, strip-json-comments@^3.1.1:
+strip-json-comments@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-supports-color@^7.1.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
-  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
-  dependencies:
-    has-flag "^4.0.0"
-
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -5201,17 +4431,6 @@ svg-pathdata@^6.0.3:
   resolved "https://registry.yarnpkg.com/svg-pathdata/-/svg-pathdata-6.0.3.tgz#80b0e0283b652ccbafb69ad4f8f73e8d3fbf2cac"
   integrity sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==
 
-tar@^7.4.3, tar@^7.5.4:
-  version "7.5.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-7.5.13.tgz#0d214ed56781a26edc313581c0e2d929ceeb866d"
-  integrity sha512-tOG/7GyXpFevhXVh8jOPJrmtRpOTsYqUIkVdVooZYJS/z8WhfQUX8RJILmeuJNinGAMSu1veBr4asSHFt5/hng==
-  dependencies:
-    "@isaacs/fs-minipass" "^4.0.0"
-    chownr "^3.0.0"
-    minipass "^7.1.2"
-    minizlib "^3.1.0"
-    yallist "^5.0.0"
-
 text-segmentation@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
@@ -5224,23 +4443,15 @@ tiny-emitter@^2.1.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
-tinyexec@^1.0.4:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-1.1.2.tgz#11feef204b706d4668ca4013db29f3bd64f5c4dc"
-  integrity sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==
+tinyexec@^1.2.4:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-1.3.0.tgz#aacc1dbb1d4e93e6ad8dd64944e09f9ad147a474"
+  integrity sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==
 
-tinyglobby@0.2.15:
-  version "0.2.15"
-  resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.15.tgz#e228dd1e638cea993d2fdb4fcd2d4602a79951c2"
-  integrity sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==
-  dependencies:
-    fdir "^6.5.0"
-    picomatch "^4.0.3"
-
-tinyglobby@^0.2.12, tinyglobby@^0.2.15:
-  version "0.2.16"
-  resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.16.tgz#1c3b7eb953fce42b226bc5a1ee06428281aff3d6"
-  integrity sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==
+tinyglobby@0.2.17, tinyglobby@^0.2.15, tinyglobby@^0.2.17:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.17.tgz#562a9a6c9eb2b3b123d39719f9af5bb44fcd7631"
+  integrity sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==
   dependencies:
     fdir "^6.5.0"
     picomatch "^4.0.4"
@@ -5270,15 +4481,6 @@ tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.6.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
 
-tuf-js@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/tuf-js/-/tuf-js-4.1.0.tgz#ae4ef9afa456fcb4af103dc50a43bc031f066603"
-  integrity sha512-50QV99kCKH5P/Vs4E2Gzp7BopNV+KzTXqWeaxrfu5IQJBOULRsTIS9seSsOVT8ZnGXzCyx55nYWAi4qJzpZKEQ==
-  dependencies:
-    "@tufjs/models" "4.1.0"
-    debug "^4.4.3"
-    make-fetch-happen "^15.0.1"
-
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -5286,12 +4488,12 @@ type-check@^0.4.0, type-check@~0.4.0:
   dependencies:
     prelude-ls "^1.2.1"
 
-type-is@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-2.0.1.tgz#64f6cf03f92fce4015c2b224793f6bdd4b068c97"
-  integrity sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==
+type-is@^2.0.1, type-is@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-2.1.0.tgz#71d1a7053293582e16ac9f3ebaf1ab9aa49e5570"
+  integrity sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==
   dependencies:
-    content-type "^1.0.5"
+    content-type "^2.0.0"
     media-typer "^1.1.0"
     mime-types "^3.0.0"
 
@@ -5329,36 +4531,36 @@ typed-array-byte-offset@^1.0.4:
     reflect.getprototypeof "^1.0.9"
 
 typed-array-length@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d"
-  integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.8.tgz#0b70e982c9e9dafe2def6d6458ff4b3f2d2b6d70"
+  integrity sha512-phPGCwqr2+Qo0fwniCE8e4pKnGu/yFb5nD5Y8bf0EEeiI5GklnACYA9GFy/DrAeRrKHXvHn+1SUsOWgJp6RO+g==
   dependencies:
-    call-bind "^1.0.7"
-    for-each "^0.3.3"
-    gopd "^1.0.1"
-    is-typed-array "^1.1.13"
-    possible-typed-array-names "^1.0.0"
-    reflect.getprototypeof "^1.0.6"
+    call-bind "^1.0.9"
+    for-each "^0.3.5"
+    gopd "^1.2.0"
+    is-typed-array "^1.1.15"
+    possible-typed-array-names "^1.1.0"
+    reflect.getprototypeof "^1.0.10"
 
 typed-function@^4.2.1:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/typed-function/-/typed-function-4.2.2.tgz#49939f58d133a40cb03bdc05d969f59e4bdc3190"
   integrity sha512-VwaXim9Gp1bngi/q3do8hgttYn2uC3MoT/gfuMWylnj1IeZBUAyPddHZlo1K05BDoj8DYPpMdiHqH1dDYdJf2A==
 
-typescript-eslint@^8.33.1:
-  version "8.59.2"
-  resolved "https://registry.yarnpkg.com/typescript-eslint/-/typescript-eslint-8.59.2.tgz#e24b4f7232e20112e40572dba162a829a738ce98"
-  integrity sha512-pJw051uomb3ZeCzGTpRb8RbEqB5Y4WWet8gl/GcTlU35BSx0PVdZ86/bqkQCyKKuraVQEK7r6kBHQXF+fBhkoQ==
+typescript-eslint@^8.67.0:
+  version "8.67.0"
+  resolved "https://registry.yarnpkg.com/typescript-eslint/-/typescript-eslint-8.67.0.tgz#1e92de09ee0ff2d96cc0848f5e9f345ea930d963"
+  integrity sha512-S2udFs8tCKEKffuJ4TB1idGUZiXdCPGi3IPBGWXarbLQ5UPXORV8QEVzJ4gCRduURMb5EkpNCdjbk0eDIuI8Yg==
   dependencies:
-    "@typescript-eslint/eslint-plugin" "8.59.2"
-    "@typescript-eslint/parser" "8.59.2"
-    "@typescript-eslint/typescript-estree" "8.59.2"
-    "@typescript-eslint/utils" "8.59.2"
+    "@typescript-eslint/eslint-plugin" "8.67.0"
+    "@typescript-eslint/parser" "8.67.0"
+    "@typescript-eslint/typescript-estree" "8.67.0"
+    "@typescript-eslint/utils" "8.67.0"
 
-typescript@~5.9.3:
-  version "5.9.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.9.3.tgz#5b4f59e15310ab17a216f5d6cf53ee476ede670f"
-  integrity sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==
+typescript@6.0.3, typescript@~6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-6.0.3.tgz#90251dc007916e972786cb94d74d15b185577d21"
+  integrity sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==
 
 unbox-primitive@^1.1.0:
   version "1.1.0"
@@ -5370,25 +4572,15 @@ unbox-primitive@^1.1.0:
     has-symbols "^1.1.0"
     which-boxed-primitive "^1.1.1"
 
-undici@7.24.4:
-  version "7.24.4"
-  resolved "https://registry.yarnpkg.com/undici/-/undici-7.24.4.tgz#873bce680d7c6354c941399fd4e8ea4563de4ea7"
-  integrity sha512-BM/JzwwaRXxrLdElV2Uo6cTLEjhSb3WXboncJamZ15NgUURmvlXvxa6xkwIOILIjPNo9i8ku136ZvWV0Uly8+w==
-
-undici@^6.25.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/undici/-/undici-6.25.0.tgz#8c4efb8c998dc187fc1cfb5dde1ef19a211849fb"
-  integrity sha512-ZgpWDC5gmNiuY9CnLVXEH8rl50xhRCuLNA97fAUnKi8RRuV4E6KG31pDTsLVUKnohJE0I3XDrTeEydAXRw47xg==
-
 unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
-update-browserslist-db@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz#64d76db58713136acbeb4c49114366cc6cc2e80d"
-  integrity sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==
+update-browserslist-db@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.3.1.tgz#a71c28dd22f505481dbc4689087b18d933e90afd"
+  integrity sha512-ZZ61DsRsOnakl74HAmp3oSN4aXUmEWXf+i/yv0h7tIBfICc3VdrFErQKUUKPgu3AMsTUMbcongALEN4l6GSUrQ==
   dependencies:
     escalade "^3.2.0"
     picocolors "^1.1.1"
@@ -5407,36 +4599,34 @@ utrie@^1.0.2:
   dependencies:
     base64-arraybuffer "^1.0.2"
 
-validate-npm-package-name@^7.0.0:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-7.0.2.tgz#e57c3d721a4c8bbff454a246e7f7da811559ea0d"
-  integrity sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==
+validate-npm-package-name@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-8.0.0.tgz#fcd22bb2a1bb4830814f5f1ad127852ab06cf6e7"
+  integrity sha512-SCv6OOV6Xj2/3cXy3dGmADluJTNcL3o7hZAglNPTe+WYuEuvxgJzxPrSDLZhF+CwyQOubqgecjMmTJGMVLWjYQ==
 
 vary@^1, vary@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
-vite@7.3.2:
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-7.3.2.tgz#cb041794d4c1395e28baea98198fd6e8f4b96b5c"
-  integrity sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==
+vite@8.1.5:
+  version "8.1.5"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-8.1.5.tgz#ccffce3ee487b1886223b24ebb27b91674827d30"
+  integrity sha512-7ULLwsCdYx/nRyrpiEwvqb5TFHrMVZyBt+rg/OAXT7rgj/z+DtTDyKFeLAdDkubDVDKD8jOsndmy7m55XcfUsw==
   dependencies:
-    esbuild "^0.27.0"
-    fdir "^6.5.0"
-    picomatch "^4.0.3"
-    postcss "^8.5.6"
-    rollup "^4.43.0"
-    tinyglobby "^0.2.15"
+    lightningcss "^1.32.0"
+    picomatch "^4.0.5"
+    postcss "^8.5.17"
+    rolldown "~1.1.5"
+    tinyglobby "^0.2.17"
   optionalDependencies:
     fsevents "~2.3.3"
 
-watchpack@2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.5.1.tgz#dd38b601f669e0cbf567cb802e75cead82cde102"
-  integrity sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==
+watchpack@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.5.2.tgz#e12e82d84674266fc1c6dbfe38891b92ff0522ec"
+  integrity sha512-6i/00NBjP4yGPs+caKSyRfpTF/8Torsu0MOW3mMzIbhgISFder8i7xbqgHlLMwJrdiN8ndBV3UA1/AfzPSr+jg==
   dependencies:
-    glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
 weak-lru-cache@^1.2.2:
@@ -5485,12 +4675,12 @@ which-collection@^1.0.2:
     is-weakset "^2.0.3"
 
 which-typed-array@^1.1.16, which-typed-array@^1.1.19:
-  version "1.1.20"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.20.tgz#3fdb7adfafe0ea69157b1509f3a1cd892bd1d122"
-  integrity sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==
+  version "1.1.22"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.22.tgz#8f3cc78aefb40b437346dd40a1dbfa5d1da43fe9"
+  integrity sha512-fvO4ExWMFsqyhG3AiPAObMuY1lxaqgYcxbc49CNdWDDECOJNgQyvsOWVwbZc+qf3rzRtxojBK+CMEv0Ld5CYpw==
   dependencies:
     available-typed-arrays "^1.0.7"
-    call-bind "^1.0.8"
+    call-bind "^1.0.9"
     call-bound "^1.0.4"
     for-each "^0.3.5"
     get-proto "^1.0.1"
@@ -5504,26 +4694,18 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-which@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-6.0.1.tgz#021642443a198fb93b784a5606721cb18cfcbfce"
-  integrity sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==
-  dependencies:
-    isexe "^4.0.0"
-
 word-wrap@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-wrap-ansi@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
-  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+wrap-ansi@^10.0.0:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-10.0.1.tgz#59b821b7987d36a87a367bc9517284ff974086ea"
+  integrity sha512-M0N4xzyzosiIok3svYlEo1sdLZts/8FPgYH/GPC3wvlmPoRvnoManGMrE54waYj3tISA8w6lsdesfVv67qSr8Q==
   dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
+    ansi-styles "^6.2.3"
+    string-width "^8.2.0"
 
 wrap-ansi@^9.0.0:
   version "9.0.2"
@@ -5544,40 +4726,25 @@ y18n@^5.0.5:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
-yallist@^3.0.2:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
-  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
-
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
-
-yallist@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-5.0.0.tgz#00e2de443639ed0d78fd87de0d27469fbcffb533"
-  integrity sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==
-
-yaml@^2.8.2:
-  version "2.8.4"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.4.tgz#4b5f411dd25f9544914d8673d4da7f29248e5e2e"
-  integrity sha512-ml/JPOj9fOQK8RNnWojA67GbZ0ApXAUlN2UQclwv2eVgTgn7O9gg9o7paZWKMp4g0H3nTLtS9LVzhkpOFIKzog==
+yaml@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.9.0.tgz#78274afd93598a1dfdd6130df6a566defcbf9aa4"
+  integrity sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==
 
 yargs-parser@^22.0.0:
   version "22.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-22.0.0.tgz#87b82094051b0567717346ecd00fd14804b357c8"
   integrity sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==
 
-yargs@18.0.0, yargs@^18.0.0:
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-18.0.0.tgz#6c84259806273a746b09f579087b68a3c2d25bd1"
-  integrity sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==
+yargs@18.1.0, yargs@^18.0.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-18.1.0.tgz#cd7e98c703ef51695bbbf062ed58f28e94291b56"
+  integrity sha512-2rAgRKu54VsHkqI0/tYkmluGXHD4KW7yZoycuqDQ15QOTnc2VVfy0nN/1eMhnQLO00A+dwtK20xuCnc1YGeUyg==
   dependencies:
     cliui "^9.0.1"
     escalade "^3.1.1"
     get-caller-file "^2.0.5"
-    string-width "^7.2.0"
+    string-width "^8.2.1"
     y18n "^5.0.5"
     yargs-parser "^22.0.0"
 
@@ -5586,27 +4753,17 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-yoctocolors-cjs@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/yoctocolors-cjs/-/yoctocolors-cjs-2.1.3.tgz#7e4964ea8ec422b7a40ac917d3a344cfd2304baa"
-  integrity sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==
-
 yoctocolors@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yoctocolors/-/yoctocolors-2.1.2.tgz#d795f54d173494e7d8db93150cec0ed7f678c83a"
-  integrity sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/yoctocolors/-/yoctocolors-2.2.0.tgz#c4b68ee477f3982c33e4de24a5aa4a354be506d3"
+  integrity sha512-xYqdZFUK/VYazNl/oCDYN+3WloWQwMfZxBoiNt6qNyk+xfOdi598muWE42rNZFp1kNOiqW936q5RhUdnpqElSg==
 
 zod-to-json-schema@^3.25.1:
   version "3.25.2"
   resolved "https://registry.yarnpkg.com/zod-to-json-schema/-/zod-to-json-schema-3.25.2.tgz#3fa799a7badd554541472fb65843fdc460b2e5aa"
   integrity sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==
 
-zod@4.3.6:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-4.3.6.tgz#89c56e0aa7d2b05107d894412227087885ab112a"
-  integrity sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==
-
-"zod@^3.25 || ^4.0":
+zod@4.4.3, "zod@^3.25 || ^4.0", zod@^4.0.10:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/zod/-/zod-4.4.3.tgz#b680f172885d18bbebf21a834ea25e55a1bbf356"
   integrity sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==