refactor: remove dpracted useStore

.gitignore

@@ -23,6 +23,7 @@ tsconfig.tsbuildinfo
 
 # Icon must end with two \r
 
+.claude
 
 # Thumbnails
 ._*

README.md

@@ -14,7 +14,8 @@
 ![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=fff&style=flat)
 ![Nginx](https://img.shields.io/badge/Nginx-009639?logo=nginx&logoColor=fff&style=flat)
 
-The problem solver for every household in the world: **STOCKHOME**! Have you ever spent too long searching for things in your freezer or pantry? If so, this open-source project is just the right thing for your home server!
+The problem solver for every household in the world: **STOCKHOME**! Have you ever spent too long searching for things in
+your freezer or pantry? If so, this open-source project is just the right thing for your home server!
 
 <p align="center">
   <img src="./.github/assets/Arc_Inventory.low.jpg" width="802" alt="Inventory Screenshot" />
@@ -51,7 +52,8 @@ Clone this repository by running:
 git clone --branch v0.1 --single-branch https://github.com/theis-js/stockhome.git
 ```
 
-You can replace `v0.1` with the latest release tag to get the latest version of the stack. You can also use `dev` to get the latest development version, but keep in mind that it may contain bugs and errors.
+You can replace `v0.1` with any other release tag to get your desired version of the repo. You can also use `dev` to get
+the latest development version, but keep in mind that it may contain bugs and errors.
 
 View the available version tags here: [Releases](https://github.com/theis-js/stockhome/tags)
 
@@ -64,16 +66,18 @@ In the root directory of this repository create an `.env` file and enter the fol
 ```txt
 MYSQL_ROOT_PASSWORD=
 AUTH_SIGNATURE=
-BACKEND_HOST=localhost
+BACKEND_HOST=stockhome-backend
 ```
 
-Make sure that you have set an secure root password and a secure signature.
+Make sure that you have set a secure root password and a secure signature.
 
 > **Note** These three values cannot contain special characters.
 
-The `BACKEND_HOST` can be set to the IP address of your server or to `localhost` if you are running the app on your local machine.
+The `BACKEND_HOST` can be set to the IP address of your server or to `localhost` if you are running the app on your
+local machine.
 
-> **Change Docker Config:** If you want to run the stack for example in a docker network or want to change something at the docker config, visit the [Docker docs](./.github/docs/docker/README.md) for this project.
+> **Change Docker Config:** If you want to run the stack for example in a docker network or want to change something at
+> the docker config, visit the [Docker docs](./.github/docs/docker/README.md) for this project.
 
 ### 4. Start Stockhome
 
@@ -83,7 +87,7 @@ First, navigate into the root directory of this repository and run:
 docker compose up -d --build
 ```
 
-The database and all necessary services are started and initialised automatically.
+The database and all necessary services are started and initialized automatically.
 
 ### 5. First login
 
@@ -94,31 +98,42 @@ Username: admin
 Password: admin
 ```
 
+The docker config exposes the frontend on port `80`. Therefore, you can access the web page either on
+`http://localhost`, if you hosted it on your local machine, or under the IP-Adress or hostname of your server.
+
+If port `80` is occupied, you can change the docker-compose. Therefore, take a look
+at [Change Port Config](.github/docs/docker/README.md#ports).
+
 _Keep in mind that you should change the password later in the settings page._
 
 > **Note** If errors occur get yourself some help in the [error code page](./.github/docs/error/README.md).
 
 ## Feedback and bug reports - Troubleshooting
 
-I'd be grateful if you could report any bugs as issues here in the repository! [Report a bug](https://github.com/theis-js/stockhome/issues/new/choose)
+I'd be grateful if you could report any bugs as issues here in the
+repository! [Report a bug](https://github.com/theis-js/stockhome/issues/new/choose)
 
 ## Update
 
-To update stockhome to the latest version, navigate into the root directory of this repository and run:
+To update Stockhome to the latest version, navigate into the root directory of this repository and run:
+
+```shell
+git fetch --all --tags && git checkout "$(git describe --tags "$(git rev-list --tags --max-count=1)")"
+```
+
+To rebuild the containers run:
 
 ```shell
-git pull
-latesttag=$(git describe --tags)
-git checkout ${latesttag}
 docker compose up -d --build
 ```
 
-To update to a specific version, replace `latesttag` with the version tag you want to update to. You can view the available version tags here: [Releases](https://github.com/theis-js/stockhome/tags)
+To update/downgrade to a specific version, run the command below. You can replace `v0.1` with the tag/version you want.
+You can find all Releases her: [Releases](https://github.com/theis-js/stockhome/tags).
 
 **Example to downgrade/update to version `v0.1`:**
 
 ```shell
-git pull
+git fetch --all
 git checkout v0.1
 docker compose up -d --build
 ```
@@ -131,20 +146,20 @@ docker compose up -d --build
 - Visual Studio Code (or any other IDE)
 - Cloned the repository
 
-### Start backend and database
+### Initialize repository dependencies
 
 First, navigate into the root directory of this repository and run:
 
 ```shell
-docker compose -f docker-compose.dev.yml up -d --build
+npm install
 ```
 
-### Start frontend
+### Start development environment
 
-Navigate into the `frontend` directory and run:
+Stay in the root directory and run:
 
 ```shell
-npm install
+npm run build:shared
 npm run dev
 ```
 

backend/babel.config.json

@@ -1,14 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "node": "current"
-        },
-        "modules": false
-      }
-    ],
-    "@babel/preset-typescript"
-  ]
-}

backend/database.mockEN.sql

@@ -1,133 +1,169 @@
 -- =============================================================
---  STOCKHOME – MOCK DATA
---  Generates: 5 Storage Locations, ~100 Products
+--  STOCKHOME – MOCK DATA (EN)
+--  Generates: 5 Storage Locations, 94 Products
+--
+--  Safe to re-run: storage locations are upserted by name, and
+--  products reference the locations by looked-up UUID rather
+--  than a hardcoded literal. This avoids the FK error 1452 that
+--  occurs when a location with the same name already exists
+--  (storage_locations.name is UNIQUE) with a different UUID.
+--
+--  Uncomment the DELETE below if you want a clean product table.
 -- =============================================================
 
 USE stockhome;
 
+-- Optional clean slate for products only (keeps user/app settings):
+-- DELETE FROM products;
+
 -- =============================================
 -- Storage Locations (5)
 -- =============================================
-INSERT INTO storage_locations (uuid, name, description) VALUES
-(UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), 'Main Freezer',        'Large chest freezer in the basement'),
-(UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), 'Kitchen Freezer',     'Freezer compartment of the kitchen fridge'),
-(UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), 'Pantry',              'Dry goods storage in the hallway'),
-(UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), 'Kitchen Fridge',      'Main refrigerator in the kitchen'),
-(UUID_TO_BIN('a1000000-0000-0000-0000-000000000005'), 'Cellar Shelf',        'Cool storage shelves in the cellar');
+INSERT INTO storage_locations (uuid, name, description)
+VALUES (UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), 'Main Freezer', 'Large chest freezer in the basement'),
+       (UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), 'Kitchen Freezer',
+        'Freezer compartment of the kitchen fridge'),
+       (UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), 'Pantry', 'Dry goods storage in the hallway'),
+       (UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), 'Kitchen Fridge', 'Main refrigerator in the kitchen'),
+       (UUID_TO_BIN('a1000000-0000-0000-0000-000000000005'), 'Cellar Shelf', 'Cool storage shelves in the cellar')
+ON DUPLICATE KEY UPDATE description = VALUES(description);
 
 -- =============================================
--- Products (~100)
+-- Resolve the actual UUIDs (works whether the rows were just
+-- inserted or already existed with different UUIDs)
+-- =============================================
+SET @loc_main_freezer = (SELECT uuid
+                         FROM storage_locations
+                         WHERE name = 'Main Freezer');
+SET @loc_kitchen_freezer = (SELECT uuid
+                            FROM storage_locations
+                            WHERE name = 'Kitchen Freezer');
+SET @loc_pantry = (SELECT uuid
+                   FROM storage_locations
+                   WHERE name = 'Pantry');
+SET @loc_kitchen_fridge = (SELECT uuid
+                           FROM storage_locations
+                           WHERE name = 'Kitchen Fridge');
+SET @loc_cellar_shelf = (SELECT uuid
+                         FROM storage_locations
+                         WHERE name = 'Cellar Shelf');
+
+-- =============================================
+-- Products (94)
+-- uuid, picture, created_at, updated_at and deleted rely on
+-- their column defaults.
 -- Self-frozen items have a bottling_date.
 -- Store-bought items have bottling_date = NULL.
 -- =============================================
-INSERT INTO products (uuid, name, description, price, amount, storage_location, expiry_date, bottling_date, picture, deleted) VALUES
+INSERT INTO products (name, description, price, amount, storage_location, expiry_date, bottling_date)
+VALUES
 
 -- ── Self-frozen items (Main Freezer) ──
-(UUID_TO_BIN(UUID()), 'Strawberry Puree',          'Blended fresh strawberries',           NULL, 4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-12-15', '2026-06-01', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Tomato Sauce',              'Homemade marinara sauce',              NULL, 6,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2027-01-10', '2026-05-20', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Chicken Broth',             'Slow-cooked bone broth',               NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-11-30', '2026-04-15', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Blanched Green Beans',      'Garden green beans, blanched',         NULL, 5,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2027-02-01', '2026-05-28', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Pesto Cubes',               'Basil pesto in ice cube trays',        NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-12-01', '2026-05-10', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Raspberry Jam',             'Homemade seedless raspberry jam',      NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2027-03-01', '2026-06-02', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Beef Stew',                 'Leftover beef stew, portioned',        NULL, 4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-10-15', '2026-04-20', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Blanched Spinach',          'Fresh spinach, blanched and pressed',  NULL, 6,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2027-01-20', '2026-05-15', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Mango Chunks',              'Diced ripe mangoes',                   NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-12-20', '2026-05-25', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Carrot Soup',               'Pureed carrot ginger soup',            NULL, 4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-11-01', '2026-04-10', NULL, FALSE),
+('Strawberry Puree', 'Blended fresh strawberries', NULL, 4, @loc_main_freezer, '2026-12-15', '2026-06-01'),
+('Tomato Sauce', 'Homemade marinara sauce', NULL, 6, @loc_main_freezer, '2027-01-10', '2026-05-20'),
+('Chicken Broth', 'Slow-cooked bone broth', NULL, 3, @loc_main_freezer, '2026-11-30', '2026-04-15'),
+('Blanched Green Beans', 'Garden green beans, blanched', NULL, 5, @loc_main_freezer, '2027-02-01', '2026-05-28'),
+('Pesto Cubes', 'Basil pesto in ice cube trays', NULL, 2, @loc_main_freezer, '2026-12-01', '2026-05-10'),
+('Raspberry Jam', 'Homemade seedless raspberry jam', NULL, 3, @loc_main_freezer, '2027-03-01', '2026-06-02'),
+('Beef Stew', 'Leftover beef stew, portioned', NULL, 4, @loc_main_freezer, '2026-10-15', '2026-04-20'),
+('Blanched Spinach', 'Fresh spinach, blanched and pressed', NULL, 6, @loc_main_freezer, '2027-01-20', '2026-05-15'),
+('Mango Chunks', 'Diced ripe mangoes', NULL, 3, @loc_main_freezer, '2026-12-20', '2026-05-25'),
+('Carrot Soup', 'Pureed carrot ginger soup', NULL, 4, @loc_main_freezer, '2026-11-01', '2026-04-10'),
 
 -- ── Self-frozen items (Kitchen Freezer) ──
-(UUID_TO_BIN(UUID()), 'Blueberry Mix',             'Mixed blueberries from the garden',    NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2026-12-10', '2026-06-03', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Zucchini Slices',           'Sliced and blanched zucchini',         NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-01-15', '2026-05-18', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Apple Sauce',               'Homemade cinnamon apple sauce',        NULL, 5,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-02-10', '2026-05-22', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Bolognese Sauce',           'Classic meat sauce, portioned',        NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2026-11-20', '2026-04-25', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Herb Butter',               'Parsley and garlic butter logs',       NULL, 4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2026-12-30', '2026-05-30', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Peach Slices',              'Frozen ripe peach slices',             NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-01-05', '2026-06-01', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Corn Kernels',              'Fresh sweet corn, cut off the cob',    NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-02-20', '2026-05-12', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Pumpkin Puree',             'Roasted and pureed butternut squash',  NULL, 4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-03-10', '2026-05-08', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Lemon Juice Cubes',         'Fresh lemon juice frozen in cubes',    NULL, 6,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-04-01', '2026-06-02', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Minced Garlic',             'Peeled and minced garlic cloves',      NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-01-25', '2026-05-14', NULL, FALSE),
+('Blueberry Mix', 'Mixed blueberries from the garden', NULL, 2, @loc_kitchen_freezer, '2026-12-10', '2026-06-03'),
+('Zucchini Slices', 'Sliced and blanched zucchini', NULL, 3, @loc_kitchen_freezer, '2027-01-15', '2026-05-18'),
+('Apple Sauce', 'Homemade cinnamon apple sauce', NULL, 5, @loc_kitchen_freezer, '2027-02-10', '2026-05-22'),
+('Bolognese Sauce', 'Classic meat sauce, portioned', NULL, 3, @loc_kitchen_freezer, '2026-11-20', '2026-04-25'),
+('Herb Butter', 'Parsley and garlic butter logs', NULL, 4, @loc_kitchen_freezer, '2026-12-30', '2026-05-30'),
+('Peach Slices', 'Frozen ripe peach slices', NULL, 2, @loc_kitchen_freezer, '2027-01-05', '2026-06-01'),
+('Corn Kernels', 'Fresh sweet corn, cut off the cob', NULL, 3, @loc_kitchen_freezer, '2027-02-20', '2026-05-12'),
+('Pumpkin Puree', 'Roasted and pureed butternut squash', NULL, 4, @loc_kitchen_freezer, '2027-03-10', '2026-05-08'),
+('Lemon Juice Cubes', 'Fresh lemon juice frozen in cubes', NULL, 6, @loc_kitchen_freezer, '2027-04-01', '2026-06-02'),
+('Minced Garlic', 'Peeled and minced garlic cloves', NULL, 2, @loc_kitchen_freezer, '2027-01-25', '2026-05-14'),
 
 -- ── Self-frozen items (split across storages) ──
-(UUID_TO_BIN(UUID()), 'Vegetable Stock',           'Homemade veggie stock',                NULL, 5,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-12-05', '2026-04-30', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Rhubarb Compote',           'Stewed rhubarb with sugar',            NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2027-01-30', '2026-05-05', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Cherry Halves',             'Pitted sour cherries',                 NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-12-25', '2026-06-01', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Cauliflower Florets',       'Blanched cauliflower pieces',          NULL, 4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-02-15', '2026-05-19', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Plum Jam',                  'Homemade plum jam',                    NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2027-03-20', '2026-05-27', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Mushroom Duxelles',         'Finely chopped sauteed mushrooms',     NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2026-11-10', '2026-04-18', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Chili Con Carne',           'Portioned homemade chili',             NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-10-30', '2026-04-12', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Banana Slices',             'Ripe banana slices for smoothies',     NULL, 5,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2026-12-08', '2026-06-03', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Parsley Cubes',             'Chopped parsley in olive oil cubes',   NULL, 4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-04-15', '2026-05-31', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Lentil Soup',               'Thick homemade lentil soup',           NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-11-25', '2026-04-22', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Blackberry Puree',          'Strained wild blackberries',           NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2027-01-12', '2026-06-02', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Roasted Bell Peppers',      'Peeled roasted red peppers',           NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-02-28', '2026-05-16', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Goulash',                   'Hungarian-style beef goulash',         NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-10-20', '2026-04-08', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Mixed Berry Smoothie Pack', 'Pre-portioned smoothie mix',           NULL, 6,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2026-12-18', '2026-06-04', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Leek Cream Soup',           'Pureed leek and potato soup',          NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-11-15', '2026-04-28', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Diced Onions',              'Pre-diced yellow onions',              NULL, 4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-03-05', '2026-05-24', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Grape Juice Concentrate',   'Reduced grape juice for desserts',     NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2027-02-05', '2026-05-11', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Currant Jelly',             'Red currant jelly',                    NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2027-04-10', '2026-06-01', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Broccoli Florets',          'Blanched broccoli pieces',             NULL, 4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-01-08', '2026-05-20', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Sweet Potato Mash',         'Roasted and mashed sweet potatoes',    NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-12-28', '2026-05-17', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Apricot Halves',            'Frozen ripe apricot halves',           NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-02-12', '2026-06-03', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Minestrone',                'Chunky Italian vegetable soup',        NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-11-08', '2026-04-14', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Pea Puree',                 'Fresh garden peas, pureed',            NULL, 4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-03-15', '2026-05-26', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Cranberry Sauce',           'Homemade whole berry cranberry sauce', NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2027-01-18', '2026-05-09', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Egg Noodles',               'Homemade egg noodles, pre-cooked',     NULL, 5,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2026-12-12', '2026-05-29', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Gooseberry Compote',        'Stewed gooseberries',                  NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2027-02-22', '2026-06-02', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Creamed Corn',              'Homemade creamed corn',                NULL, 3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-01-28', '2026-05-21', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Chicken Curry',             'Portioned Thai green curry',           NULL, 2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000001'), '2026-10-25', '2026-04-16', NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Dill Cubes',                'Chopped dill frozen in water cubes',   NULL, 4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000002'), '2027-04-20', '2026-06-01', NULL, FALSE),
+('Vegetable Stock', 'Homemade veggie stock', NULL, 5, @loc_main_freezer, '2026-12-05', '2026-04-30'),
+('Rhubarb Compote', 'Stewed rhubarb with sugar', NULL, 3, @loc_main_freezer, '2027-01-30', '2026-05-05'),
+('Cherry Halves', 'Pitted sour cherries', NULL, 2, @loc_main_freezer, '2026-12-25', '2026-06-01'),
+('Cauliflower Florets', 'Blanched cauliflower pieces', NULL, 4, @loc_kitchen_freezer, '2027-02-15', '2026-05-19'),
+('Plum Jam', 'Homemade plum jam', NULL, 3, @loc_main_freezer, '2027-03-20', '2026-05-27'),
+('Mushroom Duxelles', 'Finely chopped sauteed mushrooms', NULL, 2, @loc_kitchen_freezer, '2026-11-10', '2026-04-18'),
+('Chili Con Carne', 'Portioned homemade chili', NULL, 3, @loc_main_freezer, '2026-10-30', '2026-04-12'),
+('Banana Slices', 'Ripe banana slices for smoothies', NULL, 5, @loc_kitchen_freezer, '2026-12-08', '2026-06-03'),
+('Parsley Cubes', 'Chopped parsley in olive oil cubes', NULL, 4, @loc_kitchen_freezer, '2027-04-15', '2026-05-31'),
+('Lentil Soup', 'Thick homemade lentil soup', NULL, 3, @loc_main_freezer, '2026-11-25', '2026-04-22'),
+('Blackberry Puree', 'Strained wild blackberries', NULL, 2, @loc_main_freezer, '2027-01-12', '2026-06-02'),
+('Roasted Bell Peppers', 'Peeled roasted red peppers', NULL, 3, @loc_kitchen_freezer, '2027-02-28', '2026-05-16'),
+('Goulash', 'Hungarian-style beef goulash', NULL, 2, @loc_main_freezer, '2026-10-20', '2026-04-08'),
+('Mixed Berry Smoothie Pack', 'Pre-portioned smoothie mix', NULL, 6, @loc_kitchen_freezer, '2026-12-18', '2026-06-04'),
+('Leek Cream Soup', 'Pureed leek and potato soup', NULL, 3, @loc_main_freezer, '2026-11-15', '2026-04-28'),
+('Diced Onions', 'Pre-diced yellow onions', NULL, 4, @loc_kitchen_freezer, '2027-03-05', '2026-05-24'),
+('Grape Juice Concentrate', 'Reduced grape juice for desserts', NULL, 2, @loc_main_freezer, '2027-02-05', '2026-05-11'),
+('Currant Jelly', 'Red currant jelly', NULL, 3, @loc_main_freezer, '2027-04-10', '2026-06-01'),
+('Broccoli Florets', 'Blanched broccoli pieces', NULL, 4, @loc_kitchen_freezer, '2027-01-08', '2026-05-20'),
+('Sweet Potato Mash', 'Roasted and mashed sweet potatoes', NULL, 3, @loc_main_freezer, '2026-12-28', '2026-05-17'),
+('Apricot Halves', 'Frozen ripe apricot halves', NULL, 2, @loc_kitchen_freezer, '2027-02-12', '2026-06-03'),
+('Minestrone', 'Chunky Italian vegetable soup', NULL, 3, @loc_main_freezer, '2026-11-08', '2026-04-14'),
+('Pea Puree', 'Fresh garden peas, pureed', NULL, 4, @loc_kitchen_freezer, '2027-03-15', '2026-05-26'),
+('Cranberry Sauce', 'Homemade whole berry cranberry sauce', NULL, 2, @loc_main_freezer, '2027-01-18', '2026-05-09'),
+('Egg Noodles', 'Homemade egg noodles, pre-cooked', NULL, 5, @loc_kitchen_freezer, '2026-12-12', '2026-05-29'),
+('Gooseberry Compote', 'Stewed gooseberries', NULL, 2, @loc_main_freezer, '2027-02-22', '2026-06-02'),
+('Creamed Corn', 'Homemade creamed corn', NULL, 3, @loc_kitchen_freezer, '2027-01-28', '2026-05-21'),
+('Chicken Curry', 'Portioned Thai green curry', NULL, 2, @loc_main_freezer, '2026-10-25', '2026-04-16'),
+('Dill Cubes', 'Chopped dill frozen in water cubes', NULL, 4, @loc_kitchen_freezer, '2027-04-20', '2026-06-01'),
 
 -- ── Store-bought items (no bottling_date) ──
 
 -- Kitchen Fridge
-(UUID_TO_BIN(UUID()), 'Whole Milk',                'Full-fat milk, 1 liter',               '1.19',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-06-14', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Greek Yogurt',              'Plain Greek yogurt, 500g',             '2.49',  3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-06-20', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Butter',                    'Unsalted butter, 250g',                '2.29',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-07-15', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Cheddar Cheese',            'Mature cheddar block, 400g',           '3.49',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-08-10', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Cream Cheese',              'Philadelphia original, 200g',          '1.89',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-06-25', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Orange Juice',              'Fresh squeezed, 1 liter',              '2.99',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-06-12', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Eggs',                      'Free-range eggs, pack of 10',          '3.29',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-06-18', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Ham Slices',                'Cooked ham, 200g pack',                '2.19',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-06-10', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Mozzarella',                'Fresh mozzarella ball, 125g',          '1.49',  3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-06-09', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Hummus',                    'Classic chickpea hummus, 300g',        '2.29',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-06-15', NULL, NULL, FALSE),
+('Whole Milk', 'Full-fat milk, 1 liter', '1.19', 2, @loc_kitchen_fridge, '2026-06-14', NULL),
+('Greek Yogurt', 'Plain Greek yogurt, 500g', '2.49', 3, @loc_kitchen_fridge, '2026-06-20', NULL),
+('Butter', 'Unsalted butter, 250g', '2.29', 2, @loc_kitchen_fridge, '2026-07-15', NULL),
+('Cheddar Cheese', 'Mature cheddar block, 400g', '3.49', 1, @loc_kitchen_fridge, '2026-08-10', NULL),
+('Cream Cheese', 'Philadelphia original, 200g', '1.89', 2, @loc_kitchen_fridge, '2026-06-25', NULL),
+('Orange Juice', 'Fresh squeezed, 1 liter', '2.99', 1, @loc_kitchen_fridge, '2026-06-12', NULL),
+('Eggs', 'Free-range eggs, pack of 10', '3.29', 1, @loc_kitchen_fridge, '2026-06-18', NULL),
+('Ham Slices', 'Cooked ham, 200g pack', '2.19', 2, @loc_kitchen_fridge, '2026-06-10', NULL),
+('Mozzarella', 'Fresh mozzarella ball, 125g', '1.49', 3, @loc_kitchen_fridge, '2026-06-09', NULL),
+('Hummus', 'Classic chickpea hummus, 300g', '2.29', 1, @loc_kitchen_fridge, '2026-06-15', NULL),
 
 -- Pantry
-(UUID_TO_BIN(UUID()), 'Pasta Spaghetti',           'Durum wheat spaghetti, 500g',          '1.29',  4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2028-03-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Basmati Rice',              'Long grain basmati, 1kg',              '2.99',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2028-06-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Canned Tomatoes',           'Chopped tomatoes, 400g tin',           '0.89',  6,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2028-01-15', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Canned Chickpeas',          'Chickpeas in water, 400g',             '0.99',  4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2028-04-10', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Olive Oil',                 'Extra virgin olive oil, 500ml',        '5.99',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2027-09-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Peanut Butter',             'Crunchy peanut butter, 350g',          '3.49',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2027-02-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Honey',                     'Raw wildflower honey, 500g',           '6.99',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2028-12-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Oats',                      'Rolled oats, 1kg',                     '1.99',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2027-08-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Flour',                     'All-purpose wheat flour, 1kg',         '0.99',  3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2027-06-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Sugar',                     'White granulated sugar, 1kg',           '1.49',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2029-01-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Canned Tuna',               'Tuna chunks in sunflower oil, 185g',  '1.79',  5,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2028-07-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Coconut Milk',              'Full-fat coconut milk, 400ml',         '1.59',  3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2028-02-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Soy Sauce',                 'Naturally brewed soy sauce, 250ml',    '2.49',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2028-05-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Balsamic Vinegar',          'Aged balsamic vinegar, 250ml',         '3.99',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2029-06-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Dried Lentils',             'Green lentils, 500g',                  '1.69',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2028-09-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Cornflakes',                'Classic cornflakes, 500g',             '2.19',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2027-04-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Black Beans',               'Canned black beans, 400g',             '1.09',  3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2028-08-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Mustard',                   'Dijon mustard, 200g jar',              '1.89',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2027-11-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Dried Pasta Penne',         'Penne rigate, 500g',                   '1.19',  3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2028-05-15', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Maple Syrup',               'Pure Canadian maple syrup, 250ml',     '7.49',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000003'), '2028-10-01', NULL, NULL, FALSE),
+('Pasta Spaghetti', 'Durum wheat spaghetti, 500g', '1.29', 4, @loc_pantry, '2028-03-01', NULL),
+('Basmati Rice', 'Long grain basmati, 1kg', '2.99', 2, @loc_pantry, '2028-06-01', NULL),
+('Canned Tomatoes', 'Chopped tomatoes, 400g tin', '0.89', 6, @loc_pantry, '2028-01-15', NULL),
+('Canned Chickpeas', 'Chickpeas in water, 400g', '0.99', 4, @loc_pantry, '2028-04-10', NULL),
+('Olive Oil', 'Extra virgin olive oil, 500ml', '5.99', 1, @loc_pantry, '2027-09-01', NULL),
+('Peanut Butter', 'Crunchy peanut butter, 350g', '3.49', 2, @loc_pantry, '2027-02-01', NULL),
+('Honey', 'Raw wildflower honey, 500g', '6.99', 1, @loc_pantry, '2028-12-01', NULL),
+('Oats', 'Rolled oats, 1kg', '1.99', 2, @loc_pantry, '2027-08-01', NULL),
+('Flour', 'All-purpose wheat flour, 1kg', '0.99', 3, @loc_pantry, '2027-06-01', NULL),
+('Sugar', 'White granulated sugar, 1kg', '1.49', 2, @loc_pantry, '2029-01-01', NULL),
+('Canned Tuna', 'Tuna chunks in sunflower oil, 185g', '1.79', 5, @loc_pantry, '2028-07-01', NULL),
+('Coconut Milk', 'Full-fat coconut milk, 400ml', '1.59', 3, @loc_pantry, '2028-02-01', NULL),
+('Soy Sauce', 'Naturally brewed soy sauce, 250ml', '2.49', 1, @loc_pantry, '2028-05-01', NULL),
+('Balsamic Vinegar', 'Aged balsamic vinegar, 250ml', '3.99', 1, @loc_pantry, '2029-06-01', NULL),
+('Dried Lentils', 'Green lentils, 500g', '1.69', 2, @loc_pantry, '2028-09-01', NULL),
+('Cornflakes', 'Classic cornflakes, 500g', '2.19', 1, @loc_pantry, '2027-04-01', NULL),
+('Black Beans', 'Canned black beans, 400g', '1.09', 3, @loc_pantry, '2028-08-01', NULL),
+('Mustard', 'Dijon mustard, 200g jar', '1.89', 1, @loc_pantry, '2027-11-01', NULL),
+('Dried Pasta Penne', 'Penne rigate, 500g', '1.19', 3, @loc_pantry, '2028-05-15', NULL),
+('Maple Syrup', 'Pure Canadian maple syrup, 250ml', '7.49', 1, @loc_pantry, '2028-10-01', NULL),
 
 -- Cellar Shelf
-(UUID_TO_BIN(UUID()), 'Canned Corn',               'Sweet corn kernels, 340g',             '1.09',  4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000005'), '2028-03-15', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Canned Peas',               'Garden peas, 400g tin',                '0.89',  3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000005'), '2028-06-10', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Apple Cider Vinegar',       'Organic apple cider vinegar, 500ml',   '3.29',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000005'), '2028-11-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Sunflower Oil',             'Refined sunflower oil, 1 liter',       '2.49',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000005'), '2027-10-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Tomato Paste',              'Double concentrated, 200g tube',       '1.29',  3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000005'), '2028-01-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Canned Sardines',           'Sardines in olive oil, 120g',          '2.19',  4,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000005'), '2028-09-15', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Pickled Cucumbers',         'Whole pickled gherkins, 670g jar',     '1.99',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000005'), '2027-12-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Jam Strawberry',            'Store-bought strawberry jam, 450g',    '2.79',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000005'), '2027-07-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Canned Peaches',            'Peach halves in syrup, 420g',          '1.69',  3,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000005'), '2028-04-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Crackers',                  'Whole wheat crackers, 200g',           '1.89',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000005'), '2027-05-01', NULL, NULL, FALSE),
+('Canned Corn', 'Sweet corn kernels, 340g', '1.09', 4, @loc_cellar_shelf, '2028-03-15', NULL),
+('Canned Peas', 'Garden peas, 400g tin', '0.89', 3, @loc_cellar_shelf, '2028-06-10', NULL),
+('Apple Cider Vinegar', 'Organic apple cider vinegar, 500ml', '3.29', 2, @loc_cellar_shelf, '2028-11-01', NULL),
+('Sunflower Oil', 'Refined sunflower oil, 1 liter', '2.49', 1, @loc_cellar_shelf, '2027-10-01', NULL),
+('Tomato Paste', 'Double concentrated, 200g tube', '1.29', 3, @loc_cellar_shelf, '2028-01-01', NULL),
+('Canned Sardines', 'Sardines in olive oil, 120g', '2.19', 4, @loc_cellar_shelf, '2028-09-15', NULL),
+('Pickled Cucumbers', 'Whole pickled gherkins, 670g jar', '1.99', 2, @loc_cellar_shelf, '2027-12-01', NULL),
+('Jam Strawberry', 'Store-bought strawberry jam, 450g', '2.79', 1, @loc_cellar_shelf, '2027-07-01', NULL),
+('Canned Peaches', 'Peach halves in syrup, 420g', '1.69', 3, @loc_cellar_shelf, '2028-04-01', NULL),
+('Crackers', 'Whole wheat crackers, 200g', '1.89', 2, @loc_cellar_shelf, '2027-05-01', NULL),
 
 -- Additional Kitchen Fridge items
-(UUID_TO_BIN(UUID()), 'Salami',                    'Italian salami slices, 100g',          '2.99',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-06-20', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Parmesan',                  'Parmigiano Reggiano wedge, 200g',      '4.99',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-09-01', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Smoked Salmon',             'Sliced smoked salmon, 100g',           '3.99',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-06-08', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Heavy Cream',               'Whipping cream 35%, 200ml',            '1.29',  2,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-06-16', NULL, NULL, FALSE),
-(UUID_TO_BIN(UUID()), 'Tofu',                      'Firm organic tofu, 400g',              '2.49',  1,  UUID_TO_BIN('a1000000-0000-0000-0000-000000000004'), '2026-06-22', NULL, NULL, FALSE);
+('Salami', 'Italian salami slices, 100g', '2.99', 1, @loc_kitchen_fridge, '2026-06-20', NULL),
+('Parmesan', 'Parmigiano Reggiano wedge, 200g', '4.99', 1, @loc_kitchen_fridge, '2026-09-01', NULL),
+('Smoked Salmon', 'Sliced smoked salmon, 100g', '3.99', 1, @loc_kitchen_fridge, '2026-06-08', NULL),
+('Heavy Cream', 'Whipping cream 35%, 200ml', '1.29', 2, @loc_kitchen_fridge, '2026-06-16', NULL),
+('Tofu', 'Firm organic tofu, 400g', '2.49', 1, @loc_kitchen_fridge, '2026-06-22', NULL);

backend/package.json

@@ -5,7 +5,7 @@
   "main": "server.ts",
   "scripts": {
     "dev": "tsx --watch server.ts",
-    "build": "tsc -b",
+    "build": "tsc -b && node scripts/copy-assets.cjs",
     "start": "node dist/server.js"
   },
   "keywords": [],

backend/scripts/copy-assets.cjs

@@ -0,0 +1,17 @@
+// scripts/copy-assets.cjs
+const fs = require("fs");
+const path = require("path");
+
+const rootDir = path.join(__dirname, "..");
+const distDir = path.join(rootDir, "dist");
+
+const sqlFiles = fs
+  .readdirSync(rootDir)
+  .filter((f) => f.endsWith(".scheme.sql"));
+
+for (const file of sqlFiles) {
+  const srcPath = path.join(rootDir, file);
+  const distPath = path.join(distDir, file);
+  fs.copyFileSync(srcPath, distPath);
+  console.log(`Copied ${srcPath} -> ${distPath}`);
+}

eslint.config.mjs

@@ -1,5 +1,13 @@
 import js from "@eslint/js";
+import globals from "globals";
 
 export default [
-    js.configs.recommended,
+  js.configs.recommended,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
 ];

frontend/package.json

@@ -16,8 +16,8 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@fontsource/inter": "^5.2.8",
-    "@mui/icons-material": "^9.0.1",
+    "@fontsource/ibm-plex-mono": "^5.3.0",
+    "@fontsource/ibm-plex-sans": "^5.3.0",
     "@mui/joy": "^5.0.0-beta.52",
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/react-form": "^1.32.0",
@@ -30,7 +30,6 @@
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-i18next": "^17.0.8",
-    "react-toastify": "^11.1.0",
     "tailwindcss": "^4.3.0",
     "validator": "^13.15.35",
     "zod": "^4.4.3"

frontend/src/App.tsx

@@ -1,9 +1,11 @@
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import "./App.css";
-import { ToastContainer } from "react-toastify";
 import { routeTree } from "./routeTree.gen";
+import { NotFound } from "./components/NotFound.tsx";
+import { CssVarsProvider } from "@mui/joy";
+import { theme } from "./theme.ts";
 
-const router = createRouter({ routeTree });
+const router = createRouter({ routeTree, defaultNotFoundComponent: NotFound });
 
 declare module "@tanstack/react-router" {
   interface Register {
@@ -13,21 +15,9 @@ declare module "@tanstack/react-router" {
 
 function App() {
   return (
-    <>
-      <ToastContainer
-        position="top-right"
-        autoClose={5000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick={false}
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="colored"
-      />
+    <CssVarsProvider theme={theme} defaultMode={"system"}>
       <RouterProvider router={router} />
-    </>
+    </CssVarsProvider>
   );
 }
 

frontend/src/components/AmountStepper.tsx

@@ -0,0 +1,65 @@
+import { IconButton, Input } from "@mui/joy";
+import { Minus, Plus } from "lucide-react";
+
+interface AmountStepperProps {
+  value: number;
+  onChange: (value: number) => void;
+  onBlur?: () => void;
+  min?: number;
+}
+
+export const AmountStepper = ({
+  value,
+  onChange,
+  onBlur,
+  min = 0,
+}: AmountStepperProps) => {
+  const step = (delta: number) => onChange(Math.max(min, (value || 0) + delta));
+
+  return (
+    <div
+      className="flex rounded-2xl border border-solid"
+      style={{ borderColor: "var(--joy-palette-divider)" }}
+    >
+      <IconButton
+        type="button"
+        variant="plain"
+        size="lg"
+        disabled={value <= min}
+        onClick={() => step(-1)}
+        className="flex-none transition-transform active:scale-90"
+        sx={{ borderRadius: 0 }}
+      >
+        <Minus size={16} />
+      </IconButton>
+      <Input
+        type="number"
+        value={value}
+        className="grow"
+        onChange={(e) => {
+          const nextValue = Number(e.target.value);
+          onChange(Number.isNaN(nextValue) ? min : Math.max(min, nextValue));
+        }}
+        onBlur={onBlur}
+        variant="plain"
+        size="lg"
+        slotProps={{ input: { className: "text-center font-semibold" } }}
+        sx={{
+          borderRadius: 0,
+          "--Input-focusedThickness": "0px",
+          bgcolor: "var(--joy-palette-background-surface)",
+        }}
+      />
+      <IconButton
+        type="button"
+        variant="plain"
+        size="lg"
+        onClick={() => step(1)}
+        className="flex-none transition-transform active:scale-90"
+        sx={{ borderRadius: 0 }}
+      >
+        <Plus size={16} />
+      </IconButton>
+    </div>
+  );
+};

frontend/src/components/LoginCard.tsx

@@ -1,15 +1,21 @@
 import { useForm } from "@tanstack/react-form";
-import { Alert, Button, Input } from "@mui/joy";
+import { Button, Input } from "@mui/joy";
 import { useMutation } from "@tanstack/react-query";
 import { signInUser } from "../utils/api/auth";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { useColorScheme } from "@mui/joy/styles";
+import { Layers } from "lucide-react";
 import type { AlertInterface } from "../misc/interfaces";
+import { changeTranslation } from "../utils/uxFncs";
+import { MyAlert } from "./MyAlert.tsx";
 
 export const LoginCard = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const navigate = useNavigate();
+  const { mode, setMode } = useColorScheme();
+  const search: { loggedOut?: boolean } = useSearch({ from: "/login" });
   const [alert, setAlert] = useState<AlertInterface>({
     isAlert: false,
     type: "neutral",
@@ -17,6 +23,18 @@ export const LoginCard = () => {
     text: "",
   });
 
+  useEffect(() => {
+    if (search.loggedOut) {
+      setAlert({
+        isAlert: true,
+        type: "primary",
+        header: t("success"),
+        text: t("logout-success-text"),
+      });
+    }
+    void navigate({ to: "/login" });
+  }, []);
+
   const form = useForm({
     defaultValues: {
       username: "",
@@ -43,7 +61,7 @@ export const LoginCard = () => {
           header: "",
           text: "",
         });
-        navigate({ to: "/app/inventory" });
+        void navigate({ to: "/app/inventory" });
       }
     },
     onError: (error: unknown) => {
@@ -58,17 +76,59 @@ export const LoginCard = () => {
   });
 
   return (
-    <div className="flex min-h-screen w-full items-center justify-center bg-[radial-gradient(1200px_circle_at_20%_10%,#e6f2ff_0%,#f7f9fc_40%,#f1f5fb_100%)] px-6 py-10">
-      <div className="mx-auto flex w-full max-w-4xl items-center justify-center">
-        <div className="w-full max-w-md rounded-3xl border border-white/70 bg-white/80 p-8 shadow-[0_24px_60px_rgba(12,38,78,0.18)] backdrop-blur">
-          <div className="mb-8 space-y-2">
-            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-[#0b6bcb]">
-              Stockhome
+    <div className="flex min-h-screen w-full flex-col lg:flex-row">
+      <div
+        className="hidden flex-col justify-between px-12 py-10 lg:flex lg:w-1/2"
+        style={{ backgroundColor: "#0e1116", color: "#e8ecf2" }}
+      >
+        <div className="flex items-center gap-2">
+          <span className="flex h-8 w-8 items-center justify-center rounded-lg" style={{ backgroundColor: "#5b8def" }}>
+            <Layers size={16} color="white" />
+          </span>
+          <span className="text-lg font-bold">{t("app-title")}</span>
+        </div>
+        <div className="max-w-md space-y-3">
+          <h2 className="text-3xl font-bold" style={{ letterSpacing: "-0.03em" }}>
+            {t("login-tagline-1")}
+          </h2>
+          <p className="text-sm" style={{ color: "#8590a0" }}>
+            {t("login-tagline-2")}
+          </p>
+        </div>
+        <p className="text-xs" style={{ color: "#8590a0" }}>
+          v0.9 MVP
+        </p>
+      </div>
+
+      <div
+        className="flex flex-1 items-center justify-center px-6 py-10"
+        style={{ backgroundColor: "var(--joy-palette-background-body)" }}
+      >
+        <div className="w-full max-w-md space-y-6">
+          <div className="flex items-center gap-2 lg:hidden">
+            <span
+              className="flex h-8 w-8 items-center justify-center rounded-lg"
+              style={{ backgroundColor: "var(--joy-palette-primary-solidBg)" }}
+            >
+              <Layers size={16} color="white" />
+            </span>
+            <span className="text-lg font-bold" style={{ color: "var(--joy-palette-text-primary)" }}>
+              {t("app-title")}
+            </span>
+          </div>
+
+          <div className="space-y-2">
+            <p
+              className="text-xs font-semibold uppercase tracking-[0.3em]"
+              style={{ color: "var(--joy-palette-primary-solidBg)" }}
+            >
+              {t("app-title")}
             </p>
-            <h1 className="text-3xl font-semibold text-slate-900">
+            <h1 className="text-3xl font-bold" style={{ color: "var(--joy-palette-text-primary)" }}>
               {t("login")}
             </h1>
           </div>
+
           <form
             className="space-y-5"
             onSubmit={(e) => {
@@ -77,15 +137,7 @@ export const LoginCard = () => {
             }}
           >
             {alert.isAlert && (
-              <Alert
-                variant="soft"
-                color={alert.type}
-                className="rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-              >
-                {alert.header}
-                <br />
-                {alert.text}
-              </Alert>
+              <MyAlert type={alert.type} header={alert.header} text={alert.text} />
             )}
             <form.Field name="username">
               {(field) => (
@@ -95,7 +147,7 @@ export const LoginCard = () => {
                   placeholder={t("username")}
                   variant="outlined"
                   size="lg"
-                  className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                  className="rounded-2xl"
                 />
               )}
             </form.Field>
@@ -108,7 +160,7 @@ export const LoginCard = () => {
                   placeholder={t("password")}
                   variant="outlined"
                   size="lg"
-                  className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                  className="rounded-2xl"
                 />
               )}
             </form.Field>
@@ -116,11 +168,30 @@ export const LoginCard = () => {
               type="submit"
               loading={isPending}
               size="lg"
-              className="w-full rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
+              color="primary"
+              variant="solid"
+              className="btn-lift w-full rounded-2xl"
             >
               {t("login")}
             </Button>
           </form>
+
+          <div
+            className="flex items-center justify-center gap-3 text-sm"
+            style={{ color: "var(--joy-palette-text-tertiary)" }}
+          >
+            <button type="button" onClick={changeTranslation} className="hover:underline">
+              {i18n.language === "de" ? "English" : "Deutsch"}
+            </button>
+            <span>|</span>
+            <button
+              type="button"
+              onClick={() => setMode(mode === "dark" ? "light" : "dark")}
+              className="hover:underline"
+            >
+              {mode === "dark" ? t("theme-light") : t("theme-dark")}
+            </button>
+          </div>
         </div>
       </div>
     </div>

frontend/src/components/Mono.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+
+interface MonoProps {
+  children: ReactNode;
+  className?: string;
+}
+
+// Small helper for the numeric/date values the mockups render in IBM Plex Mono.
+export const Mono = ({ children, className = "" }: MonoProps) => (
+  <span
+    className={`tabular-nums ${className}`}
+    style={{ fontFamily: "var(--joy-fontFamily-code)" }}
+  >
+    {children}
+  </span>
+);

frontend/src/components/MyAlert.tsx

@@ -0,0 +1,21 @@
+import { Alert } from "@mui/joy";
+
+interface MyAlertProps {
+  type: "success" | "warning" | "danger" | "neutral" | "primary";
+  header: string;
+  text: string;
+}
+
+export const MyAlert = (props: MyAlertProps) => {
+  return (
+    <Alert
+      variant="soft"
+      color={props.type}
+      className="animate-fade-in rounded-2xl drop-shadow-sm"
+    >
+      {props.header}
+      <br />
+      {props.text}
+    </Alert>
+  );
+};

frontend/src/components/NotFound.tsx

@@ -0,0 +1,20 @@
+import { Typography } from "@mui/joy";
+import { useTranslation } from "react-i18next";
+
+export const NotFound = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={"flex flex-col items-center gap-2"}>
+      <Typography color={"primary"} level={"h1"}>
+        {t("not-found-header")}
+      </Typography>
+      <Typography
+        sx={{ color: "var(--joy-palette-text-primary)" }}
+        level={"body-lg"}
+      >
+        {t("not-found-body")}
+      </Typography>
+    </div>
+  );
+};

frontend/src/components/PageHeader.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import { Typography } from "@mui/joy";
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  actions?: ReactNode;
+}
+
+export const PageHeader = ({ title, subtitle, actions }: PageHeaderProps) => (
+  <div className="flex flex-wrap items-start justify-between gap-4">
+    <div className="space-y-1">
+      <Typography level="h2" sx={{ color: "var(--joy-palette-text-primary)" }}>
+        {title}
+      </Typography>
+      {subtitle && (
+        <Typography level="body-lg" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+          {subtitle}
+        </Typography>
+      )}
+    </div>
+    {actions && <div className="flex items-center gap-3">{actions}</div>}
+  </div>
+);

frontend/src/components/ProductStatusBar.tsx

@@ -0,0 +1,43 @@
+import { Chip } from "@mui/joy";
+import { useTranslation } from "react-i18next";
+import { getExpiryDays, type ProductStatus } from "../utils/productStatus";
+
+const accentColor: Record<ProductStatus, string> = {
+  expired: "var(--joy-palette-danger-solidBg)",
+  "expiring-soon": "var(--joy-palette-warning-solidBg)",
+  ok: "transparent",
+};
+
+// Colored left-edge bar used on Inventory rows/cards to flag expiry status.
+export const ProductStatusBar = ({ status }: { status: ProductStatus }) => (
+  <span
+    className="block h-full w-[3px] shrink-0 self-stretch rounded-full"
+    style={{ backgroundColor: accentColor[status] }}
+  />
+);
+
+const chipColor: Record<ProductStatus, "danger" | "warning" | "neutral"> = {
+  expired: "danger",
+  "expiring-soon": "warning",
+  ok: "neutral",
+};
+
+// "Expires in N days" / "Expired N days ago" chip used on product detail headers.
+export const ExpiryBadge = ({ expiryDate }: { expiryDate?: string | null }) => {
+  const { t } = useTranslation();
+  const expiry = getExpiryDays(expiryDate);
+  if (!expiry) {
+    return null;
+  }
+
+  const text =
+    expiry.status === "expired"
+      ? t("days-since-expired", { count: Math.abs(expiry.days) })
+      : t("expires-in-days-badge", { count: expiry.days });
+
+  return (
+    <Chip variant="soft" color={chipColor[expiry.status]} size="sm" className="rounded-full px-3">
+      {text}
+    </Chip>
+  );
+};

frontend/src/components/Sidebar.tsx

@@ -1,67 +1,77 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Typography } from "@mui/joy";
-import InventoryIcon from "@mui/icons-material/Inventory";
-import AddBoxIcon from "@mui/icons-material/AddBox";
-import StorageIcon from "@mui/icons-material/Storage";
-import SettingsIcon from "@mui/icons-material/Settings";
-import ExitToAppIcon from "@mui/icons-material/ExitToApp";
-import TranslateIcon from "@mui/icons-material/Translate";
-import MenuIcon from "@mui/icons-material/Menu";
-import CloseIcon from "@mui/icons-material/Close";
-import { useMatchRoute, useNavigate } from "@tanstack/react-router";
+import { Button, Chip, Typography } from "@mui/joy";
+import { Package, Plus, Layers, Settings, Menu, X, ChevronRight } from "lucide-react";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
 import Cookies from "js-cookie";
-import { changeTranslation } from "../utils/uxFncs";
+import { getProducts } from "../utils/api/products.ts";
+import { getStorages } from "../utils/api/storages.ts";
 
 export const Sidebar = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const matchRoute = useMatchRoute();
+  const pathname = useRouterState({ select: (state) => state.location.pathname });
   const [isOpen, setIsOpen] = useState(false);
 
-  const btnClass =
-    "h-11 w-full justify-start! rounded-2xl px-4 text-left text-sm font-semibold text-slate-700 transition hover:bg-white/80 hover:text-[#0b6bcb] [&_.MuiButton-startDecorator]:mr-3! [&_.MuiButton-startDecorator]:ml-0!";
+  const { data: products } = useQuery({ queryKey: ["products"], queryFn: getProducts });
+  const { data: storages } = useQuery({ queryKey: ["storages"], queryFn: getStorages });
 
-  const variant = (to: string) =>
-    !!matchRoute({ to, fuzzy: false }) ? "soft" : "plain";
+  const btnClass =
+    "h-11 w-full justify-start! rounded-2xl px-4 text-left text-sm font-semibold transition-colors duration-150 [&_.MuiButton-startDecorator]:mr-3! [&_.MuiButton-startDecorator]:ml-0! [&_.MuiButton-endDecorator]:ml-auto!";
+
+  const isActive = (to: string) => pathname === to || pathname.startsWith(`${to}/`);
 
   const handleNavigate = (to: string) => {
-    navigate({ to });
+    void navigate({ to });
     setIsOpen(false);
   };
 
+  const appName = Cookies.get("app-name") || t("app-title");
+  const initials = appName.slice(0, 2).toUpperCase();
+
+  const navItems = [
+    { to: "/app/inventory", label: t("inventory"), icon: <Package size={18} />, count: products?.length },
+    { to: "/app/add-product", label: t("add"), icon: <Plus size={18} /> },
+    { to: "/app/storages", label: t("storages"), icon: <Layers size={18} />, count: storages?.length },
+    { to: "/app/app-settings", label: t("settings"), icon: <Settings size={18} /> },
+  ];
+
   return (
-    <aside className="flex w-full flex-col gap-6 border-b border-white/80 bg-linear-to-b from-[#f7fbff] via-[#f2f6fb] to-[#eef3f9] px-4 py-5 shadow-[0_20px_60px_rgba(11,107,203,0.08)] sm:px-5 lg:h-full lg:min-h-screen lg:max-w-70 lg:border-b-0 lg:border-r lg:px-6 lg:py-8">
+    <aside
+      className="flex w-full flex-col gap-6 px-4 py-5 sm:px-5 lg:h-full lg:min-h-screen lg:max-w-70 lg:border-b-0 lg:border-r lg:px-6 lg:py-8"
+      style={{
+        borderBottom: "1px solid var(--joy-palette-divider)",
+        borderRightColor: "var(--joy-palette-divider)",
+        backgroundColor: "var(--joy-palette-background-surface)",
+      }}
+    >
       <div className="flex items-center justify-between gap-4">
-        <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <span
+            className="flex h-8 w-8 items-center justify-center rounded-lg"
+            style={{ backgroundColor: "var(--joy-palette-primary-solidBg)" }}
+          >
+            <Layers size={16} color="white" />
+          </span>
           <Typography
-            level="h2"
-            className="text-[22px] font-semibold text-[#0b6bcb]"
+            level="title-lg"
+            className="text-[17px] font-bold"
+            sx={{ color: "var(--joy-palette-text-primary)" }}
           >
             {t("app-title")}
           </Typography>
-          <Typography
-            level="body-lg"
-            className="text-sm font-medium text-slate-500"
-          >
-            {Cookies.get("app-name") ? Cookies.get("app-name") : ""}
-          </Typography>
         </div>
         <Button
           variant="soft"
+          color="neutral"
           size="sm"
-          className="lg:hidden transition-transform duration-200 ease-out"
+          sx={{
+            display: "inline-flex",
+            "@media (min-width: 1024px)": { display: "none" },
+          }}
           onClick={() => setIsOpen((open) => !open)}
-          startDecorator={
-            <span
-              className={`inline-flex transition-transform duration-200 ease-out ${
-                isOpen ? "rotate-180" : "rotate-0"
-              }`}
-            >
-              {isOpen ? <CloseIcon /> : <MenuIcon />}
-            </span>
-          }
-          sx={{ display: { lg: "none" } }}
+          startDecorator={isOpen ? <X size={16} /> : <Menu size={16} />}
         >
           {isOpen ? t("close") : t("menu")}
         </Button>
@@ -74,71 +84,68 @@ export const Sidebar = () => {
             : "max-h-0 opacity-0 pointer-events-none"
         } lg:max-h-none lg:opacity-100 lg:pointer-events-auto`}
       >
-        <div className="flex flex-1 flex-col gap-2">
-          <Button
-            onClick={() => handleNavigate("/app/inventory")}
-            variant={variant("/app/inventory")}
-            startDecorator={<InventoryIcon />}
-            className={btnClass}
-          >
-            {t("inventory")}
-          </Button>
-          <Button
-            onClick={() => handleNavigate("/app/add-product")}
-            variant={variant("/app/add-product")}
-            startDecorator={<AddBoxIcon />}
-            className={btnClass}
-          >
-            {t("add")}
-          </Button>
-          <Button
-            onClick={() => handleNavigate("/app/storages")}
-            variant={variant("/app/storages")}
-            startDecorator={<StorageIcon />}
-            className={btnClass}
-          >
-            {t("storages")}
-          </Button>
-          <Button
-            onClick={() => handleNavigate("/app/app-settings")}
-            variant={variant("/app/app-settings")}
-            startDecorator={<SettingsIcon />}
-            className={btnClass}
-          >
-            {t("settings")}
-          </Button>
-          <Button
-            onClick={() => {
-              Cookies.remove("token");
-              handleNavigate("/login");
-            }}
-            color="danger"
-            startDecorator={<ExitToAppIcon />}
-            className={btnClass}
-          >
-            {t("logout")}
-          </Button>
-          <Button
-            onClick={() => {
-              changeTranslation();
-              setIsOpen(false);
-            }}
-            color="neutral"
-            startDecorator={<TranslateIcon />}
-            className={btnClass}
-          >
-            {t("change-translation")}
-          </Button>
+        <div className="flex flex-1 flex-col gap-1">
+          {navItems.map((item) => {
+            const active = isActive(item.to);
+            return (
+              <Button
+                key={item.to}
+                onClick={() => handleNavigate(item.to)}
+                variant={active ? "soft" : "plain"}
+                color="primary"
+                startDecorator={item.icon}
+                endDecorator={
+                  item.count !== undefined ? (
+                    <Chip size="sm" variant="soft" color={active ? "primary" : "neutral"}>
+                      {item.count}
+                    </Chip>
+                  ) : undefined
+                }
+                className={btnClass}
+                sx={{
+                  color: active
+                    ? "var(--joy-palette-primary-solidBg)"
+                    : "var(--joy-palette-text-secondary)",
+                  borderLeft: "3px solid",
+                  borderLeftColor: active ? "var(--joy-palette-primary-solidBg)" : "transparent",
+                  "&:hover": {
+                    bgcolor: active
+                      ? "var(--joy-palette-primary-softBg)"
+                      : "var(--joy-palette-background-level1)",
+                  },
+                }}
+              >
+                {item.label}
+              </Button>
+            );
+          })}
         </div>
 
-        <div className="flex items-center gap-3 rounded-2xl border border-white/70 bg-white/80 px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-[#0b6bcb] shadow-[0_12px_30px_rgba(12,38,78,0.12)]">
-          <img
-            src="/favicon.png"
-            alt="Stockhome"
-            className="h-7 w-7 rounded-lg"
-          />
-          <span>Stockhome</span>
-        </div>
+        <button
+          type="button"
+          onClick={() => handleNavigate("/app/app-settings")}
+          className="flex items-center gap-3 rounded-2xl px-3 py-2.5 text-left transition"
+          style={{
+            border: "1px solid var(--joy-palette-divider)",
+            backgroundColor: "var(--joy-palette-background-level1)",
+          }}
+        >
+          <span
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold"
+            style={{
+              backgroundColor: "var(--joy-palette-primary-softBg)",
+              color: "var(--joy-palette-primary-softColor)",
+            }}
+          >
+            {initials}
+          </span>
+          <div className="min-w-0 flex-1">
+            <Typography level="title-md" className="truncate" sx={{ color: "var(--joy-palette-text-primary)" }}>
+              {appName}
+            </Typography>
+          </div>
+          <ChevronRight size={16} color="var(--joy-palette-text-tertiary)" />
+        </button>
       </div>
     </aside>
   );

frontend/src/components/StatTiles.tsx

@@ -0,0 +1,53 @@
+import { Typography } from "@mui/joy";
+import { useTranslation } from "react-i18next";
+
+interface StatTilesProps {
+  expired: number;
+  expiringSoon: number;
+  lowStock: number;
+  unitsStored: number;
+}
+
+export const StatTiles = ({
+  expired,
+  expiringSoon,
+  lowStock,
+  unitsStored,
+}: StatTilesProps) => {
+  const { t } = useTranslation();
+
+  const tiles = [
+    { value: expired, label: t("stat-expired"), accent: "var(--joy-palette-danger-solidBg)" },
+    { value: expiringSoon, label: t("stat-expiring-soon"), accent: "var(--joy-palette-warning-solidBg)" },
+    { value: lowStock, label: t("stat-low-stock"), accent: "var(--joy-palette-neutral-500)" },
+    { value: unitsStored, label: t("stat-units-stored"), accent: "var(--joy-palette-primary-solidBg)" },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+      {tiles.map((tile) => (
+        <div
+          key={tile.label}
+          className="flex items-center gap-3 rounded-2xl border border-solid px-4 py-4"
+          style={{
+            borderColor: "var(--joy-palette-divider)",
+            backgroundColor: "var(--joy-palette-background-surface)",
+          }}
+        >
+          <span
+            className="h-9 w-[3px] shrink-0 rounded-full"
+            style={{ backgroundColor: tile.accent }}
+          />
+          <div>
+            <Typography level="h2" sx={{ color: "var(--joy-palette-text-primary)" }}>
+              {tile.value}
+            </Typography>
+            <Typography level="body-sm" className="normal-case font-normal" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+              {tile.label}
+            </Typography>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

frontend/src/components/StorageRow.tsx

@@ -1,11 +1,14 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { deleteStorage, updateStorage } from "../utils/api/storages";
 import { useForm } from "@tanstack/react-form";
-import { useStore } from "@tanstack/react-store";
-import { Button, Input } from "@mui/joy";
+import { Button, IconButton, Input } from "@mui/joy";
+import { Trash2 } from "lucide-react";
 import type { Storage } from "../misc/interfaces";
 import { formatDate } from "../utils/uxFncs";
+import { Mono } from "./Mono.tsx";
 import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import { DeleteConfirmation } from "./modals/DeleteConfirmation.tsx";
 
 interface StorageRowProps {
   storage: Storage;
@@ -15,6 +18,9 @@ interface StorageRowProps {
 export const StorageRow = ({ storage, onError }: StorageRowProps) => {
   const { t } = useTranslation();
 
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [storageToDelete, setStorageToDelete] = useState<Storage | null>(null);
+
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
@@ -26,6 +32,11 @@ export const StorageRow = ({ storage, onError }: StorageRowProps) => {
     onError,
   });
 
+  const deleteStorageModalFnc = async (storage: Storage) => {
+    setStorageToDelete(storage);
+    setShowModal(true);
+  };
+
   const deleteMutation = useMutation({
     mutationFn: (uuid: string) => deleteStorage(uuid),
     onSuccess: () => {
@@ -44,71 +55,100 @@ export const StorageRow = ({ storage, onError }: StorageRowProps) => {
     },
   });
 
-  const values = useStore(form.baseStore, (state) => state.values);
-  const isDirty =
-    values.name !== storage.name ||
-    (values.description ?? "") !== (storage.description ?? "");
-
   return (
-    <tr key={storage.uuid} className="border-t border-slate-200 align-top">
-      <td className="px-6 py-5">
-        <form.Field name="name">
-          {(field) => (
-            <Input
-              value={field.state.value}
-              onChange={(e) => field.handleChange(e.target.value)}
-              onBlur={field.handleBlur}
+    <>
+      <DeleteConfirmation
+        open={showModal}
+        setOpen={setShowModal}
+        storage={storageToDelete}
+        deleteStorageByUUID={(uuid) => deleteMutation.mutateAsync(uuid)}
+      />
+      <tr key={storage.uuid} className="align-top">
+        <td className="px-6 py-5">
+          <form.Field name="name">
+            {(field) => (
+              <Input
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                size="sm"
+                variant="outlined"
+                className="rounded-xl shadow-none"
+                sx={{
+                  bgcolor: "var(--joy-palette-background-level1)",
+                  color: "var(--joy-palette-text-secondary)",
+                  "--Input-focusedHighlight": "var(--joy-palette-neutral-300)",
+                }}
+              />
+            )}
+          </form.Field>
+        </td>
+        <td className="px-6 py-5">
+          <form.Field name="description">
+            {(field) => (
+              <Input
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                size="sm"
+                variant="outlined"
+                className="rounded-xl shadow-none"
+                sx={{
+                  bgcolor: "var(--joy-palette-background-level1)",
+                  color: "var(--joy-palette-text-secondary)",
+                  "--Input-focusedHighlight": "var(--joy-palette-neutral-300)",
+                }}
+              />
+            )}
+          </form.Field>
+        </td>
+        <td
+          className="px-6 py-5 text-sm"
+          style={{ color: "var(--joy-palette-text-tertiary)" }}
+        >
+          <Mono>{formatDate(storage.created_at)}</Mono>
+        </td>
+        <td
+          className="px-6 py-5 text-sm"
+          style={{ color: "var(--joy-palette-text-tertiary)" }}
+        >
+          <Mono>{formatDate(storage.updated_at)}</Mono>
+        </td>
+        <td className="px-6 py-5 text-right">
+          <div className="flex flex-wrap justify-end gap-2">
+            <form.Subscribe
+              selector={(state) =>
+                state.values.name !== storage.name ||
+                (state.values.description ?? "") !== (storage.description ?? "")
+              }
+            >
+              {(isDirty) =>
+                isDirty && (
+                  <Button
+                    color="primary"
+                    onClick={form.handleSubmit}
+                    disabled={mutation.isPending || deleteMutation.isPending}
+                    size="sm"
+                    className="rounded-xl"
+                  >
+                    {mutation.isPending ? "..." : t("save")}
+                  </Button>
+                )
+              }
+            </form.Subscribe>
+            <IconButton
+              color="danger"
+              variant="plain"
+              onClick={() => deleteStorageModalFnc(storage)}
+              disabled={mutation.isPending || deleteMutation.isPending}
               size="sm"
-              variant="outlined"
-              className="rounded-xl bg-slate-50/80 text-slate-700 shadow-none ring-1 ring-inset ring-slate-200 focus-within:ring-2 focus-within:ring-slate-300"
-            />
-          )}
-        </form.Field>
-      </td>
-      <td className="px-6 py-5">
-        <form.Field name="description">
-          {(field) => (
-            <Input
-              value={field.state.value}
-              onChange={(e) => field.handleChange(e.target.value)}
-              onBlur={field.handleBlur}
-              size="sm"
-              variant="outlined"
-              className="rounded-xl bg-slate-50/80 text-slate-700 shadow-none ring-1 ring-inset ring-slate-200 focus-within:ring-2 focus-within:ring-slate-300"
-            />
-          )}
-        </form.Field>
-      </td>
-      <td className="px-6 py-5 text-sm text-slate-500">
-        {formatDate(storage.created_at)}
-      </td>
-      <td className="px-6 py-5 text-sm text-slate-500">
-        {formatDate(storage.updated_at)}
-      </td>
-      <td className="px-6 py-5 text-right">
-        <div className="flex flex-wrap justify-end gap-2">
-          <Button
-            color="primary"
-            onClick={form.handleSubmit}
-            disabled={
-              !isDirty || mutation.isPending || deleteMutation.isPending
-            }
-            size="sm"
-            className="rounded-xl"
-          >
-            {mutation.isPending ? "..." : t("save")}
-          </Button>
-          <Button
-            color="danger"
-            onClick={() => deleteMutation.mutateAsync(storage.uuid)}
-            disabled={mutation.isPending || deleteMutation.isPending}
-            size="sm"
-            className="rounded-xl"
-          >
-            {deleteMutation.isPending ? "..." : t("delete")}
-          </Button>
-        </div>
-      </td>
-    </tr>
+              className="rounded-xl"
+            >
+              <Trash2 size={16} />
+            </IconButton>
+          </div>
+        </td>
+      </tr>
+    </>
   );
 };

frontend/src/components/modals/AddStorageModal.tsx

@@ -1,19 +1,11 @@
-import {
-  Alert,
-  Button,
-  DialogContent,
-  DialogTitle,
-  Input,
-  Modal,
-  ModalDialog,
-  Stack,
-} from "@mui/joy";
+import { Button, DialogContent, DialogTitle, Input, Modal, ModalDialog, Stack, } from "@mui/joy";
 import { useForm } from "@tanstack/react-form";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import type { AlertInterface, NewStorage } from "../../misc/interfaces";
 import { mutateNewStorage } from "../../utils/api/storages";
 import { useState } from "react";
+import { MyAlert } from "../MyAlert.tsx";
 
 interface AddStorageModalProps {
   isOpen: boolean;
@@ -59,11 +51,18 @@ export const AddStorageModal = (props: AddStorageModalProps) => {
   return (
     <>
       <Modal open={props.isOpen} onClose={() => props.setOpen(false)}>
-        <ModalDialog className="rounded-3xl border border-white/70 bg-white/90 p-6 shadow-[0_30px_70px_rgba(12,38,78,0.2)] backdrop-blur">
-          <DialogTitle className="text-slate-900">
+        <ModalDialog
+          className="rounded-3xl p-6"
+          sx={{
+            border: "1px solid",
+            borderColor: "divider",
+            bgcolor: "background.surface",
+          }}
+        >
+          <DialogTitle sx={{ color: "var(--joy-palette-text-primary)" }}>
             {t("new-storage-title")}
           </DialogTitle>
-          <DialogContent className="text-slate-500">
+          <DialogContent sx={{ color: "var(--joy-palette-text-tertiary)" }}>
             {t("new-storage-content")}
           </DialogContent>
           <form
@@ -81,7 +80,7 @@ export const AddStorageModal = (props: AddStorageModalProps) => {
                     placeholder={t("storage-name")}
                     variant="outlined"
                     size="lg"
-                    className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                    className="rounded-2xl"
                   />
                 )}
               </form.Field>
@@ -93,29 +92,27 @@ export const AddStorageModal = (props: AddStorageModalProps) => {
                     placeholder={t("description")}
                     variant="outlined"
                     size="lg"
-                    className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                    className="rounded-2xl"
                   />
                 )}
               </form.Field>
               <Button
                 type="submit"
                 size="lg"
-                className="rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
+                color="primary"
+                variant="solid"
+                className="btn-lift rounded-2xl"
               >
                 {t("submit")}
               </Button>
             </Stack>
           </form>
           {alert.isAlert && (
-            <Alert
-              variant="soft"
-              color={alert.type}
-              className="mt-4 rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-            >
-              {alert.header}
-              <br />
-              {alert.text}
-            </Alert>
+            <MyAlert
+              type={alert.type}
+              header={alert.header}
+              text={alert.text}
+            />
           )}
         </ModalDialog>
       </Modal>

frontend/src/components/modals/ChangePasswordModal.tsx

@@ -1,4 +1,11 @@
-import { Alert, Button, DialogTitle, Input, Modal, ModalDialog, Stack, } from "@mui/joy";
+import {
+  Button,
+  DialogTitle,
+  Input,
+  Modal,
+  ModalDialog,
+  Stack,
+} from "@mui/joy";
 import { useForm } from "@tanstack/react-form";
 import { useMutation } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
@@ -6,6 +13,7 @@ import type { AlertInterface, ChangePasswordIntf } from "../../misc/interfaces";
 import { mutatePassword } from "../../utils/api/auth";
 import { useState } from "react";
 import { USER_ERROR_CODE } from "@stockhome/shared";
+import { MyAlert } from "../MyAlert.tsx";
 
 interface ChangePasswordProps {
   isOpen: boolean;
@@ -29,8 +37,6 @@ export const ChangePasswordModal = (props: ChangePasswordProps) => {
       newPasswordRep: "",
     },
     onSubmit: async ({ value }) => {
-      console.log(value);
-
       if (
         value.newPassword === value.newPasswordRep &&
         value.newPassword !== ""
@@ -58,7 +64,6 @@ export const ChangePasswordModal = (props: ChangePasswordProps) => {
       });
     },
     onSuccess: () => {
-      // Sets the success alert in the settings page via component props
       props.alert({
         isAlert: true,
         type: "success",
@@ -66,7 +71,6 @@ export const ChangePasswordModal = (props: ChangePasswordProps) => {
         text: t("SU005"),
       });
 
-      // Sets the success alert locally (in the modal itself)
       setAlert({
         isAlert: true,
         type: "success",
@@ -80,8 +84,15 @@ export const ChangePasswordModal = (props: ChangePasswordProps) => {
   return (
     <>
       <Modal open={props.isOpen} onClose={() => props.setOpen(false)}>
-        <ModalDialog className="rounded-3xl border border-white/70 bg-white/90 p-6 shadow-[0_30px_70px_rgba(12,38,78,0.2)] backdrop-blur">
-          <DialogTitle className="text-slate-900">
+        <ModalDialog
+          className="rounded-3xl p-6"
+          sx={{
+            border: "1px solid",
+            borderColor: "divider",
+            bgcolor: "background.surface",
+          }}
+        >
+          <DialogTitle sx={{ color: "var(--joy-palette-text-primary)" }}>
             {t("new-password-title")}
           </DialogTitle>
           <form
@@ -100,7 +111,7 @@ export const ChangePasswordModal = (props: ChangePasswordProps) => {
                     placeholder={t("current-password")}
                     variant="outlined"
                     size="lg"
-                    className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                    className="rounded-2xl"
                   />
                 )}
               </form.Field>
@@ -113,7 +124,7 @@ export const ChangePasswordModal = (props: ChangePasswordProps) => {
                     placeholder={t("new-password")}
                     variant="outlined"
                     size="lg"
-                    className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                    className="rounded-2xl"
                   />
                 )}
               </form.Field>
@@ -126,29 +137,27 @@ export const ChangePasswordModal = (props: ChangePasswordProps) => {
                     placeholder={t("new-password-rep")}
                     variant="outlined"
                     size="lg"
-                    className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                    className="rounded-2xl"
                   />
                 )}
               </form.Field>
               <Button
                 type="submit"
                 size="lg"
-                className="rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
+                color="primary"
+                variant="solid"
+                className="btn-lift rounded-2xl"
               >
                 {t("change")}
               </Button>
             </Stack>
           </form>
           {alert.isAlert && (
-            <Alert
-              variant="soft"
-              color={alert.type}
-              className="mt-4 rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-            >
-              {alert.header}
-              <br />
-              {alert.text}
-            </Alert>
+            <MyAlert
+              type={alert.type}
+              header={alert.header}
+              text={alert.text}
+            />
           )}
         </ModalDialog>
       </Modal>

frontend/src/components/modals/DeleteConfirmation.tsx

@@ -0,0 +1,54 @@
+import Button from "@mui/joy/Button";
+import Divider from "@mui/joy/Divider";
+import DialogTitle from "@mui/joy/DialogTitle";
+import DialogContent from "@mui/joy/DialogContent";
+import DialogActions from "@mui/joy/DialogActions";
+import Modal from "@mui/joy/Modal";
+import ModalDialog from "@mui/joy/ModalDialog";
+import type { Storage } from "../../misc/interfaces";
+import { useTranslation } from "react-i18next";
+
+interface DeleteConfirmationProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  storage: Storage | null;
+  deleteStorageByUUID: (uuid: string) => void;
+}
+
+export const DeleteConfirmation = (props: DeleteConfirmationProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal open={props.open} onClose={() => props.setOpen(false)}>
+      <ModalDialog variant="outlined" role="alertdialog">
+        <DialogTitle>Confirmation</DialogTitle>
+        <Divider />
+        <DialogContent>
+          {t("delete-confirmation-text")}
+          {props.storage ? ` "${props.storage.name}"` : ""}?
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="solid"
+            color="danger"
+            onClick={() => {
+              if (props.storage) {
+                props.deleteStorageByUUID(props.storage.uuid);
+              }
+              props.setOpen(false);
+            }}
+          >
+            {t("delete")}
+          </Button>
+          <Button
+            variant="plain"
+            color="neutral"
+            onClick={() => props.setOpen(false)}
+          >
+            {t("cancel")}
+          </Button>
+        </DialogActions>
+      </ModalDialog>
+    </Modal>
+  );
+};

frontend/src/hooks/useLogout.ts

@@ -0,0 +1,13 @@
+import Cookies from "js-cookie";
+import { useNavigate } from "@tanstack/react-router";
+
+export const useLogout = () => {
+  const navigate = useNavigate();
+
+  const logout = () => {
+    Cookies.remove("token");
+    void navigate({ to: "/login", search: { loggedOut: true } });
+  };
+
+  return { logout };
+};

frontend/src/index.css

@@ -1 +1,54 @@
 @import "tailwindcss";
+
+@keyframes page-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-page-in {
+  animation: page-in 220ms ease-out;
+}
+
+.animate-fade-in {
+  animation: fade-in 180ms ease-out;
+}
+
+.btn-lift {
+  transition:
+    transform 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.btn-lift:hover {
+  transform: translateY(-1px);
+}
+
+.btn-lift:active {
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-page-in,
+  .animate-fade-in,
+  .btn-lift {
+    animation: none !important;
+    transition: none !important;
+  }
+}

frontend/src/main.tsx

@@ -1,5 +1,10 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import "@fontsource/ibm-plex-sans/400.css";
+import "@fontsource/ibm-plex-sans/500.css";
+import "@fontsource/ibm-plex-sans/600.css";
+import "@fontsource/ibm-plex-sans/700.css";
+import "@fontsource/ibm-plex-mono/500.css";
 import "./index.css";
 import "./utils/i18n";
 import App from "./App.tsx";

frontend/src/misc/interfaces.ts

@@ -59,6 +59,7 @@ export type ProductRow = {
   location: string;
   locationDetail: string;
   expiryDate: string;
+  expiryDateRaw: string | null;
   refillDate: string;
 };
 

frontend/src/pages/AddProduct.tsx

@@ -1,31 +1,25 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
-import {
-  Alert,
-  Box,
-  Button,
-  Chip,
-  Divider,
-  Input,
-  Option,
-  Select,
-  Typography,
-} from "@mui/joy";
+import { Button, Input, Option, Select, Typography } from "@mui/joy";
 import { useTranslation } from "react-i18next";
 import { useEffect, useState } from "react";
 import { useForm } from "@tanstack/react-form";
 import { createProduct } from "../utils/api/products";
 import { getStorages } from "../utils/api/storages";
-import type {
-  AlertInterface,
-  ProductFormValues,
-  Storage,
-} from "../misc/interfaces";
+import type { AlertInterface, ProductFormValues, Storage } from "../misc/interfaces";
 import type { ApiError } from "../utils/api/apiError";
 import Cookies from "js-cookie";
+import { AmountStepper } from "../components/AmountStepper.tsx";
+import { PageHeader } from "../components/PageHeader.tsx";
+import { MyAlert } from "../components/MyAlert.tsx";
+
+const cardSx = {
+  border: "1px solid",
+  borderColor: "divider",
+  bgcolor: "background.surface",
+} as const;
 
 export const AddProduct = () => {
   const { t } = useTranslation();
-  const [success, setSuccess] = useState(false);
   const [alert, setAlert] = useState<AlertInterface>({
     isAlert: false,
     type: "neutral",
@@ -69,7 +63,6 @@ export const AddProduct = () => {
       storage_location_uuid: "",
     },
     onSubmit: async ({ value }) => {
-      setSuccess(false);
       mutate(value);
     },
   });
@@ -77,44 +70,34 @@ export const AddProduct = () => {
   const { mutate, isPending } = useMutation({
     mutationFn: (values: ProductFormValues) => createProduct(values),
     onSuccess: () => {
-      setSuccess(true);
+      setAlert({
+        isAlert: true,
+        type: "success",
+        header: "",
+        text: "",
+      });
     },
     onError: showError,
   });
 
   return (
-    <>
-      <div className="space-y-6">
-        <div className="flex flex-wrap items-center gap-3">
-          <div className="space-y-1">
-            <Typography level="h2" className="text-slate-900">
-              {t("add-product")}
+    <div className="space-y-6">
+      <PageHeader title={t("add-product")} subtitle={t("add-product-subtitle")} />
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          form.handleSubmit();
+        }}
+      >
+        <div className="grid gap-5 lg:grid-cols-2">
+          <div className="rounded-3xl p-6" style={cardSx}>
+            <Typography level="title-lg" sx={{ color: "var(--joy-palette-text-primary)" }}>
+              {t("product")}
             </Typography>
-            <Typography level="body-lg" className="text-slate-500">
-              {t("add-product-subtitle")}
-            </Typography>
-          </div>
-          <Chip
-            variant="soft"
-            color="primary"
-            className="ml-auto rounded-full px-3"
-          >
-            {t("details")}
-          </Chip>
-        </div>
-      </div>
-      <Box className="mt-6 rounded-3xl border border-white/70 bg-white/80 p-6 shadow-[0_24px_60px_rgba(12,38,78,0.12)] backdrop-blur">
-        <form
-          className="space-y-6"
-          onSubmit={(e) => {
-            e.preventDefault();
-            form.handleSubmit();
-          }}
-        >
-          <div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
-            <div className="space-y-4">
+            <div className="mt-4 space-y-4">
               <div className="space-y-1">
-                <Typography level="title-md" className="text-slate-900">
+                <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
                   {t("product-name")}
                 </Typography>
                 <form.Field name="name">
@@ -122,55 +105,39 @@ export const AddProduct = () => {
                     <Input
                       type="text"
                       required
+                      placeholder={t("product-name-placeholder")}
                       value={field.state.value}
                       onChange={(e) => field.handleChange(e.target.value)}
                       onBlur={field.handleBlur}
                       size="lg"
                       variant="outlined"
-                      className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                      className="rounded-2xl"
                     />
                   )}
                 </form.Field>
               </div>
               <div className="space-y-1">
-                <Typography level="title-md" className="text-slate-900">
+                <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
                   {t("description")}
                 </Typography>
                 <form.Field name="description">
                   {(field) => (
                     <Input
                       type="text"
+                      placeholder={t("description-placeholder")}
                       value={field.state.value}
                       onChange={(e) => field.handleChange(e.target.value)}
                       onBlur={field.handleBlur}
                       size="lg"
                       variant="outlined"
-                      className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                      className="rounded-2xl"
                     />
                   )}
                 </form.Field>
               </div>
-              <div className="grid gap-4 md:grid-cols-2">
+              <div className="grid gap-4 sm:grid-cols-2">
                 <div className="space-y-1">
-                  <Typography level="title-md" className="text-slate-900">
-                    {t("expiry-date")}
-                  </Typography>
-                  <form.Field name="expiry_date">
-                    {(field) => (
-                      <Input
-                        type="date"
-                        value={field.state.value}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        onBlur={field.handleBlur}
-                        size="lg"
-                        variant="outlined"
-                        className="rounded-2xl bg-white/90"
-                      />
-                    )}
-                  </form.Field>
-                </div>
-                <div className="space-y-1">
-                  <Typography level="title-md" className="text-slate-900">
+                  <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
                     {t("bottling-date")}
                   </Typography>
                   <form.Field name="bottling_date">
@@ -182,136 +149,123 @@ export const AddProduct = () => {
                         onBlur={field.handleBlur}
                         size="lg"
                         variant="outlined"
-                        className="rounded-2xl bg-white/90"
+                        className="rounded-2xl"
+                      />
+                    )}
+                  </form.Field>
+                </div>
+                <div className="space-y-1">
+                  <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                    {t("expiry-date")}
+                  </Typography>
+                  <form.Field name="expiry_date">
+                    {(field) => (
+                      <Input
+                        type="date"
+                        value={field.state.value}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        onBlur={field.handleBlur}
+                        size="lg"
+                        variant="outlined"
+                        className="rounded-2xl"
                       />
                     )}
                   </form.Field>
                 </div>
               </div>
             </div>
-            <div className="space-y-4">
-              <div className="rounded-2xl border border-white/70 bg-linear-to-br from-[#f7fbff] via-[#f2f6fb] to-[#eef3f9] p-5 shadow-[0_16px_40px_rgba(12,38,78,0.08)]">
-                <Typography level="title-md" className="text-slate-900">
-                  {t("inventory")}
+          </div>
+
+          <div className="rounded-3xl p-6" style={cardSx}>
+            <Typography level="title-lg" sx={{ color: "var(--joy-palette-text-primary)" }}>
+              {t("inventory")}
+            </Typography>
+            <div className="mt-4 space-y-4">
+              <div className="space-y-1">
+                <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                  {t("amount")}
                 </Typography>
-                <Divider className="my-3" />
-                <div className="grid gap-4">
-                  <div className="space-y-1">
-                    <Typography level="title-md" className="text-slate-900">
-                      {t("amount")}
-                    </Typography>
-                    <form.Field name="amount">
-                      {(field) => (
-                        <Input
-                          type="number"
-                          color="neutral"
-                          id="amountInput"
-                          placeholder={t("amount")}
-                          value={field.state.value}
-                          variant="soft"
-                          size="lg"
-                          onChange={(e) => {
-                            const nextValue = Number(e.target.value);
-                            field.handleChange(
-                              Number.isNaN(nextValue) ? 0 : nextValue,
-                            );
-                          }}
-                          onBlur={field.handleBlur}
-                          className="rounded-2xl bg-white/80"
-                        />
-                      )}
-                    </form.Field>
-                  </div>
-                  <div className="space-y-1">
-                    <Typography level="title-md" className="text-slate-900">
-                      {t("price")}
-                    </Typography>
-                    <form.Field name="price">
-                      {(field) => (
-                        <Input
-                          type="text"
-                          value={field.state.value}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          onBlur={field.handleBlur}
-                          size="lg"
-                          variant="outlined"
-                          className="rounded-2xl bg-white/90"
-                        />
-                      )}
-                    </form.Field>
-                    <Typography level="body-sm" className="text-slate-500">
-                      {Cookies.get("currency")}
-                    </Typography>
-                  </div>
-                  <div className="space-y-1">
-                    <Typography level="title-md" className="text-slate-900">
-                      {t("storage-place")}
-                    </Typography>
-                    <form.Field name="storage_location_uuid">
-                      {(field) => (
-                        <Select
-                          required
-                          value={field.state.value}
-                          onChange={(_event, value) =>
-                            field.handleChange(value ?? "")
-                          }
-                          size="lg"
-                          variant="outlined"
-                          className="rounded-2xl bg-white/90"
-                        >
-                          {storages?.map((storage) => (
-                            <Option key={storage.uuid} value={storage.uuid}>
-                              {storage.name}
-                            </Option>
-                          ))}
-                        </Select>
-                      )}
-                    </form.Field>
-                  </div>
-                </div>
+                <form.Field name="amount">
+                  {(field) => (
+                    <AmountStepper
+                      value={field.state.value}
+                      onChange={field.handleChange}
+                      onBlur={field.handleBlur}
+                    />
+                  )}
+                </form.Field>
               </div>
+              <div className="space-y-1">
+                <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                  {t("price")}
+                </Typography>
+                <form.Field name="price">
+                  {(field) => (
+                    <Input
+                      type="text"
+                      value={field.state.value}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onBlur={field.handleBlur}
+                      size="lg"
+                      variant="outlined"
+                      className="rounded-2xl"
+                      endDecorator={
+                        <Typography level="body-sm" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                          {Cookies.get("currency")}
+                        </Typography>
+                      }
+                    />
+                  )}
+                </form.Field>
+              </div>
+              <div className="space-y-1">
+                <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                  {t("storage-place")}
+                </Typography>
+                <form.Field name="storage_location_uuid">
+                  {(field) => (
+                    <Select
+                      required
+                      placeholder={t("choose-storage")}
+                      value={field.state.value}
+                      onChange={(_event, value) => field.handleChange(value ?? "")}
+                      size="lg"
+                      variant="outlined"
+                      className="rounded-2xl"
+                    >
+                      {storages?.map((storage) => (
+                        <Option key={storage.uuid} value={storage.uuid}>
+                          {storage.name}
+                        </Option>
+                      ))}
+                    </Select>
+                  )}
+                </form.Field>
+              </div>
+              <Typography level="body-sm" className="normal-case font-normal" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                {t("amount-price-optional-hint")}
+              </Typography>
             </div>
           </div>
-          <div className="flex gap-3 items-center">
-            <Typography level="body-sm" className="text-slate-500">
-              {t("product-details")}
-            </Typography>
-            <div className="grow"></div>
-            <Button
-              type="submit"
-              loading={isPending}
-              size="lg"
-              className="rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
-            >
-              {t("save")}
+        </div>
+
+        <div className="mt-5 flex flex-wrap items-center justify-between gap-3">
+          <Typography level="body-sm" className="normal-case font-normal" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+            {t("all-fields-editable-later")}
+          </Typography>
+          <div className="flex gap-3">
+            <Button type="submit" loading={isPending} size="lg" color="primary" variant="solid" className="btn-lift rounded-2xl">
+              {t("save-product")}
             </Button>
           </div>
-          {alert.isAlert && (
-            <Alert
-              color={alert.type}
-              variant="soft"
-              className="rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-            >
-              {alert.header}
-              <br />
-              {alert.text}
-            </Alert>
-          )}
-          {success && (
-            <Alert
-              color="success"
-              variant="soft"
-              className="rounded-2xl border border-emerald-200/70 bg-emerald-50/80 text-emerald-700 shadow-[0_14px_30px_rgba(16,185,129,0.18)]"
-            >
-              <div className="flex w-full items-center justify-between">
-                <Typography level="body-sm" className="text-emerald-700">
-                  {t("success")}
-                </Typography>
-              </div>
-            </Alert>
-          )}
-        </form>
-      </Box>
-    </>
+        </div>
+
+        {alert.isAlert && (
+          <div className="mt-4">
+            <MyAlert type={alert.type} header={alert.header} text={alert.text} />
+          </div>
+        )}
+      </form>
+    </div>
   );
 };

frontend/src/pages/Inventory.tsx

@@ -1,24 +1,53 @@
-import { useEffect, useState } from "react";
-import {
-  Alert,
-  Avatar,
-  Button,
-  Checkbox,
-  Chip,
-  CircularProgress,
-  Sheet,
-  Table,
-  Typography,
-} from "@mui/joy";
+import { ChangeEvent, Fragment, MouseEvent, useEffect, useMemo, useState } from "react";
+import { Button, Checkbox, Chip, CircularProgress, Input, Sheet, Table, Typography } from "@mui/joy";
 import { useNavigate } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
-import AddIcon from "@mui/icons-material/Add";
+import { ChevronDown, Plus, Search, Trash2 } from "lucide-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { deleteSelectedProducts, getProducts } from "../utils/api/products";
 import { formatDate } from "../utils/uxFncs";
 import Cookies from "js-cookie";
 import type { AlertInterface, ProductRow } from "../misc/interfaces";
 import type { ApiError } from "../utils/api/apiError";
+import { MyAlert } from "../components/MyAlert.tsx";
+import { PageHeader } from "../components/PageHeader.tsx";
+import { StatTiles } from "../components/StatTiles.tsx";
+import { Mono } from "../components/Mono.tsx";
+import { ProductStatusBar } from "../components/ProductStatusBar.tsx";
+import { getExpiryDays, getProductStatus, isExpired, isExpiringSoon, isLowStock } from "../utils/productStatus";
+
+const relativeColor = {
+  expired: "var(--joy-palette-danger-solidBg)",
+  "expiring-soon": "var(--joy-palette-warning-solidBg)",
+  ok: "var(--joy-palette-text-tertiary)",
+} as const;
+
+// Small "in N days" / "Expired N days ago" line shown under a row's expiry date.
+const ExpiryRelative = ({ expiryDate }: { expiryDate: string | null }) => {
+  const { t } = useTranslation();
+  const expiry = getExpiryDays(expiryDate);
+  if (!expiry) {
+    return null;
+  }
+  const text =
+    expiry.status === "expired"
+      ? t("days-since-expired", { count: Math.abs(expiry.days) })
+      : t("days-until-expiry", { count: expiry.days });
+  return (
+    <Typography level="body-sm" className="normal-case font-normal" sx={{ color: relativeColor[expiry.status] }}>
+      {text}
+    </Typography>
+  );
+};
+
+type FilterKey = "all" | "expired" | "soon" | "low";
+
+const matchesFilter = (row: ProductRow, filter: FilterKey) => {
+  if (filter === "all") return true;
+  if (filter === "expired") return isExpired(row.expiryDateRaw);
+  if (filter === "soon") return isExpiringSoon(row.expiryDateRaw);
+  return isLowStock(Number(row.stockLabel));
+};
 
 export const InventoryPage = () => {
   const { t } = useTranslation();
@@ -30,6 +59,9 @@ export const InventoryPage = () => {
     header: "",
     text: "",
   });
+  const [search, setSearch] = useState("");
+  const [filter, setFilter] = useState<FilterKey>("all");
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
 
   const showError = (error: unknown) => {
     const errorCode = (error as { code?: string })?.code;
@@ -57,248 +89,409 @@ export const InventoryPage = () => {
     }
   }, [productsError, productsErrorObj]);
 
-  const rows: ProductRow[] = (productsData ?? []).map(
-    (product: any, index: number) => ({
-      id: String(product?.uuid ?? index),
-      uuid: String(product?.uuid ?? ""),
-      name: product?.name ?? t("product-name"),
-      description: product?.description ?? "",
-      imageUrl: product?.picture ?? undefined,
-      price: product?.price ? String(product.price) : "-",
-      stock: `${product?.amount ?? 0} ${t("pcs")}`,
-      stockLabel: String(product?.amount ?? 0),
-      stockStatus: (product?.amount ?? 0) > 0 ? "ok" : "missing",
-      location: product?.storage_location_name ?? "-",
-      locationDetail: "",
-      expiryDate: formatDate(product?.expiry_date),
-      refillDate: formatDate(product?.bottling_date),
-    }),
+  const rows: ProductRow[] = useMemo(
+    () =>
+      (productsData ?? []).map((product: any, index: number) => ({
+        id: String(product?.uuid ?? index),
+        uuid: String(product?.uuid ?? ""),
+        name: product?.name ?? t("product-name"),
+        description: product?.description ?? "",
+        imageUrl: product?.picture ?? undefined,
+        price: product?.price ? String(product.price) : "-",
+        stock: `${product?.amount ?? 0} ${t("pcs")}`,
+        stockLabel: String(product?.amount ?? 0),
+        stockStatus: (product?.amount ?? 0) > 0 ? "ok" : "missing",
+        location: product?.storage_location_name ?? "-",
+        locationDetail: "",
+        expiryDate: formatDate(product?.expiry_date),
+        expiryDateRaw: product?.expiry_date ?? null,
+        refillDate: formatDate(product?.bottling_date),
+      })),
+    [productsData, t],
   );
 
+  const stats = useMemo(
+    () => ({
+      expired: rows.filter((row) => isExpired(row.expiryDateRaw)).length,
+      expiringSoon: rows.filter((row) => isExpiringSoon(row.expiryDateRaw)).length,
+      lowStock: rows.filter((row) => isLowStock(Number(row.stockLabel))).length,
+      unitsStored: rows.reduce((sum, row) => sum + Number(row.stockLabel), 0),
+    }),
+    [rows],
+  );
+
+  const filteredRows = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    return rows
+      .filter((row) => matchesFilter(row, filter))
+      .filter(
+        (row) =>
+          !query ||
+          row.name.toLowerCase().includes(query) ||
+          row.description.toLowerCase().includes(query),
+      );
+  }, [rows, search, filter]);
+
+  const groups = useMemo(() => {
+    const map = new Map<string, ProductRow[]>();
+    for (const row of filteredRows) {
+      const bucket = map.get(row.location) ?? [];
+      bucket.push(row);
+      map.set(row.location, bucket);
+    }
+    return Array.from(map.entries()).map(([name, groupRows]) => ({
+      name,
+      rows: groupRows,
+      units: groupRows.reduce((sum, row) => sum + Number(row.stockLabel), 0),
+    }));
+  }, [filteredRows]);
+
+  const storageCount = useMemo(() => new Set(rows.map((row) => row.location)).size, [rows]);
+
+  const toggleGroup = (name: string) => {
+    setCollapsedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) {
+        next.delete(name);
+      } else {
+        next.add(name);
+      }
+      return next;
+    });
+  };
+
   const [selected, setSelected] = useState<readonly string[]>([]);
 
   const { mutate: deleteSelection, isPending: isDeleting } = useMutation({
     mutationFn: (values: string[]) => deleteSelectedProducts(values),
     onSuccess: () => {
       setSelected([]);
-      queryClient.invalidateQueries({ queryKey: ["products"] });
+      void queryClient.invalidateQueries({ queryKey: ["products"] });
     },
     onError: showError,
   });
 
-  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.checked) {
-      setSelected(rows.map((row) => row.id));
-      return;
-    }
-    setSelected([]);
+  const handleSelectAllClick = (event: ChangeEvent<HTMLInputElement>) => {
+    setSelected(event.target.checked ? filteredRows.map((row) => row.id) : []);
   };
 
-  const handleClick = (_event: React.MouseEvent<unknown>, id: string) => {
-    const selectedIndex = selected.indexOf(id);
-    let newSelected: readonly string[] = [];
-    if (selectedIndex === -1) {
-      newSelected = newSelected.concat(selected, id);
-    } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(selected.slice(1));
-    } else if (selectedIndex === selected.length - 1) {
-      newSelected = newSelected.concat(selected.slice(0, -1));
-    } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(
-        selected.slice(0, selectedIndex),
-        selected.slice(selectedIndex + 1),
-      );
-    }
-    setSelected(newSelected);
+  const handleClick = (_event: MouseEvent<unknown>, id: string) => {
+    setSelected((prev) =>
+      prev.includes(id) ? prev.filter((rowId) => rowId !== id) : [...prev, id],
+    );
   };
 
+  const filterTabs: { key: FilterKey; label: string; count: number; color: "neutral" | "danger" | "warning" }[] = [
+    { key: "all", label: t("filter-all"), count: rows.length, color: "neutral" },
+    { key: "expired", label: t("filter-expired"), count: stats.expired, color: "danger" },
+    { key: "soon", label: t("filter-soon"), count: stats.expiringSoon, color: "warning" },
+    { key: "low", label: t("filter-low"), count: stats.lowStock, color: "neutral" },
+  ];
+
   return (
-    <>
-      <Typography level="h2">{t("inventory")}</Typography>
-      <Typography level="body-lg">{t("inventory-subtitle")}</Typography>
-      <div className="mt-4 flex items-center gap-3">
-        <Button
-          startDecorator={<AddIcon />}
-          onClick={() => navigate({ to: "/app/add-product" })}
-          variant="solid"
-        >
-          {t("add")}
-        </Button>
-        {productsIsLoading && <CircularProgress size="sm" />}
+    <div className="space-y-6">
+      <PageHeader
+        title={t("inventory")}
+        subtitle={t("inventory-summary", { count: rows.length, storages: storageCount })}
+        actions={
+          <Button
+            startDecorator={<Plus size={16} />}
+            onClick={() => navigate({ to: "/app/add-product" })}
+            variant="solid"
+            className="btn-lift rounded-2xl"
+          >
+            {t("add")}
+          </Button>
+        }
+      />
+
+      {productsIsLoading && <CircularProgress size="sm" />}
+      {alert.isAlert && <MyAlert type={alert.type} header={alert.header} text={alert.text} />}
+
+      <StatTiles
+        expired={stats.expired}
+        expiringSoon={stats.expiringSoon}
+        lowStock={stats.lowStock}
+        unitsStored={stats.unitsStored}
+      />
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder={t("search-products")}
+          startDecorator={<Search size={16} />}
+          size="lg"
+          variant="outlined"
+          className="rounded-2xl sm:max-w-xs"
+        />
+        <div className="flex flex-wrap gap-2">
+          {filterTabs.map((tab) => (
+            <Chip
+              key={tab.key}
+              variant={filter === tab.key ? "solid" : "soft"}
+              color={filter === tab.key ? "neutral" : tab.color}
+              onClick={() => setFilter(tab.key)}
+              className="cursor-pointer rounded-full px-3 transition-all duration-150 active:scale-95"
+            >
+              {tab.label} {tab.count}
+            </Chip>
+          ))}
+        </div>
       </div>
-      {alert.isAlert && (
-        <Alert
-          variant="soft"
-          color={alert.type}
-          className="mt-4 rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-        >
-          {alert.header}
-          <br />
-          {alert.text}
-        </Alert>
-      )}
 
       <Sheet
         variant="outlined"
-        className="mt-6 flex min-h-0 flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm sm:h-[calc(100vh-260px)]"
+        className="flex min-h-0 w-full max-w-full flex-col overflow-hidden rounded-2xl"
+        sx={{ border: "1px solid", borderColor: "divider", bgcolor: "background.surface" }}
       >
-        <div className="flex items-center justify-between border-b border-slate-200 px-6 py-4 text-slate-700">
-          <Typography level="body-lg" fontWeight="bold">
-            {t("inventory")}
-          </Typography>
-          <Button
-            size="sm"
-            color="danger"
-            variant="solid"
-            disabled={selected.length === 0 || isDeleting}
-            onClick={() => deleteSelection([...selected])}
+        {selected.length > 0 && (
+          <div
+            className="flex items-center justify-between px-6 py-3"
+            style={{ borderBottom: "1px solid var(--joy-palette-divider)" }}
           >
-            Delete
-          </Button>
-        </div>
-        <div className="flex-1 overflow-auto">
+            <Typography level="body-sm" sx={{ color: "var(--joy-palette-text-secondary)" }}>
+              {selected.length} {t("selected")}
+            </Typography>
+            <Button
+              size="sm"
+              color="danger"
+              variant="solid"
+              startDecorator={<Trash2 size={14} />}
+              disabled={isDeleting}
+              onClick={() => deleteSelection([...selected])}
+              className="rounded-xl"
+            >
+              {t("delete")}
+            </Button>
+          </div>
+        )}
+
+        {/* Desktop: grouped table */}
+        <div className="hidden overflow-auto lg:block">
           <Table
-            aria-labelledby="tableTitle"
             stickyHeader
             stripe="odd"
             variant="plain"
             hoverRow
-            className="min-w-240 text-slate-700"
+            className="w-full"
             sx={{
-              "--TableCell-headBackground":
-                "var(--joy-palette-background-surface)",
-              "& thead": {
-                position: "sticky",
-                top: 0,
-                zIndex: 3,
-                backgroundColor: "rgb(248 250 252)",
-              },
-              "& thead tr": {
-                backgroundColor: "rgb(248 250 252)",
-              },
-              "& thead th:nth-child(2)": {
-                width: "40%",
-              },
-              "& thead th:nth-child(3)": {
-                width: "14%",
-              },
+              tableLayout: "fixed",
+              color: "var(--joy-palette-text-secondary)",
+              "--TableCell-headBackground": "var(--joy-palette-background-level1)",
               "& thead th": {
-                zIndex: 2,
-                backgroundColor: "rgb(248 250 252)",
+                backgroundColor: "var(--joy-palette-background-level1)",
                 backgroundImage: "none",
+                color: "var(--joy-palette-text-secondary)",
+              },
+              "& thead th:nth-child(1)": { width: "40px" },
+              "& thead th:nth-child(2)": { width: "26%" },
+              "& thead th:nth-child(6)": { width: "8%" },
+              "& tr > *:nth-child(n+3)": { textAlign: "left" },
+              "& tbody tr": {
+                borderTop: "1px solid var(--joy-palette-divider)",
+                transition: "background-color 120ms ease",
               },
-              "& tr > *:nth-child(n+4)": { textAlign: "left" },
             }}
           >
             <thead>
-              <tr className="text-slate-600">
-                <th className="px-4 py-4">
+              <tr>
+                <th className="px-2 py-4">
                   <Checkbox
-                    checked={rows.length > 0 && selected.length === rows.length}
-                    indeterminate={
-                      selected.length > 0 && selected.length < rows.length
-                    }
+                    checked={filteredRows.length > 0 && selected.length === filteredRows.length}
+                    indeterminate={selected.length > 0 && selected.length < filteredRows.length}
                     onChange={handleSelectAllClick}
                     slotProps={{ input: { "aria-label": "select all" } }}
-                    sx={{ verticalAlign: "sub" }}
                   />
                 </th>
-                <th className="px-6 py-4">{t("product-name")}</th>
-                <th className="px-6 py-4">{t("price")}</th>
-                <th className="px-6 py-4">{t("stock")}</th>
-                <th className="px-6 py-4">{t("storage-place")}</th>
-                <th className="px-6 py-4">{t("expiry-date")}</th>
-                <th className="px-6 py-4">{t("bottling-date")}</th>
-                <th className="px-6 py-4 text-right">{t("actions")}</th>
+                <th className="px-3 py-4">{t("product-name")}</th>
+                <th className="px-3 py-4">{t("stock")}</th>
+                <th className="px-3 py-4">{t("price")}</th>
+                <th className="px-3 py-4">{t("expiry-date")}</th>
+                <th className="px-3 py-4 text-right">{t("actions")}</th>
               </tr>
             </thead>
             <tbody>
-              {rows.map((row, index) => {
-                const isItemSelected = selected.includes(row.id);
-                const labelId = `inventory-checkbox-${index}`;
+              {groups.map((group) => {
+                const isCollapsed = collapsedGroups.has(group.name);
                 return (
-                  <tr
-                    key={row.id}
-                    className="border-t border-slate-200"
-                    onClick={(event) => handleClick(event, row.id)}
-                    role="checkbox"
-                    aria-checked={isItemSelected}
-                    tabIndex={-1}
-                  >
-                    <th scope="row" className="px-4 py-5">
-                      <Checkbox
-                        checked={isItemSelected}
-                        slotProps={{ input: { "aria-labelledby": labelId } }}
-                        sx={{ verticalAlign: "top" }}
-                      />
-                    </th>
-                    <th id={labelId} scope="row" className="px-6 py-5">
-                      <div className="flex items-center gap-4">
-                        <Avatar size="lg" variant="soft" src={row.imageUrl} />
-                        <div className="min-w-0">
-                          <Typography
-                            level="title-md"
-                            className="text-slate-900"
+                  <Fragment key={`group-${group.name}`}>
+                    <tr>
+                      <td colSpan={6} className="px-3 py-3" style={{ backgroundColor: "var(--joy-palette-background-level1)" }}>
+                        <button
+                          type="button"
+                          onClick={() => toggleGroup(group.name)}
+                          className="flex items-center gap-2 font-semibold"
+                          style={{ color: "var(--joy-palette-text-primary)" }}
+                        >
+                          <ChevronDown
+                            size={16}
+                            className={`shrink-0 transition-transform duration-200 ${isCollapsed ? "-rotate-90" : ""}`}
+                          />
+                          {group.name}
+                          <span className="font-normal" style={{ color: "var(--joy-palette-text-tertiary)" }}>
+                            {group.rows.length} {t("products")} &middot; {group.units} {t("units")}
+                          </span>
+                        </button>
+                      </td>
+                    </tr>
+                    {!isCollapsed &&
+                      group.rows.map((row) => {
+                        const isItemSelected = selected.includes(row.id);
+                        const status = getProductStatus(row.expiryDateRaw);
+                        return (
+                          <tr
+                            key={row.id}
+                            onClick={(event) => handleClick(event, row.id)}
+                            role="checkbox"
+                            aria-checked={isItemSelected}
                           >
-                            {row.name}
-                          </Typography>
-                          <Typography
-                            level="body-sm"
-                            className="text-slate-500"
-                          >
-                            {row.description}
-                          </Typography>
-                        </div>
-                      </div>
-                    </th>
-                    <td className="px-6 py-5">
-                      <Typography level="title-md">{row.price}</Typography>
-                      <Typography level="body-sm" className="text-slate-400">
-                        {Cookies.get("currency")}
-                      </Typography>
-                    </td>
-                    <td className="px-6 py-5">
-                      <Chip
-                        variant="soft"
-                        color="neutral"
-                        size="lg"
-                        className="px-3"
-                      >
-                        {row.stock}
-                      </Chip>
-                    </td>
-                    <td className="px-6 py-5">
-                      <Typography level="title-md">{row.location}</Typography>
-                      <Typography level="body-sm" className="text-slate-500">
-                        {row.locationDetail}
-                      </Typography>
-                    </td>
-                    <td className="px-6 py-5">
-                      <Typography level="title-md">{row.expiryDate}</Typography>
-                    </td>
-                    <td className="px-6 py-5">
-                      <Typography level="title-md">{row.refillDate}</Typography>
-                    </td>
-                    <td className="px-6 py-5 text-right">
-                      <Button
-                        onClick={() =>
-                          navigate({
-                            to: `/app/view-product?product=${row.uuid}`,
-                          })
-                        }
-                        variant="outlined"
-                        size="sm"
-                      >
-                        {t("details")}
-                      </Button>
-                    </td>
-                  </tr>
+                            <td className="px-2 py-4">
+                              <Checkbox checked={isItemSelected} sx={{ verticalAlign: "top" }} />
+                            </td>
+                            <td className="px-3 py-4">
+                              <div className="flex min-w-0 items-stretch gap-3">
+                                <ProductStatusBar status={status} />
+                                <div className="min-w-0">
+                                  <Typography level="title-md" className="truncate" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                                    {row.name}
+                                  </Typography>
+                                  <Typography level="body-sm" className="truncate normal-case font-normal" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                                    {row.description}
+                                  </Typography>
+                                </div>
+                              </div>
+                            </td>
+                            <td className="px-3 py-4">
+                              <Typography
+                                level="title-md"
+                                sx={{
+                                  color: isLowStock(Number(row.stockLabel))
+                                    ? "var(--joy-palette-danger-solidBg)"
+                                    : "var(--joy-palette-text-primary)",
+                                }}
+                              >
+                                {row.stock}
+                              </Typography>
+                            </td>
+                            <td className="px-3 py-4">
+                              <Mono>
+                                <Typography level="body-sm" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                                  {row.price === "-" ? "-" : `${row.price} ${Cookies.get("currency") ?? ""}`}
+                                </Typography>
+                              </Mono>
+                            </td>
+                            <td className="px-3 py-4">
+                              <Mono>
+                                <Typography level="title-md" className="truncate" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                                  {row.expiryDate}
+                                </Typography>
+                              </Mono>
+                              <ExpiryRelative expiryDate={row.expiryDateRaw} />
+                            </td>
+                            <td className="px-3 py-4 text-right">
+                              <Button
+                                onClick={() => navigate({ to: `/app/view-product?product=${row.uuid}` })}
+                                variant="outlined"
+                                size="sm"
+                                className="rounded-xl"
+                              >
+                                {t("details")}
+                              </Button>
+                            </td>
+                          </tr>
+                        );
+                      })}
+                  </Fragment>
                 );
               })}
             </tbody>
           </Table>
         </div>
+
+        {/* Mobile: grouped card list */}
+        <div className="lg:hidden">
+          {groups.map((group) => {
+            const isCollapsed = collapsedGroups.has(group.name);
+            return (
+              <div key={group.name}>
+                <button
+                  type="button"
+                  onClick={() => toggleGroup(group.name)}
+                  className="flex w-full items-center gap-2 px-4 py-3 text-left font-semibold"
+                  style={{
+                    backgroundColor: "var(--joy-palette-background-level1)",
+                    color: "var(--joy-palette-text-primary)",
+                    borderTop: "1px solid var(--joy-palette-divider)",
+                  }}
+                >
+                  <ChevronDown
+                    size={16}
+                    className={`shrink-0 transition-transform duration-200 ${isCollapsed ? "-rotate-90" : ""}`}
+                  />
+                  {group.name}
+                  <span className="ml-auto font-normal" style={{ color: "var(--joy-palette-text-tertiary)" }}>
+                    {group.rows.length}
+                  </span>
+                </button>
+                <div
+                  className="grid transition-[grid-template-rows] duration-200 ease-out"
+                  style={{ gridTemplateRows: isCollapsed ? "0fr" : "1fr" }}
+                >
+                  <div className="overflow-hidden">
+                    {group.rows.map((row) => {
+                      const status = getProductStatus(row.expiryDateRaw);
+                      return (
+                        <button
+                          key={row.id}
+                          type="button"
+                          onClick={() => navigate({ to: `/app/view-product?product=${row.uuid}` })}
+                          className="flex w-full items-stretch gap-3 px-4 py-3 text-left"
+                          style={{ borderTop: "1px solid var(--joy-palette-divider)" }}
+                        >
+                          <ProductStatusBar status={status} />
+                          <div className="min-w-0 flex-1">
+                            <Typography level="title-md" className="truncate" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                              {row.name}
+                            </Typography>
+                            <Mono>
+                              <Typography level="body-sm" className="normal-case" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                                {row.expiryDate}
+                              </Typography>
+                            </Mono>
+                          </div>
+                          <Typography
+                            level="title-md"
+                            className="shrink-0"
+                            sx={{
+                              color: isLowStock(Number(row.stockLabel))
+                                ? "var(--joy-palette-danger-solidBg)"
+                                : "var(--joy-palette-text-primary)",
+                            }}
+                          >
+                            {row.stockLabel} <span className="text-sm font-normal">{t("pcs")}</span>
+                          </Typography>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+          <div className="p-4">
+            <Button
+              startDecorator={<Plus size={16} />}
+              onClick={() => navigate({ to: "/app/add-product" })}
+              variant="solid"
+              size="lg"
+              className="w-full rounded-2xl"
+            >
+              {t("add-product")}
+            </Button>
+          </div>
+        </div>
       </Sheet>
-    </>
+    </div>
   );
 };

frontend/src/pages/ProductQuickView.tsx

@@ -1,20 +1,10 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getStorages } from "../utils/api/storages.ts";
-import {
-  Alert,
-  Box,
-  Button,
-  Chip,
-  CircularProgress,
-  Divider,
-  Input,
-  Option,
-  Select,
-  Typography,
-} from "@mui/joy";
+import { Button, Chip, CircularProgress, Option, Select, Typography } from "@mui/joy";
 import { useTranslation } from "react-i18next";
 import { useEffect, useState } from "react";
 import { useForm } from "@tanstack/react-form";
+import { Link } from "@tanstack/react-router";
 import { getProductDetails, mutateProduct } from "../utils/api/products.ts";
 import { toInputDate } from "../utils/uxFncs";
 import type {
@@ -24,14 +14,14 @@ import type {
   Storage,
 } from "../misc/interfaces";
 import type { ApiError } from "../utils/api/apiError";
-import Cookies from "js-cookie";
-import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
+import { AmountStepper } from "../components/AmountStepper.tsx";
+import { ExpiryBadge } from "../components/ProductStatusBar.tsx";
+import { MyAlert } from "../components/MyAlert.tsx";
 
 export const ProductQuickView = () => {
   const uuid = window.location.search.split("uuid=")[1];
   const { t } = useTranslation();
   const queryClient = useQueryClient();
-  const [success, setSuccess] = useState(false);
   const [alert, setAlert] = useState<AlertInterface>({
     isAlert: false,
     type: "neutral",
@@ -81,6 +71,8 @@ export const ProductQuickView = () => {
     }
   }, [storagesError, storagesErrorObj]);
 
+  // Only Amount/Expiry/Storage are shown here — name/description/bottling
+  // date/price stay in form state untouched and are sent back as-is on save.
   const form = useForm({
     defaultValues: {
       amount: 0,
@@ -101,15 +93,10 @@ export const ProductQuickView = () => {
   });
 
   const { mutate, isPending } = useMutation({
-    mutationFn: ({
-      values,
-      uuid,
-    }: {
-      values: ProductFormValues;
-      uuid: string;
-    }) => mutateProduct(values, uuid),
+    mutationFn: ({ values, uuid }: { values: ProductFormValues; uuid: string }) =>
+      mutateProduct(values, uuid),
     onSuccess: (_data, variables) => {
-      setSuccess(true);
+      setAlert({ isAlert: true, type: "success", header: t("success"), text: t("save") });
       queryClient.invalidateQueries({ queryKey: ["product", variables.uuid] });
     },
     onError: showError,
@@ -121,249 +108,127 @@ export const ProductQuickView = () => {
     }
 
     form.setFieldValue("amount", productDetails.amount ?? 0);
-    form.setFieldValue(
-      "bottling_date",
-      toInputDate(productDetails.bottling_date),
-    );
+    form.setFieldValue("bottling_date", toInputDate(productDetails.bottling_date));
     form.setFieldValue("description", productDetails.description ?? "");
     form.setFieldValue("expiry_date", toInputDate(productDetails.expiry_date));
     form.setFieldValue("name", productDetails.name ?? "");
     form.setFieldValue("price", productDetails.price ?? "");
-    form.setFieldValue(
-      "storage_location_uuid",
-      productDetails.storage_location_uuid ?? "",
-    );
+    form.setFieldValue("storage_location_uuid", productDetails.storage_location_uuid ?? "");
   }, [form, productDetails]);
 
   return (
-    <>
-      <div className="space-y-6">
-        <div className="flex flex-wrap items-center gap-3">
-          <div className="space-y-1">
-            <Typography level="h2" fontWeight="1000" className="text-slate-900">
-              <ElectricBoltIcon color="primary" />
-              {t("product-details-quick")}
-              <ElectricBoltIcon color="primary" />
-            </Typography>
-          </div>
-          <Chip
-            variant="soft"
-            color="primary"
-            className="ml-auto rounded-full px-3"
-          >
-            {t("details")}
-          </Chip>
-        </div>
+    <div className="flex min-h-screen items-start justify-center px-4 py-10 sm:items-center" style={{ backgroundColor: "var(--joy-palette-background-body)" }}>
+      <div className="w-full max-w-md space-y-5">
+        <Chip variant="soft" color="warning" size="sm" className="rounded-full px-3 font-semibold">
+          {t("scanned-badge")}
+        </Chip>
+
         {productDetailsLoading && <CircularProgress size="sm" />}
-      </div>
-      {isSuccess && (
-        <Box className="mt-6 rounded-3xl border border-white/70 bg-white/80 p-6 shadow-[0_24px_60px_rgba(12,38,78,0.12)] backdrop-blur">
-          <form
-            className="space-y-6"
-            onSubmit={(e) => {
-              e.preventDefault();
-              form.handleSubmit();
-            }}
-          >
-            <div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
-              <div className="space-y-4">
-                <div className="space-y-1">
-                  <Typography level="title-md" className="text-slate-900">
-                    {t("product-name")}
-                  </Typography>
-                  <form.Field name="name">
-                    {(field) => (
-                      <Input
-                        type="text"
-                        value={field.state.value}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        onBlur={field.handleBlur}
-                        size="lg"
-                        variant="outlined"
-                        className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
-                      />
-                    )}
-                  </form.Field>
-                </div>
-                <div className="space-y-1">
-                  <Typography level="title-md" className="text-slate-900">
-                    {t("description")}
-                  </Typography>
-                  <form.Field name="description">
-                    {(field) => (
-                      <Input
-                        type="text"
-                        value={field.state.value}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        onBlur={field.handleBlur}
-                        size="lg"
-                        variant="outlined"
-                        className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
-                      />
-                    )}
-                  </form.Field>
-                </div>
-                <div className="grid gap-4 md:grid-cols-2">
-                  <div className="space-y-1">
-                    <Typography level="title-md" className="text-slate-900">
-                      {t("expiry-date")}
-                    </Typography>
-                    <form.Field name="expiry_date">
-                      {(field) => (
-                        <Input
-                          type="date"
-                          value={field.state.value}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          onBlur={field.handleBlur}
-                          size="lg"
-                          variant="outlined"
-                          className="rounded-2xl bg-white/90"
-                        />
-                      )}
-                    </form.Field>
-                  </div>
-                  <div className="space-y-1">
-                    <Typography level="title-md" className="text-slate-900">
-                      {t("bottling-date")}
-                    </Typography>
-                    <form.Field name="bottling_date">
-                      {(field) => (
-                        <Input
-                          type="date"
-                          value={field.state.value}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          onBlur={field.handleBlur}
-                          size="lg"
-                          variant="outlined"
-                          className="rounded-2xl bg-white/90"
-                        />
-                      )}
-                    </form.Field>
-                  </div>
-                </div>
-              </div>
-              <div className="space-y-4">
-                <div className="rounded-2xl border border-white/70 bg-linear-to-br from-[#f7fbff] via-[#f2f6fb] to-[#eef3f9] p-5 shadow-[0_16px_40px_rgba(12,38,78,0.08)]">
-                  <Typography level="title-lg" className="text-slate-900">
-                    {t("inventory")}
-                  </Typography>
-                  <Divider className="my-3" />
-                  <div className="grid gap-4">
-                    <div className="space-y-1">
-                      <Typography level="title-md" className="text-slate-900">
-                        {t("amount")}
-                      </Typography>
-                      <form.Field name="amount">
-                        {(field) => (
-                          <Input
-                            type="number"
-                            color="neutral"
-                            id="amountInput"
-                            placeholder={t("amount")}
-                            value={field.state.value}
-                            variant="soft"
-                            size="lg"
-                            onChange={(e) => {
-                              const nextValue = Number(e.target.value);
-                              field.handleChange(
-                                Number.isNaN(nextValue) ? 0 : nextValue,
-                              );
-                            }}
-                            onBlur={field.handleBlur}
-                            className="rounded-2xl bg-white/80"
-                          />
-                        )}
-                      </form.Field>
-                    </div>
-                    <div className="space-y-1">
-                      <Typography level="title-md" className="text-slate-900">
-                        {t("price")}
-                      </Typography>
-                      <form.Field name="price">
-                        {(field) => (
-                          <Input
-                            type="text"
-                            value={field.state.value}
-                            onChange={(e) => field.handleChange(e.target.value)}
-                            onBlur={field.handleBlur}
-                            size="lg"
-                            variant="outlined"
-                            className="rounded-2xl bg-white/90"
-                          />
-                        )}
-                      </form.Field>
-                      <Typography level="body-sm" className="text-slate-500">
-                        {Cookies.get("currency")}
-                      </Typography>
-                    </div>
-                    <div className="space-y-1">
-                      <Typography level="title-md" className="text-slate-900">
-                        {t("storage-place")}
-                      </Typography>
-                      <form.Field name="storage_location_uuid">
-                        {(field) => (
-                          <Select
-                            value={field.state.value}
-                            onChange={(_event, value) =>
-                              field.handleChange(value ?? "")
-                            }
-                            size="lg"
-                            variant="outlined"
-                            className="rounded-2xl bg-white/90"
-                          >
-                            {storages?.map((storage) => (
-                              <Option key={storage.uuid} value={storage.uuid}>
-                                {storage.name}
-                              </Option>
-                            ))}
-                          </Select>
-                        )}
-                      </form.Field>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              <Typography level="body-sm" className="text-slate-500">
-                {t("product-details")}
+
+        {isSuccess && (
+          <>
+            <div className="space-y-1">
+              <Typography level="h2" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                {productDetails.name}
               </Typography>
-              <Button
-                type="submit"
-                loading={isPending}
-                size="lg"
-                className="rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
+              <Typography level="body-lg" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                {t("opened-from-jar-label")}
+              </Typography>
+              <ExpiryBadge expiryDate={productDetails.expiry_date} />
+            </div>
+
+            <form
+              className="space-y-5 rounded-3xl p-6"
+              style={{ border: "1px solid var(--joy-palette-divider)", backgroundColor: "var(--joy-palette-background-surface)" }}
+              onSubmit={(e) => {
+                e.preventDefault();
+                form.handleSubmit();
+              }}
+            >
+              <div className="space-y-1 text-center">
+                <Typography level="body-sm" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                  {t("amount-in-storage")}
+                </Typography>
+                <form.Field name="amount">
+                  {(field) => (
+                    <AmountStepper
+                      value={field.state.value}
+                      onChange={field.handleChange}
+                      onBlur={field.handleBlur}
+                    />
+                  )}
+                </form.Field>
+                <Typography level="body-sm" className="normal-case font-normal" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                  {t("set-to-zero-hint")}
+                </Typography>
+              </div>
+
+              <div
+                className="flex items-center justify-between rounded-2xl px-4 py-3"
+                style={{ border: "1px solid var(--joy-palette-divider)" }}
               >
+                <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                  {t("expiry-date")}
+                </Typography>
+                <form.Field name="expiry_date">
+                  {(field) => (
+                    <input
+                      type="date"
+                      value={field.state.value}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onBlur={field.handleBlur}
+                      className="border-none bg-transparent text-right font-semibold outline-none"
+                      style={{ color: "var(--joy-palette-danger-solidBg)" }}
+                    />
+                  )}
+                </form.Field>
+              </div>
+
+              <div
+                className="flex items-center justify-between rounded-2xl px-4 py-3"
+                style={{ border: "1px solid var(--joy-palette-divider)" }}
+              >
+                <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                  {t("storage-place")}
+                </Typography>
+                <form.Field name="storage_location_uuid">
+                  {(field) => (
+                    <Select
+                      value={field.state.value}
+                      onChange={(_event, value) => field.handleChange(value ?? "")}
+                      variant="plain"
+                      size="sm"
+                    >
+                      {storages?.map((storage) => (
+                        <Option key={storage.uuid} value={storage.uuid}>
+                          {storage.name}
+                        </Option>
+                      ))}
+                    </Select>
+                  )}
+                </form.Field>
+              </div>
+
+              <Link
+                to="/app/view-product"
+                search={{ product: uuid }}
+                className="block text-center text-sm font-semibold hover:underline"
+                style={{ color: "var(--joy-palette-primary-solidBg)" }}
+              >
+                {t("open-full-details")}
+              </Link>
+
+              {alert.isAlert && (
+                <MyAlert type={alert.type} header={alert.header} text={alert.text} />
+              )}
+
+              <Button type="submit" loading={isPending} size="lg" color="primary" variant="solid" className="btn-lift w-full rounded-2xl">
                 {t("save")}
               </Button>
-            </div>
-            {alert.isAlert && (
-              <Alert
-                color={alert.type}
-                variant="soft"
-                className="rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-              >
-                {alert.header}
-                <br />
-                {alert.text}
-              </Alert>
-            )}
-            {success && (
-              <Alert
-                color="success"
-                variant="soft"
-                className="rounded-2xl border border-emerald-200/70 bg-emerald-50/80 text-emerald-700 shadow-[0_14px_30px_rgba(16,185,129,0.18)]"
-              >
-                <div className="flex w-full items-center justify-between">
-                  <Typography level="body-sm" className="text-emerald-700">
-                    {t("success")}
-                  </Typography>
-                </div>
-              </Alert>
-            )}
-          </form>
-        </Box>
-      )}
-    </>
+            </form>
+          </>
+        )}
+      </div>
+    </div>
   );
 };

frontend/src/pages/Settings.tsx

@@ -1,13 +1,4 @@
-import {
-  Alert,
-  Button,
-  Chip,
-  CircularProgress,
-  Divider,
-  Input,
-  Sheet,
-  Typography,
-} from "@mui/joy";
+import { Button, CircularProgress, Divider, Input, Sheet, Typography } from "@mui/joy";
 import { useForm } from "@tanstack/react-form";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import Cookies from "js-cookie";
@@ -16,11 +7,25 @@ import type { AlertInterface, SettingsIntf } from "../misc/interfaces";
 import type { ApiError } from "../utils/api/apiError";
 import { fetchSettings, mutateSettings } from "../utils/api/settings";
 import { useEffect, useState } from "react";
+import { useColorScheme } from "@mui/joy/styles";
+import { ChevronRight } from "lucide-react";
 import { ChangePasswordModal } from "../components/modals/ChangePasswordModal";
+import { MyAlert } from "../components/MyAlert.tsx";
+import { PageHeader } from "../components/PageHeader.tsx";
+import { changeTranslation } from "../utils/uxFncs";
+import { useLogout } from "../hooks/useLogout.ts";
+
+const cardSx = {
+  border: "1px solid",
+  borderColor: "divider",
+  bgcolor: "background.surface",
+} as const;
 
 export const Settings = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const queryClient = useQueryClient();
+  const { mode, setMode } = useColorScheme();
+  const { logout } = useLogout();
   const [modal, setModal] = useState(false);
   const [alert, setAlert] = useState<AlertInterface>({
     isAlert: false,
@@ -93,128 +98,192 @@ export const Settings = () => {
     onError: showError,
   });
 
+  const segmentBtn = (active: boolean) => ({
+    className: "rounded-xl px-4",
+    variant: active ? ("solid" as const) : ("plain" as const),
+    color: active ? ("primary" as const) : ("neutral" as const),
+    sx: { color: active ? undefined : "var(--joy-palette-text-secondary)" },
+  });
+
   return (
     <>
       <ChangePasswordModal alert={setAlert} isOpen={modal} setOpen={setModal} />
       <div className="space-y-6">
-        <div className="flex flex-wrap items-center gap-3">
-          <div className="space-y-1">
-            <Typography level="h2" className="text-slate-900">
-              {t("settings")}
-            </Typography>
-            <Typography level="body-lg" className="text-slate-500">
-              {t("settings-sub")}
-            </Typography>
-          </div>
-          <Chip
-            variant="soft"
-            color="primary"
-            className="ml-auto rounded-full px-3"
-          >
-            {t("preferences")}
-          </Chip>
-        </div>
-      </div>
+        <PageHeader title={t("settings")} subtitle={t("settings-sub")} />
 
-      <Sheet className="mt-6 rounded-3xl border border-white/70 bg-white/80 p-6 shadow-[0_24px_60px_rgba(12,38,78,0.12)] backdrop-blur">
         {alert.isAlert && (
-          <Alert
-            variant="soft"
-            color={alert.type}
-            className="mb-6 rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-          >
-            {alert.header}
-            <br />
-            {alert.text}
-          </Alert>
+          <MyAlert type={alert.type} header={alert.header} text={alert.text} />
         )}
+
         {settingsPending ? (
           <div className="flex items-center justify-center py-16">
             <CircularProgress size="lg" />
           </div>
         ) : (
-          <form
-            className="space-y-6"
-            onSubmit={(e) => {
-              e.preventDefault();
-              form.handleSubmit();
-            }}
-          >
-            <div className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
-              <div className="space-y-5">
-                <div className="space-y-1">
-                  <Typography level="title-md" className="text-slate-900">
-                    {t("app-name")}
-                  </Typography>
-                  <Typography level="body-sm" className="text-slate-500">
-                    {t("app-name-sub")}
-                  </Typography>
-                  <form.Field name="app-name">
-                    {(field) => (
-                      <Input
-                        value={field.state.value}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        size="lg"
-                        variant="outlined"
-                        placeholder="Stockhome"
-                        className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
-                      />
-                    )}
-                  </form.Field>
-                </div>
-                <div className="space-y-1">
-                  <Typography level="title-md" className="text-slate-900">
-                    {t("currency")}
-                  </Typography>
-                  <Typography level="body-sm" className="text-slate-500">
-                    {t("currency-sub")}
-                  </Typography>
-                  <form.Field name="currency">
-                    {(field) => (
-                      <Input
-                        value={field.state.value}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        size="lg"
-                        variant="outlined"
-                        placeholder="EUR"
-                        className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
-                      />
-                    )}
-                  </form.Field>
-                </div>
-              </div>
-              <div className="rounded-2xl border border-white/70 bg-linear-to-br from-[#f7fbff] via-[#f2f6fb] to-[#eef3f9] p-5 shadow-[0_16px_40px_rgba(12,38,78,0.08)]">
-                <Typography level="title-lg" className="text-slate-900">
-                  {t("quick-tips")}
+          <div className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr] lg:items-start">
+            <div className="space-y-6">
+              <Sheet className="rounded-3xl p-6" sx={cardSx}>
+                <Typography level="title-lg" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                  {t("general")}
                 </Typography>
-                <Divider className="my-3" />
-                <div className="space-y-3 text-md text-slate-600">
-                  <p>{t("quick-tips-1")}</p>
-                  <p>{t("quick-tips-2")}</p>
+                <Divider className="my-4" />
+                <form
+                  className="space-y-5"
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    form.handleSubmit();
+                  }}
+                >
+                  <div className="grid gap-5 sm:grid-cols-2">
+                    <div className="space-y-1">
+                      <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                        {t("app-name")}
+                      </Typography>
+                      <form.Field name="app-name">
+                        {(field) => (
+                          <Input
+                            value={field.state.value}
+                            onChange={(e) => field.handleChange(e.target.value)}
+                            size="lg"
+                            variant="outlined"
+                            placeholder="Stockhome"
+                            className="rounded-2xl"
+                          />
+                        )}
+                      </form.Field>
+                      <Typography level="body-sm" className="normal-case font-normal" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                        {t("app-name-sub")}
+                      </Typography>
+                    </div>
+                    <div className="space-y-1">
+                      <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                        {t("currency")}
+                      </Typography>
+                      <form.Field name="currency">
+                        {(field) => (
+                          <Input
+                            value={field.state.value}
+                            onChange={(e) => field.handleChange(e.target.value)}
+                            size="lg"
+                            variant="outlined"
+                            placeholder="EUR"
+                            className="rounded-2xl"
+                          />
+                        )}
+                      </form.Field>
+                      <Typography level="body-sm" className="normal-case font-normal" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                        {t("currency-sub")}
+                      </Typography>
+                    </div>
+                  </div>
+                  <div className="flex justify-end">
+                    <Button type="submit" size="lg" color="primary" className="btn-lift rounded-2xl">
+                      {t("save")}
+                    </Button>
+                  </div>
+                </form>
+              </Sheet>
+
+              <Sheet className="rounded-3xl p-6" sx={cardSx}>
+                <Typography level="title-lg" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                  {t("appearance-language")}
+                </Typography>
+                <Divider className="my-4" />
+                <div className="space-y-5">
+                  <div className="space-y-2">
+                    <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                      {t("theme")}
+                    </Typography>
+                    <div className="inline-flex gap-1 rounded-2xl border border-solid p-1" style={{ borderColor: "var(--joy-palette-divider)" }}>
+                      <Button {...segmentBtn(mode === "light")} onClick={() => setMode("light")}>
+                        {t("theme-light")}
+                      </Button>
+                      <Button {...segmentBtn(mode === "dark")} onClick={() => setMode("dark")}>
+                        {t("theme-dark")}
+                      </Button>
+                      <Button {...segmentBtn(mode === "system")} onClick={() => setMode("system")}>
+                        {t("theme-system")}
+                      </Button>
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                      {t("language")}
+                    </Typography>
+                    <div className="inline-flex gap-1 rounded-2xl border border-solid p-1" style={{ borderColor: "var(--joy-palette-divider)" }}>
+                      <Button
+                        {...segmentBtn(i18n.language === "de")}
+                        onClick={() => i18n.language !== "de" && changeTranslation()}
+                      >
+                        Deutsch
+                      </Button>
+                      <Button
+                        {...segmentBtn(i18n.language === "en")}
+                        onClick={() => i18n.language !== "en" && changeTranslation()}
+                      >
+                        English
+                      </Button>
+                    </div>
+                  </div>
                 </div>
+              </Sheet>
+
+              <Sheet className="rounded-3xl p-6" sx={cardSx}>
+                <Typography level="title-lg" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                  {t("account")}
+                </Typography>
+                <Divider className="my-4" />
+                <div className="space-y-4">
+                  <button
+                    type="button"
+                    onClick={() => setModal(true)}
+                    className="flex w-full items-center justify-between rounded-2xl px-1 py-1 text-left"
+                  >
+                    <div>
+                      <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                        {t("change-password")}
+                      </Typography>
+                    </div>
+                    <ChevronRight size={18} color="var(--joy-palette-text-tertiary)" />
+                  </button>
+                  <Divider />
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <Typography level="title-md" sx={{ color: "var(--joy-palette-danger-solidBg)" }}>
+                        {t("sign-out")}
+                      </Typography>
+                      <Typography level="body-sm" className="normal-case font-normal" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                        {t("sign-out-sub")}
+                      </Typography>
+                    </div>
+                    <Button color="danger" variant="outlined" className="rounded-2xl" onClick={logout}>
+                      {t("logout")}
+                    </Button>
+                  </div>
+                </div>
+              </Sheet>
+            </div>
+
+            <div
+              className="rounded-3xl p-6"
+              style={{
+                border: "1px solid var(--joy-palette-divider)",
+                background:
+                  "linear-gradient(to bottom right, var(--joy-palette-primary-50), var(--joy-palette-background-level1), var(--joy-palette-background-level2))",
+              }}
+            >
+              <Typography level="title-lg" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                {t("quick-tips")}
+              </Typography>
+              <Divider className="my-3" />
+              <div className="space-y-3 text-md" style={{ color: "var(--joy-palette-text-secondary)" }}>
+                <p>{t("quick-tips-1")}</p>
+                <p>{t("quick-tips-2")}</p>
               </div>
             </div>
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              <Button
-                type="submit"
-                size="lg"
-                color="primary"
-                className="rounded-2xl text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
-              >
-                {t("save")}
-              </Button>
-              <Button
-                onClick={() => setModal(true)}
-                size="lg"
-                color="warning"
-                className="rounded-2xl text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
-              >
-                {t("change-password")}
-              </Button>
-            </div>
-          </form>
+          </div>
         )}
-      </Sheet>
+      </div>
     </>
   );
 };

frontend/src/pages/Storages.tsx

@@ -1,20 +1,16 @@
 import { useQuery } from "@tanstack/react-query";
 import { getStorages } from "../utils/api/storages";
-import {
-  Alert,
-  Button,
-  CircularProgress,
-  Sheet,
-  Table,
-  Typography,
-} from "@mui/joy";
+import { getProducts } from "../utils/api/products";
+import { Button, CircularProgress, Sheet, Table, Typography } from "@mui/joy";
 import { useTranslation } from "react-i18next";
 import type { AlertInterface, Storage } from "../misc/interfaces";
 import type { ApiError } from "../utils/api/apiError";
 import { StorageRow } from "../components/StorageRow";
 import { useEffect, useState } from "react";
 import { AddStorageModal } from "../components/modals/AddStorageModal";
-import AddIcon from "@mui/icons-material/Add";
+import { AlertTriangle, Plus } from "lucide-react";
+import { MyAlert } from "../components/MyAlert.tsx";
+import { PageHeader } from "../components/PageHeader.tsx";
 
 export const Storages = () => {
   const { t } = useTranslation();
@@ -46,6 +42,13 @@ export const Storages = () => {
     queryFn: () => getStorages(),
   });
 
+  // Already cached by the sidebar/inventory query — just reused here for the count.
+  const { data: products } = useQuery<{ amount?: number }[]>({
+    queryKey: ["products"],
+    queryFn: getProducts,
+  });
+  const itemsStored = (products ?? []).reduce((sum, product) => sum + (product?.amount ?? 0), 0);
+
   useEffect(() => {
     if (storagesError && storagesErrorObj) {
       showError(storagesErrorObj);
@@ -55,107 +58,102 @@ export const Storages = () => {
   return (
     <>
       <div className="flex flex-col gap-4">
-        <div className="min-w-65 space-y-2">
-          <Typography level="h2" className="text-slate-900">
-            {t("storages")}
-          </Typography>
-          <Typography level="body-lg" className="text-slate-500">
+        <PageHeader
+          title={t("storages")}
+          subtitle={t("storages-sub", { count: storages?.length ?? 0, items: itemsStored })}
+          actions={
+            <Button startDecorator={<Plus size={16} />} onClick={() => setModal(true)} variant="solid" className="btn-lift rounded-2xl">
+              {t("new-storage")}
+            </Button>
+          }
+        />
+        <AddStorageModal isOpen={modal} setOpen={setModal} />
+        <div
+          className="flex items-start gap-3 rounded-2xl border border-solid px-4 py-3"
+          style={{
+            borderColor: "var(--joy-palette-warning-softBg)",
+            backgroundColor: "var(--joy-palette-warning-softBg)",
+            color: "var(--joy-palette-warning-softColor)",
+          }}
+        >
+          <AlertTriangle size={18} className="mt-0.5 shrink-0" />
+          <Typography level="body-lg" sx={{ color: "inherit" }}>
             {t("storage-delete-info")}
           </Typography>
         </div>
-        <div className="flex items-center gap-3">
-          <Button
-            startDecorator={<AddIcon />}
-            onClick={() => setModal(true)}
-            variant="solid"
-            className="rounded-full px-5 py-2 text-base font-semibold shadow-sm"
-          >
-            {t("add")}
-          </Button>
-        </div>
         {alert.isAlert && (
-          <Alert
-            variant="soft"
-            color={alert.type}
-            className="rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-          >
-            {alert.header}
-            <br />
-            {alert.text}
-          </Alert>
+          <MyAlert type={alert.type} header={alert.header} text={alert.text} />
         )}
       </div>
 
       <Sheet
         variant="outlined"
-        className="mt-6 flex min-h-0 flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm sm:h-[calc(100vh-260px)]"
+        className="mt-6 flex min-h-0 w-full max-w-full flex-col overflow-hidden rounded-2xl sm:h-[calc(100vh-300px)]"
+        sx={{
+          border: "1px solid",
+          borderColor: "divider",
+          bgcolor: "background.surface",
+        }}
       >
-        <AddStorageModal isOpen={modal} setOpen={setModal} />
         {isLoading ? (
           <div className="flex items-center justify-center py-16">
             <CircularProgress size="lg" />
           </div>
         ) : (
-          <>
-            <div className="flex items-center justify-between border-b border-slate-200 px-6 py-4 text-slate-700">
-              <Typography level="body-lg" fontWeight="bold">
-                {t("storages")}
-              </Typography>
-            </div>
-            <div className="flex-1 overflow-auto">
-              <Table
-                stickyHeader
-                stripe="odd"
-                variant="plain"
-                hoverRow
-                className="min-w-240 text-slate-700"
-                sx={{
-                  "--TableCell-headBackground":
-                    "var(--joy-palette-background-surface)",
-                  "& thead": {
-                    position: "sticky",
-                    top: 0,
-                    zIndex: 3,
-                    backgroundColor: "rgb(248 250 252)",
-                  },
-                  "& thead tr": {
-                    backgroundColor: "rgb(248 250 252)",
-                  },
-                  "& thead th:nth-child(2)": {
-                    width: "40%",
-                  },
-                  "& thead th:nth-child(3)": {
-                    width: "14%",
-                  },
-                  "& thead th": {
-                    zIndex: 2,
-                    backgroundColor: "rgb(248 250 252)",
-                    backgroundImage: "none",
-                  },
-                  "& tr > *:nth-child(n+4)": { textAlign: "left" },
-                }}
-              >
-                <thead>
-                  <tr className="text-slate-600">
-                    <th className="px-6 py-4">{t("storage-name")}</th>
-                    <th className="px-6 py-4">{t("description")}</th>
-                    <th className="px-6 py-4">{t("created-at")}</th>
-                    <th className="px-6 py-4">{t("updated-at")}</th>
-                    <th className="px-6 py-4 text-right"></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {storages?.map((storage: Storage) => (
-                    <StorageRow
-                      key={storage.uuid}
-                      storage={storage}
-                      onError={showError}
-                    />
-                  ))}
-                </tbody>
-              </Table>
-            </div>
-          </>
+          <div className="flex-1 overflow-auto">
+            <Table
+              stickyHeader
+              stripe="odd"
+              variant="plain"
+              hoverRow
+              className="w-full"
+              sx={{
+                tableLayout: "fixed",
+                color: "var(--joy-palette-text-secondary)",
+                "--TableCell-headBackground": "var(--joy-palette-background-level1)",
+                "& thead": {
+                  position: "sticky",
+                  top: 0,
+                  zIndex: 3,
+                  backgroundColor: "var(--joy-palette-background-level1)",
+                },
+                "& thead tr": {
+                  backgroundColor: "var(--joy-palette-background-level1)",
+                },
+                "& thead th": {
+                  zIndex: 2,
+                  backgroundColor: "var(--joy-palette-background-level1)",
+                  backgroundImage: "none",
+                  color: "var(--joy-palette-text-secondary)",
+                },
+                "& thead th:nth-child(1)": { width: "26%", minWidth: "140px" },
+                "& thead th:nth-child(2)": { width: "34%", minWidth: "160px" },
+                "& thead th:nth-child(3)": { width: "16%", minWidth: "110px" },
+                "& thead th:nth-child(4)": { width: "16%", minWidth: "110px" },
+                "& thead th:nth-child(5)": { width: "8%", minWidth: "90px" },
+                "& tr > *:nth-child(n+3)": { textAlign: "left" },
+                "& tbody tr": {
+                  borderTop: "1px solid var(--joy-palette-divider)",
+                  transition: "background-color 120ms ease",
+                },
+              }}
+            >
+              <thead>
+                <tr>
+                  <th className="px-3 py-4">{t("storage-name")}</th>
+                  <th className="px-3 py-4">{t("description")}</th>
+                  <th className="px-3 py-4">{t("created-at")}</th>
+                  <th className="px-3 py-4">{t("updated-at")}</th>
+                  <th className="px-3 py-4 text-right"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {storages?.map((storage: Storage) => (
+                  <StorageRow key={storage.uuid} storage={storage} onError={showError} />
+                ))}
+              </tbody>
+            </Table>
+          </div>
         )}
       </Sheet>
     </>

frontend/src/pages/ViewProduct.tsx

@@ -1,21 +1,15 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getStorages } from "../utils/api/storages.ts";
-import {
-  Alert,
-  Box,
-  Button,
-  Chip,
-  CircularProgress,
-  Divider,
-  Input,
-  Option,
-  Select,
-  Typography,
-} from "@mui/joy";
+import { Button, CircularProgress, Input, Option, Select, Typography } from "@mui/joy";
 import { useTranslation } from "react-i18next";
 import { useEffect, useState } from "react";
 import { useForm } from "@tanstack/react-form";
-import { getProductDetails, mutateProduct } from "../utils/api/products.ts";
+import { useNavigate } from "@tanstack/react-router";
+import {
+  deleteSelectedProducts,
+  getProductDetails,
+  mutateProduct,
+} from "../utils/api/products.ts";
 import { toInputDate } from "../utils/uxFncs";
 import type {
   AlertInterface,
@@ -24,9 +18,18 @@ import type {
   Storage,
 } from "../misc/interfaces";
 import type { ApiError } from "../utils/api/apiError";
-import QrCodeIcon from "@mui/icons-material/QrCode";
+import { QrCode, Trash2 } from "lucide-react";
 import Cookies from "js-cookie";
 import QRCode from "qrcode";
+import { AmountStepper } from "../components/AmountStepper.tsx";
+import { ExpiryBadge } from "../components/ProductStatusBar.tsx";
+import { MyAlert } from "../components/MyAlert.tsx";
+
+const cardSx = {
+  border: "1px solid",
+  borderColor: "divider",
+  bgcolor: "background.surface",
+} as const;
 
 interface ViewProductProps {
   uuid: string;
@@ -35,8 +38,8 @@ interface ViewProductProps {
 export const ViewProduct = (props: ViewProductProps) => {
   const uuid = props.uuid;
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const queryClient = useQueryClient();
-  const [success, setSuccess] = useState(false);
   const [alert, setAlert] = useState<AlertInterface>({
     isAlert: false,
     type: "neutral",
@@ -106,48 +109,43 @@ export const ViewProduct = (props: ViewProductProps) => {
   });
 
   const { mutate, isPending } = useMutation({
-    mutationFn: ({
-      values,
-      uuid,
-    }: {
-      values: ProductFormValues;
-      uuid: string;
-    }) => mutateProduct(values, uuid),
+    mutationFn: ({ values, uuid }: { values: ProductFormValues; uuid: string }) =>
+      mutateProduct(values, uuid),
     onSuccess: (_data, variables) => {
-      setSuccess(true);
+      setAlert({ isAlert: true, type: "success", header: t("success"), text: t("save") });
       queryClient.invalidateQueries({ queryKey: ["product", variables.uuid] });
     },
     onError: showError,
   });
 
+  const { mutate: deleteProduct, isPending: isDeleting } = useMutation({
+    mutationFn: () => deleteSelectedProducts([uuid]),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["products"] });
+      void navigate({ to: "/app/inventory" });
+    },
+    onError: showError,
+  });
+
   useEffect(() => {
     if (!productDetails) {
       return;
     }
 
     form.setFieldValue("amount", productDetails.amount ?? 0);
-    form.setFieldValue(
-      "bottling_date",
-      toInputDate(productDetails.bottling_date),
-    );
+    form.setFieldValue("bottling_date", toInputDate(productDetails.bottling_date));
     form.setFieldValue("description", productDetails.description ?? "");
     form.setFieldValue("expiry_date", toInputDate(productDetails.expiry_date));
     form.setFieldValue("name", productDetails.name ?? "");
     form.setFieldValue("price", productDetails.price ?? "");
-    form.setFieldValue(
-      "storage_location_uuid",
-      productDetails.storage_location_uuid ?? "",
-    );
+    form.setFieldValue("storage_location_uuid", productDetails.storage_location_uuid ?? "");
   }, [form, productDetails]);
 
   const downloadQRcode = async () => {
     const baseUrl: string = `${window.location.protocol}//${window.location.host}`;
     const url = `${baseUrl}/app/quick-view/product?uuid=${uuid}`;
 
-    const dataUrl = await QRCode.toDataURL(url, {
-      width: 300,
-      margin: 2,
-    });
+    const dataUrl = await QRCode.toDataURL(url, { width: 300, margin: 2 });
 
     const link = document.createElement("a");
     link.download = "qrcode.png";
@@ -156,37 +154,42 @@ export const ViewProduct = (props: ViewProductProps) => {
   };
 
   return (
-    <>
-      <div className="space-y-6">
-        <div className="flex flex-wrap items-center gap-3">
-          <div className="space-y-1">
-            <Typography level="h2" className="text-slate-900">
-              {t("product-details")}
-            </Typography>
-          </div>
-          <Chip
-            variant="soft"
-            color="primary"
-            className="ml-auto rounded-full px-3"
-          >
-            {t("details")}
-          </Chip>
-        </div>
-        {productDetailsLoading && <CircularProgress size="sm" />}
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-center gap-3">
+        <Typography level="h2" sx={{ color: "var(--joy-palette-text-primary)" }}>
+          {isSuccess ? productDetails.name : t("product-details")}
+        </Typography>
+        {isSuccess && <ExpiryBadge expiryDate={productDetails.expiry_date} />}
+        <Button
+          startDecorator={<Trash2 size={16} />}
+          color="danger"
+          variant="outlined"
+          size="sm"
+          className="ml-auto rounded-2xl"
+          loading={isDeleting}
+          onClick={() => deleteProduct()}
+        >
+          {t("delete")}
+        </Button>
       </div>
+      {productDetailsLoading && <CircularProgress size="sm" />}
+
       {isSuccess && (
-        <Box className="mt-6 rounded-3xl border border-white/70 bg-white/80 p-6 shadow-[0_24px_60px_rgba(12,38,78,0.12)] backdrop-blur">
-          <form
-            className="space-y-6"
-            onSubmit={(e) => {
-              e.preventDefault();
-              form.handleSubmit();
-            }}
-          >
-            <div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
-              <div className="space-y-4">
+        <form
+          className="space-y-6"
+          onSubmit={(e) => {
+            e.preventDefault();
+            form.handleSubmit();
+          }}
+        >
+          <div className="grid gap-5 lg:grid-cols-2">
+            <div className="rounded-3xl p-6" style={cardSx}>
+              <Typography level="title-lg" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                {t("product")}
+              </Typography>
+              <div className="mt-4 space-y-4">
                 <div className="space-y-1">
-                  <Typography level="title-md" className="text-slate-900">
+                  <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
                     {t("product-name")}
                   </Typography>
                   <form.Field name="name">
@@ -198,13 +201,13 @@ export const ViewProduct = (props: ViewProductProps) => {
                         onBlur={field.handleBlur}
                         size="lg"
                         variant="outlined"
-                        className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                        className="rounded-2xl"
                       />
                     )}
                   </form.Field>
                 </div>
                 <div className="space-y-1">
-                  <Typography level="title-md" className="text-slate-900">
+                  <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
                     {t("description")}
                   </Typography>
                   <form.Field name="description">
@@ -216,32 +219,14 @@ export const ViewProduct = (props: ViewProductProps) => {
                         onBlur={field.handleBlur}
                         size="lg"
                         variant="outlined"
-                        className="rounded-2xl bg-white/90 shadow-[0_10px_24px_rgba(15,23,42,0.08)]"
+                        className="rounded-2xl"
                       />
                     )}
                   </form.Field>
                 </div>
-                <div className="grid gap-4 md:grid-cols-2">
+                <div className="grid gap-4 sm:grid-cols-2">
                   <div className="space-y-1">
-                    <Typography level="title-md" className="text-slate-900">
-                      {t("expiry-date")}
-                    </Typography>
-                    <form.Field name="expiry_date">
-                      {(field) => (
-                        <Input
-                          type="date"
-                          value={field.state.value}
-                          onChange={(e) => field.handleChange(e.target.value)}
-                          onBlur={field.handleBlur}
-                          size="lg"
-                          variant="outlined"
-                          className="rounded-2xl bg-white/90"
-                        />
-                      )}
-                    </form.Field>
-                  </div>
-                  <div className="space-y-1">
-                    <Typography level="title-md" className="text-slate-900">
+                    <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
                       {t("bottling-date")}
                     </Typography>
                     <form.Field name="bottling_date">
@@ -253,148 +238,138 @@ export const ViewProduct = (props: ViewProductProps) => {
                           onBlur={field.handleBlur}
                           size="lg"
                           variant="outlined"
-                          className="rounded-2xl bg-white/90"
+                          className="rounded-2xl"
+                        />
+                      )}
+                    </form.Field>
+                  </div>
+                  <div className="space-y-1">
+                    <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                      {t("expiry-date")}
+                    </Typography>
+                    <form.Field name="expiry_date">
+                      {(field) => (
+                        <Input
+                          type="date"
+                          value={field.state.value}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                          onBlur={field.handleBlur}
+                          size="lg"
+                          variant="outlined"
+                          className="rounded-2xl"
                         />
                       )}
                     </form.Field>
                   </div>
                 </div>
               </div>
-              <div className="space-y-4">
-                <div className="rounded-2xl border border-white/70 bg-linear-to-br from-[#f7fbff] via-[#f2f6fb] to-[#eef3f9] p-5 shadow-[0_16px_40px_rgba(12,38,78,0.08)]">
-                  <Typography level="title-lg" className="text-slate-900">
-                    {t("inventory")}
-                  </Typography>
-                  <Divider className="my-3" />
-                  <div className="grid gap-4">
-                    <div className="space-y-1">
-                      <Typography level="title-md" className="text-slate-900">
-                        {t("amount")}
-                      </Typography>
-                      <form.Field name="amount">
-                        {(field) => (
-                          <Input
-                            type="number"
-                            color="neutral"
-                            id="amountInput"
-                            placeholder={t("amount")}
-                            value={field.state.value}
-                            variant="soft"
-                            size="lg"
-                            onChange={(e) => {
-                              const nextValue = Number(e.target.value);
-                              field.handleChange(
-                                Number.isNaN(nextValue) ? 0 : nextValue,
-                              );
-                            }}
-                            onBlur={field.handleBlur}
-                            className="rounded-2xl bg-white/80"
-                          />
-                        )}
-                      </form.Field>
-                    </div>
-                    <div className="space-y-1">
-                      <Typography level="title-md" className="text-slate-900">
-                        {t("price")}
-                      </Typography>
-                      <form.Field name="price">
-                        {(field) => (
-                          <Input
-                            type="text"
-                            value={field.state.value}
-                            onChange={(e) => field.handleChange(e.target.value)}
-                            onBlur={field.handleBlur}
-                            size="lg"
-                            variant="outlined"
-                            className="rounded-2xl bg-white/90"
-                          />
-                        )}
-                      </form.Field>
-                      <Typography level="body-sm" className="text-slate-500">
-                        {Cookies.get("currency")}
-                      </Typography>
-                    </div>
-                    <div className="space-y-1">
-                      <Typography level="title-md" className="text-slate-900">
-                        {t("storage-place")}
-                      </Typography>
-                      <form.Field name="storage_location_uuid">
-                        {(field) => (
-                          <Select
-                            value={field.state.value}
-                            onChange={(_event, value) =>
-                              field.handleChange(value ?? "")
-                            }
-                            size="lg"
-                            variant="outlined"
-                            className="rounded-2xl bg-white/90"
-                          >
-                            {storages?.map((storage) => (
-                              <Option key={storage.uuid} value={storage.uuid}>
-                                {storage.name}
-                              </Option>
-                            ))}
-                          </Select>
-                        )}
-                      </form.Field>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div>
-              <div className="flex gap-3 items-center">
-                <Typography level="body-sm" className="text-slate-500">
-                  {t("product-details")}
-                </Typography>
-                <div className="grow"></div>
-                <Button
-                  startDecorator={<QrCodeIcon />}
-                  loading={isPending}
-                  onClick={() => downloadQRcode()}
-                  size="lg"
-                  className="rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
-                >
-                  {t("download-qr-code")}
-                </Button>
-                <Button
-                  type="submit"
-                  loading={isPending}
-                  size="lg"
-                  className="rounded-2xl bg-[#0b6bcb] text-white shadow-[0_16px_36px_rgba(11,107,203,0.35)] transition hover:-translate-y-0.5 hover:bg-[#095aa7]"
-                >
-                  {t("save")}
-                </Button>
-              </div>
             </div>
 
-            {alert.isAlert && (
-              <Alert
-                color={alert.type}
-                variant="soft"
-                className="rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
+            <div className="rounded-3xl p-6" style={cardSx}>
+              <Typography level="title-lg" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                {t("inventory")}
+              </Typography>
+              <div className="mt-4 space-y-4">
+                <div className="space-y-1">
+                  <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                    {t("amount")}
+                  </Typography>
+                  <form.Field name="amount">
+                    {(field) => (
+                      <AmountStepper
+                        value={field.state.value}
+                        onChange={field.handleChange}
+                        onBlur={field.handleBlur}
+                      />
+                    )}
+                  </form.Field>
+                </div>
+                <div className="space-y-1">
+                  <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                    {t("price")}
+                  </Typography>
+                  <form.Field name="price">
+                    {(field) => (
+                      <Input
+                        type="text"
+                        value={field.state.value}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                        onBlur={field.handleBlur}
+                        size="lg"
+                        variant="outlined"
+                        className="rounded-2xl"
+                        endDecorator={
+                          <Typography level="body-sm" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                            {Cookies.get("currency")}
+                          </Typography>
+                        }
+                      />
+                    )}
+                  </form.Field>
+                </div>
+                <div className="space-y-1">
+                  <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                    {t("storage-place")}
+                  </Typography>
+                  <form.Field name="storage_location_uuid">
+                    {(field) => (
+                      <Select
+                        value={field.state.value}
+                        onChange={(_event, value) => field.handleChange(value ?? "")}
+                        size="lg"
+                        variant="outlined"
+                        className="rounded-2xl"
+                      >
+                        {storages?.map((storage) => (
+                          <Option key={storage.uuid} value={storage.uuid}>
+                            {storage.name}
+                          </Option>
+                        ))}
+                      </Select>
+                    )}
+                  </form.Field>
+                </div>
+              </div>
+
+              <div
+                className="mt-4 flex items-center gap-3 rounded-2xl p-4"
+                style={{ backgroundColor: "var(--joy-palette-background-level1)" }}
               >
-                {alert.header}
-                <br />
-                {alert.text}
-              </Alert>
-            )}
-            {success && (
-              <Alert
-                color="success"
-                variant="soft"
-                className="rounded-2xl border border-emerald-200/70 bg-emerald-50/80 text-emerald-700 shadow-[0_14px_30px_rgba(16,185,129,0.18)]"
-              >
-                <div className="flex w-full items-center justify-between">
-                  <Typography level="body-sm" className="text-emerald-700">
-                    {t("success")}
+                <QrCode size={20} color="var(--joy-palette-text-tertiary)" className="shrink-0" />
+                <div className="min-w-0">
+                  <Typography level="title-md" sx={{ color: "var(--joy-palette-text-primary)" }}>
+                    {t("jar-label")}
+                  </Typography>
+                  <Typography level="body-sm" className="normal-case font-normal" sx={{ color: "var(--joy-palette-text-tertiary)" }}>
+                    {t("jar-label-hint")}
                   </Typography>
                 </div>
-              </Alert>
-            )}
-          </form>
-        </Box>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center justify-end gap-3">
+            <Button
+              type="button"
+              startDecorator={<QrCode size={16} />}
+              onClick={() => downloadQRcode()}
+              size="lg"
+              variant="outlined"
+              color="neutral"
+              className="rounded-2xl"
+            >
+              {t("download-qr-code")}
+            </Button>
+            <Button type="submit" loading={isPending} size="lg" color="primary" variant="solid" className="btn-lift rounded-2xl">
+              {t("save")}
+            </Button>
+          </div>
+
+          {alert.isAlert && (
+            <MyAlert type={alert.type} header={alert.header} text={alert.text} />
+          )}
+        </form>
       )}
-    </>
+    </div>
   );
 };

frontend/src/routeTree.gen.ts

@@ -12,12 +12,13 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as AppHiddenLayoutRouteImport } from './routes/app/_hiddenLayout'
-import { Route as AppHiddenLayoutViewProductRouteImport } from './routes/app/_hiddenLayout/view-product'
-import { Route as AppHiddenLayoutStoragesRouteImport } from './routes/app/_hiddenLayout/storages'
-import { Route as AppHiddenLayoutInventoryRouteImport } from './routes/app/_hiddenLayout/inventory'
-import { Route as AppHiddenLayoutAppSettingsRouteImport } from './routes/app/_hiddenLayout/app-settings'
-import { Route as AppHiddenLayoutAddProductRouteImport } from './routes/app/_hiddenLayout/add-product'
+import { Route as AppHiddenLayoutAuthedRouteImport } from './routes/app/_hiddenLayout/_authed'
 import { Route as AppHiddenLayoutQuickViewProductRouteImport } from './routes/app/_hiddenLayout/quick-view/product'
+import { Route as AppHiddenLayoutAuthedViewProductRouteImport } from './routes/app/_hiddenLayout/_authed/view-product'
+import { Route as AppHiddenLayoutAuthedStoragesRouteImport } from './routes/app/_hiddenLayout/_authed/storages'
+import { Route as AppHiddenLayoutAuthedInventoryRouteImport } from './routes/app/_hiddenLayout/_authed/inventory'
+import { Route as AppHiddenLayoutAuthedAppSettingsRouteImport } from './routes/app/_hiddenLayout/_authed/app-settings'
+import { Route as AppHiddenLayoutAuthedAddProductRouteImport } from './routes/app/_hiddenLayout/_authed/add-product'
 
 const LoginRoute = LoginRouteImport.update({
   id: '/login',
@@ -34,62 +35,67 @@ const AppHiddenLayoutRoute = AppHiddenLayoutRouteImport.update({
   path: '/app',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AppHiddenLayoutViewProductRoute =
-  AppHiddenLayoutViewProductRouteImport.update({
-    id: '/view-product',
-    path: '/view-product',
-    getParentRoute: () => AppHiddenLayoutRoute,
-  } as any)
-const AppHiddenLayoutStoragesRoute = AppHiddenLayoutStoragesRouteImport.update({
-  id: '/storages',
-  path: '/storages',
+const AppHiddenLayoutAuthedRoute = AppHiddenLayoutAuthedRouteImport.update({
+  id: '/_authed',
   getParentRoute: () => AppHiddenLayoutRoute,
 } as any)
-const AppHiddenLayoutInventoryRoute =
-  AppHiddenLayoutInventoryRouteImport.update({
-    id: '/inventory',
-    path: '/inventory',
-    getParentRoute: () => AppHiddenLayoutRoute,
-  } as any)
-const AppHiddenLayoutAppSettingsRoute =
-  AppHiddenLayoutAppSettingsRouteImport.update({
-    id: '/app-settings',
-    path: '/app-settings',
-    getParentRoute: () => AppHiddenLayoutRoute,
-  } as any)
-const AppHiddenLayoutAddProductRoute =
-  AppHiddenLayoutAddProductRouteImport.update({
-    id: '/add-product',
-    path: '/add-product',
-    getParentRoute: () => AppHiddenLayoutRoute,
-  } as any)
 const AppHiddenLayoutQuickViewProductRoute =
   AppHiddenLayoutQuickViewProductRouteImport.update({
     id: '/quick-view/product',
     path: '/quick-view/product',
     getParentRoute: () => AppHiddenLayoutRoute,
   } as any)
+const AppHiddenLayoutAuthedViewProductRoute =
+  AppHiddenLayoutAuthedViewProductRouteImport.update({
+    id: '/view-product',
+    path: '/view-product',
+    getParentRoute: () => AppHiddenLayoutAuthedRoute,
+  } as any)
+const AppHiddenLayoutAuthedStoragesRoute =
+  AppHiddenLayoutAuthedStoragesRouteImport.update({
+    id: '/storages',
+    path: '/storages',
+    getParentRoute: () => AppHiddenLayoutAuthedRoute,
+  } as any)
+const AppHiddenLayoutAuthedInventoryRoute =
+  AppHiddenLayoutAuthedInventoryRouteImport.update({
+    id: '/inventory',
+    path: '/inventory',
+    getParentRoute: () => AppHiddenLayoutAuthedRoute,
+  } as any)
+const AppHiddenLayoutAuthedAppSettingsRoute =
+  AppHiddenLayoutAuthedAppSettingsRouteImport.update({
+    id: '/app-settings',
+    path: '/app-settings',
+    getParentRoute: () => AppHiddenLayoutAuthedRoute,
+  } as any)
+const AppHiddenLayoutAuthedAddProductRoute =
+  AppHiddenLayoutAuthedAddProductRouteImport.update({
+    id: '/add-product',
+    path: '/add-product',
+    getParentRoute: () => AppHiddenLayoutAuthedRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/login': typeof LoginRoute
-  '/app': typeof AppHiddenLayoutRouteWithChildren
-  '/app/add-product': typeof AppHiddenLayoutAddProductRoute
-  '/app/app-settings': typeof AppHiddenLayoutAppSettingsRoute
-  '/app/inventory': typeof AppHiddenLayoutInventoryRoute
-  '/app/storages': typeof AppHiddenLayoutStoragesRoute
-  '/app/view-product': typeof AppHiddenLayoutViewProductRoute
+  '/app': typeof AppHiddenLayoutAuthedRouteWithChildren
+  '/app/add-product': typeof AppHiddenLayoutAuthedAddProductRoute
+  '/app/app-settings': typeof AppHiddenLayoutAuthedAppSettingsRoute
+  '/app/inventory': typeof AppHiddenLayoutAuthedInventoryRoute
+  '/app/storages': typeof AppHiddenLayoutAuthedStoragesRoute
+  '/app/view-product': typeof AppHiddenLayoutAuthedViewProductRoute
   '/app/quick-view/product': typeof AppHiddenLayoutQuickViewProductRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/login': typeof LoginRoute
-  '/app': typeof AppHiddenLayoutRouteWithChildren
-  '/app/add-product': typeof AppHiddenLayoutAddProductRoute
-  '/app/app-settings': typeof AppHiddenLayoutAppSettingsRoute
-  '/app/inventory': typeof AppHiddenLayoutInventoryRoute
-  '/app/storages': typeof AppHiddenLayoutStoragesRoute
-  '/app/view-product': typeof AppHiddenLayoutViewProductRoute
+  '/app': typeof AppHiddenLayoutAuthedRouteWithChildren
+  '/app/add-product': typeof AppHiddenLayoutAuthedAddProductRoute
+  '/app/app-settings': typeof AppHiddenLayoutAuthedAppSettingsRoute
+  '/app/inventory': typeof AppHiddenLayoutAuthedInventoryRoute
+  '/app/storages': typeof AppHiddenLayoutAuthedStoragesRoute
+  '/app/view-product': typeof AppHiddenLayoutAuthedViewProductRoute
   '/app/quick-view/product': typeof AppHiddenLayoutQuickViewProductRoute
 }
 export interface FileRoutesById {
@@ -97,11 +103,12 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/login': typeof LoginRoute
   '/app/_hiddenLayout': typeof AppHiddenLayoutRouteWithChildren
-  '/app/_hiddenLayout/add-product': typeof AppHiddenLayoutAddProductRoute
-  '/app/_hiddenLayout/app-settings': typeof AppHiddenLayoutAppSettingsRoute
-  '/app/_hiddenLayout/inventory': typeof AppHiddenLayoutInventoryRoute
-  '/app/_hiddenLayout/storages': typeof AppHiddenLayoutStoragesRoute
-  '/app/_hiddenLayout/view-product': typeof AppHiddenLayoutViewProductRoute
+  '/app/_hiddenLayout/_authed': typeof AppHiddenLayoutAuthedRouteWithChildren
+  '/app/_hiddenLayout/_authed/add-product': typeof AppHiddenLayoutAuthedAddProductRoute
+  '/app/_hiddenLayout/_authed/app-settings': typeof AppHiddenLayoutAuthedAppSettingsRoute
+  '/app/_hiddenLayout/_authed/inventory': typeof AppHiddenLayoutAuthedInventoryRoute
+  '/app/_hiddenLayout/_authed/storages': typeof AppHiddenLayoutAuthedStoragesRoute
+  '/app/_hiddenLayout/_authed/view-product': typeof AppHiddenLayoutAuthedViewProductRoute
   '/app/_hiddenLayout/quick-view/product': typeof AppHiddenLayoutQuickViewProductRoute
 }
 export interface FileRouteTypes {
@@ -132,11 +139,12 @@ export interface FileRouteTypes {
     | '/'
     | '/login'
     | '/app/_hiddenLayout'
-    | '/app/_hiddenLayout/add-product'
-    | '/app/_hiddenLayout/app-settings'
-    | '/app/_hiddenLayout/inventory'
-    | '/app/_hiddenLayout/storages'
-    | '/app/_hiddenLayout/view-product'
+    | '/app/_hiddenLayout/_authed'
+    | '/app/_hiddenLayout/_authed/add-product'
+    | '/app/_hiddenLayout/_authed/app-settings'
+    | '/app/_hiddenLayout/_authed/inventory'
+    | '/app/_hiddenLayout/_authed/storages'
+    | '/app/_hiddenLayout/_authed/view-product'
     | '/app/_hiddenLayout/quick-view/product'
   fileRoutesById: FileRoutesById
 }
@@ -169,39 +177,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppHiddenLayoutRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/app/_hiddenLayout/view-product': {
-      id: '/app/_hiddenLayout/view-product'
-      path: '/view-product'
-      fullPath: '/app/view-product'
-      preLoaderRoute: typeof AppHiddenLayoutViewProductRouteImport
-      parentRoute: typeof AppHiddenLayoutRoute
-    }
-    '/app/_hiddenLayout/storages': {
-      id: '/app/_hiddenLayout/storages'
-      path: '/storages'
-      fullPath: '/app/storages'
-      preLoaderRoute: typeof AppHiddenLayoutStoragesRouteImport
-      parentRoute: typeof AppHiddenLayoutRoute
-    }
-    '/app/_hiddenLayout/inventory': {
-      id: '/app/_hiddenLayout/inventory'
-      path: '/inventory'
-      fullPath: '/app/inventory'
-      preLoaderRoute: typeof AppHiddenLayoutInventoryRouteImport
-      parentRoute: typeof AppHiddenLayoutRoute
-    }
-    '/app/_hiddenLayout/app-settings': {
-      id: '/app/_hiddenLayout/app-settings'
-      path: '/app-settings'
-      fullPath: '/app/app-settings'
-      preLoaderRoute: typeof AppHiddenLayoutAppSettingsRouteImport
-      parentRoute: typeof AppHiddenLayoutRoute
-    }
-    '/app/_hiddenLayout/add-product': {
-      id: '/app/_hiddenLayout/add-product'
-      path: '/add-product'
-      fullPath: '/app/add-product'
-      preLoaderRoute: typeof AppHiddenLayoutAddProductRouteImport
+    '/app/_hiddenLayout/_authed': {
+      id: '/app/_hiddenLayout/_authed'
+      path: ''
+      fullPath: '/app'
+      preLoaderRoute: typeof AppHiddenLayoutAuthedRouteImport
       parentRoute: typeof AppHiddenLayoutRoute
     }
     '/app/_hiddenLayout/quick-view/product': {
@@ -211,24 +191,72 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppHiddenLayoutQuickViewProductRouteImport
       parentRoute: typeof AppHiddenLayoutRoute
     }
+    '/app/_hiddenLayout/_authed/view-product': {
+      id: '/app/_hiddenLayout/_authed/view-product'
+      path: '/view-product'
+      fullPath: '/app/view-product'
+      preLoaderRoute: typeof AppHiddenLayoutAuthedViewProductRouteImport
+      parentRoute: typeof AppHiddenLayoutAuthedRoute
+    }
+    '/app/_hiddenLayout/_authed/storages': {
+      id: '/app/_hiddenLayout/_authed/storages'
+      path: '/storages'
+      fullPath: '/app/storages'
+      preLoaderRoute: typeof AppHiddenLayoutAuthedStoragesRouteImport
+      parentRoute: typeof AppHiddenLayoutAuthedRoute
+    }
+    '/app/_hiddenLayout/_authed/inventory': {
+      id: '/app/_hiddenLayout/_authed/inventory'
+      path: '/inventory'
+      fullPath: '/app/inventory'
+      preLoaderRoute: typeof AppHiddenLayoutAuthedInventoryRouteImport
+      parentRoute: typeof AppHiddenLayoutAuthedRoute
+    }
+    '/app/_hiddenLayout/_authed/app-settings': {
+      id: '/app/_hiddenLayout/_authed/app-settings'
+      path: '/app-settings'
+      fullPath: '/app/app-settings'
+      preLoaderRoute: typeof AppHiddenLayoutAuthedAppSettingsRouteImport
+      parentRoute: typeof AppHiddenLayoutAuthedRoute
+    }
+    '/app/_hiddenLayout/_authed/add-product': {
+      id: '/app/_hiddenLayout/_authed/add-product'
+      path: '/add-product'
+      fullPath: '/app/add-product'
+      preLoaderRoute: typeof AppHiddenLayoutAuthedAddProductRouteImport
+      parentRoute: typeof AppHiddenLayoutAuthedRoute
+    }
   }
 }
 
+interface AppHiddenLayoutAuthedRouteChildren {
+  AppHiddenLayoutAuthedAddProductRoute: typeof AppHiddenLayoutAuthedAddProductRoute
+  AppHiddenLayoutAuthedAppSettingsRoute: typeof AppHiddenLayoutAuthedAppSettingsRoute
+  AppHiddenLayoutAuthedInventoryRoute: typeof AppHiddenLayoutAuthedInventoryRoute
+  AppHiddenLayoutAuthedStoragesRoute: typeof AppHiddenLayoutAuthedStoragesRoute
+  AppHiddenLayoutAuthedViewProductRoute: typeof AppHiddenLayoutAuthedViewProductRoute
+}
+
+const AppHiddenLayoutAuthedRouteChildren: AppHiddenLayoutAuthedRouteChildren = {
+  AppHiddenLayoutAuthedAddProductRoute: AppHiddenLayoutAuthedAddProductRoute,
+  AppHiddenLayoutAuthedAppSettingsRoute: AppHiddenLayoutAuthedAppSettingsRoute,
+  AppHiddenLayoutAuthedInventoryRoute: AppHiddenLayoutAuthedInventoryRoute,
+  AppHiddenLayoutAuthedStoragesRoute: AppHiddenLayoutAuthedStoragesRoute,
+  AppHiddenLayoutAuthedViewProductRoute: AppHiddenLayoutAuthedViewProductRoute,
+}
+
+const AppHiddenLayoutAuthedRouteWithChildren =
+  AppHiddenLayoutAuthedRoute._addFileChildren(
+    AppHiddenLayoutAuthedRouteChildren,
+  )
+
 interface AppHiddenLayoutRouteChildren {
-  AppHiddenLayoutAddProductRoute: typeof AppHiddenLayoutAddProductRoute
-  AppHiddenLayoutAppSettingsRoute: typeof AppHiddenLayoutAppSettingsRoute
-  AppHiddenLayoutInventoryRoute: typeof AppHiddenLayoutInventoryRoute
-  AppHiddenLayoutStoragesRoute: typeof AppHiddenLayoutStoragesRoute
-  AppHiddenLayoutViewProductRoute: typeof AppHiddenLayoutViewProductRoute
+  AppHiddenLayoutAuthedRoute: typeof AppHiddenLayoutAuthedRouteWithChildren
   AppHiddenLayoutQuickViewProductRoute: typeof AppHiddenLayoutQuickViewProductRoute
 }
 
 const AppHiddenLayoutRouteChildren: AppHiddenLayoutRouteChildren = {
-  AppHiddenLayoutAddProductRoute: AppHiddenLayoutAddProductRoute,
-  AppHiddenLayoutAppSettingsRoute: AppHiddenLayoutAppSettingsRoute,
-  AppHiddenLayoutInventoryRoute: AppHiddenLayoutInventoryRoute,
-  AppHiddenLayoutStoragesRoute: AppHiddenLayoutStoragesRoute,
-  AppHiddenLayoutViewProductRoute: AppHiddenLayoutViewProductRoute,
+  AppHiddenLayoutAuthedRoute: AppHiddenLayoutAuthedRouteWithChildren,
   AppHiddenLayoutQuickViewProductRoute: AppHiddenLayoutQuickViewProductRoute,
 }
 

frontend/src/routes/app/_hiddenLayout.tsx

@@ -1,4 +1,4 @@
-import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Outlet, useRouterState } from "@tanstack/react-router";
 import { Sidebar } from "../../components/Sidebar";
 
 export const Route = createFileRoute("/app/_hiddenLayout")({
@@ -6,11 +6,18 @@ export const Route = createFileRoute("/app/_hiddenLayout")({
 });
 
 function AppLayout() {
+  const pathname = useRouterState({ select: (state) => state.location.pathname });
+
   return (
-    <div className="flex min-h-screen w-full flex-col bg-[#f7f9fc] lg:flex-row">
+    <div
+      className="flex min-h-screen w-full flex-col lg:flex-row"
+      style={{ backgroundColor: "var(--joy-palette-background-body)" }}
+    >
       <Sidebar />
       <main className="flex-1 px-4 py-5 sm:px-6 lg:px-8 lg:py-6">
-        <Outlet />
+        <div key={pathname} className="animate-page-in">
+          <Outlet />
+        </div>
       </main>
     </div>
   );

frontend/src/routes/app/_hiddenLayout/_authed.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { verifyLogin } from "../../../utils/api/auth";
+
+export const Route = createFileRoute("/app/_hiddenLayout/_authed")({
+  beforeLoad: async () => {
+    await verifyLogin();
+  },
+  component: () => <Outlet />,
+});

frontend/src/routes/app/_hiddenLayout/_authed/add-product.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { AddProduct } from "../../../../pages/AddProduct";
+
+export const Route = createFileRoute("/app/_hiddenLayout/_authed/add-product")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <AddProduct />;
+}

frontend/src/routes/app/_hiddenLayout/_authed/app-settings.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Settings } from "../../../../pages/Settings";
+
+export const Route = createFileRoute("/app/_hiddenLayout/_authed/app-settings")(
+  {
+    component: RouteComponent,
+  },
+);
+
+function RouteComponent() {
+  return <Settings />;
+}

frontend/src/routes/app/_hiddenLayout/_authed/inventory.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { InventoryPage } from "../../../../pages/Inventory";
+
+export const Route = createFileRoute("/app/_hiddenLayout/_authed/inventory")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <InventoryPage />;
+}

frontend/src/routes/app/_hiddenLayout/_authed/storages.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Storages } from "../../../../pages/Storages";
+
+export const Route = createFileRoute("/app/_hiddenLayout/_authed/storages")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <Storages />;
+}

frontend/src/routes/app/_hiddenLayout/_authed/view-product.tsx

@@ -0,0 +1,17 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { ViewProduct } from "../../../../pages/ViewProduct";
+
+export const Route = createFileRoute("/app/_hiddenLayout/_authed/view-product")(
+  {
+    validateSearch: z.object({
+      product: z.string(),
+    }),
+    component: RouteComponent,
+  },
+);
+
+function RouteComponent() {
+  const { product } = Route.useSearch();
+  return <ViewProduct uuid={product} />;
+}

frontend/src/routes/app/_hiddenLayout/add-product.tsx

@@ -1,18 +0,0 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
-import { isAuthenticated } from "../../../utils/api/auth";
-import { AddProduct } from "../../../pages/AddProduct";
-
-export const Route = createFileRoute("/app/_hiddenLayout/add-product")({
-  beforeLoad: async () => {
-    if (!(await isAuthenticated())) {
-      throw redirect({
-        to: "/login",
-      });
-    }
-  },
-  component: RouteComponent,
-});
-
-function RouteComponent() {
-  return <AddProduct />;
-}

frontend/src/routes/app/_hiddenLayout/app-settings.tsx

@@ -1,18 +0,0 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
-import { isAuthenticated } from "../../../utils/api/auth";
-import { Settings } from "../../../pages/Settings";
-
-export const Route = createFileRoute("/app/_hiddenLayout/app-settings")({
-  beforeLoad: async () => {
-    if (!(await isAuthenticated())) {
-      throw redirect({
-        to: "/login",
-      });
-    }
-  },
-  component: RouteComponent,
-});
-
-function RouteComponent() {
-  return <Settings />;
-}

frontend/src/routes/app/_hiddenLayout/inventory.tsx

@@ -1,18 +0,0 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
-import { isAuthenticated } from "../../../utils/api/auth";
-import { InventoryPage } from "../../../pages/Inventory";
-
-export const Route = createFileRoute("/app/_hiddenLayout/inventory")({
-  beforeLoad: async () => {
-    if (!(await isAuthenticated())) {
-      throw redirect({
-        to: "/login",
-      });
-    }
-  },
-  component: RouteComponent,
-});
-
-function RouteComponent() {
-  return <InventoryPage />;
-}

frontend/src/routes/app/_hiddenLayout/storages.tsx

@@ -1,18 +0,0 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
-import { isAuthenticated } from "../../../utils/api/auth";
-import { Storages } from "../../../pages/Storages";
-
-export const Route = createFileRoute("/app/_hiddenLayout/storages")({
-  beforeLoad: async () => {
-    if (!(await isAuthenticated())) {
-      throw redirect({
-        to: "/login",
-      });
-    }
-  },
-  component: RouteComponent,
-});
-
-function RouteComponent() {
-  return <Storages />;
-}

frontend/src/routes/app/_hiddenLayout/view-product.tsx

@@ -1,23 +0,0 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
-import { z } from "zod";
-import { isAuthenticated } from "../../../utils/api/auth";
-import { ViewProduct } from "../../../pages/ViewProduct";
-
-export const Route = createFileRoute("/app/_hiddenLayout/view-product")({
-  beforeLoad: async () => {
-    if (!(await isAuthenticated())) {
-      throw redirect({
-        to: "/login",
-      });
-    }
-  },
-  validateSearch: z.object({
-    product: z.string(),
-  }),
-  component: RouteComponent,
-});
-
-function RouteComponent() {
-  const { product } = Route.useSearch();
-  return <ViewProduct uuid={product} />;
-}

frontend/src/routes/index.tsx

@@ -6,6 +6,7 @@ export const Route = createFileRoute("/")({
     if (!(await isAuthenticated())) {
       throw redirect({
         to: "/login",
+        search: { loggedOut: true },
       });
     } else {
       throw redirect({

frontend/src/routes/login.tsx

@@ -1,7 +1,11 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { LoginCard } from "../components/LoginCard";
+import { checkLogin } from "../utils/api/auth.ts";
 
 export const Route = createFileRoute("/login")({
+  beforeLoad: async () => {
+    await checkLogin();
+  },
   component: RouteComponent,
 });
 

frontend/src/theme.ts

@@ -0,0 +1,329 @@
+import { extendTheme } from "@mui/joy/styles";
+
+// Palette tokens sourced from the v0.9 design mockups (canvas/surface/ink/brand/etc.)
+
+export const theme = extendTheme({
+  cssVarPrefix: "joy",
+  colorSchemes: {
+    light: {
+      palette: {
+        primary: {
+          50: "#eef3fe",
+          100: "#dbe6fc",
+          200: "#b0c8f8",
+          300: "#7fa3f0",
+          400: "#4c7de0",
+          500: "#2159c9",
+          600: "#1c48a3",
+          700: "#163a82",
+          800: "#122e68",
+          900: "#0e2453",
+          solidBg: "#2159c9",
+          solidHoverBg: "#1c48a3",
+          solidActiveBg: "#163a82",
+          outlinedBorder: "#7fa3f0",
+          outlinedColor: "#163a82",
+          softBg: "#eef3fe", // Color in sidebar for selected view
+          softColor: "#163a82",
+        },
+        success: {
+          50: "#ecfdf5",
+          100: "#d1faee",
+          200: "#a6f4dc",
+          300: "#6ee7c9",
+          400: "#34d0ac",
+          500: "#0d9488",
+          600: "#0b7c73",
+          700: "#0a655e",
+          800: "#0b514c",
+          900: "#0a423f",
+          solidBg: "#0d9488",
+          solidHoverBg: "#0b7c73",
+          outlinedBorder: "#a6f4dc",
+          outlinedColor: "#0b7c73",
+          softBg: "#d1faee",
+          softColor: "#0a655e",
+        },
+        warning: {
+          50: "#fdf1e0",
+          100: "#fbe3c1",
+          200: "#f6c98a",
+          300: "#eeab54",
+          400: "#e2932c",
+          500: "#d98014",
+          600: "#b46810",
+          700: "#92530f",
+          800: "#734111",
+          900: "#5c350f",
+          solidBg: "#d98014",
+          solidHoverBg: "#b46810",
+          outlinedBorder: "#f6c98a",
+          outlinedColor: "#b46810",
+          softBg: "#fdf1e0",
+          softColor: "#734111",
+        },
+        danger: {
+          50: "#fbeae9",
+          100: "#f6d2cf",
+          200: "#eaa39c",
+          300: "#dc746a",
+          400: "#cd4f42",
+          500: "#c4342c",
+          600: "#a32a24",
+          700: "#84221f",
+          800: "#691c1b",
+          900: "#551818",
+          solidBg: "#c4342c",
+          solidHoverBg: "#a32a24",
+          outlinedBorder: "#eaa39c",
+          outlinedColor: "#a32a24",
+          softBg: "#fbeae9",
+          softColor: "#84221f",
+        },
+        neutral: {
+          50: "#f6f7f9",
+          100: "#f2f4f6",
+          200: "#e4e7ec",
+          300: "#dfe3e8",
+          400: "#7b8494",
+          500: "#667283",
+          600: "#4a5364",
+          700: "#39414f",
+          800: "#232833",
+          900: "#10151f",
+          plainColor: "#4a5364",
+          outlinedColor: "#4a5364",
+          outlinedBorder: "#e4e7ec",
+          outlinedHoverBg: "#fbfcfd",
+          softColor: "#4a5364",
+          softBg: "#f2f4f6",
+        },
+        background: {
+          body: "#f6f7f9",
+          surface: "#ffffff",
+          level1: "#fbfcfd",
+          level2: "#f2f4f6",
+          level3: "#e4e7ec",
+        },
+        text: {
+          primary: "#10151f",
+          secondary: "#4a5364",
+          tertiary: "#667283",
+        },
+        divider: "#e4e7ec",
+      },
+    },
+    dark: {
+      palette: {
+        primary: {
+          50: "#0e2453",
+          100: "#122e68",
+          200: "#163a82",
+          300: "#1c48a3",
+          400: "#2159c9",
+          500: "#5b8def",
+          600: "#82a8f2",
+          700: "#a9c3f6",
+          800: "#cddcfa",
+          900: "#eef3fe",
+          solidBg: "#5b8def",
+          solidHoverBg: "#82a8f2",
+          solidActiveBg: "#1c48a3",
+          outlinedBorder: "#1c48a3",
+          outlinedColor: "#a9c3f6",
+          softBg: "#16233d", // Color in sidebar for selected view
+          softColor: "#a9c3f6",
+        },
+        success: {
+          50: "#0a423f",
+          100: "#0b514c",
+          200: "#0a655e",
+          300: "#0b7c73",
+          400: "#0d9488",
+          500: "#2dc8b1",
+          600: "#6ee7c9",
+          700: "#a6f4dc",
+          800: "#d1faee",
+          900: "#ecfdf5",
+          solidBg: "#0d9488",
+          solidHoverBg: "#2dc8b1",
+          outlinedBorder: "#0a655e",
+          outlinedColor: "#6ee7c9",
+          softBg: "rgba(13, 148, 136, 0.18)",
+          softColor: "#6ee7c9",
+        },
+        warning: {
+          50: "#5c350f",
+          100: "#734111",
+          200: "#92530f",
+          300: "#b46810",
+          400: "#d98014",
+          500: "#e3a054",
+          600: "#edbb82",
+          700: "#f4d3ac",
+          800: "#f9e6d3",
+          900: "#fdf1e0",
+          solidBg: "#e3a054",
+          solidHoverBg: "#edbb82",
+          outlinedBorder: "#92530f",
+          outlinedColor: "#edbb82",
+          softBg: "rgba(227, 160, 84, 0.16)",
+          softColor: "#f4d3ac",
+        },
+        danger: {
+          50: "#551818",
+          100: "#691c1b",
+          200: "#84221f",
+          300: "#a32a24",
+          400: "#c4342c",
+          500: "#f07168",
+          600: "#f4948d",
+          700: "#f8b7b2",
+          800: "#fbd6d3",
+          900: "#fdeceb",
+          solidBg: "#f07168",
+          solidHoverBg: "#f4948d",
+          outlinedBorder: "#84221f",
+          outlinedColor: "#f4948d",
+          softBg: "rgba(240, 113, 104, 0.16)",
+          softColor: "#f8b7b2",
+        },
+        neutral: {
+          50: "#0e1116",
+          100: "#161b22",
+          200: "#1b212a",
+          300: "#20262f",
+          400: "#272e39",
+          500: "#8590a0",
+          600: "#aab4c2",
+          700: "#c7cfd9",
+          800: "#e8ecf2",
+          900: "#f6f8fa",
+          plainColor: "#aab4c2",
+          outlinedColor: "#aab4c2",
+          outlinedBorder: "#272e39",
+          outlinedHoverBg: "#1b212a",
+          softColor: "#aab4c2",
+          softBg: "#20262f",
+        },
+        background: {
+          body: "#0e1116",
+          surface: "#161b22",
+          level1: "#1b212a",
+          level2: "#20262f",
+          level3: "#272e39",
+        },
+        text: {
+          primary: "#e8ecf2",
+          secondary: "#aab4c2",
+          tertiary: "#8590a0",
+        },
+        divider: "#272e39",
+      },
+    },
+  },
+  fontFamily: {
+    body: "'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif",
+    display: "'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif",
+    code: "'IBM Plex Mono', ui-monospace, monospace",
+  },
+  radius: {
+    xs: "6px",
+    sm: "10px",
+    md: "14px",
+    lg: "20px",
+    xl: "28px",
+  },
+  typography: {
+    h1: {
+      fontSize: "30px",
+      fontWeight: 700,
+      letterSpacing: "-0.03em",
+      lineHeight: 1.2,
+    },
+    h2: {
+      fontSize: "22px",
+      fontWeight: 700,
+      letterSpacing: "-0.02em",
+      lineHeight: 1.25,
+    },
+    "title-lg": {
+      fontSize: "15px",
+      fontWeight: 600,
+      lineHeight: 1.4,
+    },
+    "title-md": {
+      fontSize: "13px",
+      fontWeight: 600,
+      lineHeight: 1.4,
+    },
+    "body-lg": {
+      fontSize: "13.5px",
+      fontWeight: 400,
+      lineHeight: 1.5,
+    },
+    "body-md": {
+      fontSize: "13.5px",
+      fontWeight: 400,
+      lineHeight: 1.5,
+    },
+    "body-sm": {
+      fontSize: "11.5px",
+      fontWeight: 600,
+      lineHeight: 1.4,
+    },
+  },
+  components: {
+    JoyInput: {
+      styleOverrides: {
+        input: ({ theme }) => ({
+          color: theme.vars.palette.text.primary,
+          "&::placeholder": {
+            color: theme.vars.palette.text.tertiary,
+            opacity: 1,
+          },
+        }),
+      },
+    },
+    JoySelect: {
+      styleOverrides: {
+        button: ({ theme }) => ({
+          color: theme.vars.palette.text.primary,
+        }),
+        listbox: ({ theme }) => ({
+          color: theme.vars.palette.text.primary,
+          backgroundColor: theme.vars.palette.background.surface,
+        }),
+      },
+    },
+    JoySheet: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          backgroundColor: theme.vars.palette.background.surface,
+          borderColor: theme.vars.palette.divider,
+        }),
+      },
+    },
+    JoyOption: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          color: theme.vars.palette.text.primary,
+          backgroundColor: theme.vars.palette.background.surface,
+          "&:hover": {
+            backgroundColor: theme.vars.palette.background.level1,
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: theme.vars.palette.background.level2,
+          },
+        }),
+      },
+    },
+    JoyButton: {
+      styleOverrides: {
+        root: {
+          transition: "all 0.15s ease",
+        },
+      },
+    },
+  },
+});

frontend/src/utils/api/auth.ts

@@ -1,85 +1,98 @@
-import {API_BASE} from "../../config/api.config";
+import { API_BASE } from "../../config/api.config";
 import Cookies from "js-cookie";
-import type {TFunction} from "i18next";
-import {fetchSettings} from "./settings";
-import type {ChangePasswordIntf} from "../../misc/interfaces";
-import {createApiError} from "./apiError";
+import type { TFunction } from "i18next";
+import { fetchSettings } from "./settings";
+import type { ChangePasswordIntf } from "../../misc/interfaces";
+import { createApiError } from "./apiError";
+import { redirect } from "@tanstack/react-router";
 
-export async function isAuthenticated() {
-    if (Cookies.get("token")) {
-        const result = await fetch(`${API_BASE}/users/verify-token`, {
-            method: "POST",
-            headers: {
-                Authorization: `Bearer ${Cookies.get("token") || ""}`,
-                "Content-Type": "application/json",
-                Accept: "application/json",
-            },
-        });
-
-        if (result.status === 200) {
-            return true;
-        }
-    }
-
-    Cookies.remove("token");
-    return false;
-}
-
-export async function signInUser(
-    username: string,
-    password: string,
-    t: TFunction,
-) {
-    const result = await fetch(`${API_BASE}/users/login`, {
-        method: "POST",
-        headers: {
-            Authorization: `Bearer ${Cookies.get("token") || ""}`,
-            "Content-Type": "application/json",
-            Accept: "application/json",
-        },
-        body: JSON.stringify({username, password}),
+export const isAuthenticated = async () => {
+  if (Cookies.get("token")) {
+    const result = await fetch(`${API_BASE}/users/verify-token`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
     });
 
-    const response = await result.json();
-
-    if (result.status === 202) {
-        Cookies.set("token", response.data.token);
-
-        const settings = await fetchSettings();
-        Cookies.set("app-name", settings?.data[0].value);
-        Cookies.set("currency", settings?.data[1].value);
-
-        return {ok: true as const};
+    if (result.status === 200) {
+      return true;
     }
+  }
 
-    Cookies.remove("token");
-    throw createApiError(response.code, t(response.code || "unknown-error"));
-}
+  Cookies.remove("token");
+  return false;
+};
 
-export function signOutUser() {
-    Cookies.remove("token");
-    return {ok: true as const};
-}
+export const signInUser = async (
+  username: string,
+  password: string,
+  t: TFunction,
+) => {
+  const result = await fetch(`${API_BASE}/users/login`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+    body: JSON.stringify({ username, password }),
+  });
+
+  const response = await result.json();
+
+  if (result.status === 202) {
+    Cookies.set("token", response.data.token);
+
+    const settings = await fetchSettings();
+    Cookies.set("app-name", settings?.data[0].value);
+    Cookies.set("currency", settings?.data[1].value);
+
+    return { ok: true as const };
+  }
+
+  Cookies.remove("token");
+  throw createApiError(response.code, t(response.code || "unknown-error"));
+};
 
 export const mutatePassword = async (payload: ChangePasswordIntf) => {
-    const result = await fetch(`${API_BASE}/users/change-password`, {
-        method: "POST",
-        headers: {
-            Authorization: `Bearer ${Cookies.get("token") || ""}`,
-            "Content-Type": "application/json",
-            Accept: "application/json",
-        },
-        body: JSON.stringify({
-            currentPassword: payload.currentPassword,
-            newPassword: payload.newPassword,
-        }),
-    });
+  const result = await fetch(`${API_BASE}/users/change-password`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+    body: JSON.stringify({
+      currentPassword: payload.currentPassword,
+      newPassword: payload.newPassword,
+    }),
+  });
 
-    const response = await result.json();
+  const response = await result.json();
 
-    if (response.code === "SU005") {
-        return {code: response.code};
-    }
+  if (response.code === "SU005") {
+    return { code: response.code };
+  }
 
-    throw createApiError(response.code, "Change password failed");
+  throw createApiError(response.code, "Change password failed");
+};
+
+export const verifyLogin = async () => {
+  if (!(await isAuthenticated())) {
+    throw redirect({
+      to: "/login",
+      search: { loggedOut: true },
+    });
+  }
+};
+
+export const checkLogin = async () => {
+  if (await isAuthenticated()) {
+    throw redirect({
+      to: "/app/inventory",
+    });
+  }
 };

frontend/src/utils/i18n/locales/de/de.json

@@ -57,6 +57,9 @@
   "error": "Fehler",
   "success": "Erfolg",
   "submit": "Absenden",
+  "logout-success-text": "Logout erfolgreich!",
+  "not-found-header": "404 - Nicht gefunden",
+  "not-found-body": "Die Seite nach der du gesucht hast, gibt es nicht.",
   "SU005": "Das Passwort wurde erfolgreich geändert!",
   "SE001": "Die Einstellungen wurden erfolgreich geändert!",
   "EG001": "Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.",
@@ -83,5 +86,50 @@
   "EP005": "Das Produkt konnte nicht aktualisiert werden. Bitte versuchen Sie es erneut.",
   "EP006": "Das Produkt konnte nicht gelöscht werden. Bitte versuchen Sie es erneut.",
   "EP007": "Bitte geben Sie mindestens einen Produktnamen ein.",
-  "EP008": "Einige erforderliche Produktinformationen fehlen. Bitte überprüfen Sie Ihre Eingabe."
+  "EP008": "Einige erforderliche Produktinformationen fehlen. Bitte überprüfen Sie Ihre Eingabe.",
+  "stat-expired": "Abgelaufen",
+  "stat-expiring-soon": "Läuft in 90 Tagen ab",
+  "stat-low-stock": "Niedriger Bestand",
+  "stat-units-stored": "Gelagerte Einheiten",
+  "days-since-expired": "Vor {{count}} Tagen abgelaufen",
+  "days-until-expiry": "in {{count}} Tagen",
+  "expires-in-days-badge": "Läuft in {{count}} Tagen ab",
+  "general": "Allgemein",
+  "appearance-language": "Darstellung & Sprache",
+  "theme": "Design",
+  "theme-light": "Hell",
+  "theme-dark": "Dunkel",
+  "theme-system": "System",
+  "language": "Sprache",
+  "account": "Konto",
+  "sign-out": "Abmelden",
+  "sign-out-sub": "Beendet diese Sitzung auf diesem Gerät.",
+  "login-tagline-1": "Alles, was du verstaut hast, im Januar noch auffindbar.",
+  "login-tagline-2": "Gefrierfach, Vorrat, Keller. Eine Liste, ein Ablaufdatum pro Glas.",
+  "storages-sub": "{{count}} Orte, {{items}} Artikel gelagert.",
+  "new-storage": "Neuer Lagerort",
+  "product": "Produkt",
+  "product-name-placeholder": "z. B. Tomatensauce",
+  "description-placeholder": "Kurze Notiz zu dieser Charge",
+  "choose-storage": "Lagerort wählen",
+  "amount-price-optional-hint": "Menge und Preis sind optional. Der Lagerort bestimmt, wo der Artikel im Inventar erscheint.",
+  "all-fields-editable-later": "Alle Felder können später bearbeitet werden",
+  "save-product": "Produkt speichern",
+  "jar-label": "Glas-Etikett",
+  "jar-label-hint": "Ausdrucken und auf den Deckel kleben. Scannen öffnet die Schnellansicht.",
+  "scanned-badge": "Gescannt",
+  "opened-from-jar-label": "Über das Glas-Etikett geöffnet",
+  "amount-in-storage": "Menge im Lager",
+  "set-to-zero-hint": "Auf 0 setzen, um den Eintrag zu behalten, aber das Fach zu leeren.",
+  "open-full-details": "Vollständige Produktdetails öffnen",
+  "inventory-summary": "{{count}} Artikel in {{storages}} Lagerorten",
+  "search-products": "Produkte durchsuchen",
+  "filter-all": "Alle",
+  "filter-expired": "Abgelaufen",
+  "filter-soon": "Bald",
+  "filter-low": "Niedrig",
+  "products": "Produkte",
+  "units": "Einheiten",
+  "cancel": "Abbrechen",
+  "delete-confirmation-text": "Bist du dir sicher das du diesen Storage löschen willst: "
 }

frontend/src/utils/i18n/locales/en/en.json

@@ -57,6 +57,9 @@
   "error": "Error",
   "success": "Success",
   "submit": "Submit",
+  "logout-success-text": "Logout successful!",
+  "not-found-header": "404 - Not found",
+  "not-found-body": "The page you were looking for, does not exist.",
   "SU005": "Your password is updated successfully!",
   "SE001": "The settings are updated successfully!",
   "EG001": "An unexpected error occurred. Please try again later.",
@@ -83,5 +86,50 @@
   "EP005": "The product could not be updated. Please try again.",
   "EP006": "The product could not be deleted. Please try again.",
   "EP007": "Please enter at least a product name.",
-  "EP008": "Some required product information is missing. Please check your input."
+  "EP008": "Some required product information is missing. Please check your input.",
+  "stat-expired": "Expired",
+  "stat-expiring-soon": "Expiring in 90 days",
+  "stat-low-stock": "Low stock",
+  "stat-units-stored": "Units stored",
+  "days-since-expired": "Expired {{count}} days ago",
+  "days-until-expiry": "in {{count}} days",
+  "expires-in-days-badge": "Expires in {{count}} days",
+  "general": "General",
+  "appearance-language": "Appearance & language",
+  "theme": "Theme",
+  "theme-light": "Light",
+  "theme-dark": "Dark",
+  "theme-system": "System",
+  "language": "Language",
+  "account": "Account",
+  "sign-out": "Sign out",
+  "sign-out-sub": "Ends this session on this device.",
+  "login-tagline-1": "Everything you put away, still findable in January.",
+  "login-tagline-2": "Freezer, pantry, cellar. One list, one expiry date per jar.",
+  "storages-sub": "{{count}} places, {{items}} items stored.",
+  "new-storage": "New storage",
+  "product": "Product",
+  "product-name-placeholder": "e.g. Tomato Sauce",
+  "description-placeholder": "Short note about this batch",
+  "choose-storage": "Choose a storage",
+  "amount-price-optional-hint": "Amount and price are optional. Storage place decides where the item shows up in the inventory list.",
+  "all-fields-editable-later": "All fields can be edited later",
+  "save-product": "Save product",
+  "jar-label": "Jar label",
+  "jar-label-hint": "Print and stick it on the lid. Scanning opens fast details.",
+  "scanned-badge": "Scanned",
+  "opened-from-jar-label": "Opened from the jar label",
+  "amount-in-storage": "Amount in storage",
+  "set-to-zero-hint": "Set to 0 to keep the record but empty the shelf.",
+  "open-full-details": "Open full product details",
+  "inventory-summary": "{{count}} items across {{storages}} storages",
+  "search-products": "Search products",
+  "filter-all": "All",
+  "filter-expired": "Expired",
+  "filter-soon": "Soon",
+  "filter-low": "Low",
+  "products": "products",
+  "units": "units",
+  "cancel": "Cancel",
+  "delete-confirmation-text": "Are you sure you want to delete this storage: "
 }

frontend/src/utils/productStatus.ts

@@ -0,0 +1,53 @@
+const EXPIRING_SOON_DAYS = 90;
+const LOW_STOCK_MAX = 2;
+
+const daysUntil = (value?: string | null) => {
+  if (!value) {
+    return null;
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return null;
+  }
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  date.setHours(0, 0, 0, 0);
+  return Math.round((date.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+};
+
+export const isExpired = (expiryDate?: string | null) => {
+  const days = daysUntil(expiryDate);
+  return days !== null && days < 0;
+};
+
+export const isExpiringSoon = (expiryDate?: string | null) => {
+  const days = daysUntil(expiryDate);
+  return days !== null && days >= 0 && days <= EXPIRING_SOON_DAYS;
+};
+
+export const isLowStock = (amount: number) => amount > 0 && amount <= LOW_STOCK_MAX;
+
+export type ProductStatus = "expired" | "expiring-soon" | "ok";
+
+export const getProductStatus = (expiryDate?: string | null): ProductStatus => {
+  if (isExpired(expiryDate)) {
+    return "expired";
+  }
+  if (isExpiringSoon(expiryDate)) {
+    return "expiring-soon";
+  }
+  return "ok";
+};
+
+// Days remaining until expiry (negative = days since it expired), plus the
+// derived status. Components format this into copy via i18next (t()) so the
+// wording stays translatable.
+export const getExpiryDays = (
+  expiryDate?: string | null,
+): { days: number; status: ProductStatus } | null => {
+  const days = daysUntil(expiryDate);
+  if (days === null) {
+    return null;
+  }
+  return { days, status: getProductStatus(expiryDate) };
+};

frontend/vite.config.ts

@@ -2,14 +2,14 @@ import { defineConfig } from "vite";
 import react, { reactCompilerPreset } from "@vitejs/plugin-react";
 import babel from "@rolldown/plugin-babel";
 import tailwindcss from "@tailwindcss/vite";
-import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
+import { tanstackRouter } from "@tanstack/router-vite-plugin";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     react(),
     tailwindcss(),
-    TanStackRouterVite(),
+    tanstackRouter(),
     babel({ presets: [reactCompilerPreset()] }),
   ],
 });

package-lock.json

@@ -17,7 +17,9 @@
         "@eslint/js": "^10.0.1",
         "@types/cors": "^2.8.19",
         "@types/express": "^5.0.6",
-        "concurrently": "^10.0.3"
+        "concurrently": "^10.0.3",
+        "globals": "^17.7.0",
+        "prettier": "^3.9.6"
       }
     },
     "backend": {
@@ -44,8 +46,8 @@
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@fontsource/inter": "^5.2.8",
-        "@mui/icons-material": "^9.0.1",
+        "@fontsource/ibm-plex-mono": "^5.3.0",
+        "@fontsource/ibm-plex-sans": "^5.3.0",
         "@mui/joy": "^5.0.0-beta.52",
         "@tailwindcss/vite": "^4.3.0",
         "@tanstack/react-form": "^1.32.0",
@@ -58,7 +60,6 @@
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-i18next": "^17.0.8",
-        "react-toastify": "^11.1.0",
         "tailwindcss": "^4.3.0",
         "validator": "^13.15.35",
         "zod": "^4.4.3"
@@ -1103,10 +1104,19 @@
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
-    "node_modules/@fontsource/inter": {
-      "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz",
-      "integrity": "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==",
+    "node_modules/@fontsource/ibm-plex-mono": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-mono/-/ibm-plex-mono-5.3.0.tgz",
+      "integrity": "sha512-eTgnZjZEGk1QtD3ZstF+Vclo2HLAni8YMy34/DxllwZvyz1lR/1RF/xTiAquOBO7MvqBx8D2Ig2WCPMVfdZu7Q==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/ibm-plex-sans": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-sans/-/ibm-plex-sans-5.3.0.tgz",
+      "integrity": "sha512-CbE4CbbEEZJX860XyUiRpsksXIQR8Rp2XDva2VO53NJox9tVNtusrysd2x5YkUEY3ErQ66W1IiiQL8/wihhw5w==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -1266,32 +1276,6 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
-    "node_modules/@mui/icons-material": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.2.0.tgz",
-      "integrity": "sha512-VgBd3z7Qc3vd/thcNSMC03nHRh/U4DzMUd+1dRyJTbm/hGo7+N6N4GDuJZDNHa6LZhhwG6Cu1X3DNvrVv8sNag==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.2"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@mui/material": "^9.2.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/joy": {
       "version": "5.0.0-beta.52",
       "resolved": "https://registry.npmjs.org/@mui/joy/-/joy-5.0.0-beta.52.tgz",
@@ -1333,220 +1317,6 @@
         }
       }
     },
-    "node_modules/@mui/material": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.2.0.tgz",
-      "integrity": "sha512-+YTRSgGKGrrRo2XJZXs7JRA6qHoHWvNtxyqxnrRJTBmIuLOUpxxh7m4G9lF4tWberxGFY+EqkkRPgJCl+fSMJg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.29.2",
-        "@mui/core-downloads-tracker": "^9.2.0",
-        "@mui/system": "^9.2.0",
-        "@mui/types": "^9.1.1",
-        "@mui/utils": "^9.2.0",
-        "@popperjs/core": "^2.11.8",
-        "@types/react-transition-group": "^4.4.12",
-        "clsx": "^2.1.1",
-        "csstype": "^3.2.3",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.6",
-        "react-transition-group": "^4.4.5"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^9.2.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@mui/material-pigment-css": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/material/node_modules/@mui/core-downloads-tracker": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.2.0.tgz",
-      "integrity": "sha512-+XMav+ZaXkZKUFUgzjrfMEedfyJKxxviAske2q8N8CWDMeqZdDU2lWMkiUPiB388hGaDqhwvOAwkrsc/pUyp8g==",
-      "license": "MIT",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      }
-    },
-    "node_modules/@mui/material/node_modules/@mui/private-theming": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.2.0.tgz",
-      "integrity": "sha512-w9wpyDxGPGnAACPB2hKhCDmILJIAvQxrfjUbIAEa0AznX1rOjaz5N+yB1uuw8ixnJcpEh/tPbD9oEe19wcWPHw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.29.2",
-        "@mui/utils": "^9.2.0",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/material/node_modules/@mui/styled-engine": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.1.1.tgz",
-      "integrity": "sha512-neaYKdJfvEG54q8efHLJR7swpHG/gfSv9xGqW5iTSMsubD7yPCPFrhVBt284j1DOF3uZaaDJSHQL7gz6jGF21Q==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.29.2",
-        "@emotion/cache": "^11.14.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/sheet": "^1.4.0",
-        "csstype": "^3.2.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.4.1",
-        "@emotion/styled": "^11.3.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/material/node_modules/@mui/system": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-9.2.0.tgz",
-      "integrity": "sha512-YvUJwKoGVtbnOm2PyPi5TvX2d1rOA6sqSpEWVs4WmXNIaFTuYmNUaVdU2o1NKUEe31URnD3E8ZVUMcsLQXwcYg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.29.2",
-        "@mui/private-theming": "^9.2.0",
-        "@mui/styled-engine": "^9.1.1",
-        "@mui/types": "^9.1.1",
-        "@mui/utils": "^9.2.0",
-        "clsx": "^2.1.1",
-        "csstype": "^3.2.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/material/node_modules/@mui/types": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.1.1.tgz",
-      "integrity": "sha512-Zjt7u8wNvDg40rPTGoL+TnfkpuSKjwubsNSFRH1KAVZLcaV4I3AFNHIFbvH7p4F3alEibSbdd90xAgn5Rnfndg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.29.2"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/material/node_modules/@mui/utils": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.2.0.tgz",
-      "integrity": "sha512-OsUH5zhlSOM4xmLl53+agug1M1UyWb4zxFxWQCqwKTKUeQPvTENtg3JhrroBD2qpCLKsX5W/DYGERJ4mBUbc8g==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.29.2",
-        "@mui/types": "^9.1.1",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.6"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/private-theming": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.17.1.tgz",
@@ -2830,6 +2600,7 @@
       "version": "19.2.17",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
       "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -2845,16 +2616,6 @@
         "@types/react": "^19.2.0"
       }
     },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.12",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
-      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
-      "license": "MIT",
-      "peer": true,
-      "peerDependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/send": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz",
@@ -3510,16 +3271,16 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz",
-      "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==",
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^4.0.2"
       },
       "engines": {
-        "node": "18 || 20 || >=22"
+        "node": "20 || >=22"
       }
     },
     "node_modules/browserslist": {
@@ -3705,15 +3466,15 @@
       "license": "MIT"
     },
     "node_modules/concurrently": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-10.0.3.tgz",
-      "integrity": "sha512-hc3LH4UaKWd/bbyDK/IGVa4RB6PtQ3CUYwtrkzqHn+wIG3Hr5fhpRlk0L/gCa8ZE1L/Ufj50Zho69cI5w8SQBA==",
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-10.0.5.tgz",
+      "integrity": "sha512-JaP/CoftUrCcAFW/g//RbgEGwlelnEae6cfBLgH6ZdO6s8jPkn6p9SB9u6pdVxYXoiSnFqseOlHfrEfF82TVOg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "chalk": "5.6.2",
         "rxjs": "7.8.2",
-        "shell-quote": "1.8.4",
+        "shell-quote": "1.9.0",
         "supports-color": "10.2.2",
         "tree-kill": "1.2.2",
         "yargs": "18.0.0"
@@ -3921,17 +3682,6 @@
       "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
       "license": "MIT"
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/dotenv": {
       "version": "17.4.2",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
@@ -4451,9 +4201,9 @@
       "license": "MIT"
     },
     "node_modules/filelist/node_modules/brace-expansion": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.2.tgz",
-      "integrity": "sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
+      "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -5590,9 +5340,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.15",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
-      "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==",
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
       "funding": [
         {
           "type": "github",
@@ -5949,9 +5699,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz",
-      "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==",
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -5968,7 +5718,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.12",
+        "nanoid": "^3.3.17",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -5987,9 +5737,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.9.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.4.tgz",
-      "integrity": "sha512-yWG/o/4oJfo036EKAfK6ACAoDOfHeRHx4tuxkfBZiauURiaSmYwlpOr5LQqKtIkRD2z1PLteme2WoxEnj4tHTg==",
+      "version": "3.9.6",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.6.tgz",
+      "integrity": "sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -6331,36 +6081,6 @@
       "integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==",
       "license": "MIT"
     },
-    "node_modules/react-toastify": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.1.0.tgz",
-      "integrity": "sha512-e9h23x3phN0wbFeB6yovmWp7lobzV4CaCH0LO8nVP6H7Y+3GbcLpIzMm9dJhcp1RXbpyfvjgpfXqO80QAmn7sg==",
-      "license": "MIT",
-      "dependencies": {
-        "clsx": "^2.1.1"
-      },
-      "peerDependencies": {
-        "react": "^18 || ^19",
-        "react-dom": "^18 || ^19"
-      }
-    },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "license": "BSD-3-Clause",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
     "node_modules/readdirp": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
@@ -6603,9 +6323,9 @@
       }
     },
     "node_modules/shell-quote": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.4.tgz",
-      "integrity": "sha512-VsC6n6vz1ihYYyZZwX7YZSF5l5x36ca17OC+a69h94YqB7X6XLwf+5MOgynYir2SLFUbl8gIYvBo8K8RoNQ6bQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.9.0.tgz",
+      "integrity": "sha512-Iov+JwFv/2HcTpcwNMKd8+IWNb8tboQJNQTkAY/LLVK7gGH9jy+LGkVqPxfekHl+yMmiqXszdGWXgkfml7hjqA==",
       "dev": true,
       "license": "MIT",
       "engines": {

package.json

@@ -34,6 +34,8 @@
     "@eslint/js": "^10.0.1",
     "@types/cors": "^2.8.19",
     "@types/express": "^5.0.6",
-    "concurrently": "^10.0.3"
+    "concurrently": "^10.0.3",
+    "globals": "^17.7.0",
+    "prettier": "^3.9.6"
   }
 }

shared/tsconfig.json

@@ -1,7 +1,16 @@
 {
   "extends": "./tsconfig.base.json",
-  "include": ["src/**/*.ts"],
   "compilerOptions": {
-    "noEmit": true
-  }
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./dist/refs",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "strict": true,
+    "skipLibCheck": true,
+    "ignoreDeprecations": "6.0"
+  },
+  "include": ["src/**/*.ts"]
 }