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
|
docker-compose*.yml
|
||||||
.dockerignore
|
.dockerignore
|
||||||
|
|
||||||
# Frontend old
|
|
||||||
frontend-old/
|
|
||||||
|
|
||||||
# Build artifacts
|
# Build artifacts
|
||||||
public/build/
|
public/build/
|
||||||
public/hot
|
public/hot
|
||||||
|
|
|
||||||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -24,3 +24,4 @@ yarn-error.log
|
||||||
/.vscode
|
/.vscode
|
||||||
/.zed
|
/.zed
|
||||||
/.vite
|
/.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
|
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||||
Version 3, 29 June 2007
|
Version 3, 19 November 2007
|
||||||
|
|
||||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||||
Everyone is permitted to copy and distribute verbatim copies
|
Everyone is permitted to copy and distribute verbatim copies
|
||||||
|
|
@ -7,17 +7,15 @@
|
||||||
|
|
||||||
Preamble
|
Preamble
|
||||||
|
|
||||||
The GNU General Public License is a free, copyleft license for
|
The GNU Affero General Public License is a free, copyleft license for
|
||||||
software and other kinds of works.
|
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
|
The licenses for most software and other practical works are designed
|
||||||
to take away your freedom to share and change the works. By contrast,
|
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
|
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
|
software for all its users.
|
||||||
GNU General Public License for most of our software; it applies also to
|
|
||||||
any other work released this way by its authors. You can apply it to
|
|
||||||
your programs, too.
|
|
||||||
|
|
||||||
When we speak of free software, we are referring to freedom, not
|
When we speak of free software, we are referring to freedom, not
|
||||||
price. Our General Public Licenses are designed to make sure that you
|
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
|
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.
|
free programs, and that you know you can do these things.
|
||||||
|
|
||||||
To protect your rights, we need to prevent others from denying you
|
Developers that use our General Public Licenses protect your rights
|
||||||
these rights or asking you to surrender the rights. Therefore, you have
|
with two steps: (1) assert copyright on the software, and (2) offer
|
||||||
certain responsibilities if you distribute copies of the software, or if
|
you this License which gives you legal permission to copy, distribute
|
||||||
you modify it: responsibilities to respect the freedom of others.
|
and/or modify the software.
|
||||||
|
|
||||||
For example, if you distribute copies of such a program, whether
|
A secondary benefit of defending all users' freedom is that
|
||||||
gratis or for a fee, you must pass on to the recipients the same
|
improvements made in alternate versions of the program, if they
|
||||||
freedoms that you received. You must make sure that they, too, receive
|
receive widespread use, become available for other developers to
|
||||||
or can get the source code. And you must show them these terms so they
|
incorporate. Many developers of free software are heartened and
|
||||||
know their rights.
|
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:
|
The GNU Affero General Public License is designed specifically to
|
||||||
(1) assert copyright on the software, and (2) offer you this License
|
ensure that, in such cases, the modified source code becomes available
|
||||||
giving you legal permission to copy, distribute and/or modify it.
|
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
|
An older license, called the Affero General Public License and
|
||||||
that there is no warranty for this free software. For both users' and
|
published by Affero, was designed to accomplish similar goals. This is
|
||||||
authors' sake, the GPL requires that modified versions be marked as
|
a different license, not a version of the Affero GPL, but Affero has
|
||||||
changed, so that their problems will not be attributed erroneously to
|
released a new version of the Affero GPL which permits relicensing under
|
||||||
authors of previous versions.
|
this license.
|
||||||
|
|
||||||
Some devices are designed to deny users access to install or run
|
|
||||||
modified versions of the software inside them, although the manufacturer
|
|
||||||
can do so. This is fundamentally incompatible with the aim of
|
|
||||||
protecting users' freedom to change the software. The systematic
|
|
||||||
pattern of such abuse occurs in the area of products for individuals to
|
|
||||||
use, which is precisely where it is most unacceptable. Therefore, we
|
|
||||||
have designed this version of the GPL to prohibit the practice for those
|
|
||||||
products. If such problems arise substantially in other domains, we
|
|
||||||
stand ready to extend this provision to those domains in future versions
|
|
||||||
of the GPL, as needed to protect the freedom of users.
|
|
||||||
|
|
||||||
Finally, every program is threatened constantly by software patents.
|
|
||||||
States should not allow patents to restrict development and use of
|
|
||||||
software on general-purpose computers, but in those that do, we wish to
|
|
||||||
avoid the special danger that patents applied to a free program could
|
|
||||||
make it effectively proprietary. To prevent this, the GPL assures that
|
|
||||||
patents cannot be used to render the program non-free.
|
|
||||||
|
|
||||||
The precise terms and conditions for copying, distribution and
|
The precise terms and conditions for copying, distribution and
|
||||||
modification follow.
|
modification follow.
|
||||||
|
|
@ -72,7 +60,7 @@
|
||||||
|
|
||||||
0. Definitions.
|
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
|
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||||
works, such as semiconductor masks.
|
works, such as semiconductor masks.
|
||||||
|
|
@ -549,35 +537,45 @@
|
||||||
the Program, the only way you could satisfy both those terms and this
|
the Program, the only way you could satisfy both those terms and this
|
||||||
License would be to refrain entirely from conveying the Program.
|
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
|
Notwithstanding any other provision of this License, you have
|
||||||
permission to link or combine any covered work with a work licensed
|
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
|
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,
|
License will continue to apply to the part which is the covered work,
|
||||||
but the special requirements of the GNU Affero General Public License,
|
but the work with which it is combined will remain governed by version
|
||||||
section 13, concerning interaction through a network will apply to the
|
3 of the GNU General Public License.
|
||||||
combination as such.
|
|
||||||
|
|
||||||
14. Revised Versions of this License.
|
14. Revised Versions of this License.
|
||||||
|
|
||||||
The Free Software Foundation may publish revised and/or new versions of
|
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
|
the GNU Affero General Public License from time to time. Such new versions
|
||||||
be similar in spirit to the present version, but may differ in detail to
|
will be similar in spirit to the present version, but may differ in detail to
|
||||||
address new problems or concerns.
|
address new problems or concerns.
|
||||||
|
|
||||||
Each version is given a distinguishing version number. If the
|
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
|
Public License "or any later version" applies to it, you have the
|
||||||
option of following the terms and conditions either of that numbered
|
option of following the terms and conditions either of that numbered
|
||||||
version or of any later version published by the Free Software
|
version or of any later version published by the Free Software
|
||||||
Foundation. If the Program does not specify a version number of the
|
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.
|
by the Free Software Foundation.
|
||||||
|
|
||||||
If the Program specifies that a proxy can decide which future
|
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
|
public statement of acceptance of a version permanently authorizes you
|
||||||
to choose that version for the Program.
|
to choose that version for the Program.
|
||||||
|
|
||||||
|
|
@ -635,40 +633,29 @@
|
||||||
Copyright (C) <year> <name of author>
|
Copyright (C) <year> <name of author>
|
||||||
|
|
||||||
This program is free software: you can redistribute it and/or modify
|
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
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
(at your option) any later version.
|
(at your option) any later version.
|
||||||
|
|
||||||
This program is distributed in the hope that it will be useful,
|
This program is distributed in the hope that it will be useful,
|
||||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
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/>.
|
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.
|
Also add information on how to contact you by electronic and paper mail.
|
||||||
|
|
||||||
If the program does terminal interaction, make it output a short
|
If your software can interact with users remotely through a computer
|
||||||
notice like this when it starts in an interactive mode:
|
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
|
||||||
<program> Copyright (C) <year> <name of author>
|
interface could display a "Source" link that leads users to an archive
|
||||||
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
of the code. There are many ways you could offer source, and different
|
||||||
This is free software, and you are welcome to redistribute it
|
solutions will be better for different programs; see section 13 for the
|
||||||
under certain conditions; type `show c' for details.
|
specific requirements.
|
||||||
|
|
||||||
The hypothetical commands `show w' and `show c' should show the appropriate
|
|
||||||
parts of the General Public License. Of course, your program's commands
|
|
||||||
might be different; for a GUI interface, you would use an "about box".
|
|
||||||
|
|
||||||
You should also get your employer (if you work as a programmer) or school,
|
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.
|
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/>.
|
<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
|
- **Dark theme UI** - Modern interface with purple/pink accents
|
||||||
- **Single container deployment** - Simplified hosting with FrankenPHP
|
- **Single container deployment** - Simplified hosting with FrankenPHP
|
||||||
|
|
||||||
## 🚀 Quick Start
|
## 🚀 Self-hosting
|
||||||
|
|
||||||
### Prerequisites
|
The production image is available at `forge.lvl0.xyz/lvl0/dishplanner:latest`.
|
||||||
- Docker and Docker Compose
|
|
||||||
- Make (optional, for convenience commands)
|
|
||||||
|
|
||||||
### First Time Setup
|
### docker-compose.yml
|
||||||
|
|
||||||
```bash
|
```yaml
|
||||||
# Clone the repository
|
services:
|
||||||
git clone https://github.com/yourusername/dish-planner.git
|
app:
|
||||||
cd dish-planner
|
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
|
db:
|
||||||
make install
|
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:
|
volumes:
|
||||||
cp .env.example .env
|
db_data:
|
||||||
docker compose build
|
app_storage:
|
||||||
docker compose up -d
|
|
||||||
docker compose exec app php artisan key:generate
|
|
||||||
docker compose exec app php artisan migrate
|
|
||||||
```
|
```
|
||||||
|
|
||||||
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
|
## 🔧 Development
|
||||||
|
|
||||||
### Starting the Development Environment
|
### NixOS / Nix
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Start all services
|
git clone https://forge.lvl0.xyz/lvl0/dishplanner.git
|
||||||
make dev
|
cd dishplanner
|
||||||
|
nix-shell
|
||||||
# Or with Docker Compose directly
|
|
||||||
docker compose up -d
|
|
||||||
```
|
```
|
||||||
|
|
||||||
**Available services:**
|
The shell will display available commands and optionally start the containers for you.
|
||||||
- **App**: http://localhost:8000 (Laravel + FrankenPHP)
|
|
||||||
- **Vite**: http://localhost:5173 (Asset hot-reload)
|
|
||||||
- **Mailhog**: http://localhost:8025 (Email testing)
|
|
||||||
- **Database**: localhost:3306 (MariaDB)
|
|
||||||
|
|
||||||
### Common Development Commands
|
#### Available Commands
|
||||||
|
|
||||||
```bash
|
| Command | Description |
|
||||||
# View logs
|
|---------|-------------|
|
||||||
make logs # App logs
|
| `dev-up` | Start development environment |
|
||||||
make logs-db # Database logs
|
| `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
|
#### Services
|
||||||
make artisan cmd="migrate" # Run artisan commands
|
|
||||||
make tinker # Start Laravel tinker
|
|
||||||
make test # Run tests
|
|
||||||
|
|
||||||
# Database
|
| Service | URL |
|
||||||
make migrate # Run migrations
|
|---------|-----|
|
||||||
make seed # Seed database
|
| App | http://localhost:8000 |
|
||||||
make fresh # Fresh migrate with seeds
|
| Vite | http://localhost:5173 |
|
||||||
|
| Mailhog | http://localhost:8025 |
|
||||||
|
| MariaDB | localhost:3306 |
|
||||||
|
|
||||||
# Testing
|
### Other Platforms
|
||||||
make test # Run tests
|
|
||||||
composer test:coverage-html # Run tests with coverage report (generates coverage/index.html)
|
|
||||||
|
|
||||||
# Utilities
|
Contributions welcome for development setup instructions on other platforms.
|
||||||
make shell # Enter app container
|
|
||||||
make db-shell # Enter database shell
|
|
||||||
make clear # Clear all caches
|
|
||||||
```
|
|
||||||
|
|
||||||
### Project Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
dish-planner/
|
|
||||||
├── app/
|
|
||||||
│ ├── Livewire/ # Livewire components
|
|
||||||
│ │ ├── Auth/ # Authentication
|
|
||||||
│ │ ├── Dishes/ # Dish management
|
|
||||||
│ │ ├── Schedule/ # Schedule calendar
|
|
||||||
│ │ └── Users/ # User management
|
|
||||||
│ └── Models/ # Eloquent models
|
|
||||||
├── resources/
|
|
||||||
│ └── views/
|
|
||||||
│ └── livewire/ # Livewire component views
|
|
||||||
├── docker-compose.yml # Development environment
|
|
||||||
├── docker-compose.prod.yml # Production environment
|
|
||||||
├── Dockerfile # Production image
|
|
||||||
├── Dockerfile.dev # Development image
|
|
||||||
└── Makefile # Convenience commands
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🚢 Production Deployment
|
|
||||||
|
|
||||||
### Building for Production
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Build production image
|
|
||||||
make prod-build
|
|
||||||
|
|
||||||
# Start production environment
|
|
||||||
make prod
|
|
||||||
|
|
||||||
# Or with Docker Compose
|
|
||||||
docker compose -f docker-compose.prod.yml build
|
|
||||||
docker compose -f docker-compose.prod.yml up -d
|
|
||||||
```
|
|
||||||
|
|
||||||
### Production Environment Variables
|
|
||||||
|
|
||||||
Required environment variables for production:
|
|
||||||
|
|
||||||
```env
|
|
||||||
# Required - Generate APP_KEY (see instructions below)
|
|
||||||
APP_KEY=base64:your-generated-key-here
|
|
||||||
APP_URL=https://your-domain.com
|
|
||||||
|
|
||||||
# Database Configuration
|
|
||||||
DB_DATABASE=dishplanner
|
|
||||||
DB_USERNAME=dishplanner
|
|
||||||
DB_PASSWORD=strong-password-here
|
|
||||||
DB_ROOT_PASSWORD=strong-root-password
|
|
||||||
|
|
||||||
# Optional Email Configuration
|
|
||||||
MAIL_HOST=your-smtp-host
|
|
||||||
MAIL_PORT=587
|
|
||||||
MAIL_USERNAME=your-username
|
|
||||||
MAIL_PASSWORD=your-password
|
|
||||||
MAIL_FROM_ADDRESS=noreply@your-domain.com
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Generating APP_KEY
|
|
||||||
|
|
||||||
The APP_KEY is critical for encryption and must be kept consistent across deployments. Generate one using any of these methods:
|
|
||||||
|
|
||||||
**Option 1: Using OpenSSL (Linux/Mac/Windows with Git Bash)**
|
|
||||||
```bash
|
|
||||||
echo "base64:$(openssl rand -base64 32)"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Option 2: Using Node.js (Cross-platform)**
|
|
||||||
```bash
|
|
||||||
node -e "console.log('base64:' + require('crypto').randomBytes(32).toString('base64'))"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Option 3: Using Python (Cross-platform)**
|
|
||||||
```bash
|
|
||||||
python -c "import base64, os; print('base64:' + base64.b64encode(os.urandom(32)).decode())"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Option 4: Online Generator**
|
|
||||||
Generate a random 32-character string at https://randomkeygen.com/ and prepend with `base64:`
|
|
||||||
|
|
||||||
⚠️ **Important**: Save this key securely! If lost, you won't be able to decrypt existing data.
|
|
||||||
|
|
||||||
### Deployment with DockGE
|
|
||||||
|
|
||||||
The production setup is optimized for DockGE deployment with just 2 containers:
|
|
||||||
|
|
||||||
1. **app** - Laravel application with FrankenPHP
|
|
||||||
2. **db** - MariaDB database
|
|
||||||
|
|
||||||
Simply import the `docker-compose.prod.yml` into DockGE and configure your environment variables.
|
|
||||||
|
|
||||||
## 🛠️ Technology Stack
|
|
||||||
|
|
||||||
- **Backend**: Laravel 12 with Livewire 3
|
|
||||||
- **Web Server**: FrankenPHP (PHP 8.3 + Caddy)
|
|
||||||
- **Database**: MariaDB 11
|
|
||||||
- **Frontend**: Blade + Livewire + Alpine.js
|
|
||||||
- **Styling**: TailwindCSS with custom dark theme
|
|
||||||
- **Assets**: Vite for bundling
|
|
||||||
|
|
||||||
## 📦 Docker Architecture
|
|
||||||
|
|
||||||
### Development (`docker-compose.yml`)
|
|
||||||
- **Hot reload** - Volume mounts for live code editing
|
|
||||||
- **Debug tools** - Xdebug configured for debugging
|
|
||||||
- **Email testing** - Mailhog for capturing emails
|
|
||||||
- **Asset watching** - Vite dev server for instant updates
|
|
||||||
|
|
||||||
### Production (`docker-compose.prod.yml`)
|
|
||||||
- **Optimized** - Multi-stage builds with caching
|
|
||||||
- **Secure** - No debug tools, proper permissions
|
|
||||||
- **Health checks** - Automatic container monitoring
|
|
||||||
- **Single container** - FrankenPHP serves everything
|
|
||||||
|
|
||||||
## 🔨 Make Commands Reference
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Development
|
|
||||||
make dev # Start development environment
|
|
||||||
make dev-build # Build and start development
|
|
||||||
make dev-stop # Stop development environment
|
|
||||||
make dev-clean # Stop and remove volumes (CAUTION)
|
|
||||||
|
|
||||||
# Production
|
|
||||||
make prod # Start production environment
|
|
||||||
make prod-build # Build production image
|
|
||||||
make prod-stop # Stop production environment
|
|
||||||
make prod-logs # Show production logs
|
|
||||||
|
|
||||||
# Laravel
|
|
||||||
make artisan cmd="..." # Run artisan command
|
|
||||||
make composer cmd="..." # Run composer command
|
|
||||||
make npm cmd="..." # Run npm command
|
|
||||||
make migrate # Run migrations
|
|
||||||
make seed # Seed database
|
|
||||||
make fresh # Fresh migrate and seed
|
|
||||||
make tinker # Start tinker session
|
|
||||||
make test # Run tests
|
|
||||||
|
|
||||||
# Utilities
|
|
||||||
make shell # Enter app container
|
|
||||||
make db-shell # Enter database shell
|
|
||||||
make logs # Show app logs
|
|
||||||
make logs-db # Show database logs
|
|
||||||
make clear # Clear all caches
|
|
||||||
make optimize # Optimize for production
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🐛 Troubleshooting
|
|
||||||
|
|
||||||
### Container won't start
|
|
||||||
```bash
|
|
||||||
# Check logs
|
|
||||||
docker compose logs app
|
|
||||||
|
|
||||||
# Rebuild containers
|
|
||||||
docker compose build --no-cache
|
|
||||||
docker compose up -d
|
|
||||||
```
|
|
||||||
|
|
||||||
### Database connection issues
|
|
||||||
```bash
|
|
||||||
# Verify database is running
|
|
||||||
docker compose ps
|
|
||||||
|
|
||||||
# Check database logs
|
|
||||||
docker compose logs db
|
|
||||||
|
|
||||||
# Try manual connection
|
|
||||||
make db-shell
|
|
||||||
```
|
|
||||||
|
|
||||||
### Permission issues
|
|
||||||
```bash
|
|
||||||
# Fix storage permissions
|
|
||||||
docker compose exec app chmod -R 777 storage bootstrap/cache
|
|
||||||
```
|
|
||||||
|
|
||||||
### Clear all caches
|
|
||||||
```bash
|
|
||||||
make clear
|
|
||||||
# Or manually
|
|
||||||
docker compose exec app php artisan cache:clear
|
|
||||||
docker compose exec app php artisan config:clear
|
|
||||||
docker compose exec app php artisan route:clear
|
|
||||||
docker compose exec app php artisan view:clear
|
|
||||||
```
|
|
||||||
|
|
||||||
## 📄 License
|
## 📄 License
|
||||||
|
|
||||||
This project is open-source software licensed under the [MIT license](LICENSE.md).
|
This project is open-source software licensed under the [AGPL-3.0 license](LICENSE.md).
|
||||||
|
|
||||||
## 🤝 Contributing
|
|
||||||
|
|
||||||
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
||||||
|
|
||||||
1. Fork the repository
|
|
||||||
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
|
|
||||||
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
|
|
||||||
4. Push to the branch (`git push origin feature/AmazingFeature`)
|
|
||||||
5. Open a Pull Request
|
|
||||||
|
|
||||||
## 📞 Support
|
## 📞 Support
|
||||||
|
|
||||||
For issues and questions, please use the [GitHub Issues](https://github.com/yourusername/dish-planner/issues) page.
|
For issues and questions, please use [Forgejo Issues](https://forge.lvl0.xyz/lvl0/dishplanner/issues).
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Built with ❤️ using Laravel and Livewire
|
|
||||||
|
|
@ -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;
|
namespace App\Models;
|
||||||
|
|
||||||
|
use Illuminate\Database\Eloquent\Collection;
|
||||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||||
use Illuminate\Database\Eloquent\Relations\HasMany;
|
use Illuminate\Database\Eloquent\Relations\HasMany;
|
||||||
use Illuminate\Foundation\Auth\User as Authenticatable;
|
use Illuminate\Foundation\Auth\User as Authenticatable;
|
||||||
use Illuminate\Notifications\Notifiable;
|
use Illuminate\Notifications\Notifiable;
|
||||||
use Laravel\Cashier\Billable;
|
|
||||||
use Laravel\Sanctum\HasApiTokens;
|
use Laravel\Sanctum\HasApiTokens;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @property int $id
|
* @property int $id
|
||||||
* @property static PlannerFactory factory($count = null, $state = [])
|
* @property static PlannerFactory factory($count = null, $state = [])
|
||||||
|
* @property Collection<User> $users
|
||||||
* @method static first()
|
* @method static first()
|
||||||
|
* @method static create(array $array)
|
||||||
*/
|
*/
|
||||||
class Planner extends Authenticatable
|
class Planner extends Authenticatable
|
||||||
{
|
{
|
||||||
use Billable, HasApiTokens, HasFactory, Notifiable;
|
use HasApiTokens, HasFactory, Notifiable;
|
||||||
|
|
||||||
protected $fillable = [
|
protected $fillable = [
|
||||||
'name', 'email', 'password',
|
'name', 'email', 'password',
|
||||||
|
|
@ -34,4 +36,9 @@ public function schedules(): HasMany
|
||||||
{
|
{
|
||||||
return $this->hasMany(Schedule::class);
|
return $this->hasMany(Schedule::class);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function users(): HasMany
|
||||||
|
{
|
||||||
|
return $this->hasMany(User::class);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,12 +4,10 @@
|
||||||
|
|
||||||
use App\Exceptions\CustomException;
|
use App\Exceptions\CustomException;
|
||||||
use App\Models\Dish;
|
use App\Models\Dish;
|
||||||
use App\Models\Planner;
|
|
||||||
use App\Models\Schedule;
|
use App\Models\Schedule;
|
||||||
use App\Models\ScheduledUserDish;
|
use App\Models\ScheduledUserDish;
|
||||||
use App\Models\User;
|
use App\Models\User;
|
||||||
use App\Models\UserDish;
|
use App\Models\UserDish;
|
||||||
use Laravel\Cashier\Cashier;
|
|
||||||
use DishPlanner\Dish\Policies\DishPolicy;
|
use DishPlanner\Dish\Policies\DishPolicy;
|
||||||
use DishPlanner\Schedule\Policies\SchedulePolicy;
|
use DishPlanner\Schedule\Policies\SchedulePolicy;
|
||||||
use DishPlanner\ScheduledUserDish\Policies\ScheduledUserDishPolicy;
|
use DishPlanner\ScheduledUserDish\Policies\ScheduledUserDishPolicy;
|
||||||
|
|
@ -47,8 +45,6 @@ public function render($request, Throwable $e)
|
||||||
|
|
||||||
public function boot(): void
|
public function boot(): void
|
||||||
{
|
{
|
||||||
Cashier::useCustomerModel(Planner::class);
|
|
||||||
|
|
||||||
Gate::policy(Dish::class, DishPolicy::class);
|
Gate::policy(Dish::class, DishPolicy::class);
|
||||||
Gate::policy(Schedule::class, SchedulePolicy::class);
|
Gate::policy(Schedule::class, SchedulePolicy::class);
|
||||||
Gate::policy(ScheduledUserDish::class, ScheduledUserDishPolicy::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
|
#!/bin/bash
|
||||||
docker build -t 192.168.178.152:50114/dishplanner-backend .
|
docker build -t forge.lvl0.xyz/lvl0/dishplanner:latest .
|
||||||
docker push 192.168.178.152:50114/dishplanner-backend
|
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
|
#!/bin/bash
|
||||||
set -e
|
set -e
|
||||||
|
|
||||||
echo "🔄 Pulling latest backend changes..."
|
echo "🔄 Pulling latest changes..."
|
||||||
git pull origin main
|
git pull origin main
|
||||||
|
|
||||||
echo "📦 Installing PHP dependencies..."
|
echo "📦 Installing PHP dependencies..."
|
||||||
|
|
@ -15,4 +15,4 @@ php artisan config:cache
|
||||||
php artisan route:cache
|
php artisan route:cache
|
||||||
php artisan view:cache
|
php artisan view:cache
|
||||||
|
|
||||||
echo "✅ Backend update complete!"
|
echo "✅ Update complete!"
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,11 @@
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
use App\Http\Middleware\ForceJsonResponse;
|
use App\Http\Middleware\ForceJsonResponse;
|
||||||
use App\Http\Middleware\RequireSaasMode;
|
|
||||||
use App\Http\Middleware\RequireSubscription;
|
|
||||||
use App\Services\OutputService;
|
use App\Services\OutputService;
|
||||||
use Illuminate\Foundation\Application;
|
use Illuminate\Foundation\Application;
|
||||||
use Illuminate\Foundation\Configuration\Exceptions;
|
use Illuminate\Foundation\Configuration\Exceptions;
|
||||||
use Illuminate\Foundation\Configuration\Middleware;
|
use Illuminate\Foundation\Configuration\Middleware;
|
||||||
use Illuminate\Http\Request;
|
use Illuminate\Http\Request;
|
||||||
use Illuminate\Support\Facades\Route;
|
|
||||||
use Illuminate\Validation\ValidationException;
|
use Illuminate\Validation\ValidationException;
|
||||||
use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
|
use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
|
||||||
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
|
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
|
||||||
|
|
@ -19,24 +16,10 @@
|
||||||
api: __DIR__.'/../routes/api.php',
|
api: __DIR__.'/../routes/api.php',
|
||||||
commands: __DIR__.'/../routes/console.php',
|
commands: __DIR__.'/../routes/console.php',
|
||||||
health: '/up',
|
health: '/up',
|
||||||
then: function () {
|
|
||||||
Route::middleware('web')
|
|
||||||
->group(base_path('routes/web/subscription.php'));
|
|
||||||
},
|
|
||||||
)
|
)
|
||||||
->withMiddleware(function (Middleware $middleware) {
|
->withMiddleware(function (Middleware $middleware) {
|
||||||
// Apply ForceJsonResponse only to API routes
|
// Apply ForceJsonResponse only to API routes
|
||||||
$middleware->api(ForceJsonResponse::class);
|
$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) {
|
->withExceptions(function (Exceptions $exceptions) {
|
||||||
$exceptions->shouldRenderJsonWhen(function (Request $request, Throwable $e) {
|
$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",
|
"laravel",
|
||||||
"framework"
|
"framework"
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "AGPL-3.0-only",
|
||||||
"require": {
|
"require": {
|
||||||
"php": "^8.2",
|
"php": "^8.2",
|
||||||
"laravel/cashier": "^16.1",
|
|
||||||
"laravel/framework": "^12.9.2",
|
"laravel/framework": "^12.9.2",
|
||||||
"laravel/sanctum": "^4.0",
|
"laravel/sanctum": "^4.0",
|
||||||
"laravel/tinker": "^2.9",
|
"laravel/tinker": "^2.9",
|
||||||
|
|
@ -27,9 +26,6 @@
|
||||||
"phpunit/phpunit": "^11.0.1"
|
"phpunit/phpunit": "^11.0.1"
|
||||||
},
|
},
|
||||||
"autoload": {
|
"autoload": {
|
||||||
"files": [
|
|
||||||
"app/helpers.php"
|
|
||||||
],
|
|
||||||
"psr-4": {
|
"psr-4": {
|
||||||
"App\\": "app/",
|
"App\\": "app/",
|
||||||
"DishPlanner\\": "src/DishPlanner/",
|
"DishPlanner\\": "src/DishPlanner/",
|
||||||
|
|
|
||||||
|
|
@ -28,18 +28,6 @@
|
||||||
|
|
||||||
'env' => env('APP_ENV', 'production'),
|
'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
|
| 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
|
# Production Docker Compose
|
||||||
services:
|
services:
|
||||||
app:
|
app:
|
||||||
image: codeberg.org/lvl0/dish-planner:latest
|
image: forge.lvl0.xyz/lvl0/dishplanner:latest
|
||||||
container_name: dishplanner_app
|
container_name: dishplanner_app
|
||||||
restart: always
|
restart: always
|
||||||
ports:
|
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