Compare commits
13 commits
4b31f3d315
...
e335c64ec9
| Author | SHA1 | Date | |
|---|---|---|---|
| e335c64ec9 | |||
| e1f701de0a | |||
| 9a4b8db3c7 | |||
| 143c8e351c | |||
| 561750dc83 | |||
| 5735b9ba95 | |||
| 1d3d05845c | |||
| 6c8502f2d1 | |||
| fa3cb218a9 | |||
| ea6f7ebf29 | |||
| 1de78bdce3 | |||
| f78d97dae5 | |||
| c80891b25e |
244 changed files with 312 additions and 16837 deletions
|
|
@ -47,9 +47,6 @@ Dockerfile*
|
|||
docker-compose*.yml
|
||||
.dockerignore
|
||||
|
||||
# Frontend old
|
||||
frontend-old/
|
||||
|
||||
# Build artifacts
|
||||
public/build/
|
||||
public/hot
|
||||
|
|
|
|||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -24,3 +24,4 @@ yarn-error.log
|
|||
/.vscode
|
||||
/.zed
|
||||
/.vite
|
||||
/.codewhale
|
||||
|
|
|
|||
26
CHANGELOG.md
Normal file
26
CHANGELOG.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
# 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.
|
||||
141
LICENSE.md
141
LICENSE.md
|
|
@ -1,5 +1,5 @@
|
|||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 3, 29 June 2007
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
|
|
@ -7,17 +7,15 @@
|
|||
|
||||
Preamble
|
||||
|
||||
The GNU General Public License is a free, copyleft license for
|
||||
software and other kinds of works.
|
||||
The GNU Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
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,
|
||||
the GNU General Public License is intended to guarantee your freedom to
|
||||
our General Public Licenses are 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. 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.
|
||||
software for all its users.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
|
|
@ -26,44 +24,34 @@
|
|||
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.
|
||||
|
||||
To protect your rights, we need to prevent others from denying you
|
||||
these rights or asking you to surrender the rights. Therefore, you have
|
||||
certain responsibilities if you distribute copies of the software, or if
|
||||
you modify it: responsibilities to respect the freedom of others.
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
For example, if you distribute copies of such a program, whether
|
||||
gratis or for a fee, you must pass on to the recipients the same
|
||||
freedoms that you received. You must make sure that they, too, receive
|
||||
or can get the source code. And you must show them these terms so they
|
||||
know their rights.
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
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.
|
||||
|
||||
Developers that use the GNU GPL protect your rights with two steps:
|
||||
(1) assert copyright on the software, and (2) offer you this License
|
||||
giving you legal permission to copy, distribute and/or modify it.
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
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.
|
||||
|
||||
For the developers' and authors' protection, the GPL clearly explains
|
||||
that there is no warranty for this free software. For both users' and
|
||||
authors' sake, the GPL requires that modified versions be marked as
|
||||
changed, so that their problems will not be attributed erroneously to
|
||||
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.
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
|
@ -72,7 +60,7 @@
|
|||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU General Public License.
|
||||
"This License" refers to version 3 of the GNU Affero General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
|
@ -549,35 +537,45 @@
|
|||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Use with the GNU Affero General Public License.
|
||||
13. Remote Network Interaction; Use with the GNU 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 Affero General Public License into a single
|
||||
under version 3 of the GNU 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 special requirements of the GNU Affero General Public License,
|
||||
section 13, concerning interaction through a network will apply to the
|
||||
combination as such.
|
||||
but the work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU General Public License from time to time. Such new versions will
|
||||
be similar in spirit to the present version, but may differ in detail to
|
||||
the GNU Affero General Public License from time to time. Such new versions
|
||||
will 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 General
|
||||
Program specifies that a certain numbered version of the GNU Affero 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 General Public License, you may choose any version ever published
|
||||
GNU Affero 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 General Public License can be used, that proxy's
|
||||
versions of the GNU Affero 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.
|
||||
|
||||
|
|
@ -635,40 +633,29 @@
|
|||
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 General Public License as published by
|
||||
it under the terms of the GNU Affero 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 General Public License for more details.
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
You should have received a copy of the GNU Affero 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 the program does terminal interaction, make it output a short
|
||||
notice like this when it starts in an interactive mode:
|
||||
|
||||
<program> Copyright (C) <year> <name of author>
|
||||
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
||||
This is free software, and you are welcome to redistribute it
|
||||
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".
|
||||
If your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
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
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
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 GPL, see
|
||||
For more information on this, and how to apply and follow the GNU AGPL, 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>.
|
||||
|
|
|
|||
123
Makefile
123
Makefile
|
|
@ -1,123 +0,0 @@
|
|||
# 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."
|
||||
345
README.md
345
README.md
|
|
@ -11,285 +11,118 @@ ## ✨ Features
|
|||
- **Dark theme UI** - Modern interface with purple/pink accents
|
||||
- **Single container deployment** - Simplified hosting with FrankenPHP
|
||||
|
||||
## 🚀 Quick Start
|
||||
## 🚀 Self-hosting
|
||||
|
||||
### Prerequisites
|
||||
- Docker and Docker Compose
|
||||
- Make (optional, for convenience commands)
|
||||
The production image is available at `forge.lvl0.xyz/lvl0/dishplanner:latest`.
|
||||
|
||||
### First Time Setup
|
||||
### docker-compose.yml
|
||||
|
||||
```bash
|
||||
# Clone the repository
|
||||
git clone https://github.com/yourusername/dish-planner.git
|
||||
cd dish-planner
|
||||
```yaml
|
||||
services:
|
||||
app:
|
||||
image: forge.lvl0.xyz/lvl0/dishplanner:latest
|
||||
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
|
||||
|
||||
# Quick install with Make
|
||||
make install
|
||||
db:
|
||||
image: mariadb:11
|
||||
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
|
||||
|
||||
# Or manually:
|
||||
cp .env.example .env
|
||||
docker compose build
|
||||
docker compose up -d
|
||||
docker compose exec app php artisan key:generate
|
||||
docker compose exec app php artisan migrate
|
||||
volumes:
|
||||
db_data:
|
||||
app_storage:
|
||||
```
|
||||
|
||||
The application will be available at **http://localhost:8000**
|
||||
### Environment Variables
|
||||
|
||||
| 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
|
||||
|
||||
### Starting the Development Environment
|
||||
### NixOS / Nix
|
||||
|
||||
```bash
|
||||
# Start all services
|
||||
make dev
|
||||
|
||||
# Or with Docker Compose directly
|
||||
docker compose up -d
|
||||
git clone https://forge.lvl0.xyz/lvl0/dishplanner.git
|
||||
cd dishplanner
|
||||
nix-shell
|
||||
```
|
||||
|
||||
**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)
|
||||
The shell will display available commands and optionally start the containers for you.
|
||||
|
||||
### Common Development Commands
|
||||
#### Available Commands
|
||||
|
||||
```bash
|
||||
# View logs
|
||||
make logs # App logs
|
||||
make logs-db # Database logs
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `dev-up` | Start development environment |
|
||||
| `dev-down` | Stop development environment |
|
||||
| `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 |
|
||||
|
||||
# Laravel commands
|
||||
make artisan cmd="migrate" # Run artisan commands
|
||||
make tinker # Start Laravel tinker
|
||||
make test # Run tests
|
||||
#### Services
|
||||
|
||||
# Database
|
||||
make migrate # Run migrations
|
||||
make seed # Seed database
|
||||
make fresh # Fresh migrate with seeds
|
||||
| Service | URL |
|
||||
|---------|-----|
|
||||
| App | http://localhost:8000 |
|
||||
| Vite | http://localhost:5173 |
|
||||
| Mailhog | http://localhost:8025 |
|
||||
| MariaDB | localhost:3306 |
|
||||
|
||||
# Testing
|
||||
make test # Run tests
|
||||
composer test:coverage-html # Run tests with coverage report (generates coverage/index.html)
|
||||
### 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
|
||||
```
|
||||
Contributions welcome for development setup instructions on other platforms.
|
||||
|
||||
## 📄 License
|
||||
|
||||
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
|
||||
This project is open-source software licensed under the [AGPL-3.0 license](LICENSE.md).
|
||||
|
||||
## 📞 Support
|
||||
|
||||
For issues and questions, please use the [GitHub Issues](https://github.com/yourusername/dish-planner/issues) page.
|
||||
|
||||
---
|
||||
|
||||
Built with ❤️ using Laravel and Livewire
|
||||
For issues and questions, please use [Forgejo Issues](https://forge.lvl0.xyz/lvl0/dishplanner/issues).
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<?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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
<?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'));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<?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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<?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);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,21 +2,23 @@
|
|||
|
||||
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 Billable, HasApiTokens, HasFactory, Notifiable;
|
||||
use HasApiTokens, HasFactory, Notifiable;
|
||||
|
||||
protected $fillable = [
|
||||
'name', 'email', 'password',
|
||||
|
|
@ -34,4 +36,9 @@ public function schedules(): HasMany
|
|||
{
|
||||
return $this->hasMany(Schedule::class);
|
||||
}
|
||||
|
||||
public function users(): HasMany
|
||||
{
|
||||
return $this->hasMany(User::class);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,10 @@
|
|||
|
||||
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;
|
||||
|
|
@ -47,8 +45,6 @@ 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);
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
<?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();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
#!/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"
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
#!/bin/bash
|
||||
docker build -t 192.168.178.152:50114/dishplanner-backend .
|
||||
docker push 192.168.178.152:50114/dishplanner-backend
|
||||
docker build -t forge.lvl0.xyz/lvl0/dishplanner:latest .
|
||||
docker push forge.lvl0.xyz/lvl0/dishplanner:latest
|
||||
|
|
|
|||
159
bin/start-dev
159
bin/start-dev
|
|
@ -1,159 +0,0 @@
|
|||
#!/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"
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
echo "🔄 Pulling latest backend changes..."
|
||||
echo "🔄 Pulling latest 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 "✅ Backend update complete!"
|
||||
echo "✅ Update complete!"
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
<?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;
|
||||
|
|
@ -19,24 +16,10 @@
|
|||
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) {
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
#!/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"
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
#!/bin/bash
|
||||
docker build -t 192.168.178.152:50114/dishplanner-backend .
|
||||
docker push 192.168.178.152:50114/dishplanner-backend
|
||||
|
|
@ -7,10 +7,9 @@
|
|||
"laravel",
|
||||
"framework"
|
||||
],
|
||||
"license": "MIT",
|
||||
"license": "AGPL-3.0-only",
|
||||
"require": {
|
||||
"php": "^8.2",
|
||||
"laravel/cashier": "^16.1",
|
||||
"laravel/framework": "^12.9.2",
|
||||
"laravel/sanctum": "^4.0",
|
||||
"laravel/tinker": "^2.9",
|
||||
|
|
@ -27,9 +26,6 @@
|
|||
"phpunit/phpunit": "^11.0.1"
|
||||
},
|
||||
"autoload": {
|
||||
"files": [
|
||||
"app/helpers.php"
|
||||
],
|
||||
"psr-4": {
|
||||
"App\\": "app/",
|
||||
"DishPlanner\\": "src/DishPlanner/",
|
||||
|
|
|
|||
|
|
@ -28,18 +28,6 @@
|
|||
|
||||
'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
|
||||
|
|
|
|||
|
|
@ -35,14 +35,4 @@
|
|||
],
|
||||
],
|
||||
|
||||
'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'),
|
||||
],
|
||||
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
<?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',
|
||||
]);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<?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');
|
||||
}
|
||||
};
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<?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');
|
||||
}
|
||||
};
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<?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');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<?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');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
# Production Docker Compose
|
||||
services:
|
||||
app:
|
||||
image: codeberg.org/lvl0/dish-planner:latest
|
||||
image: forge.lvl0.xyz/lvl0/dishplanner:latest
|
||||
container_name: dishplanner_app
|
||||
restart: always
|
||||
ports:
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
.react-router
|
||||
build
|
||||
node_modules
|
||||
README.md
|
||||
6
frontend-old/.gitignore
vendored
6
frontend-old/.gitignore
vendored
|
|
@ -1,6 +0,0 @@
|
|||
.DS_Store
|
||||
/node_modules/
|
||||
|
||||
# React Router
|
||||
/.react-router/
|
||||
/build/
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
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"]
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
# Welcome to React Router!
|
||||
|
||||
A modern, production-ready template for building full-stack React applications using React Router.
|
||||
|
||||
[](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.
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
|
||||
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
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
"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
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
"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
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
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}</>;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
const PrivatePage = () => {
|
||||
return (
|
||||
<div>
|
||||
private
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PrivatePage
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { Outlet } from "react-router"
|
||||
|
||||
const PublicPage = () => {
|
||||
return (
|
||||
<div>
|
||||
<Outlet />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PublicPage
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
|
||||
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;
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
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);
|
||||
};
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
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 };
|
||||
};
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
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 };
|
||||
};
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
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 />;
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
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} />
|
||||
))
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
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 />;
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
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 />;
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
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;
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
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 */
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
.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);
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@import "./theme/borders.css";
|
||||
@import "./theme/fonts.css";
|
||||
@import "./components/buttons.css";
|
||||
|
||||
@import "./base/globals.css";
|
||||
@import "./theme/colors.css";
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
.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);
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue