Compare commits
1 Commits
master
...
feature-pr
| Author | SHA1 | Date | |
|---|---|---|---|
| 681f892d63 |
@@ -1,128 +0,0 @@
|
||||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
We as members, contributors, and leaders pledge to make participation in our
|
||||
community a harassment-free experience for everyone, regardless of age, body
|
||||
size, visible or invisible disability, ethnicity, sex characteristics, gender
|
||||
identity and expression, level of experience, education, socio-economic status,
|
||||
nationality, personal appearance, race, religion, or sexual identity
|
||||
and orientation.
|
||||
|
||||
We pledge to act and interact in ways that contribute to an open, welcoming,
|
||||
diverse, inclusive, and healthy community.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to a positive environment for our
|
||||
community include:
|
||||
|
||||
- Demonstrating empathy and kindness toward other people
|
||||
- Being respectful of differing opinions, viewpoints, and experiences
|
||||
- Giving and gracefully accepting constructive feedback
|
||||
- Accepting responsibility and apologizing to those affected by our mistakes,
|
||||
and learning from the experience
|
||||
- Focusing on what is best not just for us as individuals, but for the
|
||||
overall community
|
||||
|
||||
Examples of unacceptable behavior include:
|
||||
|
||||
- The use of sexualized language or imagery, and sexual attention or
|
||||
advances of any kind
|
||||
- Trolling, insulting or derogatory comments, and personal or political attacks
|
||||
- Public or private harassment
|
||||
- Publishing others' private information, such as a physical or email
|
||||
address, without their explicit permission
|
||||
- Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
|
||||
## Enforcement Responsibilities
|
||||
|
||||
Community leaders are responsible for clarifying and enforcing our standards of
|
||||
acceptable behavior and will take appropriate and fair corrective action in
|
||||
response to any behavior that they deem inappropriate, threatening, offensive,
|
||||
or harmful.
|
||||
|
||||
Community leaders have the right and responsibility to remove, edit, or reject
|
||||
comments, commits, code, wiki edits, issues, and other contributions that are
|
||||
not aligned to this Code of Conduct, and will communicate reasons for moderation
|
||||
decisions when appropriate.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies within all community spaces, and also applies when
|
||||
an individual is officially representing the community in public spaces.
|
||||
Examples of representing our community include using an official e-mail address,
|
||||
posting via an official social media account, or acting as an appointed
|
||||
representative at an online or offline event.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||
reported to the community leaders responsible for enforcement at
|
||||
<mail@adityagupta.dev>.
|
||||
All complaints will be reviewed and investigated promptly and fairly.
|
||||
|
||||
All community leaders are obligated to respect the privacy and security of the
|
||||
reporter of any incident.
|
||||
|
||||
## Enforcement Guidelines
|
||||
|
||||
Community leaders will follow these Community Impact Guidelines in determining
|
||||
the consequences for any action they deem in violation of this Code of Conduct:
|
||||
|
||||
### 1. Correction
|
||||
|
||||
**Community Impact**: Use of inappropriate language or other behavior deemed
|
||||
unprofessional or unwelcome in the community.
|
||||
|
||||
**Consequence**: A private, written warning from community leaders, providing
|
||||
clarity around the nature of the violation and an explanation of why the
|
||||
behavior was inappropriate. A public apology may be requested.
|
||||
|
||||
### 2. Warning
|
||||
|
||||
**Community Impact**: A violation through a single incident or series
|
||||
of actions.
|
||||
|
||||
**Consequence**: A warning with consequences for continued behavior. No
|
||||
interaction with the people involved, including unsolicited interaction with
|
||||
those enforcing the Code of Conduct, for a specified period of time. This
|
||||
includes avoiding interactions in community spaces as well as external channels
|
||||
like social media. Violating these terms may lead to a temporary or
|
||||
permanent ban.
|
||||
|
||||
### 3. Temporary Ban
|
||||
|
||||
**Community Impact**: A serious violation of community standards, including
|
||||
sustained inappropriate behavior.
|
||||
|
||||
**Consequence**: A temporary ban from any sort of interaction or public
|
||||
communication with the community for a specified period of time. No public or
|
||||
private interaction with the people involved, including unsolicited interaction
|
||||
with those enforcing the Code of Conduct, is allowed during this period.
|
||||
Violating these terms may lead to a permanent ban.
|
||||
|
||||
### 4. Permanent Ban
|
||||
|
||||
**Community Impact**: Demonstrating a pattern of violation of community
|
||||
standards, including sustained inappropriate behavior, harassment of an
|
||||
individual, or aggression toward or disparagement of classes of individuals.
|
||||
|
||||
**Consequence**: A permanent ban from any sort of public interaction within
|
||||
the community.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
|
||||
version 2.0, available at
|
||||
<https://www.contributor-covenant.org/version/2/0/code_of_conduct.html>.
|
||||
|
||||
Community Impact Guidelines were inspired by [Mozilla's code of conduct
|
||||
enforcement ladder](https://github.com/mozilla/diversity).
|
||||
|
||||
[homepage]: https://www.contributor-covenant.org
|
||||
|
||||
For answers to common questions about this code of conduct, see the FAQ at
|
||||
<https://www.contributor-covenant.org/faq>. Translations are available at
|
||||
<https://www.contributor-covenant.org/translations>.
|
||||
21
LICENSE
21
LICENSE
@@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2026 Aditya Gupta
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
54
README.md
54
README.md
@@ -24,7 +24,20 @@
|
||||
|
||||
## Screenshots
|
||||
|
||||
|
||||
<p align="center">
|
||||
<!-- Place your app screenshots here once available -->
|
||||
<em>Screenshots coming soon!</em>
|
||||
</p>
|
||||
|
||||
<!--
|
||||
<p align="center">
|
||||
<img src="path/to/dashboard.png" alt="Brew Journal Dashboard" width="800" />
|
||||
</p>
|
||||
<p align="center">
|
||||
<img src="path/to/mobile_dashboard.png" alt="Mobile Dashboard View" width="280" style="margin-right: 10px;" />
|
||||
<img src="path/to/brew_form.png" alt="Brew Logging View" width="280" />
|
||||
</p>
|
||||
-->
|
||||
|
||||
## Features
|
||||
|
||||
@@ -38,7 +51,6 @@
|
||||
## Architecture Overview
|
||||
|
||||
The codebase is split into two main sections:
|
||||
|
||||
- **Frontend**: A React application located in the root directory, built with [Vite](https://vite.dev/). Key files include:
|
||||
- [package.json](file:///home/sortedcord/Projects/brew/package.json) (dependencies and scripts)
|
||||
- [src/App.jsx](file:///home/sortedcord/Projects/brew/src/App.jsx) (routing and layout)
|
||||
@@ -51,7 +63,6 @@ The codebase is split into two main sections:
|
||||
## Prerequisites
|
||||
|
||||
Make sure you have the following installed on your system:
|
||||
|
||||
- **Node.js** (v18.x or higher recommended)
|
||||
- **npm** (v9.x or higher)
|
||||
- **PostgreSQL** (v14 or higher)
|
||||
@@ -65,54 +76,44 @@ You need a running PostgreSQL database instance. Follow the steps below based on
|
||||
#### Installing PostgreSQL
|
||||
|
||||
##### Linux (Debian/Ubuntu)
|
||||
|
||||
```bash
|
||||
sudo apt update
|
||||
sudo apt install postgresql postgresql-contrib
|
||||
```
|
||||
|
||||
The PostgreSQL service should start automatically. If not, start it with:
|
||||
|
||||
```bash
|
||||
sudo systemctl start postgresql
|
||||
sudo systemctl enable postgresql
|
||||
```
|
||||
|
||||
##### macOS (using Homebrew)
|
||||
|
||||
```bash
|
||||
brew install postgresql
|
||||
brew services start postgresql
|
||||
```
|
||||
|
||||
##### Windows
|
||||
|
||||
Download and run the interactive installer from the [Official PostgreSQL Downloads page](https://www.postgresql.org/download/windows/).
|
||||
|
||||
##### Creating the Database and User
|
||||
|
||||
1. Log into the PostgreSQL interactive terminal as the superuser `postgres`:
|
||||
|
||||
```bash
|
||||
sudo -i -u postgres psql
|
||||
```
|
||||
|
||||
_(On macOS/Windows, open your terminal/command prompt and run `psql postgres` or use a graphical tool like PgAdmin)._
|
||||
*(On macOS/Windows, open your terminal/command prompt and run `psql postgres` or use a graphical tool like PgAdmin).*
|
||||
|
||||
2. Create a database user with a secure password:
|
||||
|
||||
```sql
|
||||
CREATE USER brew_user WITH PASSWORD 'your_secure_password';
|
||||
```
|
||||
|
||||
3. Create the database and set its owner to `brew_user`. Setting the owner guarantees that the user has full table creation privileges on the default `public` schema:
|
||||
|
||||
```sql
|
||||
CREATE DATABASE brew OWNER brew_user;
|
||||
```
|
||||
|
||||
4. Exit the PostgreSQL shell:
|
||||
|
||||
```sql
|
||||
\q
|
||||
```
|
||||
@@ -120,7 +121,6 @@ Download and run the interactive installer from the [Official PostgreSQL Downloa
|
||||
> [!TIP]
|
||||
> **Troubleshooting "Permission denied for schema public" (PostgreSQL 15+):**
|
||||
> If you already created the database without setting `brew_user` as the owner and encounter this error, log in as the superuser (`postgres`), connect to the `brew` database, and explicitly grant the schema privileges:
|
||||
>
|
||||
> ```sql
|
||||
> \c brew
|
||||
> GRANT ALL ON SCHEMA public TO brew_user;
|
||||
@@ -132,36 +132,29 @@ Download and run the interactive installer from the [Official PostgreSQL Downloa
|
||||
### 2. Backend Setup
|
||||
|
||||
1. Navigate to the backend directory:
|
||||
|
||||
```bash
|
||||
cd server
|
||||
```
|
||||
|
||||
2. Create a [server/.env](file:///home/sortedcord/Projects/brew/server/.env) file by copying the template [server/.env.example](file:///home/sortedcord/Projects/brew/server/.env.example):
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
3. Open [server/.env](file:///home/sortedcord/Projects/brew/server/.env) and configure the environment variables:
|
||||
|
||||
```env
|
||||
PORT=5000
|
||||
DATABASE_URL=postgresql://brew_user:your_secure_password@localhost:5432/brew
|
||||
JWT_SECRET=your_jwt_secret_here
|
||||
```
|
||||
|
||||
_Replace `your_secure_password` with the password you set during the database setup._
|
||||
*Replace `your_secure_password` with the password you set during the database setup.*
|
||||
|
||||
4. Install dependencies and start the backend server:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
The backend should start and display:
|
||||
|
||||
```text
|
||||
Database initialized
|
||||
Server running on port 5000
|
||||
@@ -170,19 +163,16 @@ Download and run the interactive installer from the [Official PostgreSQL Downloa
|
||||
### 3. Frontend Setup
|
||||
|
||||
1. Open a new terminal window/tab and navigate to the project root directory:
|
||||
|
||||
```bash
|
||||
cd /home/sortedcord/Projects/brew
|
||||
```
|
||||
|
||||
2. Install frontend dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. Start the Vite development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
@@ -194,20 +184,17 @@ Download and run the interactive installer from the [Official PostgreSQL Downloa
|
||||
When deploying the Brew application to a production environment, follow these guidelines for security, reliability, and performance:
|
||||
|
||||
### 1. Database (PostgreSQL)
|
||||
|
||||
- **Restricted Access**: Do not use superuser accounts (such as `postgres`) for backend application connections. Instead, use a restricted role with standard read/write permissions.
|
||||
- **Managed Databases**: Use a managed database service (e.g., Supabase, Neon, AWS RDS, GCP Cloud SQL) to leverage automated backups, scaling, and high-availability.
|
||||
- **SSL Connection**: Enforce encrypted database connections by appending SSL options to the connection string (e.g., `?sslmode=require`).
|
||||
|
||||
### 2. Backend Server Setup
|
||||
|
||||
- **Environment Variables**: In your production environment, set the following environment variables:
|
||||
- `NODE_ENV=production`
|
||||
- `PORT=8080` (or whichever port is provided by your host)
|
||||
- `DATABASE_URL=postgresql://<db_user>:<db_password>@<db_host>:<db_port>/<db_name>?sslmode=require`
|
||||
- `JWT_SECRET=your_long_random_production_secret` (generate a secure 32-byte key using `openssl rand -base64 32`)
|
||||
- **Process Management**: Use a process manager like **PM2** to run the backend node process, keep it alive, and handle automatic clustering or restarts:
|
||||
|
||||
```bash
|
||||
# Install PM2 globally
|
||||
npm install -g pm2
|
||||
@@ -215,27 +202,20 @@ When deploying the Brew application to a production environment, follow these gu
|
||||
# Start the backend server
|
||||
pm2 start server/index.js --name "brew-backend"
|
||||
```
|
||||
|
||||
- **Restrict CORS**: In [server/index.js](file:///home/sortedcord/Projects/brew/server/index.js), configure the `cors` middleware to only accept requests from your frontend production domain:
|
||||
|
||||
```javascript
|
||||
app.use(cors({ origin: "https://yourfrontenddomain.com" }));
|
||||
app.use(cors({ origin: 'https://yourfrontenddomain.com' }));
|
||||
```
|
||||
|
||||
### 3. Frontend Build & Hosting
|
||||
|
||||
- **Build the static bundle**: Run the build script in the root directory to generate optimized production assets:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
This generates static HTML, CSS, and JS files in the `dist/` directory.
|
||||
|
||||
- **Hosting**:
|
||||
- Deploy the static files from the `dist/` directory to static hosting platforms like **Vercel**, **Netlify**, **Cloudflare Pages**, or **AWS S3/CloudFront**.
|
||||
- Alternatively, if using a VPS, serve the `dist/` directory using **Nginx** and proxy API traffic:
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 175 KiB |
@@ -50,9 +50,15 @@ const initDb = async () => {
|
||||
rating INTEGER,
|
||||
created_at BIGINT,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
is_deleted BOOLEAN DEFAULT FALSE
|
||||
is_deleted BOOLEAN DEFAULT FALSE,
|
||||
recipe_data JSONB DEFAULT '{}'
|
||||
)
|
||||
`);
|
||||
|
||||
// Ensure the recipe_data column exists on older db setups
|
||||
await pool.query(`
|
||||
ALTER TABLE brew_logs ADD COLUMN IF NOT EXISTS recipe_data JSONB DEFAULT '{}'
|
||||
`);
|
||||
console.log('Database initialized');
|
||||
} catch (err) {
|
||||
console.error('Error initializing database', err);
|
||||
|
||||
@@ -191,9 +191,16 @@ app.post('/api/sync', authenticateToken, async (req, res) => {
|
||||
|
||||
// 2. Process incoming brew logs
|
||||
for (const log of brewLogs) {
|
||||
const { id, beanId, method, notes, rating, createdAt, updatedAt, isDeleted, ...recipeFields } = log;
|
||||
const grind = log.grindSize || log.grind || '';
|
||||
const waterTemp = log.waterTemp || '';
|
||||
const ratio = log.brewRatio || log.ratio || '';
|
||||
const yieldVal = log.yield || '';
|
||||
const time = log.brewTime || log.time || '';
|
||||
|
||||
await client.query(`
|
||||
INSERT INTO brew_logs (id, user_id, bean_id, method, grind, water_temp, ratio, yield, time, notes, rating, created_at, updated_at, is_deleted)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)
|
||||
INSERT INTO brew_logs (id, user_id, bean_id, method, grind, water_temp, ratio, yield, time, notes, rating, created_at, updated_at, is_deleted, recipe_data)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15)
|
||||
ON CONFLICT (id) DO UPDATE SET
|
||||
bean_id = EXCLUDED.bean_id,
|
||||
method = EXCLUDED.method,
|
||||
@@ -206,24 +213,26 @@ app.post('/api/sync', authenticateToken, async (req, res) => {
|
||||
rating = EXCLUDED.rating,
|
||||
created_at = EXCLUDED.created_at,
|
||||
updated_at = EXCLUDED.updated_at,
|
||||
is_deleted = EXCLUDED.is_deleted
|
||||
is_deleted = EXCLUDED.is_deleted,
|
||||
recipe_data = EXCLUDED.recipe_data
|
||||
WHERE (EXCLUDED.updated_at > brew_logs.updated_at OR brew_logs.user_id IS NULL)
|
||||
AND (brew_logs.user_id = EXCLUDED.user_id OR brew_logs.user_id IS NULL)
|
||||
`, [
|
||||
log.id,
|
||||
id,
|
||||
userId,
|
||||
log.beanId,
|
||||
log.method || '',
|
||||
log.grind || '',
|
||||
log.waterTemp || '',
|
||||
log.ratio || '',
|
||||
log.yield || '',
|
||||
log.time || '',
|
||||
log.notes || '',
|
||||
log.rating || 0,
|
||||
log.createdAt ? BigInt(log.createdAt) : BigInt(Date.now()),
|
||||
log.updatedAt ? new Date(log.updatedAt) : new Date(),
|
||||
log.isDeleted || false
|
||||
beanId,
|
||||
method || '',
|
||||
grind,
|
||||
waterTemp,
|
||||
ratio,
|
||||
yieldVal,
|
||||
time,
|
||||
notes || '',
|
||||
rating || 0,
|
||||
createdAt ? BigInt(createdAt) : BigInt(Date.now()),
|
||||
updatedAt ? new Date(updatedAt) : new Date(),
|
||||
isDeleted || false,
|
||||
JSON.stringify(recipeFields)
|
||||
]);
|
||||
}
|
||||
|
||||
@@ -256,21 +265,34 @@ app.post('/api/sync', authenticateToken, async (req, res) => {
|
||||
isDeleted: b.is_deleted
|
||||
}));
|
||||
|
||||
const mappedLogs = serverLogs.rows.map(l => ({
|
||||
id: l.id,
|
||||
beanId: l.bean_id,
|
||||
method: l.method,
|
||||
grind: l.grind,
|
||||
waterTemp: l.water_temp,
|
||||
ratio: l.ratio,
|
||||
yield: l.yield,
|
||||
time: l.time,
|
||||
notes: l.notes,
|
||||
rating: l.rating,
|
||||
createdAt: Number(l.created_at),
|
||||
updatedAt: l.updated_at.toISOString(),
|
||||
isDeleted: l.is_deleted
|
||||
}));
|
||||
const mappedLogs = serverLogs.rows.map(l => {
|
||||
const baseLog = {
|
||||
id: l.id,
|
||||
beanId: l.bean_id,
|
||||
method: l.method,
|
||||
notes: l.notes,
|
||||
rating: l.rating,
|
||||
createdAt: Number(l.created_at),
|
||||
updatedAt: l.updated_at.toISOString(),
|
||||
isDeleted: l.is_deleted
|
||||
};
|
||||
|
||||
const recipeData = l.recipe_data || {};
|
||||
|
||||
// Fallback for old database rows that don't have recipe_data populated
|
||||
const fallback = {};
|
||||
if (!recipeData.grindSize && l.grind) fallback.grindSize = l.grind;
|
||||
if (!recipeData.waterTemp && l.water_temp) fallback.waterTemp = l.water_temp;
|
||||
if (!recipeData.brewRatio && l.ratio) fallback.brewRatio = l.ratio;
|
||||
if (!recipeData.yield && l.yield) fallback.yield = l.yield;
|
||||
if (!recipeData.brewTime && l.time) fallback.brewTime = l.time;
|
||||
|
||||
return {
|
||||
...baseLog,
|
||||
...fallback,
|
||||
...recipeData
|
||||
};
|
||||
});
|
||||
|
||||
res.json({
|
||||
serverTime,
|
||||
|
||||
194
src/App.jsx
194
src/App.jsx
@@ -20,7 +20,7 @@ import SyncIndicator from "./components/SyncIndicator";
|
||||
|
||||
|
||||
// Import constants
|
||||
import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS } from "./constants";
|
||||
import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS, getRoastAgingInfo } from "./constants";
|
||||
|
||||
// ─── Storage helpers ───
|
||||
const STORAGE_KEY = "coffee-logbook-data";
|
||||
@@ -62,6 +62,121 @@ const LoadingScreen = () => (
|
||||
</div>
|
||||
);
|
||||
|
||||
function MethodIcon({ method, className }) {
|
||||
const props = {
|
||||
className: className || "w-8 h-8",
|
||||
viewBox: "0 0 24 24",
|
||||
fill: "none",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: "1.5",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round"
|
||||
};
|
||||
|
||||
switch (method) {
|
||||
case "pourover":
|
||||
return (
|
||||
<svg {...props}>
|
||||
<path d="M5 5h14l-4 7H9l-4-7z" />
|
||||
<path d="M7 12h10" />
|
||||
<path d="M9.5 12L7.5 19.5h9l-2-7.5" />
|
||||
<path d="M10 2.5a.5.5 0 01.5-.5h3a.5.5 0 01.5.5" />
|
||||
</svg>
|
||||
);
|
||||
case "espresso":
|
||||
return (
|
||||
<svg {...props}>
|
||||
<path d="M5 8h10v5c0 2.5-2 4.5-5 4.5S5 15.5 5 13V8z" />
|
||||
<path d="M15 10.5h6v1.5h-6z" />
|
||||
<path d="M3 18.5c4.5 2 13.5 2 18 0" />
|
||||
<path d="M10 17.5v2" />
|
||||
</svg>
|
||||
);
|
||||
case "coldbrew":
|
||||
return (
|
||||
<svg {...props}>
|
||||
<path d="M7 4h10l-1.5 16.5c0 1-1.5 1.5-3.5 1.5s-3.5-.5-3.5-1.5L7 4z" />
|
||||
<path d="M9.5 12h3v3h-3z" />
|
||||
<path d="M11.5 8h3v3h-3z" />
|
||||
<path d="M12 2l-2 4" />
|
||||
</svg>
|
||||
);
|
||||
case "aeropress":
|
||||
return (
|
||||
<svg {...props}>
|
||||
<path d="M8 8h8v12H8z" />
|
||||
<path d="M6 20h12" />
|
||||
<path d="M10 8V3h4v5" />
|
||||
<path d="M9 3h6" />
|
||||
<path d="M9 7.5h6" />
|
||||
</svg>
|
||||
);
|
||||
case "frenchpress":
|
||||
return (
|
||||
<svg {...props}>
|
||||
<path d="M8 6h8v14c0 1-1 2-3 2h-2c-2 0-3-1-3-2V6z" />
|
||||
<path d="M7 6h10" />
|
||||
<circle cx="12" cy="2.5" r="1.5" />
|
||||
<path d="M12 4v8" />
|
||||
<path d="M9 12h6" />
|
||||
<path d="M8 8H5v10h3" />
|
||||
</svg>
|
||||
);
|
||||
case "chemex":
|
||||
return (
|
||||
<svg {...props}>
|
||||
<path d="M8 4h8c-1 3.5-1.5 5-1.5 8s.5 4.5 1.5 8H8c1-3.5 1.5-5 1.5-8s-.5-4.5-1.5-8z" />
|
||||
<path d="M9.5 10.5h5" />
|
||||
<path d="M9.5 12.5h5" />
|
||||
<circle cx="12" cy="11.5" r="1.2" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
case "mokapot":
|
||||
return (
|
||||
<svg {...props}>
|
||||
<path d="M9 5h6l-1 7H10z" />
|
||||
<path d="M10 12.5h4l1.2 7H8.8z" />
|
||||
<path d="M9 5l3-2 3 2" />
|
||||
<circle cx="12" cy="3" r="1" />
|
||||
<path d="M9 6.2l-2 1.5 2 1" />
|
||||
<path d="M14 7.5h3.5v7H14" />
|
||||
</svg>
|
||||
);
|
||||
case "v60":
|
||||
return (
|
||||
<svg {...props}>
|
||||
<path d="M6 5h12l-4.5 7h-3z" />
|
||||
<path d="M8 12h8" />
|
||||
<path d="M9.5 12L8.5 19h7l-1-7" />
|
||||
<path d="M16.5 5a2 2 0 010 4" />
|
||||
</svg>
|
||||
);
|
||||
case "syphon":
|
||||
return (
|
||||
<svg {...props}>
|
||||
<path d="M9.5 4h5v5h-5z" />
|
||||
<path d="M12 9v4" />
|
||||
<circle cx="12" cy="16" r="3.2" />
|
||||
<path d="M7 21h10" />
|
||||
<path d="M8.5 16H6v5h3v-2" />
|
||||
</svg>
|
||||
);
|
||||
case "dripbrew":
|
||||
return (
|
||||
<svg {...props}>
|
||||
<path d="M6 21h12" />
|
||||
<path d="M7 21V5c0-1 6-1 6 0v2" />
|
||||
<path d="M8.5 5h8v3h-8z" />
|
||||
<path d="M9.5 12h5v7h-5z" />
|
||||
<path d="M14.5 14h2v3h-2" />
|
||||
<path d="M11.5 8v2.5" />
|
||||
</svg>
|
||||
);
|
||||
default:
|
||||
return <span>☕</span>;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Main App ───
|
||||
export default function CoffeeLogbook() {
|
||||
const { token, user, loading, logout } = useContext(AuthContext);
|
||||
@@ -79,8 +194,13 @@ export default function CoffeeLogbook() {
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
const [showSyncedStatus, setShowSyncedStatus] = useState(false);
|
||||
|
||||
const [prepActivePage, setPrepActivePage] = useState(0);
|
||||
|
||||
useEffect(() => { loadData().then(setData); }, []);
|
||||
useEffect(() => { setBrewSearchQuery(""); }, [view]);
|
||||
useEffect(() => {
|
||||
setBrewSearchQuery("");
|
||||
setPrepActivePage(0);
|
||||
}, [view]);
|
||||
|
||||
const dataRef = useRef(data);
|
||||
dataRef.current = data;
|
||||
@@ -212,7 +332,8 @@ export default function CoffeeLogbook() {
|
||||
return queryWords.every(word => searchableText.includes(word));
|
||||
})
|
||||
.sort((a, b) => b.createdAt - a.createdAt);
|
||||
const methodCounts = { pourover: 0, espresso: 0, coldbrew: 0 };
|
||||
const methodCounts = {};
|
||||
METHODS.forEach(m => methodCounts[m] = 0);
|
||||
brewLogs.forEach(l => { if (methodCounts[l.method] !== undefined) methodCounts[l.method]++; });
|
||||
|
||||
const filterPillCls = (active) => `px-3.5 py-1.5 rounded-full border text-xs font-medium whitespace-nowrap cursor-pointer transition-all ${active ? "bg-[#2C1810] text-[#FAF6F1] border-[#2C1810] dark:bg-[#FAF6F1] dark:text-[#2C1810] dark:border-[#FAF6F1]" : "bg-white border-[#E8DFD3] text-[#6B5744] dark:bg-[#22120B] dark:border-[#3B2217] dark:text-[#C8B9A6]"}`;
|
||||
@@ -240,6 +361,53 @@ export default function CoffeeLogbook() {
|
||||
{/* ── Dashboard ── */}
|
||||
{view === "dashboard" && (
|
||||
<div className="animate-page-enter">
|
||||
{/* Preparation Methods */}
|
||||
<div className="text-[13px] font-semibold text-[#6B5744] dark:text-[#C8B9A6] uppercase tracking-widest mb-3">Preparation Methods</div>
|
||||
<div
|
||||
className="flex overflow-x-auto pb-4 scrollbar-none snap-x snap-mandatory -mx-5"
|
||||
onScroll={(e) => {
|
||||
const scrollLeft = e.target.scrollLeft;
|
||||
const width = e.target.clientWidth;
|
||||
const page = Math.round(scrollLeft / width);
|
||||
setPrepActivePage(page);
|
||||
}}
|
||||
>
|
||||
{(() => {
|
||||
const chunks = [];
|
||||
for (let i = 0; i < METHODS.length; i += 8) {
|
||||
chunks.push(METHODS.slice(i, i + 8));
|
||||
}
|
||||
return chunks.map((pageMethods, pageIdx) => (
|
||||
<div key={pageIdx} className="w-full flex-shrink-0 snap-start grid grid-cols-4 gap-x-4 gap-y-5 px-5">
|
||||
{pageMethods.map(m => (
|
||||
<div key={m}
|
||||
className="flex flex-col items-center cursor-pointer group"
|
||||
onClick={() => { setBrewFilter(m); setView("brews"); }}>
|
||||
<div className="w-full aspect-square flex items-center justify-center rounded-2xl bg-white dark:bg-[#22120B] border border-[#E8DFD3] dark:border-[#3B2217] transition-all group-hover:scale-[1.03] group-active:scale-[0.98] shadow-[0_1px_3px_rgba(44,24,16,0.04)] dark:shadow-none"
|
||||
style={{ borderTop: `3px solid ${METHOD_COLORS[m]}` }}>
|
||||
<MethodIcon method={m} className="w-9 h-9 text-[#6B5744] dark:text-[#C8B9A6] group-hover:text-[#2C1810] dark:group-hover:text-[#FAF6F1] transition-colors" />
|
||||
</div>
|
||||
<div className="text-[10px] text-[#9C8B7A] dark:text-[#C8B9A6] uppercase tracking-wider mt-2 text-center font-medium group-hover:text-[#2C1810] dark:group-hover:text-[#FAF6F1] transition-colors">
|
||||
{METHOD_LABELS[m]}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
));
|
||||
})()}
|
||||
</div>
|
||||
{(() => {
|
||||
const pagesCount = Math.ceil(METHODS.length / 8);
|
||||
return pagesCount > 1 ? (
|
||||
<div className="flex justify-center gap-1.5 mt-1 mb-6">
|
||||
{Array.from({ length: pagesCount }).map((_, idx) => (
|
||||
<div key={idx} className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${prepActivePage === idx ? "bg-[#2C1810] dark:bg-[#FAF6F1] w-3" : "bg-[#E8DFD3] dark:bg-[#3B2217]"}`} />
|
||||
))}
|
||||
</div>
|
||||
) : <div className="mb-6" />;
|
||||
})()}
|
||||
|
||||
{/* Statistics */}
|
||||
<div className="flex gap-2 mb-5">
|
||||
{[{ num: beans.length, label: "Beans" }, { num: brewLogs.length, label: "Brews" }, { num: new Set(brewLogs.map(l => l.beanId)).size, label: "Tried" }].map(s => (
|
||||
<div key={s.label} className="flex-1 bg-white dark:bg-[#22120B] border border-[#E8DFD3] dark:border-[#3B2217] rounded-2xl p-3.5 text-center transition-colors duration-200">
|
||||
@@ -248,16 +416,8 @@ export default function CoffeeLogbook() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-[13px] font-semibold text-[#6B5744] dark:text-[#C8B9A6] uppercase tracking-widest mb-3">By Method</div>
|
||||
<div className="flex gap-2 mb-6">
|
||||
{METHODS.map(m => (
|
||||
<div key={m} className="flex-1 bg-white dark:bg-[#22120B] border border-[#E8DFD3] dark:border-[#3B2217] rounded-2xl p-3 text-center transition-colors duration-200" style={{ borderTop: `3px solid ${METHOD_COLORS[m]}` }}>
|
||||
<div className="text-xl mb-1">{METHOD_ICONS[m]}</div>
|
||||
<div className="font-serif text-xl font-bold text-[#2C1810] dark:text-[#FAF6F1]">{methodCounts[m]}</div>
|
||||
<div className="text-[10px] text-[#9C8B7A] dark:text-[#C8B9A6] uppercase tracking-widest mt-0.5">{METHOD_LABELS[m]}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Recent Brews */}
|
||||
<div className="text-[13px] font-semibold text-[#6B5744] dark:text-[#C8B9A6] uppercase tracking-widest mb-3">Recent Brews</div>
|
||||
{brewLogs.length === 0 ? (
|
||||
<div className="text-center py-12 text-[#9C8B7A] dark:text-[#C8B9A6]">
|
||||
@@ -304,6 +464,14 @@ export default function CoffeeLogbook() {
|
||||
<div className="flex gap-2 mt-2.5 flex-wrap">
|
||||
{bean.roastType && <span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${roastTagCls}`}>{bean.roastType}</span>}
|
||||
{bean.roastDate && <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] dark:bg-[#2C1810] text-[#6B5744] dark:text-[#C8B9A6] font-medium">Roasted {bean.roastDate}</span>}
|
||||
{(() => {
|
||||
const ageInfo = getRoastAgingInfo(bean.roastDate);
|
||||
return ageInfo ? (
|
||||
<span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${ageInfo.style}`}>
|
||||
{ageInfo.label}
|
||||
</span>
|
||||
) : null;
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import BrewCard from "./BrewCard";
|
||||
import { getRoastAgingInfo } from "../constants";
|
||||
|
||||
export default function BeanDetail({ bean, logs, onBack, onEdit, onDelete }) {
|
||||
const beanLogs = logs.filter(l => l.beanId === bean.id).sort((a, b) => b.createdAt - a.createdAt);
|
||||
@@ -17,6 +18,14 @@ export default function BeanDetail({ bean, logs, onBack, onEdit, onDelete }) {
|
||||
<div className="flex gap-2 mt-2.5 flex-wrap">
|
||||
{bean.roastType && <span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${roastTagCls}`}>{bean.roastType}</span>}
|
||||
{bean.roastDate && <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] dark:bg-[#2C1810] text-[#6B5744] dark:text-[#C8B9A6] font-medium">Roasted {bean.roastDate}</span>}
|
||||
{(() => {
|
||||
const ageInfo = getRoastAgingInfo(bean.roastDate);
|
||||
return ageInfo ? (
|
||||
<span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${ageInfo.style}`}>
|
||||
{ageInfo.label}
|
||||
</span>
|
||||
) : null;
|
||||
})()}
|
||||
<span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] dark:bg-[#2C1810] text-[#6B5744] dark:text-[#C8B9A6] font-medium">{beanLogs.length} brew{beanLogs.length !== 1 ? "s" : ""}</span>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-4">
|
||||
|
||||
@@ -5,7 +5,7 @@ export default function BrewCard({ log, beanName }) {
|
||||
const allFields = Object.entries(log)
|
||||
.filter(([k]) => !["id", "beanId", "method", "createdAt", "recipeDetails", "tasteNotes", "updatedAt", "isDeleted"].includes(k))
|
||||
.filter(([, v]) => v !== "" && v != null);
|
||||
const fieldLabels = { grindSize: "Grind", waterTemp: "Temp", beanWeight: "Weight", brewRatio: "Ratio", brewTime: "Time", numPours: "Pours", dose: "Dose", yield: "Yield", waterVolume: "Water", steepTime: "Steep" };
|
||||
const fieldLabels = { grindSize: "Grind", waterTemp: "Temp", beanWeight: "Weight", brewRatio: "Ratio", brewTime: "Time", numPours: "Pours", dose: "Dose", yield: "Yield", waterVolume: "Water", steepTime: "Steep", inverted: "Inverted", filterType: "Filter" };
|
||||
return (
|
||||
<div className="relative mb-3">
|
||||
<div className="brew-method-bar" style={{ background: color }} />
|
||||
|
||||
@@ -2,10 +2,68 @@ import { useState } from "react";
|
||||
import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS, inputCls, labelCls } from "../constants";
|
||||
import Modal from "./Modal";
|
||||
|
||||
const parseRatio = (ratioStr) => {
|
||||
if (!ratioStr) return null;
|
||||
// Matches "1:15", "1/15", "15"
|
||||
const match = ratioStr.match(/(?:1\s*[:/]\s*)?(\d+(?:\.\d+)?)/);
|
||||
if (match) {
|
||||
const val = parseFloat(match[1]);
|
||||
return val > 0 ? val : null;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export default function BrewForm({ beans, onSave, onClose }) {
|
||||
const [method, setMethod] = useState("pourover");
|
||||
const [form, setForm] = useState({ beanId: beans[0]?.id || "" });
|
||||
const set = (k, v) => setForm(p => ({ ...p, [k]: v }));
|
||||
|
||||
const handleFieldChange = (key, value) => {
|
||||
setForm(prev => {
|
||||
const next = { ...prev, [key]: value };
|
||||
|
||||
const getNum = (str) => {
|
||||
if (!str) return null;
|
||||
const val = parseFloat(str);
|
||||
return isNaN(val) ? null : val;
|
||||
};
|
||||
|
||||
const ratioKey = next.brewRatio !== undefined ? "brewRatio" : null;
|
||||
const ratioVal = ratioKey ? parseRatio(next[ratioKey]) : null;
|
||||
|
||||
if (ratioVal) {
|
||||
if (key === "beanWeight" || key === "dose") {
|
||||
const coffeeVal = getNum(value);
|
||||
if (coffeeVal) {
|
||||
const calculatedWater = Math.round(coffeeVal * ratioVal);
|
||||
if (next.yield !== undefined) next.yield = `${calculatedWater}g`;
|
||||
if (next.waterVolume !== undefined) next.waterVolume = `${calculatedWater}ml`;
|
||||
}
|
||||
} else if (key === "yield" || key === "waterVolume") {
|
||||
const waterVal = getNum(value);
|
||||
if (waterVal) {
|
||||
const calculatedCoffee = Math.round((waterVal / ratioVal) * 10) / 10;
|
||||
if (next.beanWeight !== undefined) next.beanWeight = `${calculatedCoffee}g`;
|
||||
if (next.dose !== undefined) next.dose = `${calculatedCoffee}g`;
|
||||
}
|
||||
} else if (key === ratioKey) {
|
||||
const coffeeStr = next.beanWeight || next.dose;
|
||||
const coffeeVal = getNum(coffeeStr);
|
||||
if (coffeeVal) {
|
||||
const calculatedWater = Math.round(coffeeVal * ratioVal);
|
||||
if (next.yield !== undefined) next.yield = `${calculatedWater}g`;
|
||||
if (next.waterVolume !== undefined) next.waterVolume = `${calculatedWater}ml`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleMethodChange = (m) => {
|
||||
setMethod(m);
|
||||
setForm({ beanId: form.beanId }); // Preserve selected bean but reset inputs
|
||||
};
|
||||
|
||||
if (beans.length === 0) {
|
||||
return (
|
||||
@@ -29,23 +87,82 @@ export default function BrewForm({ beans, onSave, onClose }) {
|
||||
pourover: [
|
||||
{ key: "grindSize", label: "Grind Size", placeholder: "e.g. 18 clicks", hint: "Relative to your grinder" },
|
||||
{ key: "waterTemp", label: "Water Temp", placeholder: "e.g. 93°C" },
|
||||
{ key: "beanWeight", label: "Bean Weight", placeholder: "e.g. 15g" },
|
||||
{ key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 15g" },
|
||||
{ key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:16" },
|
||||
{ key: "waterVolume", label: "Water Volume", placeholder: "e.g. 240ml", hint: "Calculated from ratio" },
|
||||
{ key: "brewTime", label: "Brew Time", placeholder: "e.g. 3:30" },
|
||||
{ key: "numPours", label: "# of Pours", placeholder: "e.g. 4", type: "number" },
|
||||
],
|
||||
espresso: [
|
||||
{ key: "grindSize", label: "Grind Size", placeholder: "e.g. 8" },
|
||||
{ key: "dose", label: "Dose", placeholder: "e.g. 18g" },
|
||||
{ key: "yield", label: "Yield", placeholder: "e.g. 36g" },
|
||||
{ key: "dose", label: "Coffee Dose", placeholder: "e.g. 18g" },
|
||||
{ key: "brewRatio", label: "Target Ratio", placeholder: "e.g. 1:2" },
|
||||
{ key: "yield", label: "Yield (Output)", placeholder: "e.g. 36g", hint: "Calculated from ratio" },
|
||||
{ key: "brewTime", label: "Brew Time", placeholder: "e.g. 28s" },
|
||||
],
|
||||
coldbrew: [
|
||||
{ key: "grindSize", label: "Grind Size", placeholder: "e.g. coarse" },
|
||||
{ key: "beanWeight", label: "Bean Weight", placeholder: "e.g. 100g" },
|
||||
{ key: "waterVolume", label: "Water Volume", placeholder: "e.g. 700ml" },
|
||||
{ key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 100g" },
|
||||
{ key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:10" },
|
||||
{ key: "waterVolume", label: "Water Volume", placeholder: "e.g. 1000ml", hint: "Calculated from ratio" },
|
||||
{ key: "steepTime", label: "Steep Time", placeholder: "e.g. 18 hours" },
|
||||
],
|
||||
aeropress: [
|
||||
{ key: "grindSize", label: "Grind Size", placeholder: "e.g. 12 clicks" },
|
||||
{ key: "waterTemp", label: "Water Temp", placeholder: "e.g. 85°C" },
|
||||
{ key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 15g" },
|
||||
{ key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:15" },
|
||||
{ key: "waterVolume", label: "Water Volume", placeholder: "e.g. 225ml", hint: "Calculated from ratio" },
|
||||
{ key: "brewTime", label: "Steep Time", placeholder: "e.g. 2:00" },
|
||||
{ key: "inverted", label: "Inverted?", placeholder: "e.g. Yes/No" },
|
||||
],
|
||||
frenchpress: [
|
||||
{ key: "grindSize", label: "Grind Size", placeholder: "e.g. coarse" },
|
||||
{ key: "waterTemp", label: "Water Temp", placeholder: "e.g. 95°C" },
|
||||
{ key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 30g" },
|
||||
{ key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:15" },
|
||||
{ key: "waterVolume", label: "Water Volume", placeholder: "e.g. 450ml", hint: "Calculated from ratio" },
|
||||
{ key: "brewTime", label: "Steep Time", placeholder: "e.g. 4:00" },
|
||||
],
|
||||
chemex: [
|
||||
{ key: "grindSize", label: "Grind Size", placeholder: "e.g. medium-coarse" },
|
||||
{ key: "waterTemp", label: "Water Temp", placeholder: "e.g. 93°C" },
|
||||
{ key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 30g" },
|
||||
{ key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:15" },
|
||||
{ key: "waterVolume", label: "Water Volume", placeholder: "e.g. 450ml", hint: "Calculated from ratio" },
|
||||
{ key: "brewTime", label: "Brew Time", placeholder: "e.g. 4:00" },
|
||||
{ key: "filterType", label: "Filter Type", placeholder: "e.g. Chemex Circle" },
|
||||
],
|
||||
mokapot: [
|
||||
{ key: "grindSize", label: "Grind Size", placeholder: "e.g. fine-medium" },
|
||||
{ key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 15g" },
|
||||
{ key: "waterVolume", label: "Water Volume", placeholder: "e.g. 150ml" },
|
||||
{ key: "brewTime", label: "Extraction Time", placeholder: "e.g. 1:30" },
|
||||
],
|
||||
v60: [
|
||||
{ key: "grindSize", label: "Grind Size", placeholder: "e.g. medium-fine" },
|
||||
{ key: "waterTemp", label: "Water Temp", placeholder: "e.g. 92°C" },
|
||||
{ key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 15g" },
|
||||
{ key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:16" },
|
||||
{ key: "waterVolume", label: "Water Volume", placeholder: "e.g. 240ml", hint: "Calculated from ratio" },
|
||||
{ key: "brewTime", label: "Brew Time", placeholder: "e.g. 3:00" },
|
||||
{ key: "numPours", label: "# of Pours", placeholder: "e.g. 3", type: "number" },
|
||||
],
|
||||
syphon: [
|
||||
{ key: "grindSize", label: "Grind Size", placeholder: "e.g. medium" },
|
||||
{ key: "waterTemp", label: "Water Temp", placeholder: "e.g. 94°C" },
|
||||
{ key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 20g" },
|
||||
{ key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:15" },
|
||||
{ key: "waterVolume", label: "Water Volume", placeholder: "e.g. 300ml", hint: "Calculated from ratio" },
|
||||
{ key: "brewTime", label: "Brew Time", placeholder: "e.g. 2:10" },
|
||||
],
|
||||
dripbrew: [
|
||||
{ key: "grindSize", label: "Grind Size", placeholder: "e.g. medium" },
|
||||
{ key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 60g" },
|
||||
{ key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:16" },
|
||||
{ key: "waterVolume", label: "Water Volume", placeholder: "e.g. 960ml", hint: "Calculated from ratio" },
|
||||
{ key: "brewTime", label: "Brew Time", placeholder: "e.g. 6:00" },
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -53,18 +170,18 @@ export default function BrewForm({ beans, onSave, onClose }) {
|
||||
{(close) => (
|
||||
<>
|
||||
<div className="font-serif text-xl font-semibold text-[#2C1810] dark:text-[#FAF6F1] mb-5">Log a Brew</div>
|
||||
<div className="flex gap-1.5 mb-5">
|
||||
<div className="flex gap-1.5 mb-5 overflow-x-auto pb-1">
|
||||
{METHODS.map(m => (
|
||||
<button key={m}
|
||||
className={`flex-1 py-3 px-2 border-2 bg-white dark:bg-[#22120B] rounded-xl cursor-pointer text-center text-xs font-semibold transition-all ${method === m ? "border-current" : "border-[#E8DFD3] dark:border-[#3B2217] text-[#9C8B7A] dark:text-[#C8B9A6]"}`}
|
||||
className={`flex-1 min-w-[72px] py-3 px-2 border-2 bg-white dark:bg-[#22120B] rounded-xl cursor-pointer text-center text-xs font-semibold transition-all ${method === m ? "border-current font-bold scale-[1.02]" : "border-[#E8DFD3] dark:border-[#3B2217] text-[#9C8B7A] dark:text-[#C8B9A6]"}`}
|
||||
style={{ color: method === m ? METHOD_COLORS[m] : undefined }}
|
||||
onClick={() => setMethod(m)}>
|
||||
onClick={() => handleMethodChange(m)}>
|
||||
<div className="text-xl mb-1">{METHOD_ICONS[m]}</div>{METHOD_LABELS[m]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="mb-4"><label className={labelCls}>Bean *</label>
|
||||
<select className={inputCls} value={form.beanId} onChange={e => set("beanId", e.target.value)}>
|
||||
<select className={inputCls} value={form.beanId} onChange={e => handleFieldChange("beanId", e.target.value)}>
|
||||
{beans.map(b => <option key={b.id} value={b.id} className="dark:bg-[#150B07]">{b.name}{b.roastery ? ` — ${b.roastery}` : ""}</option>)}
|
||||
</select></div>
|
||||
<div className="flex flex-wrap gap-2.5 mb-4">
|
||||
@@ -72,7 +189,7 @@ export default function BrewForm({ beans, onSave, onClose }) {
|
||||
<div key={f.key} className="flex-1 min-w-[45%]">
|
||||
<label className={labelCls}>{f.label}</label>
|
||||
<input className={inputCls} type={f.type || "text"} placeholder={f.placeholder}
|
||||
value={form[f.key] || ""} onChange={e => set(f.key, e.target.value)} />
|
||||
value={form[f.key] || ""} onChange={e => handleFieldChange(f.key, e.target.value)} />
|
||||
{f.hint && <div className="text-[11px] text-[#9C8B7A] dark:text-[#C8B9A6] mt-1">{f.hint}</div>}
|
||||
</div>
|
||||
))}
|
||||
@@ -80,10 +197,10 @@ export default function BrewForm({ beans, onSave, onClose }) {
|
||||
<div className="mb-4"><label className={labelCls}>{method === "pourover" ? "Recipe Details" : "Notes"}</label>
|
||||
<textarea className={`${inputCls} resize-y min-h-[80px]`}
|
||||
placeholder="Describe your recipe, technique, or anything notable…"
|
||||
value={form.recipeDetails || ""} onChange={e => set("recipeDetails", e.target.value)} /></div>
|
||||
value={form.recipeDetails || ""} onChange={e => handleFieldChange("recipeDetails", e.target.value)} /></div>
|
||||
<div className="mb-4"><label className={labelCls}>Taste Notes</label>
|
||||
<input className={inputCls} placeholder="e.g. citrus, chocolate, floral"
|
||||
value={form.tasteNotes || ""} onChange={e => set("tasteNotes", e.target.value)} /></div>
|
||||
value={form.tasteNotes || ""} onChange={e => handleFieldChange("tasteNotes", e.target.value)} /></div>
|
||||
<button className="w-full py-3.5 border-none rounded-xl bg-[#2C1810] dark:bg-[#FAF6F1] text-[#FAF6F1] dark:text-[#2C1810] text-sm font-semibold cursor-pointer hover:opacity-90 mt-2"
|
||||
onClick={() => close(() => onSave({ ...form, method }))}>Save Brew Log</button>
|
||||
</>
|
||||
|
||||
@@ -1,8 +1,66 @@
|
||||
export const ROAST_TYPES = ["Light", "Light-Medium", "Medium", "Medium-Dark", "Dark"];
|
||||
export const METHODS = ["pourover", "espresso", "coldbrew"];
|
||||
export const METHOD_LABELS = { pourover: "Pour Over", espresso: "Espresso", coldbrew: "Cold Brew" };
|
||||
export const METHOD_ICONS = { pourover: "☕", espresso: "⚡", coldbrew: "❄️" };
|
||||
export const METHOD_COLORS = { pourover: "#8B6914", espresso: "#5C3317", coldbrew: "#2F4F6F" };
|
||||
export const METHODS = ["pourover", "espresso", "coldbrew", "aeropress", "frenchpress", "chemex", "mokapot", "v60", "syphon", "dripbrew"];
|
||||
export const METHOD_LABELS = {
|
||||
pourover: "Pour Over",
|
||||
espresso: "Espresso",
|
||||
coldbrew: "Cold Brew",
|
||||
aeropress: "Aeropress",
|
||||
frenchpress: "French Press",
|
||||
chemex: "Chemex",
|
||||
mokapot: "Moka Pot",
|
||||
v60: "V60",
|
||||
syphon: "Syphon",
|
||||
dripbrew: "Drip Brew"
|
||||
};
|
||||
export const METHOD_ICONS = {
|
||||
pourover: "☕",
|
||||
espresso: "⚡",
|
||||
coldbrew: "❄️",
|
||||
aeropress: "🚀",
|
||||
frenchpress: "🥛",
|
||||
chemex: "🏺",
|
||||
mokapot: "🚂",
|
||||
v60: "☕",
|
||||
syphon: "🧪",
|
||||
dripbrew: "💧"
|
||||
};
|
||||
export const METHOD_COLORS = {
|
||||
pourover: "#8B6914",
|
||||
espresso: "#5C3317",
|
||||
coldbrew: "#2F4F6F",
|
||||
aeropress: "#A0522D",
|
||||
frenchpress: "#4E3629",
|
||||
chemex: "#8E6B58",
|
||||
mokapot: "#6E7B8B",
|
||||
v60: "#A67B5B",
|
||||
syphon: "#4E6E5D",
|
||||
dripbrew: "#A89B8C"
|
||||
};
|
||||
|
||||
export const inputCls = "w-full px-3.5 py-3 border border-[#E8DFD3] dark:border-[#3B2217] rounded-lg bg-white dark:bg-[#150B07] text-sm text-[#2C1810] dark:text-[#FAF6F1] transition-colors outline-none focus:border-[#8B6914] dark:focus:border-[#D4A325]";
|
||||
export const labelCls = "block text-[10px] font-semibold uppercase tracking-wider text-[#6B5744] dark:text-[#C8B9A6] mb-1.5";
|
||||
|
||||
export function getRoastAgingInfo(roastDateStr) {
|
||||
if (!roastDateStr) return null;
|
||||
const roastDate = new Date(roastDateStr);
|
||||
if (isNaN(roastDate.getTime())) return null;
|
||||
|
||||
const today = new Date();
|
||||
roastDate.setHours(0, 0, 0, 0);
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
const diffTime = today.getTime() - roastDate.getTime();
|
||||
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays < 0) {
|
||||
return { status: "Upcoming", days: diffDays, label: "Not roasted yet", style: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300" };
|
||||
} else if (diffDays <= 5) {
|
||||
return { status: "Off-gassing", days: diffDays, label: `${diffDays}d old · Off-gassing`, style: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300" };
|
||||
} else if (diffDays <= 21) {
|
||||
return { status: "Peak Flavor", days: diffDays, label: `${diffDays}d old · Peak Flavor`, style: "bg-emerald-100 text-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-300" };
|
||||
} else if (diffDays <= 45) {
|
||||
return { status: "Good", days: diffDays, label: `${diffDays}d old · Good`, style: "bg-stone-200 text-stone-800 dark:bg-stone-800/40 dark:text-stone-300" };
|
||||
} else {
|
||||
return { status: "Aging", days: diffDays, label: `${diffDays}d old · Aging`, style: "bg-rose-100 text-rose-800 dark:bg-rose-950/30 dark:text-rose-300" };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -178,4 +178,13 @@
|
||||
@keyframes sync-check-draw {
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
/* Hide scrollbar utility */
|
||||
.scrollbar-none::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.scrollbar-none {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user