.dockerignore

@@ -47,6 +47,9 @@ Dockerfile*
 docker-compose*.yml
 .dockerignore
 
+# Frontend old
+frontend-old/
+
 # Build artifacts
 public/build/
 public/hot

.gitignore

@@ -24,4 +24,3 @@ yarn-error.log
 /.vscode
 /.zed
 /.vite
-/.codewhale

CHANGELOG.md

@@ -1,26 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [0.7.0] - 2026-08-17
-
-### Removed
-
-- **SaaS mode and subscription billing** (#37) — dropped Laravel Cashier, the `Billable` trait, `SubscriptionController`, the `RequireSubscription`/`RequireSaasMode` middleware, the `/subscription` and `/billing` routes, the billing/subscription views, the Cashier migrations, and the `stripe` service config.
-- **Demo mode** (#38) — removed the demo middleware, demo-account seeding and purge commands, and demo-only UI.
-- **`APP_MODE` plumbing** (#39) — removed `AppModeEnum`, the `app/helpers.php` global helper, and the `mode`/`demo_subscribe_url` config keys; the app now runs in a single self-hosted mode.
-- **Dead code** (#40) — deleted `frontend-old/`, `bin/start-dev`, the unused `welcome.blade.php`, and the stale root-level `build_and_push.sh`/`update.sh` scripts.
-
-### Changed
-
-- **License** (#41) — adopted AGPL-3.0 as the single project license (`LICENSE.md`, `composer.json`, `README.md`).
-- **Registry and remote references** — repointed build, push, and update scripts and docs at `forge.lvl0.xyz/lvl0/dishplanner`, removing the stale LAN-registry and old `backend` naming.
-- **Documentation** — updated the production and development instructions.
-
-### Fixed
-
-- Fixed health-check warnings in the development shell.
-- Fixed schedule regeneration iterating every user instead of the planner's own users.

LICENSE.md

@@ -1,5 +1,5 @@
-                    GNU AFFERO GENERAL PUBLIC LICENSE
+                    GNU GENERAL PUBLIC LICENSE
-                       Version 3, 19 November 2007
+                       Version 3, 29 June 2007
 
 Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
 Everyone is permitted to copy and distribute verbatim copies
@@ -7,15 +7,17 @@
 
                             Preamble
 
-  The GNU Affero General Public License is a free, copyleft license for
+The GNU General Public License is a free, copyleft license for
-software and other kinds of works, specifically designed to ensure
+software and other kinds of works.
-cooperation with the community in the case of network server software.
 
 The licenses for most software and other practical works are designed
 to take away your freedom to share and change the works.  By contrast,
-our General Public Licenses are intended to guarantee your freedom to
+the GNU General Public License is intended to guarantee your freedom to
 share and change all versions of a program--to make sure it remains free
-software for all its users.
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
 
 When we speak of free software, we are referring to freedom, not
 price.  Our General Public Licenses are designed to make sure that you
@@ -24,34 +26,44 @@
 want it, that you can change the software or use pieces of it in new
 free programs, and that you know you can do these things.
 
-  Developers that use our General Public Licenses protect your rights
+To protect your rights, we need to prevent others from denying you
-with two steps: (1) assert copyright on the software, and (2) offer
+these rights or asking you to surrender the rights.  Therefore, you have
-you this License which gives you legal permission to copy, distribute
+certain responsibilities if you distribute copies of the software, or if
-and/or modify the software.
+you modify it: responsibilities to respect the freedom of others.
 
-  A secondary benefit of defending all users' freedom is that
+For example, if you distribute copies of such a program, whether
-improvements made in alternate versions of the program, if they
+gratis or for a fee, you must pass on to the recipients the same
-receive widespread use, become available for other developers to
+freedoms that you received.  You must make sure that they, too, receive
-incorporate.  Many developers of free software are heartened and
+or can get the source code.  And you must show them these terms so they
-encouraged by the resulting cooperation.  However, in the case of
+know their rights.
-software used on network servers, this result may fail to come about.
-The GNU General Public License permits making a modified version and
-letting the public access it on a server without ever releasing its
-source code to the public.
 
-  The GNU Affero General Public License is designed specifically to
+Developers that use the GNU GPL protect your rights with two steps:
-ensure that, in such cases, the modified source code becomes available
+(1) assert copyright on the software, and (2) offer you this License
-to the community.  It requires the operator of a network server to
+giving you legal permission to copy, distribute and/or modify it.
-provide the source code of the modified version running there to the
-users of that server.  Therefore, public use of a modified version, on
-a publicly accessible server, gives the public access to the source
-code of the modified version.
 
-  An older license, called the Affero General Public License and
+For the developers' and authors' protection, the GPL clearly explains
-published by Affero, was designed to accomplish similar goals.  This is
+that there is no warranty for this free software.  For both users' and
-a different license, not a version of the Affero GPL, but Affero has
+authors' sake, the GPL requires that modified versions be marked as
-released a new version of the Affero GPL which permits relicensing under
+changed, so that their problems will not be attributed erroneously to
-this license.
+authors of previous versions.
+
+Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
 
 The precise terms and conditions for copying, distribution and
 modification follow.
@@ -60,7 +72,7 @@
 
 0. Definitions.
 
-  "This License" refers to version 3 of the GNU Affero General Public License.
+"This License" refers to version 3 of the GNU General Public License.
 
 "Copyright" also means copyright-like laws that apply to other kinds of
 works, such as semiconductor masks.
@@ -537,45 +549,35 @@
 the Program, the only way you could satisfy both those terms and this
 License would be to refrain entirely from conveying the Program.
 
-  13. Remote Network Interaction; Use with the GNU General Public License.
+13. Use with the GNU Affero General Public License.
-
-  Notwithstanding any other provision of this License, if you modify the
-Program, your modified version must prominently offer all users
-interacting with it remotely through a computer network (if your version
-supports such interaction) an opportunity to receive the Corresponding
-Source of your version by providing access to the Corresponding Source
-from a network server at no charge, through some standard or customary
-means of facilitating copying of software.  This Corresponding Source
-shall include the Corresponding Source for any work covered by version 3
-of the GNU General Public License that is incorporated pursuant to the
-following paragraph.
 
 Notwithstanding any other provision of this License, you have
 permission to link or combine any covered work with a work licensed
-under version 3 of the GNU General Public License into a single
+under version 3 of the GNU Affero General Public License into a single
 combined work, and to convey the resulting work.  The terms of this
 License will continue to apply to the part which is the covered work,
-but the work with which it is combined will remain governed by version
+but the special requirements of the GNU Affero General Public License,
-3 of the GNU General Public License.
+section 13, concerning interaction through a network will apply to the
+combination as such.
 
 14. Revised Versions of this License.
 
 The Free Software Foundation may publish revised and/or new versions of
-the GNU Affero General Public License from time to time.  Such new versions
+the GNU General Public License from time to time.  Such new versions will
-will be similar in spirit to the present version, but may differ in detail to
+be similar in spirit to the present version, but may differ in detail to
 address new problems or concerns.
 
 Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU Affero General
+Program specifies that a certain numbered version of the GNU General
 Public License "or any later version" applies to it, you have the
 option of following the terms and conditions either of that numbered
 version or of any later version published by the Free Software
 Foundation.  If the Program does not specify a version number of the
-GNU Affero General Public License, you may choose any version ever published
+GNU General Public License, you may choose any version ever published
 by the Free Software Foundation.
 
 If the Program specifies that a proxy can decide which future
-versions of the GNU Affero General Public License can be used, that proxy's
+versions of the GNU General Public License can be used, that proxy's
 public statement of acceptance of a version permanently authorizes you
 to choose that version for the Program.
 
@@ -633,29 +635,40 @@
     Copyright (C) <year>  <name of author>
 
     This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published by
+    it under the terms of the GNU General Public License as published by
     the Free Software Foundation, either version 3 of the License, or
     (at your option) any later version.
 
     This program is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
+    GNU General Public License for more details.
 
-    You should have received a copy of the GNU Affero General Public License
+    You should have received a copy of the GNU General Public License
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 Also add information on how to contact you by electronic and paper mail.
 
-  If your software can interact with users remotely through a computer
+If the program does terminal interaction, make it output a short
-network, you should also make sure that it provides a way for users to
+notice like this when it starts in an interactive mode:
-get its source.  For example, if your program is a web application, its
+
-interface could display a "Source" link that leads users to an archive
+    <program>  Copyright (C) <year>  <name of author>
-of the code.  There are many ways you could offer source, and different
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-solutions will be better for different programs; see section 13 for the
+    This is free software, and you are welcome to redistribute it
-specific requirements.
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
 
 You should also get your employer (if you work as a programmer) or school,
 if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU AGPL, see
+For more information on this, and how to apply and follow the GNU GPL, see
 <https://www.gnu.org/licenses/>.
+
+The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

Makefile

@@ -0,0 +1,123 @@
+# Dish Planner - Docker Commands
+
+.PHONY: help
+help: ## Show this help message
+	@echo "Dish Planner - Docker Management"
+	@echo ""
+	@echo "Usage: make [command]"
+	@echo ""
+	@echo "Available commands:"
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "  %-20s %s\n", $$1, $$2}'
+
+# Development Commands
+.PHONY: dev
+dev: ## Start development environment
+	docker compose up -d
+	@echo "Development server running at http://localhost:8000"
+	@echo "Mailhog available at http://localhost:8025"
+
+.PHONY: dev-build
+dev-build: ## Build and start development environment
+	docker compose build
+	docker compose up -d
+
+.PHONY: dev-stop
+dev-stop: ## Stop development environment
+	docker compose down
+
+.PHONY: dev-clean
+dev-clean: ## Stop and remove volumes (CAUTION: removes database)
+	docker compose down -v
+
+.PHONY: logs
+logs: ## Show application logs
+	docker compose logs -f app
+
+.PHONY: logs-db
+logs-db: ## Show database logs
+	docker compose logs -f db
+
+# Production Commands
+.PHONY: prod-build
+prod-build: ## Build production image for Codeberg
+	./bin/build-push.sh
+
+.PHONY: prod-build-tag
+prod-build-tag: ## Build with specific tag (usage: make prod-build-tag TAG=v1.0.0)
+	./bin/build-push.sh $(TAG)
+
+.PHONY: prod-login
+prod-login: ## Login to Codeberg registry
+	podman login codeberg.org
+
+# Laravel Commands
+.PHONY: artisan
+artisan: ## Run artisan command (usage: make artisan cmd="migrate")
+	docker compose exec app php artisan $(cmd)
+
+.PHONY: composer
+composer: ## Run composer command (usage: make composer cmd="require package")
+	docker compose exec app composer $(cmd)
+
+.PHONY: npm
+npm: ## Run npm command (usage: make npm cmd="install package")
+	docker compose exec app npm $(cmd)
+
+.PHONY: migrate
+migrate: ## Run database migrations
+	docker compose exec app php artisan migrate
+
+.PHONY: seed
+seed: ## Seed the database
+	docker compose exec app php artisan db:seed
+
+.PHONY: fresh
+fresh: ## Fresh migrate and seed
+	docker compose exec app php artisan migrate:fresh --seed
+
+.PHONY: tinker
+tinker: ## Start Laravel tinker
+	docker compose exec app php artisan tinker
+
+.PHONY: test
+test: ## Run tests
+	docker compose exec app php artisan test
+
+# Utility Commands
+.PHONY: shell
+shell: ## Enter app container shell
+	docker compose exec app sh
+
+.PHONY: db-shell
+db-shell: ## Enter database shell
+	docker compose exec db mariadb -u dishplanner -pdishplanner dishplanner
+
+.PHONY: clear
+clear: ## Clear all Laravel caches
+	docker compose exec app php artisan cache:clear
+	docker compose exec app php artisan config:clear
+	docker compose exec app php artisan route:clear
+	docker compose exec app php artisan view:clear
+
+.PHONY: optimize
+optimize: ## Optimize Laravel for production
+	docker compose exec app php artisan config:cache
+	docker compose exec app php artisan route:cache
+	docker compose exec app php artisan view:cache
+	docker compose exec app php artisan livewire:discover
+
+# Installation
+.PHONY: install
+install: ## First time setup
+	@echo "Setting up Dish Planner..."
+	@cp -n .env.example .env || true
+	@echo "Generating application key..."
+	@docker compose build
+	@docker compose up -d
+	@sleep 5
+	@docker compose exec app php artisan key:generate
+	@docker compose exec app php artisan migrate
+	@echo ""
+	@echo "✅ Installation complete!"
+	@echo "Access the app at: http://localhost:8000"
+	@echo "Create your first planner and user to get started."

README.md

@@ -11,118 +11,285 @@ ## ✨ Features
 - **Dark theme UI** - Modern interface with purple/pink accents
 - **Single container deployment** - Simplified hosting with FrankenPHP
 
-## 🚀 Self-hosting
+## 🚀 Quick Start
 
-The production image is available at `forge.lvl0.xyz/lvl0/dishplanner:latest`.
+### Prerequisites
+- Docker and Docker Compose
+- Make (optional, for convenience commands)
 
-### docker-compose.yml
+### First Time Setup
 
-```yaml
+```bash
-services:
+# Clone the repository
-  app:
+git clone https://github.com/yourusername/dish-planner.git
-    image: forge.lvl0.xyz/lvl0/dishplanner:latest
+cd dish-planner
-    container_name: dishplanner_app
-    restart: always
-    ports:
-      - "8000:8000"
-    environment:
-      APP_KEY: "${APP_KEY}"
-      APP_URL: "${APP_URL}"
-      DB_DATABASE: "${DB_DATABASE}"
-      DB_USERNAME: "${DB_USERNAME}"
-      DB_PASSWORD: "${DB_PASSWORD}"
-      MAIL_HOST: "${MAIL_HOST:-}"
-      MAIL_PORT: "${MAIL_PORT:-587}"
-      MAIL_USERNAME: "${MAIL_USERNAME:-}"
-      MAIL_PASSWORD: "${MAIL_PASSWORD:-}"
-      MAIL_FROM_ADDRESS: "${MAIL_FROM_ADDRESS:-noreply@example.com}"
-    volumes:
-      - app_storage:/app/storage
-    depends_on:
-      - db
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:8000/up"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
-      start_period: 40s
 
-  db:
+# Quick install with Make
-    image: mariadb:11
+make install
-    container_name: dishplanner_db
-    restart: always
-    environment:
-      MYSQL_DATABASE: "${DB_DATABASE}"
-      MYSQL_USER: "${DB_USERNAME}"
-      MYSQL_PASSWORD: "${DB_PASSWORD}"
-      MYSQL_ROOT_PASSWORD: "${DB_ROOT_PASSWORD}"
-    volumes:
-      - db_data:/var/lib/mysql
 
-volumes:
+# Or manually:
-  db_data:
+cp .env.example .env
-  app_storage:
+docker compose build
+docker compose up -d
+docker compose exec app php artisan key:generate
+docker compose exec app php artisan migrate
 ```
 
-### Environment Variables
+The application will be available at **http://localhost:8000**
-
-| Variable | Required | Description |
-|----------|----------|-------------|
-| `APP_KEY` | Yes | Encryption key. Generate with: `echo "base64:$(openssl rand -base64 32)"` |
-| `APP_URL` | Yes | Your domain (e.g., `https://meals.example.com`) |
-| `DB_DATABASE` | Yes | Database name |
-| `DB_USERNAME` | Yes | Database user |
-| `DB_PASSWORD` | Yes | Database password |
-| `DB_ROOT_PASSWORD` | Yes | MariaDB root password |
-| `MAIL_HOST` | No | SMTP host for email notifications |
-| `MAIL_PORT` | No | SMTP port (default: 587) |
-| `MAIL_USERNAME` | No | SMTP username |
-| `MAIL_PASSWORD` | No | SMTP password |
-| `MAIL_FROM_ADDRESS` | No | From address for emails |
 
 ## 🔧 Development
 
-### NixOS / Nix
+### Starting the Development Environment
 
 ```bash
-git clone https://forge.lvl0.xyz/lvl0/dishplanner.git
+# Start all services
-cd dishplanner
+make dev
-nix-shell
+
+# Or with Docker Compose directly
+docker compose up -d
 ```
 
-The shell will display available commands and optionally start the containers for you.
+**Available services:**
+- **App**: http://localhost:8000 (Laravel + FrankenPHP)
+- **Vite**: http://localhost:5173 (Asset hot-reload)
+- **Mailhog**: http://localhost:8025 (Email testing)
+- **Database**: localhost:3306 (MariaDB)
 
-#### Available Commands
+### Common Development Commands
 
-| Command | Description |
+```bash
-|---------|-------------|
+# View logs
-| `dev-up` | Start development environment |
+make logs                    # App logs
-| `dev-down` | Stop development environment |
+make logs-db                 # Database logs
-| `dev-restart` | Restart containers |
-| `dev-rebuild` | Full rebuild (removes volumes) |
-| `dev-rebuild-quick` | Quick rebuild (keeps volumes) |
-| `dev-logs [service]` | Follow logs |
-| `dev-shell` | Enter app container |
-| `dev-artisan <cmd>` | Run artisan commands |
-| `dev-fix-permissions` | Fix Docker-created file permissions |
 
-#### Services
+# Laravel commands
+make artisan cmd="migrate"  # Run artisan commands
+make tinker                  # Start Laravel tinker
+make test                    # Run tests
 
-| Service | URL |
+# Database
-|---------|-----|
+make migrate                 # Run migrations
-| App | http://localhost:8000 |
+make seed                    # Seed database
-| Vite | http://localhost:5173 |
+make fresh                   # Fresh migrate with seeds
-| Mailhog | http://localhost:8025 |
-| MariaDB | localhost:3306 |
 
-### Other Platforms
+# Testing
+make test                    # Run tests
+composer test:coverage-html  # Run tests with coverage report (generates coverage/index.html)
 
-Contributions welcome for development setup instructions on other platforms.
+# Utilities
+make shell                   # Enter app container
+make db-shell               # Enter database shell
+make clear                  # Clear all caches
+```
+
+### Project Structure
+
+```
+dish-planner/
+├── app/
+│   ├── Livewire/          # Livewire components
+│   │   ├── Auth/          # Authentication
+│   │   ├── Dishes/        # Dish management
+│   │   ├── Schedule/      # Schedule calendar
+│   │   └── Users/         # User management
+│   └── Models/            # Eloquent models
+├── resources/
+│   └── views/
+│       └── livewire/      # Livewire component views
+├── docker-compose.yml     # Development environment
+├── docker-compose.prod.yml # Production environment
+├── Dockerfile             # Production image
+├── Dockerfile.dev         # Development image
+└── Makefile              # Convenience commands
+```
+
+## 🚢 Production Deployment
+
+### Building for Production
+
+```bash
+# Build production image
+make prod-build
+
+# Start production environment
+make prod
+
+# Or with Docker Compose
+docker compose -f docker-compose.prod.yml build
+docker compose -f docker-compose.prod.yml up -d
+```
+
+### Production Environment Variables
+
+Required environment variables for production:
+
+```env
+# Required - Generate APP_KEY (see instructions below)
+APP_KEY=base64:your-generated-key-here
+APP_URL=https://your-domain.com
+
+# Database Configuration
+DB_DATABASE=dishplanner
+DB_USERNAME=dishplanner
+DB_PASSWORD=strong-password-here
+DB_ROOT_PASSWORD=strong-root-password
+
+# Optional Email Configuration
+MAIL_HOST=your-smtp-host
+MAIL_PORT=587
+MAIL_USERNAME=your-username
+MAIL_PASSWORD=your-password
+MAIL_FROM_ADDRESS=noreply@your-domain.com
+```
+
+#### Generating APP_KEY
+
+The APP_KEY is critical for encryption and must be kept consistent across deployments. Generate one using any of these methods:
+
+**Option 1: Using OpenSSL (Linux/Mac/Windows with Git Bash)**
+```bash
+echo "base64:$(openssl rand -base64 32)"
+```
+
+**Option 2: Using Node.js (Cross-platform)**
+```bash
+node -e "console.log('base64:' + require('crypto').randomBytes(32).toString('base64'))"
+```
+
+**Option 3: Using Python (Cross-platform)**
+```bash
+python -c "import base64, os; print('base64:' + base64.b64encode(os.urandom(32)).decode())"
+```
+
+**Option 4: Online Generator**
+Generate a random 32-character string at https://randomkeygen.com/ and prepend with `base64:`
+
+⚠️ **Important**: Save this key securely! If lost, you won't be able to decrypt existing data.
+
+### Deployment with DockGE
+
+The production setup is optimized for DockGE deployment with just 2 containers:
+
+1. **app** - Laravel application with FrankenPHP
+2. **db** - MariaDB database
+
+Simply import the `docker-compose.prod.yml` into DockGE and configure your environment variables.
+
+## 🛠️ Technology Stack
+
+- **Backend**: Laravel 12 with Livewire 3
+- **Web Server**: FrankenPHP (PHP 8.3 + Caddy)
+- **Database**: MariaDB 11
+- **Frontend**: Blade + Livewire + Alpine.js
+- **Styling**: TailwindCSS with custom dark theme
+- **Assets**: Vite for bundling
+
+## 📦 Docker Architecture
+
+### Development (`docker-compose.yml`)
+- **Hot reload** - Volume mounts for live code editing
+- **Debug tools** - Xdebug configured for debugging
+- **Email testing** - Mailhog for capturing emails
+- **Asset watching** - Vite dev server for instant updates
+
+### Production (`docker-compose.prod.yml`)
+- **Optimized** - Multi-stage builds with caching
+- **Secure** - No debug tools, proper permissions
+- **Health checks** - Automatic container monitoring
+- **Single container** - FrankenPHP serves everything
+
+## 🔨 Make Commands Reference
+
+```bash
+# Development
+make dev            # Start development environment
+make dev-build      # Build and start development
+make dev-stop       # Stop development environment
+make dev-clean      # Stop and remove volumes (CAUTION)
+
+# Production
+make prod           # Start production environment
+make prod-build     # Build production image
+make prod-stop      # Stop production environment
+make prod-logs      # Show production logs
+
+# Laravel
+make artisan cmd="..." # Run artisan command
+make composer cmd="..." # Run composer command
+make npm cmd="..."     # Run npm command
+make migrate        # Run migrations
+make seed           # Seed database
+make fresh          # Fresh migrate and seed
+make tinker         # Start tinker session
+make test           # Run tests
+
+# Utilities
+make shell          # Enter app container
+make db-shell       # Enter database shell
+make logs           # Show app logs
+make logs-db        # Show database logs
+make clear          # Clear all caches
+make optimize       # Optimize for production
+```
+
+## 🐛 Troubleshooting
+
+### Container won't start
+```bash
+# Check logs
+docker compose logs app
+
+# Rebuild containers
+docker compose build --no-cache
+docker compose up -d
+```
+
+### Database connection issues
+```bash
+# Verify database is running
+docker compose ps
+
+# Check database logs
+docker compose logs db
+
+# Try manual connection
+make db-shell
+```
+
+### Permission issues
+```bash
+# Fix storage permissions
+docker compose exec app chmod -R 777 storage bootstrap/cache
+```
+
+### Clear all caches
+```bash
+make clear
+# Or manually
+docker compose exec app php artisan cache:clear
+docker compose exec app php artisan config:clear
+docker compose exec app php artisan route:clear
+docker compose exec app php artisan view:clear
+```
 
 ## 📄 License
 
-This project is open-source software licensed under the [AGPL-3.0 license](LICENSE.md).
+This project is open-source software licensed under the [MIT license](LICENSE.md).
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
 
 ## 📞 Support
 
-For issues and questions, please use [Forgejo Issues](https://forge.lvl0.xyz/lvl0/dishplanner/issues).
+For issues and questions, please use the [GitHub Issues](https://github.com/yourusername/dish-planner/issues) page.
+
+---
+
+Built with ❤️ using Laravel and Livewire

app/Enums/AppModeEnum.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Enums;
+
+enum AppModeEnum: string
+{
+    case APP = 'app';
+    case SAAS = 'saas';
+
+    public static function current(): self
+    {
+        return self::from(config('app.mode', 'app'));
+    }
+
+    public function isApp(): bool
+    {
+        return $this === self::APP;
+    }
+
+    public function isSaas(): bool
+    {
+        return $this === self::SAAS;
+    }
+}

app/Http/Controllers/SubscriptionController.php

@@ -0,0 +1,112 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Laravel\Cashier\Cashier;
+use Symfony\Component\HttpFoundation\Response;
+
+class SubscriptionController extends Controller
+{
+    public function checkout(Request $request)
+    {
+        $planner = $request->user();
+
+        if ($planner->subscribed()) {
+            return redirect()->route('dashboard');
+        }
+
+        $plan = $request->input('plan', 'monthly');
+        $priceId = $plan === 'yearly'
+            ? config('services.stripe.price_yearly')
+            : config('services.stripe.price_monthly');
+
+        return $planner->newSubscription('default', $priceId)
+            ->checkout([
+                'success_url' => route('subscription.success') . '?session_id={CHECKOUT_SESSION_ID}',
+                'cancel_url' => route('subscription.index'),
+            ]);
+    }
+
+    public function success(Request $request): RedirectResponse
+    {
+        $sessionId = $request->query('session_id');
+
+        if ($sessionId) {
+            $planner = $request->user();
+            $session = Cashier::stripe()->checkout->sessions->retrieve($sessionId, [
+                'expand' => ['subscription'],
+            ]);
+
+            if ($session->subscription && ! $planner->subscribed()) {
+                $subscription = $session->subscription;
+
+                $planner->subscriptions()->create([
+                    'type' => 'default',
+                    'stripe_id' => $subscription->id,
+                    'stripe_status' => $subscription->status,
+                    'stripe_price' => $subscription->items->data[0]->price->id ?? null,
+                    'quantity' => $subscription->items->data[0]->quantity ?? 1,
+                    'trial_ends_at' => $subscription->trial_end ? now()->setTimestamp($subscription->trial_end) : null,
+                    'ends_at' => null,
+                ]);
+            }
+        }
+
+        return redirect()->route('dashboard')->with('success', 'Subscription activated!');
+    }
+
+    public function billing(Request $request)
+    {
+        $planner = $request->user();
+        $subscription = $planner->subscription();
+
+        if (! $subscription) {
+            return redirect()->route('subscription.index');
+        }
+
+        $planType = match ($subscription->stripe_price) {
+            config('services.stripe.price_yearly') => 'Yearly',
+            config('services.stripe.price_monthly') => 'Monthly',
+            default => 'Unknown',
+        };
+
+        $nextBillingDate = null;
+        if ($subscription->stripe_status === 'active') {
+            try {
+                $stripeSubscription = Cashier::stripe()->subscriptions->retrieve($subscription->stripe_id);
+                $nextBillingDate = $stripeSubscription->current_period_end
+                    ? now()->setTimestamp($stripeSubscription->current_period_end)
+                    : null;
+            } catch (\Exception $e) {
+                // Stripe API error - continue without next billing date
+            }
+        }
+
+        return view('billing.index', [
+            'subscription' => $subscription,
+            'planner' => $planner,
+            'planType' => $planType,
+            'nextBillingDate' => $nextBillingDate,
+        ]);
+    }
+
+    public function cancel(Request $request): RedirectResponse
+    {
+        $planner = $request->user();
+
+        if (! $planner->subscribed()) {
+            return back()->with('error', 'No active subscription found.');
+        }
+
+        $planner->subscription()->cancel();
+
+        return back()->with('success', 'Subscription canceled. Access will continue until the end of your billing period.');
+    }
+
+    public function billingPortal(Request $request)
+    {
+        return $request->user()->redirectToBillingPortal(route('billing'));
+    }
+}

app/Http/Middleware/RequireSaasMode.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Symfony\Component\HttpFoundation\Response;
+
+class RequireSaasMode
+{
+    public function handle(Request $request, Closure $next): Response
+    {
+        if (! is_mode_saas()) {
+            abort(404);
+        }
+
+        return $next($request);
+    }
+}

app/Http/Middleware/RequireSubscription.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Symfony\Component\HttpFoundation\Response;
+
+class RequireSubscription
+{
+    public function handle(Request $request, Closure $next): Response
+    {
+        if (is_mode_app()) {
+            return $next($request);
+        }
+
+        $planner = $request->user();
+
+        if (! $planner?->subscribed()) {
+            return redirect()->route('subscription.index');
+        }
+
+        return $next($request);
+    }
+}

app/Models/Planner.php

@@ -2,23 +2,21 @@
 
 namespace App\Models;
 
-use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
+use Laravel\Cashier\Billable;
 use Laravel\Sanctum\HasApiTokens;
 
 /**
  * @property int $id
  * @property static PlannerFactory factory($count = null, $state = [])
- * @property Collection<User> $users
  * @method static first()
- * @method static create(array $array)
  */
 class Planner extends Authenticatable
 {
-    use HasApiTokens, HasFactory, Notifiable;
+    use Billable, HasApiTokens, HasFactory, Notifiable;
 
     protected $fillable = [
         'name', 'email', 'password',
@@ -36,9 +34,4 @@ public function schedules(): HasMany
     {
         return $this->hasMany(Schedule::class);
     }
-
-    public function users(): HasMany
-    {
-        return $this->hasMany(User::class);
-    }
 }

app/Providers/AppServiceProvider.php

@@ -4,10 +4,12 @@
 
 use App\Exceptions\CustomException;
 use App\Models\Dish;
+use App\Models\Planner;
 use App\Models\Schedule;
 use App\Models\ScheduledUserDish;
 use App\Models\User;
 use App\Models\UserDish;
+use Laravel\Cashier\Cashier;
 use DishPlanner\Dish\Policies\DishPolicy;
 use DishPlanner\Schedule\Policies\SchedulePolicy;
 use DishPlanner\ScheduledUserDish\Policies\ScheduledUserDishPolicy;
@@ -45,6 +47,8 @@ public function render($request, Throwable $e)
 
     public function boot(): void
     {
+        Cashier::useCustomerModel(Planner::class);
+
         Gate::policy(Dish::class, DishPolicy::class);
         Gate::policy(Schedule::class, SchedulePolicy::class);
         Gate::policy(ScheduledUserDish::class, ScheduledUserDishPolicy::class);

app/helpers.php

@@ -0,0 +1,17 @@
+<?php
+
+use App\Enums\AppModeEnum;
+
+if (! function_exists('is_mode_app')) {
+    function is_mode_app(): bool
+    {
+        return AppModeEnum::current()->isApp();
+    }
+}
+
+if (! function_exists('is_mode_saas')) {
+    function is_mode_saas(): bool
+    {
+        return AppModeEnum::current()->isSaas();
+    }
+}

bin/build-push.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+# Build and push production image to Codeberg
+
+set -e
+
+# Configuration
+REGISTRY="codeberg.org"
+NAMESPACE="lvl0"
+IMAGE_NAME="dish-planner"
+TAG="${1:-latest}"
+
+echo "🔨 Building production image..."
+podman build -f Dockerfile -t ${REGISTRY}/${NAMESPACE}/${IMAGE_NAME}:${TAG} .
+
+echo "📤 Pushing to Codeberg registry..."
+echo "Please ensure you're logged in to Codeberg:"
+echo "  podman login codeberg.org"
+
+podman push ${REGISTRY}/${NAMESPACE}/${IMAGE_NAME}:${TAG}
+
+echo "✅ Done! Image pushed to ${REGISTRY}/${NAMESPACE}/${IMAGE_NAME}:${TAG}"
+echo ""
+echo "To deploy in production:"
+echo "1. Copy docker-compose.prod.yml to your server"
+echo "2. Set required environment variables:"
+echo "   - APP_KEY (generate with: openssl rand -base64 32)"
+echo "   - APP_URL"
+echo "   - DB_DATABASE, DB_USERNAME, DB_PASSWORD, DB_ROOT_PASSWORD"
+echo "3. Run: docker-compose -f docker-compose.prod.yml up -d"

bin/build_and_push.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
-docker build -t forge.lvl0.xyz/lvl0/dishplanner:latest .
+docker build -t 192.168.178.152:50114/dishplanner-backend .
-docker push forge.lvl0.xyz/lvl0/dishplanner:latest
+docker push 192.168.178.152:50114/dishplanner-backend

bin/start-dev

@@ -0,0 +1,159 @@
+#!/usr/bin/env bash
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Get script directory and project root
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
+
+# Detect Docker or Podman
+CONTAINER_CLI=""
+# Check if docker is actually podman in disguise
+if command -v docker &> /dev/null && docker --version 2>&1 | grep -q "podman"; then
+    CONTAINER_CLI="podman"
+    echo -e "${GREEN}Using Podman (via docker alias)${NC}"
+elif command -v docker &> /dev/null && docker info &> /dev/null; then
+    CONTAINER_CLI="docker"
+    echo -e "${GREEN}Using Docker${NC}"
+elif command -v podman &> /dev/null; then
+    CONTAINER_CLI="podman"
+    echo -e "${GREEN}Using Podman${NC}"
+else
+    echo -e "${RED}✗ Neither Docker nor Podman found. Please install one of them first.${NC}"
+    echo -e "${YELLOW}Install Docker: https://docs.docker.com/get-docker/${NC}"
+    echo -e "${YELLOW}Install Podman: https://podman.io/getting-started/installation${NC}"
+    exit 1
+fi
+
+echo -e "${GREEN}=== Dish Planner Development Setup ===${NC}\n"
+
+# Check if .env exists in backend
+if [ ! -f "$PROJECT_ROOT/backend/.env" ]; then
+    echo -e "${YELLOW}Creating backend/.env from .env.example...${NC}"
+    cp "$PROJECT_ROOT/backend/.env.example" "$PROJECT_ROOT/backend/.env"
+    echo -e "${GREEN}✓ Created backend/.env${NC}\n"
+fi
+
+# Ensure APP_PORT is set for Podman (can't use privileged port 80)
+if [ "$CONTAINER_CLI" = "podman" ] && ! grep -q "^APP_PORT=" "$PROJECT_ROOT/backend/.env"; then
+    echo -e "${YELLOW}Setting APP_PORT=8000 for Podman (non-privileged port)...${NC}"
+    echo "APP_PORT=8000" >> "$PROJECT_ROOT/backend/.env"
+fi
+
+# Backend setup
+echo -e "${GREEN}=== Backend Setup ===${NC}"
+cd "$PROJECT_ROOT/backend"
+
+# Install dependencies if vendor doesn't exist
+if [ ! -d "vendor" ]; then
+    echo -e "${YELLOW}No vendor directory found. Installing dependencies with Docker...${NC}"
+    # Use a standalone PHP/Composer Docker image to install dependencies
+    # This is the recommended Laravel approach for first-time setup
+    # Configure for Docker or Podman
+    VOLUME_OPTS="$PROJECT_ROOT/backend:/var/www/html"
+    USER_OPTS="-u $(id -u):$(id -g)"
+    EXTRA_OPTS=""
+
+    if [ "$CONTAINER_CLI" = "podman" ]; then
+        # Podman on SELinux systems needs :Z and --userns=keep-id to maintain user ID
+        VOLUME_OPTS="$VOLUME_OPTS:Z"
+        USER_OPTS=""
+        EXTRA_OPTS="--userns=keep-id"
+    fi
+
+    $CONTAINER_CLI run --rm \
+        $USER_OPTS \
+        $EXTRA_OPTS \
+        -v "$VOLUME_OPTS" \
+        -w /var/www/html \
+        docker.io/laravelsail/php84-composer:latest \
+        composer install --ignore-platform-reqs
+
+    echo -e "${GREEN}✓ Backend dependencies installed${NC}\n"
+else
+    echo -e "${GREEN}✓ Backend dependencies already installed${NC}\n"
+fi
+
+# Check if database volume exists - if not, we're doing fresh initialization
+FRESH_DB=false
+if ! $CONTAINER_CLI volume inspect sail-mysql &>/dev/null && ! $CONTAINER_CLI volume inspect backend_sail-mysql &>/dev/null; then
+    FRESH_DB=true
+    echo -e "${YELLOW}Fresh database initialization detected${NC}"
+fi
+
+# Start containers using compose directly (docker-compose.override.yml is automatically used)
+echo -e "${YELLOW}Starting backend containers...${NC}"
+if $CONTAINER_CLI compose up -d 2>&1 | tee /tmp/compose-up.log; then
+    echo -e "${GREEN}✓ Containers started${NC}\n"
+else
+    echo -e "${RED}✗ Failed to start containers. Check /tmp/compose-up.log for details${NC}"
+    exit 1
+fi
+
+# Wait for database to be ready
+echo -e "${YELLOW}Waiting for database to be ready...${NC}"
+MAX_ATTEMPTS=30
+ATTEMPT=0
+while [ $ATTEMPT -lt $MAX_ATTEMPTS ]; do
+    if $CONTAINER_CLI compose exec mysql mysqladmin ping -h localhost --silent 2>/dev/null; then
+        echo -e "${GREEN}✓ Database is ready${NC}"
+        break
+    fi
+    ATTEMPT=$((ATTEMPT + 1))
+    echo -e "${YELLOW}Waiting for database... (attempt $ATTEMPT/$MAX_ATTEMPTS)${NC}"
+    sleep 2
+done
+
+if [ $ATTEMPT -eq $MAX_ATTEMPTS ]; then
+    echo -e "${RED}✗ Database failed to become ready${NC}"
+    exit 1
+fi
+
+# Give MySQL extra time on fresh initialization to create users
+if [ "$FRESH_DB" = true ]; then
+    echo -e "${YELLOW}Waiting for fresh database to complete initialization...${NC}"
+    sleep 10
+else
+    sleep 3
+fi
+
+# Run migrations
+echo -e "${YELLOW}Running database migrations...${NC}"
+$CONTAINER_CLI compose exec backend php artisan migrate --force
+
+# Check if database has data
+echo -e "${YELLOW}Checking if database needs seeding...${NC}"
+TABLE_COUNT=$($CONTAINER_CLI compose exec backend php artisan tinker --execute="echo \DB::table('users')->count();" 2>/dev/null | tail -1 | tr -d '[:space:]' || echo "0")
+# Default to 0 if not a number
+if ! [[ "$TABLE_COUNT" =~ ^[0-9]+$ ]]; then
+    TABLE_COUNT=0
+fi
+if [ "$TABLE_COUNT" -eq "0" ]; then
+    echo -e "${YELLOW}Database is empty. Run seeders? (y/n)${NC}"
+    read -r response
+    if [[ "$response" =~ ^([yY][eE][sS]|[yY])$ ]]; then
+        $CONTAINER_CLI compose exec backend php artisan db:seed
+        echo -e "${GREEN}✓ Database seeded${NC}\n"
+    fi
+fi
+
+echo -e "${GREEN}✓ Backend setup complete${NC}"
+echo -e "${GREEN}Backend API running at: http://localhost:8000${NC}\n"
+
+# Display summary
+echo -e "${GREEN}=== Development Environment Ready ===${NC}"
+echo -e "${GREEN}Backend API:${NC} http://localhost:8000"
+echo -e "${GREEN}Frontend:${NC} http://localhost:5173"
+echo -e "${GREEN}Database:${NC} MySQL on localhost:3306"
+echo -e ""
+echo -e "${YELLOW}Note:${NC} Frontend container will install dependencies and start automatically."
+echo -e "${YELLOW}To view frontend logs:${NC}"
+echo -e "  cd backend && $CONTAINER_CLI compose logs -f frontend"
+echo -e ""
+echo -e "${YELLOW}To stop all services:${NC}"
+echo -e "  cd backend && $CONTAINER_CLI compose down"

bin/update.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 set -e
 
-echo "🔄 Pulling latest changes..."
+echo "🔄 Pulling latest backend changes..."
 git pull origin main
 
 echo "📦 Installing PHP dependencies..."
@@ -15,4 +15,4 @@ php artisan config:cache
 php artisan route:cache
 php artisan view:cache
 
-echo "✅ Update complete!"
+echo "✅ Backend update complete!"

bootstrap/app.php

@@ -1,11 +1,14 @@
 <?php
 
 use App\Http\Middleware\ForceJsonResponse;
+use App\Http\Middleware\RequireSaasMode;
+use App\Http\Middleware\RequireSubscription;
 use App\Services\OutputService;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Route;
 use Illuminate\Validation\ValidationException;
 use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
@@ -16,10 +19,24 @@
         api: __DIR__.'/../routes/api.php',
         commands: __DIR__.'/../routes/console.php',
         health: '/up',
+        then: function () {
+            Route::middleware('web')
+                ->group(base_path('routes/web/subscription.php'));
+        },
     )
     ->withMiddleware(function (Middleware $middleware) {
         // Apply ForceJsonResponse only to API routes
         $middleware->api(ForceJsonResponse::class);
+
+        $middleware->alias([
+            'subscription' => RequireSubscription::class,
+            'saas' => RequireSaasMode::class,
+        ]);
+
+        // Exclude Stripe webhook from CSRF verification
+        $middleware->validateCsrfTokens(except: [
+            'stripe/webhook',
+        ]);
     })
     ->withExceptions(function (Exceptions $exceptions) {
         $exceptions->shouldRenderJsonWhen(function (Request $request, Throwable $e) {

build-push.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+# Build and push production image to Codeberg
+
+set -e
+
+# Configuration
+REGISTRY="codeberg.org"
+NAMESPACE="lvl0"
+IMAGE_NAME="dish-planner"
+TAG="${1:-latest}"
+
+echo "🔨 Building production image..."
+podman build -f Dockerfile -t ${REGISTRY}/${NAMESPACE}/${IMAGE_NAME}:${TAG} .
+
+echo "📤 Pushing to Codeberg registry..."
+echo "Please ensure you're logged in to Codeberg:"
+echo "  podman login codeberg.org"
+
+podman push ${REGISTRY}/${NAMESPACE}/${IMAGE_NAME}:${TAG}
+
+echo "✅ Done! Image pushed to ${REGISTRY}/${NAMESPACE}/${IMAGE_NAME}:${TAG}"
+echo ""
+echo "To deploy in production:"
+echo "1. Copy docker-compose.prod.yml to your server"
+echo "2. Set required environment variables:"
+echo "   - APP_KEY (generate with: openssl rand -base64 32)"
+echo "   - APP_URL"
+echo "   - DB_DATABASE, DB_USERNAME, DB_PASSWORD, DB_ROOT_PASSWORD"
+echo "3. Run: docker-compose -f docker-compose.prod.yml up -d"

build_and_push.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+docker build -t 192.168.178.152:50114/dishplanner-backend .
+docker push 192.168.178.152:50114/dishplanner-backend

composer.json

@@ -7,9 +7,10 @@
         "laravel",
         "framework"
     ],
-    "license": "AGPL-3.0-only",
+    "license": "MIT",
     "require": {
         "php": "^8.2",
+        "laravel/cashier": "^16.1",
         "laravel/framework": "^12.9.2",
         "laravel/sanctum": "^4.0",
         "laravel/tinker": "^2.9",
@@ -26,6 +27,9 @@
         "phpunit/phpunit": "^11.0.1"
     },
     "autoload": {
+        "files": [
+            "app/helpers.php"
+        ],
         "psr-4": {
             "App\\": "app/",
             "DishPlanner\\": "src/DishPlanner/",

config/app.php

@@ -28,6 +28,18 @@
 
     'env' => env('APP_ENV', 'production'),
 
+    /*
+    |--------------------------------------------------------------------------
+    | Application Mode
+    |--------------------------------------------------------------------------
+    |
+    | Determines the application deployment mode: 'app' for self-hosted,
+    | 'saas' for multi-tenant SaaS, 'demo' for demonstration instances.
+    |
+    */
+
+    'mode' => env('APP_MODE', 'app'),
+
     /*
     |--------------------------------------------------------------------------
     | Application Debug Mode

config/services.php

@@ -35,4 +35,14 @@
         ],
     ],
 
+    'stripe' => [
+        'key' => env('STRIPE_KEY'),
+        'secret' => env('STRIPE_SECRET'),
+        'webhook' => [
+            'secret' => env('STRIPE_WEBHOOK_SECRET'),
+        ],
+        'price_monthly' => env('STRIPE_PRICE_MONTHLY'),
+        'price_yearly' => env('STRIPE_PRICE_YEARLY'),
+    ],
+
 ];

database/migrations/2026_01_06_000525_create_customer_columns.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('planners', function (Blueprint $table) {
+            $table->string('stripe_id')->nullable()->index();
+            $table->string('pm_type')->nullable();
+            $table->string('pm_last_four', 4)->nullable();
+            $table->timestamp('trial_ends_at')->nullable();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('planners', function (Blueprint $table) {
+            $table->dropIndex([
+                'stripe_id',
+            ]);
+
+            $table->dropColumn([
+                'stripe_id',
+                'pm_type',
+                'pm_last_four',
+                'trial_ends_at',
+            ]);
+        });
+    }
+};

database/migrations/2026_01_06_000526_create_subscriptions_table.php

@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('subscriptions', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('planner_id');
+            $table->string('type');
+            $table->string('stripe_id')->unique();
+            $table->string('stripe_status');
+            $table->string('stripe_price')->nullable();
+            $table->integer('quantity')->nullable();
+            $table->timestamp('trial_ends_at')->nullable();
+            $table->timestamp('ends_at')->nullable();
+            $table->timestamps();
+
+            $table->index(['planner_id', 'stripe_status']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('subscriptions');
+    }
+};

database/migrations/2026_01_06_000527_create_subscription_items_table.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('subscription_items', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('subscription_id');
+            $table->string('stripe_id')->unique();
+            $table->string('stripe_product');
+            $table->string('stripe_price');
+            $table->integer('quantity')->nullable();
+            $table->timestamps();
+
+            $table->index(['subscription_id', 'stripe_price']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('subscription_items');
+    }
+};

database/migrations/2026_01_06_000528_add_meter_id_to_subscription_items_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('subscription_items', function (Blueprint $table) {
+            $table->string('meter_id')->nullable()->after('stripe_price');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('subscription_items', function (Blueprint $table) {
+            $table->dropColumn('meter_id');
+        });
+    }
+};

database/migrations/2026_01_06_000529_add_meter_event_name_to_subscription_items_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('subscription_items', function (Blueprint $table) {
+            $table->string('meter_event_name')->nullable()->after('quantity');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('subscription_items', function (Blueprint $table) {
+            $table->dropColumn('meter_event_name');
+        });
+    }
+};

docker-compose.prod.yml

@@ -1,7 +1,7 @@
 # Production Docker Compose
 services:
   app:
-    image: forge.lvl0.xyz/lvl0/dishplanner:latest
+    image: codeberg.org/lvl0/dish-planner:latest
     container_name: dishplanner_app
     restart: always
     ports:

frontend-old/.dockerignore

@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md

frontend-old/.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/

frontend-old/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]

frontend-old/README.md

@@ -0,0 +1,87 @@
+# Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications using React Router.
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+### Docker Deployment
+
+To build and run using Docker:
+
+```bash
+docker build -t my-app .
+
+# Run the container
+docker run -p 3000:3000 my-app
+```
+
+The containerized application can be deployed to any platform that supports Docker, including:
+
+- AWS ECS
+- Google Cloud Run
+- Azure Container Apps
+- Digital Ocean App Platform
+- Fly.io
+- Railway
+
+### DIY Deployment
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+```
+├── package.json
+├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
+├── build/
+│   ├── client/    # Static assets
+│   └── server/    # Server-side code
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
+
+Built with ❤️ using React Router.

frontend-old/app/app.css

@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Syncopate:wght@400;700&display=swap');
+@import "tailwindcss";
+
+@import "./styles/main.css";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+html,
+body {
+  @apply bg-white dark:bg-gray-950;
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  }
+}

frontend-old/app/components/Spinner.tsx

@@ -0,0 +1,15 @@
+const Spinner = () => {
+
+    return (
+        <div className="flex justify-center items-center">
+            <svg className="animate-spin h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none"
+                 viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+            </svg>
+        </div>
+    )
+
+}
+
+export default Spinner

frontend-old/app/components/features/OnboardingBanner.tsx

@@ -0,0 +1,48 @@
+import { Link } from "react-router"
+import useRoutes from "@/hooks/useRoutes"
+import { UserType } from "@/types/UserType"
+import { DishType } from "@/types/DishType"
+
+interface Props {
+    dishes: DishType[],
+    users: UserType[]
+}
+
+const OnboardingBanner = ({ dishes, users }: Props) => {
+    const routes = useRoutes();
+
+    const steps = [
+        {
+            label: "Create a user",
+            href: routes.user.create(),
+            count: users.length
+        }, {
+            label: "Create a dish",
+            href: routes.dish.create(),
+            count: dishes.length
+        }
+    ]
+
+    return (
+        <div className="border-2 border-secondary p-6 text-lg">
+            <div className="text-xl">Welcome to DishPlanner</div>
+            <div className="my-5">To get you started, please follow these steps to set up your account. This will ensure a better
+                experience.
+            </div>
+
+            {
+                steps.map((step, index) => (
+                    <div className="w-full text-center text-2xl my-5" key={index}>
+                        {
+                            step.count === 0
+                                ? <Link to={ step.href } className="underline">{ step.label }</Link>
+                                : <div className="line-through">{ step.label }</div>
+                        }
+                    </div>
+                ))
+            }
+        </div>
+    )
+}
+
+export default OnboardingBanner;

frontend-old/app/components/features/auth/LoginForm.tsx

@@ -0,0 +1,98 @@
+
+import React, { useEffect, useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router';
+import { useAuth } from '@/context/AuthContext';
+import { login } from "@/utils/api/auth";
+import useRoutes from "@/hooks/useRoutes";
+import SolidButton from "@/components/ui/Buttons/SolidButton";
+import Alert from "@/components/ui/Alert";
+
+const LoginForm = () => {
+    const { login: authLogin } = useAuth();
+    const routes = useRoutes();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [alertSuccess, setAlertSuccess] = useState<string[]>([])
+    const navigate = useNavigate();
+    const location = useLocation();
+    const searchParams = new URLSearchParams(location.search);
+    const isRegistered = searchParams.get('registered') === 'true';
+
+    useEffect(() => {
+        if (isRegistered) {
+            setAlertSuccess(['Registration successful!',' You can now log in.']);
+
+            const timer = setTimeout(() => {
+                const params = new URLSearchParams(searchParams.toString());
+                params.delete('registered');
+                const newUrl = `${window.location.pathname}?${params.toString()}`;
+
+                navigate(newUrl, { replace: true });
+            }, 3000);
+
+            return () => clearTimeout(timer)
+        }
+    }, [isRegistered, navigate, searchParams])
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        try {
+            await login(email, password);
+            authLogin();
+            navigate('/', { replace: true });
+        } catch (err) {
+            const errorMessage =
+                err instanceof Error
+                    ? err.message
+                    : 'Login failed';
+            setError(errorMessage);
+        }
+    };
+
+    return (
+        <div style={{ marginTop: '15vh' }} className="lg:w-1/3 lg:mx-auto">
+            <div className="pt-2 text-2xl font-syncopate text-primary">
+                DISH PLANNER
+            </div>
+            <div className="border-2 border-secondary rounded-lg px-5 pt-5 pb-3 lg:pt-10 lg:pb-7">
+                { alertSuccess.length > 0 &&
+                    <Alert type="success" className="mb-4 px-5 py-2 capitalize text-center">
+                        {alertSuccess.map((msg, index) => (
+                            <React.Fragment key={index}>
+                                {msg}
+                                <br />
+                            </React.Fragment>
+                        ))}
+                    </Alert>
+                }
+                <form onSubmit={handleSubmit} className="max-w-sm mx-auto flex flex-col">
+                    {error && <p className="text-red-600 mb-4">{error}</p>}
+                    <input
+                        type="email"
+                        placeholder="Email"
+                        value={email}
+                        onChange={e => setEmail(e.target.value)}
+                        required
+                        className="w-full p-2 mb-4 border rounded border-secondary bg-gray-600 text-secondary"
+                    />
+                    <input
+                        type="password"
+                        placeholder="Password"
+                        value={password}
+                        onChange={e => setPassword(e.target.value)}
+                        required
+                        className="w-full p-2 mb-4 border rounded text-secondary border-secondary bg-gray-600"
+                    />
+                    <SolidButton type="submit">Login</SolidButton>
+                    <Link to={routes.auth.register()} className="lowercase hover:underline text-center mt-1 text-secondary underline">
+                        Create an account
+                    </Link>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default LoginForm

frontend-old/app/components/features/auth/RegisterForm.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { register } from "@/utils/api/auth";
+import useRoutes from "@/hooks/useRoutes";
+import SectionTitle from "@/components/ui/SectionTitle";
+import SolidButton from "@/components/ui/Buttons/SolidButton";
+import { Link, useNavigate } from "react-router"
+
+const RegisterForm = () => {
+    const routes = useRoutes();
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [passwordAgain, setPasswordAgain] = useState('');
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [isRegistered, setIsRegistered] = useState(false);
+    const navigate = useNavigate();
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (password !== passwordAgain) {
+            setError("Passwords do not match.");
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+
+            await register(name, email, password, passwordAgain);
+            // navigate('/login?registered=true', { replace: true });
+        } catch (err) {
+            const errorMessage =
+                err instanceof Error
+                    ? err.message
+                    : 'Registration\n failed';
+            setError(errorMessage);
+        } finally {
+            setIsRegistered(true);
+            setIsLoading(false);
+        }
+    };
+
+    if (isRegistered) {
+        return <div className="border-2 border-secondary rounded-lg p-5 mt-0">
+            <SectionTitle>Registration successful!</SectionTitle>
+            Please continue to the <Link to={ routes.auth.login() }>login page</Link>.
+        </div>
+    }
+
+    return (
+        <div style={{ marginTop: '15vh' }} className="lg:w-1/3 lg:mx-auto">
+            <div className="pt-2 text-2xl font-syncopate text-primary">
+                DISH PLANNER
+            </div>
+            <div className="border-2 border-secondary rounded-lg p-5 mt-0 lg:pt-10 lg:pb-7">
+                <form onSubmit={ handleSubmit } className="max-w-sm mx-auto space-y-4 flex flex-col">
+                    <h2 className="text-xl font-bold text-secondary text-right">Register</h2>
+                    { error && <p className="text-red-600">{ error }</p> }
+                    <input
+                        type="text"
+                        placeholder="Name"
+                        value={ name }
+                        onChange={ e => setName(e.target.value) }
+                        required
+                        className="w-full p-2 border rounded border-secondary bg-gray-600 text-secondary"
+                    />
+                    <input
+                        type="email"
+                        placeholder="Email"
+                        value={ email }
+                        onChange={ e => setEmail(e.target.value) }
+                        required
+                        className="w-full p-2 border rounded border-secondary bg-gray-600 text-secondary"
+                    />
+                    <input
+                        type="password"
+                        placeholder="Password"
+                        value={ password }
+                        onChange={ e => setPassword(e.target.value) }
+                        required
+                        className="w-full p-2 border rounded border-secondary bg-gray-600 text-secondary"
+                    />
+                    <input
+                        type="password"
+                        placeholder="Password Again"
+                        value={ passwordAgain }
+                        onChange={ e => setPasswordAgain(e.target.value) }
+                        required
+                        className="w-full p-2 border rounded border-secondary bg-gray-600 text-secondary"
+                    />
+                    <SolidButton
+                        type="submit"
+                        className={ isLoading ? "opacity-50 cursor-not-allowed" : "background-red" }
+                    >
+                        Create Account
+                    </SolidButton>
+                    <Link to={routes.auth.login()} className="lowercase mt-2 hover:underline text-center text-secondary underline">
+                        Back to Login
+                    </Link>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default RegisterForm

frontend-old/app/components/features/dishes/AddUserToDishForm.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { DishType } from "@/types/DishType";
+import { UserType } from "@/types/UserType";
+import { useFetchUsers } from "@/hooks/useFetchUsers";
+import Spinner from "@/components/Spinner";
+import {addUserToDish} from "@/utils/api/dishApi";
+import OutlineButton from "@/components/ui/Buttons/OutlineButton";
+import SolidButton from "@/components/ui/Buttons/SolidButton";
+
+interface Props {
+    dish: DishType;
+    reloadDish: () => void;
+}
+
+const AddUserToDishForm = ({ dish, reloadDish }: Props) => {
+    const [showAdd, setShowAdd] = useState<boolean>(false);
+    const [selectedUser, setSelectedUser] = useState<string>("-1");
+    const { users, isLoading: isUsersLoading } = useFetchUsers();
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (selectedUser === "-1") {
+            alert("Please select a valid user.");
+            return;
+        }
+
+        const userToAdd = users.find((user: UserType) => user.id === parseInt(selectedUser));
+
+        if (!userToAdd) {
+            alert("User not found.");
+            return;
+        }
+
+        addUserToDish(dish.id, userToAdd.id)
+            .then(() => {
+                setShowAdd(false);
+                setSelectedUser("-1");
+                reloadDish();
+            })
+            .catch(() => {
+                alert("Failed to add user, please try again.");
+            });
+    };
+
+    if (isUsersLoading) {
+        return <Spinner />;
+    }
+
+    const remainingUsers = users.filter(
+        (user: UserType) =>
+            !dish.users.find((dishUser: UserType) => dishUser.id === user.id)
+    );
+
+    return (
+        <>
+            <OutlineButton
+                className="mb-2 flex-none w-fit ml-auto"
+                onClick={() => setShowAdd(!showAdd)}
+                disabled={remainingUsers.length === 0}
+                type="button"
+            >
+                Add User
+            </OutlineButton>
+
+            { showAdd && (
+                <div className="mt-2 mb-5 w-full">
+                <form onSubmit={handleSubmit}>
+                    <div className="flex">
+                        <div className="flex-grow pt-2">
+                            <select
+                                value={selectedUser}
+                                onChange={(e) => setSelectedUser(e.target.value)}
+                                className="p-2 border rounded w-full background-secondary border-secondary"
+                            >
+                                <option value="-1">Select user</option>
+                                {remainingUsers.map((user: UserType) => (
+                                    <option key={user.id} value={user.id}>
+                                        {user.name}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+
+                        <div className="flex-none py-2 pr-2 pl-4">
+                            <SolidButton type="submit"
+                                         size="small"
+                                         className="mt-1"
+                            >
+                                Add User
+                            </SolidButton>
+                        </div>
+                    </div>
+                </form>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default AddUserToDishForm;

frontend-old/app/components/features/dishes/CreateDishForm.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router";
+import { createDish } from "~/utils/api/dishApi";
+import PageTitle from "~/components/ui/PageTitle";
+import Alert from "~/components/ui/Alert";
+import SolidButton from "~/components/ui/Buttons/SolidButton";
+import OutlineLinkButton from "~/components/ui/Buttons/OutlineLinkButton";
+import { ChevronLeftIcon } from "@heroicons/react/16/solid";
+import Hr from "~/components/ui/Hr"
+
+const CreateDishForm = () => {
+    const navigate = useNavigate()
+    const [name, setName] = useState<string>("");
+    const [error, setError] = useState<string>("");
+    const [loading, setLoading] = useState(false);
+
+    const validateForm = () => {
+        if (!name.trim()) {
+            setError("Dish name cannot be empty.");
+            return false;
+        }
+
+        return true;
+    };
+
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+
+        // Validate client-side input
+        if (!validateForm()) return;
+
+        setError("");
+        setLoading(true);
+
+        try {
+            const result = await createDish(name);
+            if (result) {
+                navigate('/dishes')
+            }
+        } catch (error: unknown) {
+            setError(error instanceof Error ? error.message : "An unexpected error occurred.");
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <div className="px-5">
+            <div className="flex mb-3">
+                <PageTitle>Create Dish</PageTitle>
+            </div>
+
+            <form className="space-y-4" onSubmit={ submitForm }>
+                { error && (
+                    <Alert type="error">{ error }</Alert>
+                ) }
+
+                <div>
+                    <label htmlFor="name" className="block text-sm font-medium">Dish Name</label>
+                    <input
+                        type="text"
+                        id="name"
+                        name="name"
+                        value={ name }
+                        onChange={ (e) => setName(e.target.value) } // Update the name state on change
+                        className="w-full p-2 mb-4 border rounded bg-gray-600 border-secondary text-secondary focus:bg-gray-900"
+                        placeholder="Enter dish name"
+                    />
+                </div>
+
+                <SolidButton
+                    type="submit"
+                    disabled={ loading }
+                    className={ loading ? "bg-gray-400" : '' }
+                >
+                    { loading ? "Saving..." : "Save Changes" }
+                </SolidButton>
+            </form>
+
+            <Hr />
+
+            <OutlineLinkButton
+                href="/dishes"
+                className="mt-4 pl-0 mr-0"
+                icon={ <ChevronLeftIcon/> }
+            >
+                Back to dishes
+            </OutlineLinkButton>
+        </div>
+    );
+
+
+};
+
+export default CreateDishForm;

frontend-old/app/components/features/dishes/Dish.tsx

@@ -0,0 +1,39 @@
+import {DishType} from "~/types/DishType";
+
+import {PencilIcon, TrashIcon} from '@heroicons/react/24/solid'
+import { Link } from "react-router";
+import useRoutes from "~/hooks/useRoutes";
+import {UserType} from "~/types/UserType";
+import Card from "~/components/layout/Card";
+
+const Dish = ({ dish }: { dish: DishType}) => {
+    const routes = useRoutes();
+
+    return (
+        <Card>
+            <div className="flex-1 flex items-center">
+                <p className="text-bold text-xl font-bold">{ dish.name }</p>
+                <span className="mx-2"></span>
+                {
+                    dish.users.map((user: UserType) => (
+                        <div key={user.id} className="text-accent-yellow mx-1">{user.name.slice(0, 1)}</div>
+                    ))
+                }
+            </div>
+            <div className="flex-none flex gap-2">
+                <Link to={routes.dish.edit(dish)}>
+                    <div className="border border-foreground p-2 rounded">
+                        <PencilIcon width="14" />
+                    </div>
+                </Link>
+                <Link to={routes.dish.delete(dish)}>
+                    <div className="border border-red-500 p-2 rounded">
+                        <TrashIcon width="14" className="text-red-500" />
+                    </div>
+                </Link>
+            </div>
+        </Card>
+    )
+}
+
+export default Dish

frontend-old/app/components/features/dishes/DishCard.tsx

@@ -0,0 +1,22 @@
+import {UserType} from "@/types/UserType";
+import {DishType} from "@/types/DishType";
+
+interface Props {
+    user: UserType,
+    dish: DishType,
+}
+
+const DishCard = ({ user, dish }: Props) => {
+    return (
+        <div className="w-full flex py-2 text-xl font-bold text-primary">
+            <div className="user-badge flex-none w-16 text-center pr-5">
+                { user.name.slice(0, 1) }
+            </div>
+            <div className="dish-name flex-1">
+                { dish ? dish.name : '-' }
+            </div>
+        </div>
+    )
+}
+
+export default DishCard

frontend-old/app/components/features/dishes/EditDishForm.tsx

@@ -0,0 +1,87 @@
+import React, {useState} from "react";
+import { useNavigate } from "react-router";
+import Alert from "~/components/ui/Alert";
+import {updateDish} from "~/utils/api/dishApi";
+import {DishType} from "~/types/DishType";
+import useRoutes from "~/hooks/useRoutes";
+import Spinner from "~/components/Spinner";
+import Button from "~/components/ui/Button"
+
+interface Props {
+    dish: DishType
+}
+
+const EditDishForm = ({ dish }: Props) => {
+    const [name, setName] = useState<string>(dish.name);
+    const [error, setError] = useState<string>("");
+    const navigate = useNavigate()
+    const [loading, setLoading] = useState(false);
+    const routes = useRoutes();
+
+    const validateForm = () => {
+        if (!name.trim()) {
+            setError("Dish name cannot be empty.");
+            return false;
+        }
+
+        return true;
+    };
+
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+
+        if (!validateForm()) return;
+
+        setError("");
+        setLoading(true);
+
+        try {
+            const result = await updateDish(dish.id, name);
+            if (result) {
+                navigate(routes.dish.index())
+            }
+        } catch (error: unknown) {
+            setError(error instanceof Error ? error.message : "An unexpected error occurred");
+        } finally {
+            setLoading(false); // Reset loading state
+        }
+    }
+
+    if (loading) {
+        return <Spinner />;
+    }
+
+    return (
+        <form className="space-y-4" onSubmit={submitForm}>
+            {
+                error != '' && <Alert type="error" >{ error }</Alert>
+            }
+
+            {/* Dish name input */}
+            <div>
+                <label htmlFor="name" className="block text-sm font-medium">Dish Name</label>
+                <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)} // Update the name state on change
+                    className="p-2 border rounded w-full bg-gray-500 border-secondary background-secondary"
+                />
+            </div>
+
+            {/* Save button */}
+            <Button
+                type="submit"
+                disabled={loading}
+                className={loading ? "bg-gray-400" : ''}
+                variant="primary"
+                appearance="solid"
+            >
+                {loading ? "Saving..." : "Save"}
+            </Button>
+        </form>
+    );
+}
+
+export default EditDishForm;

frontend-old/app/components/features/dishes/EditDishUserCardEditForm.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import SectionTitle from "@/components/ui/SectionTitle";
+import {syncUserDishRecurrences} from "@/utils/api/usersApi";
+import Spinner from "@/components/Spinner";
+import {UserDishType} from "@/types/ScheduledUserDishType";
+import {RecurrenceType} from "@/types/RecurrenceType";
+import SolidButton from "@/components/ui/Buttons/SolidButton";
+
+interface Props {
+    userDish: UserDishType
+    onSubmit: () => void
+}
+
+const EditDishUserCardEditForm = ({ userDish, onSubmit}: Props) => {
+    const weeklyRecurrence = userDish.recurrences.find((recurrence) => recurrence.type === 'App\\Models\\WeeklyRecurrence')
+    const minimumRecurrence = userDish.recurrences.find((recurrence) => recurrence.type === 'App\\Models\\MinimumRecurrence')
+
+    const wv = weeklyRecurrence ? weeklyRecurrence.value : undefined
+    const mv = minimumRecurrence ? minimumRecurrence.value : undefined
+
+    const [isWeeklyOn, setIsWeeklyOn] = React.useState(weeklyRecurrence !== undefined);
+    const [isMinimumOn, setIsMinimumOn] = React.useState(minimumRecurrence !== undefined);
+    const [weekday, setWeekday] = React.useState<number>(wv ?? 0);
+    const [minimumValue, setMinimumValue] = React.useState<number>(mv ?? 7);
+    const [loading, setLoading] = React.useState(false);
+
+    const handleSubmit = () => {
+        const recurrences = []
+
+        if (isWeeklyOn) {
+            recurrences.push({
+                type: 'App\\Models\\WeeklyRecurrence',
+                value: weekday,
+            });
+        }
+
+        if (isMinimumOn) {
+            recurrences.push({
+                type: 'App\\Models\\MinimumRecurrence',
+                value: minimumValue,
+            });
+        }
+
+        setLoading(true)
+        syncUserDishRecurrences(userDish.dish.id, userDish.user.id, recurrences as RecurrenceType[])
+            .then((data) => console.log('request data', data))
+            .finally(() => {
+                setLoading(false)
+                onSubmit()
+            })
+    }
+
+    if (loading) {
+        return <Spinner />;
+    }
+
+    return (
+        <form action={handleSubmit}>
+            <SectionTitle>Recurrences</SectionTitle>
+
+            <div className="flex">
+                <div className="flex-none">
+                    <input type="checkbox"
+                           id="weekly"
+                           name="weekly"
+                           value="weekly"
+                           checked={isWeeklyOn}
+                           onChange={() => setIsWeeklyOn(!isWeeklyOn)}
+                           className="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800"
+                    />
+                    <label htmlFor="weekly" className="ml-2">Weekly</label>
+                </div>
+                {
+                    isWeeklyOn && (
+                        <div className="flex-grow ml-2">
+                            <label htmlFor="weekday" className="mr-2">on</label>
+                            <select value={weekday} onChange={(e) => setWeekday(parseInt(e.currentTarget.value))} className="background-secondary border-secondary border-2">
+                                <option value="0">Sunday</option>
+                                <option value="1">Monday</option>
+                                <option value="2">Tuesday</option>
+                                <option value="3">Wednesday</option>
+                                <option value="4">Thursday</option>
+                                <option value="5">Friday</option>
+                                <option value="6">Saturday</option>
+                            </select>
+                        </div>
+                    )
+                }
+            </div>
+
+            <div className="flex mt-2">
+                <div className="flex-none">
+                    <input type="checkbox"
+                           id="minimum"
+                           name="minimum"
+                           value="minimum"
+                           checked={isMinimumOn}
+                           onChange={() => setIsMinimumOn(!isMinimumOn)}
+                           className="w-4 h-4 border border-gray-300 rounded-sm bg-gray-500 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800"
+                    />
+                    <label htmlFor="minimum" className="ml-2">Minimum</label>
+                </div>
+
+                {
+                    isMinimumOn && (
+                        <div className="flex-grow ml-2">
+                            <input type="number" value={minimumValue} onChange={(e) => setMinimumValue(parseInt(e.currentTarget.value))} min="0" max="365" className="background-secondary border-secondary border-2 w-12 px-2" />
+                            <label htmlFor="minimum">Days</label>
+                        </div>
+                    )
+                }
+            </div>
+
+            <SolidButton type="submit">Save</SolidButton>
+        </form>
+    );
+}
+
+export default EditDishUserCardEditForm;

frontend-old/app/components/features/dishes/RecurrenceLabels.tsx

@@ -0,0 +1,53 @@
+import {RecurrenceType} from "@/types/RecurrenceType";
+
+interface Props {
+    recurrences: RecurrenceType[];
+}
+
+const RecurrenceLabels = ({recurrences}: Props) => {
+    const weeklyRecurrences = recurrences.filter(recurrence => recurrence.type === 'App\\Models\\WeeklyRecurrence');
+    const minimumRecurrences = recurrences.filter(recurrence => recurrence.type === 'App\\Models\\MinimumRecurrence');
+
+    const renderWeeklyRecurrence = () => {
+        if (weeklyRecurrences == undefined || weeklyRecurrences.length == 0) {
+            return '';
+        }
+
+        const weekdayString = (() => {
+            switch (weeklyRecurrences[0].value) {
+                case 0: return "Sunday"
+                case 1: return "Monday"
+                case 2: return "Tuesday";
+                case 3: return "Wednesday";
+                case 4: return "Thursday";
+                case 5: return "Friday";
+                case 6: return "Saturday";
+                default: return "Invalid day";
+            }
+        })
+
+        return (
+            <div className="text-xs p-1 inline mx-1 text-accent-yellow">
+                { weekdayString() }
+            </div>
+        )
+    }
+    const renderMinimumRecurrence = () => {
+        if (minimumRecurrences == undefined || minimumRecurrences.length == 0) {
+            return '';
+        }
+
+        return (
+            <div className="text-xs p-1 inline mx-1 text-accent-yellow">
+                min: { minimumRecurrences[0].value }
+            </div>
+        )
+    }
+
+    return <>
+        { renderWeeklyRecurrence() }
+        { renderMinimumRecurrence() }
+    </>;
+};
+
+export default RecurrenceLabels;

frontend-old/app/components/features/dishes/SyncUsersForm.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { DishType } from "@/types/DishType";
+import { UserType } from "@/types/UserType";
+import UserDishCard from "@/components/features/dishes/UserDishCard";
+import SectionTitle from "@/components/ui/SectionTitle";
+import AddUserToDishForm from "@/components/features/dishes/AddUserToDishForm";
+
+interface Props {
+    dish: DishType;
+    reloadDish: () => void;
+}
+
+const SyncUsersForm = ({ dish, reloadDish }: Props) => {
+    return (
+        <div className="my-2 w-full flex flex-col">
+            <SectionTitle className="mt-2">Users</SectionTitle>
+
+            <AddUserToDishForm dish={dish} reloadDish={reloadDish} />
+
+            {dish.users.map((user: UserType) => (
+                <UserDishCard
+                    key={user.id}
+                    user={user}
+                    dish={dish}
+                    reloadDish={reloadDish}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default SyncUsersForm;

frontend-old/app/components/features/dishes/UserDishCard.tsx

@@ -0,0 +1,83 @@
+import React, {useEffect} from "react";
+import {DishType} from "~/types/DishType";
+import {UserType} from "~/types/UserType";
+import { Link } from "react-router";
+import {PencilIcon, TrashIcon} from "@heroicons/react/24/solid";
+import {removeUserFromDish} from "~/utils/api/dishApi";
+import EditDishUserCardEditForm from "~/components/features/dishes/EditDishUserCardEditForm";
+import {getUserDishForUserAndDish} from "~/utils/api/usersApi";
+import Spinner from "~/components/Spinner";
+import RecurrenceLabels from "~/components/features/dishes/RecurrenceLabels";
+import {UserDishType} from "~/types/ScheduledUserDishType";
+
+interface Props {
+    dish: DishType
+    user: UserType
+    reloadDish: () => void
+}
+
+const UserDishCard = ({dish, user, reloadDish}: Props) => {
+    const [userDish, setUserDish] = React.useState<UserDishType|null>(null);
+    const [userDishLoading, setUserDishLoading] = React.useState(true);
+    const [isEditMode, setIsEditMode] = React.useState(false);
+
+    useEffect(() => {
+        getUserDishForUserAndDish(user.id, dish.id)
+            .then((userDish) => setUserDish(userDish))
+            .finally(() => setUserDishLoading(false))
+    }, [dish, user]);
+
+    const handleRemove = () => {
+        removeUserFromDish(dish.id, user.id)
+            .then(() => reloadDish())
+            .catch(() => {
+                alert("Failed to remove user, please try again.");
+            });
+    };
+
+    if (userDishLoading || !userDish) {
+        return <Spinner />
+    }
+
+    const onUserCardSubmit = () => {
+        setIsEditMode(false);
+        reloadDish()
+    }
+
+    return (
+        <div className="my-2 w-full px-3 py-2 text-xl font-bold border border-secondary rounded">
+            <div className="flex gap-2">
+                <div className="flex-none pt-1">
+                    {user.name}
+                </div>
+
+                <div className="flex-grow pt-1">
+                    <RecurrenceLabels recurrences={userDish.recurrences} />
+                </div>
+
+                <div className="flex-none w-8">
+                    <Link onClick={() => setIsEditMode(!isEditMode)} to="#">
+                        <div className="border border-foreground p-2 rounded">
+                            <PencilIcon width="14"/>
+                        </div>
+                    </Link>
+                </div>
+                <div className="flex-none w-8">
+                    <Link onClick={handleRemove} to="#">
+                        <div className="border border-red-500 p-2 rounded">
+                            <TrashIcon width="14" className="text-red-500"/>
+                        </div>
+                    </Link>
+                </div>
+            </div>
+
+            {isEditMode && (
+                <div className="flex gap-2">
+                    <EditDishUserCardEditForm userDish={userDish} onSubmit={onUserCardSubmit} />
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default UserDishCard;

frontend-old/app/components/features/navbar/MobileDropdownMenu.tsx

@@ -0,0 +1,69 @@
+import { Link } from "react-router";
+import React from "react";
+import useRoutes from "~/hooks/useRoutes";
+import classNames from "classnames";
+
+interface Props {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    handleLogout: (e: React.MouseEvent) => void;
+}
+
+const divStyles = classNames(
+    'absolute', 'text-xxl', 'rounded-b', 'top-full mt-1', 'left-0', 'right-0', '', 'py-2',
+    'bg-gray-600', 'border-secondary', 'shadow-md', 'flex', 'flex-col', 'space-y-3',
+    'md:hidden'
+)
+
+const linkStyles = classNames(
+    'border-b-2', 'border-secondary', 'uppercase',
+    'text-primary', 'hover:background-secondary', 'pb-2', 'pl-5',
+    'space-grotesk', 'text-xl'
+)
+
+const MobileDropdownMenu = ({ isOpen, setIsOpen, handleLogout }: Props) => {
+    const routes = useRoutes();
+
+    if (!isOpen) return null;
+
+    return (
+        <div className={divStyles}>
+            <Link
+                to={routes.home()}
+                className={linkStyles}
+                onClick={() => setIsOpen(false)}
+            >
+                Home
+            </Link>
+            <Link
+                to={routes.dish.index()}
+                className={linkStyles}
+                onClick={() => setIsOpen(false)}
+            >
+                Dishes
+            </Link>
+            <Link
+                to={routes.user.index()}
+                className={linkStyles}
+                onClick={() => setIsOpen(false)}
+            >
+                Users
+            </Link>
+            <Link
+                to={routes.schedule.history()}
+                className={linkStyles}
+                onClick={() => setIsOpen(false)}
+            >
+                History
+            </Link>
+            <Link
+                to={routes.auth.login()}
+                onClick={handleLogout}
+                className={linkStyles}>
+                Logout
+            </Link>
+        </div>
+    )
+}
+
+export default MobileDropdownMenu

frontend-old/app/components/features/schedule/HistoricalDishes.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import {useEffect, useState} from "react";
+import {DateTime} from "luxon";
+import ScheduleCalendar from "@/components/features/schedule/ScheduleCalendar";
+import PageTitle from "@/components/ui/PageTitle";
+import {ScheduleType} from "@/types/ScheduleType";
+import Spinner from "@/components/Spinner";
+import {listSchedule} from "@/utils/api/scheduleApi";
+
+const HistoricalDishes = () => {
+    const [schedule, setSchedule] = useState<ScheduleType[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    const yesterday = DateTime.now().minus({ days: 1 }).toFormat('yyyy-LL-dd');
+
+    useEffect(() => {
+        listSchedule(undefined, yesterday)
+            .then((dishes: ScheduleType[]) => dishes
+                .sort((a: ScheduleType, b: ScheduleType) => new Date(b.date).getTime() - new Date(a.date).getTime())
+            )
+            .then((dishes) => setSchedule(dishes))
+            .finally(() => setIsLoading(false))
+    }, [yesterday]);
+
+    if (isLoading) {
+        return <Spinner />;
+    }
+
+    if (!schedule || Object.keys(schedule).length === 0) {
+        return (
+            <div className="w-full text-center text-2xl border-white border-2 rounded-xl mt-4">
+                No dishes scheduled
+            </div>
+        );
+    }
+
+    return <div className="justify-items-center">
+        <PageTitle>History</PageTitle>
+        <ScheduleCalendar schedule={schedule as ScheduleType[]} />
+    </div>
+}
+
+export default HistoricalDishes

frontend-old/app/components/features/schedule/ScheduleCalendar.tsx

@@ -0,0 +1,72 @@
+import ScheduleDayCard from "@/components/features/schedule/dayCard/ScheduleDayCard";
+import { FilledScheduleType, ScheduleType } from "@/types/ScheduleType";
+import {useFetchUsers} from "@/hooks/useFetchUsers";
+import Spinner from "@/components/Spinner";
+
+const generateDates = (startDate: string, days: number): string[] => {
+    const dates = [];
+    const start = new Date(startDate);
+
+    for (let i = 0; i < days; i++) {
+        const currentDate = new Date(start);
+        currentDate.setDate(start.getDate() + i);
+        dates.push(currentDate.toISOString().split('T')[0]);
+    }
+
+    return dates;
+};
+
+
+const fillCalendar = (schedules: ScheduleType[]): FilledScheduleType[] => {
+    /*
+Array(14)
+    0:
+        date: "2025-05-05"
+        id: 2
+        is_skipped: false
+        scheduled_user_dishes: []
+     */
+
+    const dates = generateDates((new Date()).toISOString().split('T')[0], 31)
+
+    return dates.map((date): FilledScheduleType => {
+        console.log(date)
+
+        const schedule = schedules.find((schedule: ScheduleType) => schedule.date == date)
+
+        if (schedule) {
+            return schedule
+        }
+
+        return {
+            date,
+            scheduled_user_dishes: []
+        }
+    })
+}
+
+interface Props {
+    schedule: ScheduleType[];
+}
+
+const ScheduleCalendar = ({ schedule }: Props) => {
+    const {users, isLoading: areUsersLoading} = useFetchUsers();
+
+    if (areUsersLoading) return <Spinner />
+
+    const fullCalendar = fillCalendar(schedule)
+
+    return (
+        <div className="w-full flex flex-col items-start">
+            { fullCalendar.map((schedule, index) => (
+                <ScheduleDayCard
+                    key={index}
+                    schedule={schedule}
+                    users={users}
+                />
+            ))}
+        </div>
+    )
+}
+
+export default ScheduleCalendar

frontend-old/app/components/features/schedule/ScheduleEditForm.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { ScheduleType } from "@/types/ScheduleType";
+import Spinner from "@/components/Spinner";
+import PageTitle from "@/components/ui/PageTitle";
+import { getScheduleForDate, scheduleUserDish, updateScheduleForDate } from "@/utils/api/scheduleApi";
+import { UserDishType } from "@/types/ScheduledUserDishType";
+import Label from "@/components/ui/Label";
+import SectionTitle from "@/components/ui/SectionTitle";
+import { useFetchUsers } from "@/hooks/useFetchUsers";
+import { listUserDishes } from "@/utils/api/userDishApi";
+import scheduleBuilder from "@/utils/scheduleBuilder";
+import transformDate from "@/utils/dateBuilder";
+import { ChevronLeftIcon } from "@heroicons/react/16/solid";
+import Hr from "@/components/ui/Hr"
+import Button from "@/components/ui/Button"
+
+interface Props {
+    date: string;
+}
+
+const ScheduleEditForm = ({ date }: Props) => {
+    const [schedule, setSchedule] = useState<ScheduleType>()
+    const [userDishes, setUserDishes] = useState<UserDishType[]>([])
+    const [isScheduleLoading, setIsScheduleLoading] = useState(true);
+    const [areUserDishesLoading, setAreUserDishesLoading] = useState(true);
+    const { users } = useFetchUsers();
+
+    useEffect(() => {
+        getScheduleForDate(date)
+            .then((sched: ScheduleType) => setSchedule(sched))
+            .finally(() => setIsScheduleLoading(false))
+    }, [date]);
+
+
+    useEffect(() => {
+        listUserDishes()
+            .then((user_dishes: UserDishType[]) => setUserDishes(user_dishes))
+            .finally(() => setAreUserDishesLoading(false))
+    }, []);
+
+    const handleSkipDay = () => {
+        updateScheduleForDate(date, true)
+            .then((schedule: ScheduleType) => {
+                setSchedule(schedule)
+            })
+    }
+
+    const handleUnskipDay = () => {
+        updateScheduleForDate(date, false)
+            .then((schedule: ScheduleType) => {
+                setSchedule(schedule)
+            })
+    }
+
+    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>, userId: number) => {
+        const userDishId = parseInt(e.currentTarget.value);
+
+        if (userDishId === 0) {
+            scheduleUserDish(date, userId, null, true).then(() => window.location.reload());
+            return;
+        }
+
+        scheduleUserDish(date, userId, userDishId).then(() => window.location.reload());
+    }
+
+    if (isScheduleLoading || areUserDishesLoading || !schedule) {
+        return <Spinner/>
+    }
+
+    const scheduleData = scheduleBuilder(schedule, users, userDishes)
+
+    return <div>
+        <div className="flex">
+            <div className="flex-none">
+                <PageTitle>Edit Day</PageTitle>
+            </div>
+            <div className="flex-grow">
+                <SectionTitle className="text-right font-size-24 capitalize font-default">{ transformDate(schedule.date) }</SectionTitle>
+            </div>
+        </div>
+
+        <Hr className="mb-8" />
+
+        {
+            userDishes.length === 0 && <div className="my-2">
+                <div className="text-center w-full text-xl">No dishes found assigned to this user.</div>
+                <div className="text-center w-full mt-2">Go ahead and add some first, or choose to skip the day.</div>
+                <div className="text-center w-full">(dishes ={`>`} edit ={`>`} add user)</div>
+            </div>
+        }
+
+        { schedule.is_skipped
+            ? <Label>Skipped</Label>
+            : (
+                <>
+                    {
+                        scheduleData
+                            .map((scheduleData) => <div className="flex w-full py-2" key={ scheduleData.user.id }>
+                                <div className="flex-none px-2 font-size-18 pt-2">{ scheduleData.user.name }</div>
+                                <div className="flex-grow px-2">
+                                    <select
+                                        className="w-full bg-gray-500 border-2 border-secondary p-2 rounded"
+                                        onChange={ (e) => handleChange(e, scheduleData.user.id) }
+                                        defaultValue={ scheduleData.scheduled_user_dish?.id || 0 }
+                                    >
+                                        <option value="0">Skip day</option>
+                                        {
+                                            userDishes.map((userDish: UserDishType) => <option
+                                                key={ userDish.id }
+                                                value={ userDish.id }
+                                            >
+                                                { userDish.dish.name }
+                                            </option>)
+                                        }
+                                    </select>
+                                </div>
+                            </div>)
+                    }
+                </>
+            )
+        }
+
+        <div className="text-right w-full text-accent-yellow pr-3">Changes are saved automatically</div>
+
+        <Hr className="mt-8" />
+
+        <div className="pt-3 flex gap-4">
+            <Button variant="secondary" appearance="outline" className="flex-grow" href="/" icon={<ChevronLeftIcon />}>
+                Back to schedule
+            </Button>
+            <div className="flex-none w-1/3">{
+                schedule.is_skipped
+                    ? <Button onClick={ handleUnskipDay } variant="accent" appearance="outline" type="button">Unskip Day</Button>
+                    : <Button onClick={ handleSkipDay } variant="accent" appearance="outline" type="button" className="w-full">Skip Day</Button>
+            }</div>
+        </div>
+    </div>
+}
+
+export default ScheduleEditForm

frontend-old/app/components/features/schedule/ScheduleRegenerateButton.tsx

@@ -0,0 +1,35 @@
+import { useState} from "react";
+import Modal from "@/components/ui/Modal";
+import ScheduleRegenerateForm from "@/components/features/schedule/ScheduleRegenerateForm";
+import {ArrowPathIcon} from "@heroicons/react/16/solid";
+
+interface ScheduleRegenerateButtonProps {
+    onModalClose?: () => void;
+}
+
+const ScheduleRegenerateButton = ({ onModalClose }: ScheduleRegenerateButtonProps) => {
+    const [open, setOpen] = useState(false);
+
+    const handleCloseModal = () => {
+        setOpen(false)
+        if (onModalClose) {
+            onModalClose()
+        }
+    }
+
+    const modalChildren = <ScheduleRegenerateForm closeModal={() => handleCloseModal()}/>
+    const buttonChild = <div className="p-0 flex">
+            <ArrowPathIcon fontSize={24} className="h-5 w-5 mt-1 mr-2" color="gray-500" aria-hidden="true" onClick={() => setOpen(true)} />
+            <p>Regenerate</p>
+        </div>
+
+    return <Modal
+        buttonClassName="ml-auto mr-2 py-1"
+        buttonChildren={buttonChild}
+        modalChildren={modalChildren}
+        modalOpen={open}
+        setModalOpen={setOpen}
+    />
+};
+
+export default ScheduleRegenerateButton;

frontend-old/app/components/features/schedule/ScheduleRegenerateForm.tsx

@@ -0,0 +1,78 @@
+import {DialogTitle} from "@headlessui/react";
+import Toggle from "@/components/ui/Toggle";
+import {useEffect, useState} from "react";
+import {generateSchedule} from "@/utils/api/scheduleApi";
+import Alert from "@/components/ui/Alert";
+import SolidButton from "@/components/ui/Buttons/SolidButton";
+
+interface ScheduleRegenerateFormProps {
+    closeModal: () => void;
+}
+
+const ScheduleRegenerateForm = ({closeModal}: ScheduleRegenerateFormProps) => {
+    const [overwrite, setOverwrite] = useState(false);
+    const [error, setError] = useState("");
+
+    useEffect(() => {
+    }, [overwrite]);
+
+    const close = () => {
+        closeModal();
+    }
+
+    const handleToggle = () => {
+        setOverwrite(!overwrite)
+    }
+
+    const handleSubmit = () => {
+        generateSchedule(overwrite)
+            .then(() => close())
+            .catch((err) => setError(err))
+    }
+
+    return <>
+        <div className="bg-gray-500 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+            <div className="sm:flex sm:items-start w-full">
+                <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left ">
+                    <DialogTitle as="h3" className="text-base font-semibold text-accent-blue">
+                        Regenerate Schedule
+                    </DialogTitle>
+                    <div className="mt-5">
+                        <div className="flex">
+                            {
+                                error && <Alert type="error">{ error }</Alert>
+                            }
+                            <div className="flex-1/2 pr-5">
+                                <label htmlFor="overwrite" className="text-accent-blue">Overwrite current schedule</label>
+                            </div>
+                            <div className="flex-1/2">
+                                <Toggle onChange={handleToggle} checked={overwrite} />
+                            </div>
+                        </div>
+                    </div>
+
+
+                </div>
+            </div>
+        </div>
+        <div className="bg-gray-500 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+            <SolidButton
+                type="button"
+                onClick={() => handleSubmit()}
+                className="inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-xs sm:ml-3 sm:w-auto"
+            >
+                Regenerate
+            </SolidButton>
+            <SolidButton
+                type="button"
+                data-autofocus
+                onClick={() => close()}
+                className="mt-3 inline-flex w-full justify-center rounded-md bg-gray-500 px-3 py-2 text-sm font-semibold text-gray-900 ring-1 shadow-xs border-secondary ring-inset  sm:mt-0 sm:w-auto"
+            >
+                Cancel
+            </SolidButton>
+        </div>
+    </>;
+};
+
+export default ScheduleRegenerateForm;

frontend-old/app/components/features/schedule/UpcomingDishes.tsx

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useState } from "react";
+import { DateTime } from "luxon";
+import ScheduleCalendar from "@/components/features/schedule/ScheduleCalendar";
+import PageTitle from "@/components/ui/PageTitle";
+import Spinner from "@/components/Spinner";
+import { ScheduleType } from "@/types/ScheduleType";
+import { listSchedule } from "@/utils/api/scheduleApi";
+import OnboardingBanner from "@/components/features/OnboardingBanner"
+import { useFetchUsers } from "@/hooks/useFetchUsers"
+import { useFetchDishes } from "@/hooks/useFetchDishes"
+import ScheduleRegenerateButton from "@/components/features/schedule/ScheduleRegenerateButton";
+
+const UpcomingDishes = () => {
+    const [schedule, setSchedule] = useState<ScheduleType[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    const today = DateTime.now().toFormat("yyyy-LL-dd");
+
+    const fetchSchedule = useCallback(() => {
+        setIsLoading(true);
+        listSchedule(today)
+            .then((dishes) => setSchedule(dishes))
+            .finally(() => setIsLoading(false));
+    }, [today]);
+
+    useEffect(() => {
+        fetchSchedule();
+    }, [fetchSchedule]);
+
+    const { users, isLoading: areUsersLoading } = useFetchUsers();
+    const { dishes, isLoading: areDishesLoading } = useFetchDishes();
+
+    if (isLoading || areUsersLoading || areDishesLoading) {
+        return <Spinner />;
+    }
+
+    if (users.length === 0 || dishes.length === 0) {
+        return <OnboardingBanner dishes={dishes} users={users} />
+    }
+
+    return (
+        <div className="justify-items-center">
+            <div className="flex w-full py-2">
+                <div className="flex-none w-1/2 text-left pt-1">
+                    <PageTitle>Schedule</PageTitle>
+                </div>
+                <div className="flex-none w-1/2 text-right">
+                    <ScheduleRegenerateButton onModalClose={fetchSchedule} />
+                </div>
+            </div>
+            {
+                !schedule || Object.keys(schedule).length === 0
+                    ? <div className="w-full text-center text-2xl border-white border-2 rounded-xl mt-4">No dishes scheduled</div>
+                    : <ScheduleCalendar schedule={schedule as ScheduleType[]} />
+            }
+        </div>
+    );
+};
+
+export default UpcomingDishes;

frontend-old/app/components/features/schedule/UserDishEditCard.tsx

@@ -0,0 +1,79 @@
+import {FormEvent, useMemo, useState} from "react";
+import {DishType} from "@/types/DishType";
+import {ScheduledUserDishType} from "@/types/ScheduledUserDishType";
+import {updateScheduledUserDish} from "@/utils/api/scheduledUserDishesApi";
+import Alert from "@/components/ui/Alert";
+import classNames from "classnames";
+
+interface Props {
+    scheduledUserDish: ScheduledUserDishType
+    allDishes: DishType[]
+}
+
+const UserDishEditCard = ({ scheduledUserDish, allDishes }: Props) => {
+    const [selectedUserDishId, setSelectedUserDishId] = useState<number>(scheduledUserDish.user_dish ? scheduledUserDish.user_dish.id : 0)
+    const [errorMessage, setErrorMessage] = useState<string>("")
+    const [isSuccess, setIsSuccess] = useState(false);
+
+    const selectStyle = classNames(
+        'p-2', 'rounded', 'w-full', 'background-secondary',
+        'focus:outline-none',
+        'transition-[border-color] ease-out duration-1000', 'border-2', // Keep consistent base styles
+        {
+            'border-green-500': isSuccess,                      // Green border when successful
+            'border-red-500': !isSuccess && errorMessage !== "", // Red border when there's an error
+            'border-secondary': !isSuccess && errorMessage === "", // Default border for neutral state
+        }
+    )
+
+    const handleOnChange = (e: FormEvent<HTMLSelectElement>) => {
+        const userDishId = parseInt(e.currentTarget.value);
+        setSelectedUserDishId(userDishId);
+
+        updateScheduledUserDish(scheduledUserDish.id, userDishId)
+            .then(() => {
+                setIsSuccess(false);
+                setTimeout(() => {
+                    setIsSuccess(true);
+                    setTimeout(() => setIsSuccess(false), 1000);
+                }, 0);
+            })
+            .catch((error) => {
+                setErrorMessage(error); // Log API errors
+            });
+    };
+
+    const filteredDishes = useMemo(() =>
+        allDishes.filter((dish: DishType) =>
+            dish.users.some((user) => user.id === scheduledUserDish.user_dish.user.id)
+        ),
+        [allDishes, scheduledUserDish.user_dish.user.id]
+    )
+
+    return (
+        <div className="m-5 mb-10">
+            <div className="text-2xl">{scheduledUserDish.user_dish.user.name}</div>
+
+            { errorMessage !== "" && <Alert type="error">{ errorMessage }</Alert> }
+
+            <label htmlFor="name" className="block text-sm font-medium mt-2">Dish</label>
+            <select
+                value={selectedUserDishId}
+                onChange={(e) => handleOnChange(e)}
+                className={selectStyle}
+            >
+                <option key={0} value={0}>Skip Dish</option>
+                {
+                    filteredDishes
+                        .map((dish: DishType) =>
+                            <option key={dish.id} value={dish.id}>
+                                {dish.name}
+                            </option>
+                        )
+                }
+            </select>
+        </div>
+    );
+};
+
+export default UserDishEditCard;

frontend-old/app/components/features/schedule/dayCard/DateBadge.tsx

@@ -0,0 +1,27 @@
+import {DateTime} from "luxon";
+import React from "react";
+import classNames from "classnames";
+
+interface Props {
+    date: string
+    className?: string;
+}
+
+const DateBadge = ({ className, date }: Props) => {
+    const isToday = DateTime.fromISO(date).toFormat("yyyy-LL-dd") == DateTime.now().toFormat("yyyy-LL-dd")
+
+    const textStyle = classNames("inline font-bold", {
+        'text-accent-blue': isToday,
+        'text-secondary': !isToday,
+    }, className)
+
+    return (
+        <div className="flex-none w-20 text-center my-auto pb-3 px-3">
+            <div className={classNames(textStyle, 'text-3xl')}>{DateTime.fromISO(date).toFormat("dd")}</div>
+            <br/>
+            <div className={classNames(textStyle, 'text-xl uppercase')}>{DateTime.fromISO(date).toFormat("LLL")}</div>
+        </div>
+    )
+}
+
+export default DateBadge

frontend-old/app/components/features/schedule/dayCard/ScheduleDayCard.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import {UserType} from "~/types/UserType";
+import ScheduleDayCardUserDish from "~/components/features/schedule/dayCard/ScheduleDayCardUserDish";
+import { FilledScheduleType, ScheduleType } from "~/types/ScheduleType";
+import { Link } from "react-router";
+import {PencilSquareIcon} from "@heroicons/react/24/outline";
+import useRoutes from "~/hooks/useRoutes";
+import DateBadge from "~/components/features/schedule/dayCard/DateBadge";
+import { DateTime } from "luxon"
+import classNames from "classnames"
+
+interface Props {
+    schedule: ScheduleType|FilledScheduleType;
+    users: UserType[];
+}
+
+const ScheduleDayCard = ({schedule, users}: Props) => {
+    const routes = useRoutes()
+    const isToday = DateTime.fromISO(schedule.date).toFormat("yyyy-LL-dd") == DateTime.now().toFormat("yyyy-LL-dd")
+
+    const containerStyles = classNames(
+        'w-full bg-gray-500 pt-5 pb-2 rounded-2xl text-xl', {
+            'border-2 text-accent-blue border-accent-blue': isToday,
+        }
+    )
+
+    return (
+        <div className="relative flex pt-3 pr-2 w-full border-1 border-accent">
+            <DateBadge date={schedule.date} />
+
+            <div className={containerStyles}>
+                {
+                    users.map((user) => <ScheduleDayCardUserDish key={user.id} user={user} schedule={schedule}/>)
+                }
+
+                <div className="w-full mt-2 border-t-2 border-background">
+                    <Link
+                        className="w-full flex text-sm pr-3 pt-2"
+                        aria-label="Edit dish"
+                        to={routes.schedule.date.edit(schedule.date)}
+                    >
+                        <PencilSquareIcon className="h-5 w-5 mr-2 ml-auto" /> Edit
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ScheduleDayCard;

frontend-old/app/components/features/schedule/dayCard/ScheduleDayCardUserDish.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { ScheduledUserDishType } from "@/types/ScheduledUserDishType";
+import { UserType } from "@/types/UserType";
+import { FilledScheduleType, ScheduleType } from "@/types/ScheduleType";
+
+interface Props {
+    schedule: ScheduleType|FilledScheduleType;
+    user: UserType;
+}
+
+const ScheduleDayCardUserDish = ({ schedule, user }: Props) => {
+    const getDish = (user: UserType) => {
+        const scheduled_dishes = schedule.scheduled_user_dishes.filter((scheduled_user_dish: ScheduledUserDishType) => (
+            scheduled_user_dish.user_dish?.user.id == user.id
+        ))
+
+        if (scheduled_dishes.length > 0) {
+            return scheduled_dishes[0].user_dish.dish.name
+        }
+
+        return '/'
+    }
+
+    return (
+        <div className="w-full flex background-secondary pb-1 rounded-2xl text-xl" key={ `user-${ user.id }` }>
+            <div className="w-1/3 font-size-16 text-right pr-3">{ user.name } : </div>
+            <div className="w-2/3 font-size-16">{ getDish(user) }</div>
+        </div>
+    );
+};
+
+export default ScheduleDayCardUserDish;

frontend-old/app/components/features/users/EditUserForm.tsx

@@ -0,0 +1,63 @@
+import React, {useState} from "react";
+import { useNavigate } from "react-router";
+import useRoutes from "~/hooks/useRoutes";
+import {updateUser} from "~/utils/api/usersApi";
+import PageTitle from "~/components/ui/PageTitle";
+import { Link } from "react-router";
+import Alert from "~/components/ui/Alert";
+import {UserType} from "~/types/UserType";
+import SolidButton from "~/components/ui/Buttons/SolidButton";
+
+interface Props {
+    user: UserType;
+}
+
+const EditUserForm = ({ user }: Props) => {
+
+    const [name, setName] = useState<string>(user.name);
+    const [error, setError] = useState<string>('');
+    const navigate = useNavigate();
+    const routes = useRoutes();
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        // validateName
+        if (!name.trim()) {
+            setError('Name cannot be empty.');
+            return;
+        }
+
+        updateUser(user, name)
+            .then(() => {
+                navigate(routes.user.index())
+            })
+    }
+
+    return (
+        <div className="w-full flex flex-col items-center">
+            <PageTitle>Create User</PageTitle>
+            <Link to={routes.user.index()} className="mr-auto">Back to users</Link>
+
+            <form onSubmit={handleSubmit} className="w-full max-w-sm mt-4 border-secondary border-2 rounded p-4">
+                {
+                    error != '' && <Alert type="error" className="mt-4">{ error }</Alert>
+                }
+
+                <label htmlFor="name">Name</label>
+                <input type="text"
+                       placeholder=""
+                       name="name"
+                       id="name"
+                       value={name}
+                       onChange={(e) => setName(e.target.value)}
+                       className="w-full p-2 border rounded bg-primary border-secondary bg-gray-600 text-secondary"
+                />
+
+                <SolidButton type="submit" className="mt-4">Update</SolidButton>
+            </form>
+        </div>
+    );
+}
+
+export default EditUserForm;

frontend-old/app/components/layout/AuthGuard.tsx

@@ -0,0 +1,26 @@
+import { useAuth } from '@/context/AuthContext';
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from "react-router"
+
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+    const { isAuthenticated } = useAuth();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const publicRoutes = ['/login', '/register'];
+    const isPublic = publicRoutes.includes(location.pathname);
+
+    useEffect(() => {
+        // Handle redirects based on auth state
+        if (isAuthenticated && isPublic) {
+            // Redirect authenticated users away from public pages
+            navigate('/', { replace: true });
+        } else if (!isAuthenticated && !isPublic) {
+            // Redirect unauthenticated users trying to access protected pages
+            navigate('/login', { replace: true });
+        }
+    }, [isAuthenticated, location.pathname, isPublic, navigate]);
+
+    // Render children for all routes - redirects will happen via useEffect
+    return <>{children}</>;
+}

frontend-old/app/components/layout/Card.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+interface Props {
+    children: React.ReactNode;
+}
+
+const Card = ({ children }: Props) => {
+    return (
+        <div className="w-full border-2 border-secondary p-2 pl-4 my-2 rounded flex">
+            { children }
+        </div>
+    )
+}
+
+export default Card

frontend-old/app/components/layout/NavBar.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router";
+import useRoutes from "~/hooks/useRoutes";
+import MobileDropdownMenu from "~/components/features/navbar/MobileDropdownMenu";
+import { useAuth } from "~/context/AuthContext";
+
+const NavBar = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const routes = useRoutes();
+    const navigate = useNavigate();
+    const {isAuthenticated, logout} = useAuth();
+
+    const handleLogout = (e: React.MouseEvent) => {
+        e.preventDefault();
+        logout();
+        navigate('/login', { replace: true });
+    };
+
+    return (
+        <nav className="border-b-2 border-secondary shadow-sm z-50 mb-8">
+            <div className="relative flex justify-between items-center px-4 lg:px-8 py-2 lg:container lg:mx-auto">
+            {/* Logo */}
+            <Link to={routes.home()} className="pt-2 text-2xl font-syncopate text-primary">
+                DISH PLANNER
+            </Link>
+
+            {/* Hamburger Menu - For Mobile View */}
+            { isAuthenticated && (
+                <>
+                    <button
+                        className="text-primary w-8 h-8 md:hidden flex items-center justify-center"
+                        onClick={() => setIsOpen(!isOpen)} // Toggle menu visibility
+                        aria-label="Toggle menu"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            className="h-6 w-6"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"}
+                            />
+                        </svg>
+                    </button>
+
+                    {/* Desktop Menu */}
+                    <div className="hidden md:flex space-x-6">
+                        <Link to={routes.home()} className="text-accent-blue hover:background-secondary">
+                            Home
+                        </Link>
+                        <Link to={routes.dish.index()} className="text-accent-blue hover:background-secondary">
+                            Dishes
+                        </Link>
+                        <Link to={routes.user.index()} className="text-accent-blue hover:background-secondary">
+                            Users
+                        </Link>
+                        <Link to={routes.schedule.history()} className="text-accent-blue hover:background-secondary">
+                            History
+                        </Link>
+                        <Link to={routes.auth.login()}
+                              onClick={handleLogout}
+                              className="text-primary text-right hover:background-secondary">
+                            Logout
+                        </Link>
+                    </div>
+
+                    <MobileDropdownMenu isOpen={isOpen} setIsOpen={setIsOpen} handleLogout={handleLogout} />
+                </>
+            )}
+            </div>
+        </nav>
+    );
+};
+
+export default NavBar;

frontend-old/app/components/pages/PrivatePage.tsx

@@ -0,0 +1,9 @@
+const PrivatePage = () => {
+    return (
+        <div>
+            private
+        </div>
+    )
+}
+
+export default PrivatePage

frontend-old/app/components/pages/PublicPage.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from "react-router"
+
+const PublicPage = () => {
+    return (
+        <div>
+            <Outlet />
+        </div>
+    )
+}
+
+export default PublicPage

frontend-old/app/components/ui/Alert.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import classNames from "classnames";
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+    type: 'error' | 'warning' | 'info' | 'success';
+}
+
+const Alert = ({ children, className, type }: Props) => {
+    let bgColor = 'bg-blue-200'
+    let fgColor = 'bg-blue-800'
+
+    if (type == 'error') {
+        bgColor = 'bg-red-200'
+        fgColor = 'bg-red-800'
+    } else if (type == 'warning') {
+        bgColor = 'bg-orange-200'
+        fgColor = 'bg-orange-800'
+    } else if (type == 'success') {
+        bgColor = 'border-2 border-green-500'
+        fgColor = 'text-green-500'
+    }
+
+    const styles = classNames(fgColor, bgColor, className, 'rounded')
+
+    return (
+        <div className={styles}>
+            { children}
+        </div>
+    )
+}
+
+export default Alert

frontend-old/app/components/ui/Button.tsx

@@ -0,0 +1,62 @@
+import { Link } from "react-router";
+import React from "react";
+import classNames from "classnames";
+
+interface ButtonProps {
+    appearance?: 'solid' | 'outline' | 'text';
+    children: React.ReactNode;
+    className?: string;
+    href?: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'primary' | 'secondary' | 'accent';
+}
+
+const Button = ({ appearance, children, className, disabled, href, icon, onClick,
+    size = 'medium', type,
+    variant = 'primary'
+}: ButtonProps) => {
+    const styles = classNames(
+        "flex items-center space-x-1",
+        "justify-center font-size-18 py-2 px-4 rounded flex",
+        {
+            'border-2 border-primary background-red text-white': variant === 'primary' && appearance === 'solid',
+            'border-2 border-primary text-primary': variant === 'primary' && appearance === 'outline',
+            'text-primary': variant === 'primary' && appearance === 'text',
+            'border-2 border-secondary text-secondary': variant === 'secondary' && appearance === 'outline',
+            'border-2 border-accent-blue text-accent-blue': variant === 'accent' && appearance === 'outline',
+        },
+        className
+    )
+
+    const iconClassNames = classNames({
+        "h-4 w-4 mr-1": size === "small",
+        "h-5 w-5 mr-1": size === "medium",
+        "h-7 w-7 mr-2": size === "large",
+    });
+
+    const iconElement =
+        React.isValidElement(icon) &&
+        React.cloneElement(icon as React.ReactElement<{ className?: string }>, {
+            className: iconClassNames,
+        });
+
+    if (href !== undefined) {
+        return (
+            <Link to={href} className={styles}>
+                { icon && iconElement}
+                { children}
+            </Link>
+        )
+    }
+
+    return <button onClick={onClick} className={styles} disabled={disabled} type={ type ?? 'button'}>
+        { icon && iconElement}
+        { children }
+    </button>
+}
+
+export default Button

frontend-old/app/components/ui/Buttons/OutlineButton.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import classNames from "classnames";
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+    size?: "small" | "medium" | "large";
+    type: 'submit' | 'button';
+}
+
+const OutlineButton = ({ children, className, disabled = false, onClick, size, type }: Props) => {
+    const style = classNames(
+        "justify-center border-2 border-accent font-size-18 text-accent-blue py-2 px-4 rounded flex",
+        { 'text-xs': size === "small" },
+        className
+    )
+
+    if (onClick === undefined) {
+        onClick = () => {
+        }
+    }
+
+    return (
+        <button
+            type={ type }
+            className={ style }
+            disabled={ disabled }
+            onClick={ onClick }
+        >
+            { children }
+        </button>
+    )
+}
+
+export default OutlineButton

frontend-old/app/components/ui/Buttons/OutlineLinkButton.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import classNames from "classnames";
+import { Link } from "react-router"
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+    href: string;
+    icon?: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    variant?: "primary" | "secondary";
+}
+
+const OutlineLinkButton = ({ children, className, href, icon, size = "medium", variant }: Props) => {
+    const linkClassNames = classNames(
+        "underline font-default pt-3 pb-3 px-4 rounded mb-0 flex",
+        {
+            'text-primary border-primary': variant === "primary",
+            'text-secondary border-secondary': variant === "secondary",
+            'text-accent-blue border-accent': !variant || !["primary", "secondary"].includes(variant),
+        }, {
+            'text-size-14': size === "small",
+            'font-size-18': !size || size === "medium",
+            'text-2xl': size === "large",
+        },
+        className,
+    )
+
+    const iconClassNames = classNames("mt-0.5", {
+        "h-4 w-4 mr-1": size === "small",
+        "h-5 w-5 mr-1": size === "medium", // Default size
+        "h-7 w-7 mr-2": size === "large",
+    });
+
+    const iconElement =
+        React.isValidElement(icon) &&
+        React.cloneElement(icon as React.ReactElement<{ className?: string }>, {
+            className: iconClassNames,
+        });
+
+    return (
+        <Link className={linkClassNames} to={href}>
+            {iconElement}
+            {children}
+        </Link>
+    )
+}
+
+export default OutlineLinkButton

frontend-old/app/components/ui/Buttons/SolidButton.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import classNames from "classnames";
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+    size?: "small" | "medium" | "large";
+    type: 'submit' | 'button';
+}
+
+const SolidButton = ({ children, className, disabled = false, onClick, size, type }: Props) => {
+    const style = classNames(
+        "py-2 px-4 bg-primary text-white text-xl p-2 rounded hover:bg-secondary mb-0",
+        {
+            'text-xs': size === "small",
+            'font-size-18': !size || size === "medium",
+        },
+        className
+    )
+
+    if (onClick === undefined) {
+        onClick = () => {
+        }
+    }
+
+    return (
+        <button
+            className={ style }
+            disabled={ disabled }
+            onClick={ onClick }
+            type={ type }
+        >
+            { children }
+        </button>
+    )
+}
+
+export default SolidButton

frontend-old/app/components/ui/Buttons/SolidLinkButton.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import classNames from "classnames";
+import { Link } from "react-router"
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+    href: string;
+    icon?: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    variant?: "primary" | "secondary";
+}
+
+const SolidLinkButton = ({ children, className, href, icon, size = "medium", variant }: Props) => {
+    const style = classNames(
+        "py-2 px-4 text-xl p-2 rounded hover:bg-secondary mb-0 text-center flex",
+        {
+            'background-red text-white': variant === "primary",
+            'background-secondary border-2 border-secondary': variant === "secondary",
+        },
+        className
+    )
+
+    const iconClassNames = classNames("mt-1", {
+        "h-4 w-4 mr-1": size === "small",
+        "h-5 w-5 mr-1": size === "medium", // Default size
+        "h-7 w-7 mr-2": size === "large",
+    });
+
+    const iconElement =
+        React.isValidElement(icon) &&
+        React.cloneElement(icon as React.ReactElement<{ className?: string }>, {
+            className: iconClassNames,
+        });
+
+    return (
+        <Link className={style} to={href}>
+            <div className="flex-grow"></div>
+            {iconElement}
+            {children}
+            <div className="flex-grow"></div>
+        </Link>
+    )
+}
+
+export default SolidLinkButton

frontend-old/app/components/ui/Description.tsx

@@ -0,0 +1,17 @@
+import classNames from "classnames";
+import React from "react";
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+}
+
+const Description = ({ children, className }: Props) => {
+    const style = classNames("italic font-size-16",
+        className
+    )
+
+    return <p className={style}>{ children }</p>
+}
+
+export default Description

frontend-old/app/components/ui/Hr.tsx

@@ -0,0 +1,13 @@
+import classNames from "classnames"
+
+interface HrProps {
+    className?: string;
+}
+
+const Hr = ({ className }: HrProps) => {
+    const styles = classNames("my-4 border-secondary", className)
+
+    return <hr className={styles}/>
+}
+
+export default Hr

frontend-old/app/components/ui/Label.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface LabelProps {
+    href?: string;
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+
+const Label = ({ href, children, onClick }: LabelProps) => {
+    const styles = "items-center space-x-1 background-accent p-2 rounded"
+
+    if (href !== undefined) {
+        return (
+            <div className={styles}>
+                { children}
+            </div>
+        )
+    }
+
+    return <button className={styles} onClick={onClick}>
+        { children }
+    </button>
+}
+
+export default Label

frontend-old/app/components/ui/Modal.tsx

@@ -0,0 +1,60 @@
+import { type JSX } from "react";
+import classNames from "classnames";
+import Button from "@/components/ui/Button"
+
+interface ModalProps {
+    buttonChildren?: JSX.Element;
+    buttonClassName?: string;
+    buttonLabel?: string;
+    modalChildren: JSX.Element;
+    modalOpen?: boolean;
+    setModalOpen: (open: boolean) => void;
+}
+
+const Modal = ({
+    buttonLabel,
+    buttonClassName,
+    modalChildren,
+    modalOpen,
+    buttonChildren,
+    setModalOpen,
+}: ModalProps) => {
+    const buttonStyles = classNames(buttonClassName, 'anta-regular');
+
+    const closeModal = () => {
+        setModalOpen(false)
+    }
+
+    return (
+        <>
+            <Button variant="primary" appearance="outline" type="button" onClick={() => setModalOpen(true)} className={buttonStyles}>
+                {buttonChildren
+                    ? buttonChildren
+                    : buttonLabel ?? 'button'
+                }
+            </Button>
+
+            {/*<Dialog open={modalOpen} onClose={setModalOpen} className="relative z-10">*/}
+            {/*    <DialogBackdrop*/}
+            {/*        transition*/}
+            {/*        className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"*/}
+            {/*    />*/}
+            {/*    <div className="fixed inset-0 z-10 w-screen overflow-y-auto">*/}
+            {/*        <div*/}
+            {/*            className="flex min-h-full items-start mt-5 justify-center p-4 text-center sm:items-center sm:p-0">*/}
+            {/*            <DialogPanel*/}
+            {/*                transition*/}
+            {/*                className="relative transform overflow-hidden rounded-lg bg-primary text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg data-closed:sm:translate-y-0 data-closed:sm:scale-95"*/}
+            {/*            >*/}
+            {/*                <XMarkIcon width={24} className="absolute top-4 right-4 cursor-pointer"*/}
+            {/*                           onClick={() => closeModal()}/>*/}
+            {/*                {modalChildren}*/}
+            {/*            </DialogPanel>*/}
+            {/*        </div>*/}
+            {/*    </div>*/}
+            {/*</Dialog>*/}
+        </>
+    )
+}
+
+export default Modal;

frontend-old/app/components/ui/PageTitle.tsx

@@ -0,0 +1,17 @@
+import classNames from "classnames";
+
+interface Props {
+    children: string,
+    className?: string,
+}
+
+const PageTitle = ({ children, className }: Props) => {
+    const styles = classNames(
+        'ml-4 text-2xl font-default uppercase w-full text-accent-blue font-bold',
+        className,
+    )
+
+    return <h1 className={styles}>{ children }</h1>
+}
+
+export default PageTitle

frontend-old/app/components/ui/RecurrenceInput.tsx

@@ -0,0 +1,65 @@
+import React, {useState} from "react";
+
+interface Props {
+    value: number;
+    setValue: (value: number) => void;
+}
+
+const RecurrenceInput = ({ value, setValue}: Props) => {
+    const [openInput, setOpenInput] = useState<'category' | 'number'>([7, 365].includes(value) ? 'category' : 'number')
+
+    const toggleInput = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault()
+        setOpenInput(openInput == 'category' ? 'number' : 'category')
+    }
+
+    const toggleButton = () => {
+        return (
+            <button onClick={toggleInput} className={'mt-2'}>
+                {
+                    openInput === 'number'
+                        ? 'or select from presets'
+                        : 'or choose amount of days...'
+                }
+            </button>
+        )
+    }
+
+    const prepareValue = (v: string) => {
+        setValue(parseInt(v))
+    }
+
+    return (
+        <div>
+        <div className={openInput === 'number' ? 'hidden' : ''}>
+                <label htmlFor="recurrence-category" className="block text-sm font-medium">Recurrence</label>
+                <select
+                    id="recurrence-category"
+                    name="recurrence-category"
+                    value={value}
+                    onChange={(e) => prepareValue(e.target.value)}
+                    className="w-full p-2 mb-4 border rounded bg-primary border-secondary bg-gray-600 text-secondary"
+                >
+                    <option value="7">Weekly</option>
+                    <option value="365">Yearly</option>
+                </select>
+                { toggleButton() }
+            </div>
+
+            <div className={openInput === 'number' ? '' : 'hidden'}>
+                <label htmlFor="recurrence-number" className="block text-sm font-medium">Recurrence</label>
+                <input
+                    type="number"
+                    id="recurrence-number"
+                    name="recurrence-number"
+                    value={value}
+                    onChange={(e) => prepareValue(e.target.value)}
+                    className="p-2 border rounded w-full bg-gray-500 border-secondary"
+                />
+                { toggleButton() }
+            </div>
+        </div>
+    )
+}
+
+export default RecurrenceInput

frontend-old/app/components/ui/SectionTitle.tsx

@@ -0,0 +1,16 @@
+import classNames from "classnames";
+
+interface Props {
+    children: string;
+    className?: string;
+}
+
+const SectionTitle = ({ children, className }: Props) => {
+    const style = classNames("block font-size-18 uppercase w-full pl-2 text-accent-blue",
+        className
+    )
+
+    return <h2 className={style}>{ children }</h2>
+}
+
+export default SectionTitle

frontend-old/app/components/ui/Toggle.tsx

@@ -0,0 +1,41 @@
+
+interface ToggleProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+
+const Toggle = ({ checked, onChange }: ToggleProps) => {
+    const handleChange = () => {
+        onChange(checked);
+    }
+
+    return (
+        <label
+            className="flex items-center relative w-max cursor-pointer select-none"
+        >
+            {/* Hidden input */}
+            <input
+                type="checkbox"
+                checked={checked}
+                onChange={() => handleChange()} // Update state using the checkbox itself
+                className="sr-only"
+            />
+
+            {/* Toggle text-accent-blue */}
+            <div
+                className={`relative transition-colors w-14 h-7 rounded-full cursor-pointer ${
+                    checked ? "bg-green-500" : "bg-red-500"
+                }`}
+            >
+                {/* The slider dot */}
+                <span
+                    className={`absolute top-0.5 left-0.5 w-6 h-6 rounded-full transform transition-transform bg-white ${
+                        checked ? "translate-x-7" : "translate-x-0"
+                    }`}
+                ></span>
+            </div>
+        </label>
+    );
+};
+
+export default Toggle;

frontend-old/app/context/AuthContext.tsx

@@ -0,0 +1,41 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+interface AuthContextProps {
+    isAuthenticated: boolean;
+    login: () => void;
+    logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextProps>({
+    isAuthenticated: false,
+    login: () => {},
+    logout: () => {},
+});
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+    // Start with false during SSR, will be updated on client
+    const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+
+    useEffect(() => {
+        // Check token on client after mount
+        const token = localStorage.getItem('token');
+        setIsAuthenticated(!!token);
+    }, []);
+
+    const login = () => {
+        setIsAuthenticated(true);
+    };
+
+    const logout = () => {
+        setIsAuthenticated(false);
+        localStorage.removeItem('token');
+    };
+
+    return (
+        <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
+            {children}
+        </AuthContext.Provider>
+    );
+};
+
+export const useAuth = () => useContext(AuthContext);

frontend-old/app/helpers/Date.ts

@@ -0,0 +1,18 @@
+import { DateTime } from 'luxon';
+
+// Validate if a given string matches the "yyyy-MM-dd" format and is a valid date
+export const isValidDate = (date: string): boolean => {
+    const parsedDate = DateTime.fromFormat(date, 'yyyy-MM-dd');
+    return parsedDate.isValid && parsedDate.toFormat('yyyy-MM-dd') === date;
+};
+
+// Format a date to a specific string format
+export const formatDate = (date: Date | string, format: string = 'yyyy-MM-dd'): string => {
+    const parsedDate = typeof date === 'string' ? DateTime.fromISO(date) : DateTime.fromJSDate(date);
+    return parsedDate.toFormat(format);
+};
+
+// Compare two dates to see if one is before the other
+export const isBefore = (date1: string, date2: string): boolean => {
+    return DateTime.fromISO(date1) < DateTime.fromISO(date2);
+};

frontend-old/app/hooks/useFetchDishes.ts

@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+import { listDishes } from "@/utils/api/dishApi"
+import { DishType } from "@/types/DishType"
+
+export const useFetchDishes = () => {
+    const [dishes, setDishes] = useState<DishType[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchDishes = async () => {
+            listDishes()
+                .then((dishes: DishType[]) => setDishes(dishes))
+                .catch((err) => setError((err as Error).message || "An error occurred."))
+                .finally(() => setIsLoading(false));
+        };
+
+        fetchDishes();
+    }, []);
+
+    return { dishes, isLoading, error };
+};

frontend-old/app/hooks/useFetchUsers.ts

@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+import {UserType} from "@/types/UserType";
+import {listUsers} from "@/utils/api/usersApi";
+
+export const useFetchUsers = () => {
+    const [users, setUsers] = useState<UserType[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchUsers = async () => {
+            listUsers()
+                .then((users: UserType[]) => setUsers(users))
+                .catch((err) => setError((err as Error).message || "An error occurred."))
+                .finally(() => setIsLoading(false));
+        };
+
+        fetchUsers();
+    }, []);
+
+    return { users, isLoading, error };
+};

frontend-old/app/hooks/useRoutes.ts

@@ -0,0 +1,32 @@
+import type { DishType } from "@/types/DishType";
+import type { UserType } from "@/types/UserType";
+
+const useRoutes = () => {
+    return {
+        home: () => "/",
+        auth: {
+            login: () => "/login",
+            register: () => "/register",
+        },
+        dish: {
+            index: () => "/dishes",
+            create: () => "/dishes/create",
+            edit: (dish: DishType) => `/dishes/${ dish.id }/edit`,
+            delete: (dish: DishType) => `/dishes/${ dish.id }/delete`,
+        },
+        schedule: {
+            date: {
+                edit: (date: string) => `/schedule/${ date }/edit`
+            },
+            history: () => "/scheduled-user-dishes/history",
+        },
+        user: {
+            index: () => "/users",
+            create: () => `/users/create`,
+            edit: (user: UserType) => `/users/${ user.id }/edit`,
+            delete: (user: UserType) => `/users/${ user.id }/delete`,
+        }
+    };
+};
+
+export default useRoutes;

frontend-old/app/root.tsx

@@ -0,0 +1,84 @@
+import {
+    isRouteErrorResponse,
+    Links,
+    Meta,
+    Outlet,
+    Scripts,
+    ScrollRestoration,
+} from "react-router";
+
+import type { Route } from "./+types/root";
+import "./app.css";
+import React from "react"
+import { AuthProvider } from "~/context/AuthContext"
+import AuthGuard from "~/components/layout/AuthGuard"
+import NavBar from "~/components/layout/NavBar"
+
+export const links: Route.LinksFunction = () => [
+    { rel: "preconnect", href: "https://fonts.googleapis.com" },
+    {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossOrigin: "anonymous",
+    },
+    {
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+    },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en">
+        <head>
+            <meta charSet="utf-8"/>
+            <meta name="viewport" content="width=device-width, initial-scale=1"/>
+            <Meta/>
+            <Links/>
+        </head>
+        <body className="antialiased w-full min-h-screen bg-gray-600">
+        <AuthProvider>
+            <AuthGuard>
+                <NavBar />
+                <div className="m-5 lg:container lg:mx-auto">{ children }</div>
+            </AuthGuard>
+        </AuthProvider>
+        <ScrollRestoration/>
+        <Scripts/>
+        </body>
+        </html>
+    );
+}
+
+export default function App() {
+    return <Outlet/>;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+    let message = "Oops!";
+    let details = "An unexpected error occurred.";
+    let stack: string | undefined;
+
+    if (isRouteErrorResponse(error)) {
+        message = error.status === 404 ? "404" : "Error";
+        details =
+            error.status === 404
+                ? "The requested page could not be found."
+                : error.statusText || details;
+    } else if (import.meta.env.DEV && error && error instanceof Error) {
+        details = error.message;
+        stack = error.stack;
+    }
+
+    return (
+        <main className="pt-16 p-4 container mx-auto">
+            <h1>{ message }</h1>
+            <p>{ details }</p>
+            { stack && (
+                <pre className="w-full p-4 overflow-x-auto">
+          <code>{ stack }</code>
+        </pre>
+            ) }
+        </main>
+    );
+}

frontend-old/app/routes.ts

@@ -0,0 +1,23 @@
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
+
+export default [
+    index("routes/home.tsx"),
+    route("login", "./components/features/auth/LoginForm.tsx"),
+    route("register", "./components/features/auth/RegisterForm.tsx"),
+
+    // Dishes routes
+    route("dishes", "routes/dishes.tsx"),
+    route("dishes/create", "routes/dishes.create.tsx"),
+    route("dishes/:id/edit", "routes/dishes.$id.edit.tsx"),
+
+    // Users routes
+    route("users", "routes/users.tsx"),
+    route("users/create", "routes/users.create.tsx"),
+    route("users/:id/edit", "routes/users.$id.edit.tsx"),
+
+    // Schedule routes
+    route("schedule/:date/edit", "routes/schedule.$date.edit.tsx"),
+
+    // History route
+    route("scheduled-user-dishes/history", "routes/scheduled-user-dishes.history.tsx"),
+] satisfies RouteConfig;

frontend-old/app/routes/dishes.$id.edit.tsx

@@ -0,0 +1,66 @@
+import type { Route } from "./+types/dishes.$id.edit";
+import { useCallback, useEffect, useState } from "react";
+import PageTitle from "~/components/ui/PageTitle";
+import EditDishForm from "~/components/features/dishes/EditDishForm";
+import { DishType } from "~/types/DishType";
+import Spinner from "~/components/Spinner";
+import { fetchDish } from "~/utils/api/dishApi";
+import SyncUsersForm from "~/components/features/dishes/SyncUsersForm";
+import { ChevronLeftIcon } from "@heroicons/react/16/solid";
+import useRoutes from "~/hooks/useRoutes";
+import OutlineLinkButton from "~/components/ui/Buttons/OutlineLinkButton";
+import Hr from "~/components/ui/Hr";
+import { useParams } from "react-router";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Dish Planner - Edit Dish" },
+    { name: "description", content: "Edit dish details" },
+  ];
+}
+
+export default function EditDishPage() {
+  const params = useParams();
+  const id = Number(params.id);
+  const [dish, setDish] = useState<DishType | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const routes = useRoutes();
+
+  const loadDish = useCallback(async () => {
+    try {
+      const fetchedDish = await fetchDish(id);
+      setDish(fetchedDish);
+    } catch (error) {
+      console.error("Error fetching dish:", error);
+      throw new Error("No token found in localStorage.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    loadDish();
+  }, [loadDish]);
+
+  if (isLoading || dish === null) {
+    return <Spinner />;
+  }
+
+  return (
+    <div>
+      <div className="flex mb-3">
+        <PageTitle>Edit Dish</PageTitle>
+        <OutlineLinkButton href={routes.dish.index()}>
+          <ChevronLeftIcon className="w-5 h-5 mr-1" />
+          <p className="text-sm">BACK</p>
+        </OutlineLinkButton>
+      </div>
+
+      <EditDishForm dish={dish} />
+
+      <Hr className="mt-8" />
+
+      <SyncUsersForm dish={dish} reloadDish={loadDish} />
+    </div>
+  );
+}

frontend-old/app/routes/dishes.create.tsx

@@ -0,0 +1,13 @@
+import type { Route } from "./+types/dishes.create";
+import CreateDishForm from "~/components/features/dishes/CreateDishForm";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Dish Planner - Create Dish" },
+    { name: "description", content: "Create a new dish" },
+  ];
+}
+
+export default function CreateDishPage() {
+  return <CreateDishForm />;
+}

frontend-old/app/routes/dishes.tsx

@@ -0,0 +1,64 @@
+import type { Route } from "./+types/dishes";
+import PageTitle from "~/components/ui/PageTitle";
+import { DishType } from "~/types/DishType";
+import Dish from "~/components/features/dishes/Dish";
+import { PlusIcon } from "@heroicons/react/24/solid";
+import { useEffect, useState } from "react";
+import useRoutes from "~/hooks/useRoutes";
+import { listDishes } from "~/utils/api/dishApi";
+import Button from "~/components/ui/Button";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Dish Planner - Dishes" },
+    { name: "description", content: "Manage your dishes" },
+  ];
+}
+
+export default function DishesIndexPage() {
+  const routes = useRoutes();
+
+  const [dishes, setDishes] = useState<DishType[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    listDishes()
+      .then((dishes: DishType[]) => setDishes(dishes))
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) return <p>Loading...</p>;
+
+  if (!dishes) {
+    return <h1>Loading...</h1>;
+  }
+
+  return (
+    <>
+      <div className="flex mb-3">
+        <div className="flex-none mr-4 pt-1">
+          <PageTitle>Dishes</PageTitle>
+        </div>
+        <div className="flex-grow flex justify-end">
+          <Button
+            href={routes.dish.create()}
+            icon={<PlusIcon />}
+            size="small"
+            variant="primary"
+            appearance="text"
+          >
+            Add Dish
+          </Button>
+        </div>
+      </div>
+
+      {dishes.length === 0 ? (
+        <h1 className="text-secondary">No dishes found :(</h1>
+      ) : (
+        dishes.map((dish: DishType, index: number) => (
+          <Dish key={index} dish={dish} />
+        ))
+      )}
+    </>
+  );
+}

frontend-old/app/routes/home.tsx

@@ -0,0 +1,13 @@
+import type { Route } from "./+types/home";
+import UpcomingDishes from "~/components/features/schedule/UpcomingDishes";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Dish Planner - Schedule" },
+    { name: "description", content: "View and manage your upcoming dish schedule" },
+  ];
+}
+
+export default function Home() {
+  return <UpcomingDishes />;
+}

frontend-old/app/routes/schedule.$date.edit.tsx

@@ -0,0 +1,19 @@
+import type { Route } from "./+types/schedule.$date.edit";
+import ScheduleEditForm from "~/components/features/schedule/ScheduleEditForm";
+import { useParams } from "react-router";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Dish Planner - Edit Schedule" },
+    { name: "description", content: "Edit schedule for a specific date" },
+  ];
+}
+
+const ScheduleEditPage = () => {
+  const params = useParams();
+  const date = params.date as string;
+
+  return <ScheduleEditForm date={date} />;
+};
+
+export default ScheduleEditPage;

frontend-old/app/routes/scheduled-user-dishes.history.tsx

@@ -0,0 +1,13 @@
+import type { Route } from "./+types/scheduled-user-dishes.history";
+import HistoricalDishes from "~/components/features/schedule/HistoricalDishes";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Dish Planner - History" },
+    { name: "description", content: "View historical dishes" },
+  ];
+}
+
+export default function HistoryPage() {
+  return <HistoricalDishes />;
+}

frontend-old/app/routes/users.$id.edit.tsx

@@ -0,0 +1,32 @@
+import type { Route } from "./+types/users.$id.edit";
+import { useEffect, useState } from "react";
+import { UserType } from "~/types/UserType";
+import { showUser } from "~/utils/api/usersApi";
+import Spinner from "~/components/Spinner";
+import EditUserForm from "~/components/features/users/EditUserForm";
+import { useParams } from "react-router";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Dish Planner - Edit User" },
+    { name: "description", content: "Edit user details" },
+  ];
+}
+
+const UpdateUsersPage = () => {
+  const params = useParams();
+  const id = Number(params.id);
+  const [user, setUser] = useState<UserType | null>(null);
+
+  useEffect(() => {
+    showUser(id).then((user: UserType) => setUser(user));
+  }, [id]);
+
+  if (!user) {
+    return <Spinner />;
+  }
+
+  return <EditUserForm user={user} />;
+};
+
+export default UpdateUsersPage;

frontend-old/app/routes/users.create.tsx

@@ -0,0 +1,74 @@
+import type { Route } from "./+types/users.create";
+import PageTitle from "~/components/ui/PageTitle";
+import useRoutes from "~/hooks/useRoutes";
+import { useNavigate } from "react-router";
+import { useState } from "react";
+import Alert from "~/components/ui/Alert";
+import { createUser } from "~/utils/api/usersApi";
+import { Link } from "react-router";
+import SolidButton from "~/components/ui/Buttons/SolidButton";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Dish Planner - Create User" },
+    { name: "description", content: "Create a new user" },
+  ];
+}
+
+const CreateUsersPage = () => {
+  const [name, setName] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const navigate = useNavigate();
+  const routes = useRoutes();
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!name.trim()) {
+      setError("Name cannot be empty.");
+      return;
+    }
+
+    createUser(name).then(() => {
+      navigate(routes.user.index());
+    });
+  };
+
+  return (
+    <div className="w-full flex flex-col items-center">
+      <PageTitle>Create User</PageTitle>
+      <Link to={routes.user.index()} className="py-2 mr-auto">
+        Back to users
+      </Link>
+
+      <form
+        onSubmit={handleSubmit}
+        className="w-full max-w-sm mt-4 border-secondary border-2 rounded p-4"
+      >
+        {error != "" && (
+          <Alert type="error" className="mt-4">
+            {error}
+          </Alert>
+        )}
+
+        <label htmlFor="name">Name</label>
+        <input
+          type="text"
+          placeholder=""
+          name="name"
+          id="name"
+          autoFocus={true}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full p-2 border rounded bg-primary border-secondary bg-gray-600 text-secondary"
+        />
+
+        <SolidButton type="submit" className="mt-4">
+          Create
+        </SolidButton>
+      </form>
+    </div>
+  );
+};
+
+export default CreateUsersPage;

frontend-old/app/routes/users.tsx

@@ -0,0 +1,77 @@
+import type { Route } from "./+types/users";
+import PageTitle from "~/components/ui/PageTitle";
+import { useFetchUsers } from "~/hooks/useFetchUsers";
+import Spinner from "~/components/Spinner";
+import useRoutes from "~/hooks/useRoutes";
+import { Link } from "react-router";
+import { PencilIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
+import React from "react";
+import { deleteUser } from "~/utils/api/usersApi";
+import { UserType } from "~/types/UserType";
+import Card from "~/components/layout/Card";
+import OutlineLinkButton from "~/components/ui/Buttons/OutlineLinkButton";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Dish Planner - Users" },
+    { name: "description", content: "Manage your users" },
+  ];
+}
+
+const UsersPage = () => {
+  const { users, isLoading } = useFetchUsers();
+  const routes = useRoutes();
+
+  const handleDelete = (user: UserType) => {
+    deleteUser(user).then(() => window.location.reload());
+  };
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  const usersList = () => {
+    return users.map((user) => (
+      <Card key={user.id}>
+        <div className="flex-grow text-xl font-bold pt-1">{user.name}</div>
+        <div className="flex-none flex gap-2">
+          <div className="flex-none w-8">
+            <Link to={routes.user.edit(user)}>
+              <div className="border border-foreground p-2 rounded">
+                <PencilIcon width="14" />
+              </div>
+            </Link>
+          </div>
+          <div className="flex-none w-8">
+            <Link to="#" onClick={() => handleDelete(user)}>
+              <div className="border border-red-500 p-2 rounded">
+                <TrashIcon width="14" className="text-red-500" />
+              </div>
+            </Link>
+          </div>
+        </div>
+      </Card>
+    ));
+  };
+
+  return (
+    <div className="w-full">
+      <div className="flex w-full">
+        <div className="w-1/2 flex-none pt-2">
+          <PageTitle>Users</PageTitle>
+        </div>
+
+        <div className="flex-grow flex justify-end">
+          <OutlineLinkButton href={routes.user.create()} variant="primary">
+            <PlusIcon className="w-4 h-4 mt-1 mr-1" />
+            <p>Add User</p>
+          </OutlineLinkButton>
+        </div>
+      </div>
+
+      {users && users.length > 0 ? usersList() : <div>No users</div>}
+    </div>
+  );
+};
+
+export default UsersPage;

frontend-old/app/styles/base/globals.css

@@ -0,0 +1,19 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+
+.toggle-input:checked {
+  background-color: #22c55e; /* bg-green-500 */
+}
+
+.toggle-input:checked ~ span:last-child {
+  --tw-translate-x: 1.75rem; /* translate-x-7 */
+}

frontend-old/app/styles/components/buttons.css

@@ -0,0 +1,42 @@
+.button-primary-solid {
+    background-color: var(--color-primary);
+    color: var(--color-secondary-200);
+    border: 1px solid var(--color-primary);
+    text-transform: uppercase;
+    font-family: "Anta", serif;
+    font-style: normal;
+    font-size: 1.1rem;
+    font-weight: 600;
+    padding: 4px 16px 2px 16px;
+}
+.button-primary-outline {
+    background-color: var(--color-background);
+    color: var(--color-primary);
+    border: 1px solid var(--color-primary);
+    text-transform: uppercase;
+    font-family: "Anta", serif;
+    font-style: normal;
+    font-size: 1.1rem;
+    font-weight: 600;
+    padding: 4px 16px 2px 16px;
+}
+
+.button-secondary-solid {
+    background-color: var(--color-secondary);
+    color: var(--color-primary);
+    border: 1px solid var(--color-secondary);
+}
+
+.button-accent-solid {
+    background-color: var(--color-accent-blue);
+    color: var(--color-secondary-900);
+    border: 1px solid var(--color-accent-blue);
+}
+.button-accent-outline {
+    background-color: var(--color-background);
+    color: var(--color-accent-blue);
+    border: 1px solid var(--color-accent-blue);
+}
+.button-accent-outline:hover {
+    background-color: var(--color-background-400);
+}

frontend-old/app/styles/main.css

@@ -0,0 +1,6 @@
+@import "./theme/borders.css";
+@import "./theme/fonts.css";
+@import "./components/buttons.css";
+
+@import "./base/globals.css";
+@import "./theme/colors.css";

frontend-old/app/styles/theme/borders.css

@@ -0,0 +1,14 @@
+.border-primary {
+    border-color: var(--color-primary);
+}
+
+.border-secondary {
+    border-color: var(--color-secondary);
+}
+
+.border-accent-blue {
+    border-color: var(--color-accent-blue);
+}
+.border-accent-800 {
+    border-color: var(--color-accent-blue-800);
+}

frontend-old/app/styles/theme/colors.css

@@ -0,0 +1,10 @@
+@import './colors/root.css';
+@import './colors/background.css';
+@import './colors/border.css';
+@import './colors/text.css';
+
+body {
+    color: var(--color-secondary) !important;
+    background: var(--color-gray-600) !important;
+}
+