From 9f8695a8703bc7b6b6e013ce82a921df02154391 Mon Sep 17 00:00:00 2001 From: gitea-actions Date: Thu, 14 May 2026 15:57:15 +0000 Subject: [PATCH] chore: release [ci skip] --- .../skills/feature-workflow-tracer/SKILL.md | 44 +++-- .claude/skills/learning-assistant/SKILL.md | 62 ++++-- .claude/skills/prompt-optimizer/SKILL.md | 183 +++++++++++------- TODO.md | 6 +- app/(main)/manager-signup/page.tsx | 5 +- app/(main)/page.tsx | 4 +- app/(main)/payment/page.tsx | 1 - app/(manager)/manager/create-staff/page.tsx | 5 +- app/(manager)/manager/page.tsx | 2 +- app/(staff)/staff/schedule/page.tsx | 73 +++++-- components/molecules/cards/ShiftCard.tsx | 24 ++- components/organisms/forms/LoginForm.tsx | 5 +- .../organisms/manager/DeleteConfirm.tsx | 4 +- components/organisms/manager/ProductsTab.tsx | 4 +- components/organisms/manager/ReviewsTab.tsx | 2 +- components/organisms/modals/ReviewModal.tsx | 4 +- .../organisms/product-grid/ProductGrid.tsx | 4 +- .../shift-schedule/MobileShiftView.tsx | 56 ++++-- .../shift-schedule/MonthlyCalendar.tsx | 8 +- .../shift-schedule/ShiftCreateModal.tsx | 24 ++- .../shift-schedule/ShiftDetailModal.tsx | 24 +-- .../shift-schedule/WeeklySchedule.tsx | 101 +++++++--- k8s.yaml | 2 +- lib/shift-context.tsx | 118 ++++++----- package-lock.json | 4 +- package.json | 2 +- 26 files changed, 509 insertions(+), 262 deletions(-) diff --git a/.claude/skills/feature-workflow-tracer/SKILL.md b/.claude/skills/feature-workflow-tracer/SKILL.md index 25f088e..181ae93 100644 --- a/.claude/skills/feature-workflow-tracer/SKILL.md +++ b/.claude/skills/feature-workflow-tracer/SKILL.md @@ -1,15 +1,26 @@ --- name: feature-workflow-tracer -description: Trace and explain the end-to-end workflow of any feature or functionality in a codebase. Use this skill whenever the user wants to understand how a feature works, asks "how does X work in the code", "trace the workflow of Y", "where does Z start", "what happens when I click login", or any question about following code flow through a project. Also trigger when the user is onboarding to a new codebase and needs to understand how a specific function, button, route, or user action maps to actual code execution. Trigger even for vague questions like "how is auth handled here?" or "explain the checkout flow". +description: + Trace and explain the end-to-end workflow of any feature or functionality in a + codebase. Use this skill whenever the user wants to understand how a feature + works, asks "how does X work in the code", "trace the workflow of Y", "where + does Z start", "what happens when I click login", or any question about + following code flow through a project. Also trigger when the user is + onboarding to a new codebase and needs to understand how a specific function, + button, route, or user action maps to actual code execution. Trigger even for + vague questions like "how is auth handled here?" or "explain the checkout + flow". --- # Feature Workflow Tracer -You are a **senior software engineer** helping a new team member understand how a specific feature works end-to-end in an unfamiliar codebase. +You are a **senior software engineer** helping a new team member understand how +a specific feature works end-to-end in an unfamiliar codebase. ## Your Task -When the user provides a **feature name** (e.g., "login", "checkout", "forgot password"), follow these phases: +When the user provides a **feature name** (e.g., "login", "checkout", "forgot +password"), follow these phases: ### Phase 1 — Explore Project Structure @@ -30,9 +41,11 @@ ls src/ 2>/dev/null || ls app/ 2>/dev/null || ls pages/ 2>/dev/null ``` Identify: + - **Stack** (React, Laravel, Next.js, Vue, Express, etc.) - **Architecture pattern** (MVC, feature-based, domain-driven, etc.) -- **Entry point** for the requested feature (route file, page component, or controller) +- **Entry point** for the requested feature (route file, page component, or + controller) ### Phase 2 — Trace the Workflow @@ -70,6 +83,7 @@ Produce a structured workflow report in this format: ### Step-by-step Flow **1. [Action description]** — `path/to/file.ext:LINE` + > What this step does in plain English ```language @@ -77,9 +91,11 @@ Produce a structured workflow report in this format: ``` **2. [Next step]** — `path/to/file.ext:LINE` + > ... -*(continue until the feature's final outcome: DB write, API response, page redirect, etc.)* +_(continue until the feature's final outcome: DB write, API response, page +redirect, etc.)_ ### Summary @@ -89,31 +105,35 @@ Produce a structured workflow report in this format: ## Tracing Rules -| Rule | Detail | -|------|--------| -| **Max depth** | 5 layers (UI → handler → service → repo → DB). Stop before third-party library internals. | -| **Always cite** | Every step must have `file:line`. Never say "somewhere in the codebase." | -| **Skip** | Config files, `.env`, migrations, boilerplate. Focus on application logic only. | -| **Branches** | If a step has success/error paths, show both as `1a` and `1b`. | -| **Honesty** | If you cannot find a file or function, say so explicitly — never guess. | +| Rule | Detail | +| --------------- | ----------------------------------------------------------------------------------------- | +| **Max depth** | 5 layers (UI → handler → service → repo → DB). Stop before third-party library internals. | +| **Always cite** | Every step must have `file:line`. Never say "somewhere in the codebase." | +| **Skip** | Config files, `.env`, migrations, boilerplate. Focus on application logic only. | +| **Branches** | If a step has success/error paths, show both as `1a` and `1b`. | +| **Honesty** | If you cannot find a file or function, say so explicitly — never guess. | ## Tips for Common Stacks ### React + REST API + - Start from the component with the button/form - Find the `onClick` / `onSubmit` handler - Follow the API call (`axios.post`, `fetch`) to the backend route - In the backend, trace: route → controller → service → model ### Laravel (MVC) + - Start from `routes/web.php` or `routes/api.php` - Follow: route → Controller method → Service (if any) → Model / DB query ### Next.js + - Start from the page in `pages/` or `app/` - For server actions: trace `action=` or `use server` functions - For API routes: trace `pages/api/` or `app/api/` ### Express.js + - Start from route definition in `routes/` or `app.js` - Follow: router → middleware → controller → DB call diff --git a/.claude/skills/learning-assistant/SKILL.md b/.claude/skills/learning-assistant/SKILL.md index 58613c6..d225006 100644 --- a/.claude/skills/learning-assistant/SKILL.md +++ b/.claude/skills/learning-assistant/SKILL.md @@ -2,40 +2,51 @@ name: learning-assistant description: > A personal learning companion for students and self-learners. Use this skill - whenever the user is studying, learning something new, asking about code, trying to - understand a concept, or exploring a technical or academic topic. Triggers include: - "how does X work", "explain Y to me", "what is Z", "I'm learning about...", - "can you help me understand...", "what does this code do", "I don't get X", - or any question that sounds like it comes from someone trying to build understanding - rather than just get a quick fact. Use this skill proactively — if the user is clearly - in learning mode (asking follow-up questions, exploring a topic step by step, studying - for a course), stay in this mode for the whole conversation. + whenever the user is studying, learning something new, asking about code, + trying to understand a concept, or exploring a technical or academic topic. + Triggers include: "how does X work", "explain Y to me", "what is Z", "I'm + learning about...", "can you help me understand...", "what does this code do", + "I don't get X", or any question that sounds like it comes from someone trying + to build understanding rather than just get a quick fact. Use this skill + proactively — if the user is clearly in learning mode (asking follow-up + questions, exploring a topic step by step, studying for a course), stay in + this mode for the whole conversation. --- # Learning Assistant -Your job is to help the user learn effectively. The key is to **match your response depth to what's actually being asked** — some questions need a one-liner, others need a structured breakdown. Read the question carefully and pick the right mode. +Your job is to help the user learn effectively. The key is to **match your +response depth to what's actually being asked** — some questions need a +one-liner, others need a structured breakdown. Read the question carefully and +pick the right mode. --- ## Mode 1: Simple / factual question -If the user asks a direct question with a clear, concise answer, just answer it. Don't pad it out. +If the user asks a direct question with a clear, concise answer, just answer it. +Don't pad it out. **Examples of simple questions:** + - "What does `===` mean in JavaScript?" - "What's the difference between TCP and UDP?" - "What does the `final` keyword do in Java?" -**How to respond:** One to three sentences. Be accurate and direct. If there's a one-line example that makes it instantly clear, include it. Don't add sections or menus. +**How to respond:** One to three sentences. Be accurate and direct. If there's a +one-line example that makes it instantly clear, include it. Don't add sections +or menus. --- ## Mode 2: Code question -If the user shares code or asks about a specific piece of code (what it does, how to use it, why it works a certain way), offer a numbered menu so they can choose what kind of help they want. +If the user shares code or asks about a specific piece of code (what it does, +how to use it, why it works a certain way), offer a numbered menu so they can +choose what kind of help they want. **Format:** + ``` [Short one-sentence explanation of what the code does] @@ -47,15 +58,20 @@ What would you like to know more about? 5. Something else — just ask ``` -Keep the initial explanation brief. The menu is there so the user drives the depth, not you. +Keep the initial explanation brief. The menu is there so the user drives the +depth, not you. --- ## Mode 3: Complex topic requiring deep explanation -If the user asks about a topic that has multiple meaningful dimensions — a concept with theory, practice, tradeoffs, and examples all worth exploring — don't try to cover everything at once. Surface the structure first and let them pick. +If the user asks about a topic that has multiple meaningful dimensions — a +concept with theory, practice, tradeoffs, and examples all worth exploring — +don't try to cover everything at once. Surface the structure first and let them +pick. **Format:** + ``` [One or two sentences situating the topic — what it is and why it matters] @@ -67,15 +83,21 @@ Which part do you want to dig into? 5. [A specific angle relevant to this topic] ``` -Adjust the menu options to fit the topic. Option 5 (or more) should be something specific and interesting about this particular subject — not a generic filler. +Adjust the menu options to fit the topic. Option 5 (or more) should be something +specific and interesting about this particular subject — not a generic filler. --- ## General principles -- **Be concise by default.** If you can say it clearly in two sentences, don't write six. +- **Be concise by default.** If you can say it clearly in two sentences, don't + write six. - **Don't front-load.** Get to the point before adding caveats or context. -- **When you give examples, make them concrete.** Toy examples are fine; vague pseudocode is not. -- **Let the user lead the depth.** Your job is to open doors, not walk through all of them at once. -- **If a follow-up question changes the depth needed, switch modes.** The modes are a guide, not a rigid script. -- **Use plain language.** Avoid unnecessary jargon. If a technical term is necessary, define it briefly the first time. +- **When you give examples, make them concrete.** Toy examples are fine; vague + pseudocode is not. +- **Let the user lead the depth.** Your job is to open doors, not walk through + all of them at once. +- **If a follow-up question changes the depth needed, switch modes.** The modes + are a guide, not a rigid script. +- **Use plain language.** Avoid unnecessary jargon. If a technical term is + necessary, define it briefly the first time. diff --git a/.claude/skills/prompt-optimizer/SKILL.md b/.claude/skills/prompt-optimizer/SKILL.md index 2e37f60..78a17b8 100644 --- a/.claude/skills/prompt-optimizer/SKILL.md +++ b/.claude/skills/prompt-optimizer/SKILL.md @@ -1,132 +1,171 @@ --- name: prompt-optimizer -description: "Help users rewrite and improve AI/LLM prompts by adding specificity, context, and constraints. Trigger this skill whenever users ask to improve, rewrite, optimize, or refine prompts for AI models. Focus on making prompts clearer, more specific, and more likely to produce better AI results. Present suggestions interactively so users can choose which improvements to apply." +description: + "Help users rewrite and improve AI/LLM prompts by adding specificity, context, + and constraints. Trigger this skill whenever users ask to improve, rewrite, + optimize, or refine prompts for AI models. Focus on making prompts clearer, + more specific, and more likely to produce better AI results. Present + suggestions interactively so users can choose which improvements to apply." --- - + # Prompt Optimizer - + A beginner-friendly skill for improving AI/LLM prompts to get better results. - + ## What This Skill Does - -This skill helps you rewrite prompts to work better with AI models like Claude. Instead of just giving you a rewritten prompt, it shows you specific improvement suggestions that you can choose to apply or skip. - + +This skill helps you rewrite prompts to work better with AI models like Claude. +Instead of just giving you a rewritten prompt, it shows you specific improvement +suggestions that you can choose to apply or skip. + ## Key Improvements - + When optimizing a prompt, focus on three main areas: - + ### 1. **Specificity** — Making the Request Clear + Good prompts are specific about what you want. Vague prompts get vague results. - + **Example improvements:** -- Add details about format: "Give me a bullet list of 5 items" instead of "tell me about X" + +- Add details about format: "Give me a bullet list of 5 items" instead of "tell + me about X" - Be clear about length: "Write 200 words" instead of "Write something short" -- Define who the audience is: "Explain this for a 10-year-old" or "Use technical language" +- Define who the audience is: "Explain this for a 10-year-old" or "Use technical + language" + ### 2. **Context** — Giving the AI Background Information + More context helps the AI make better decisions. - + **Example improvements:** + - Explain the goal: "I'm writing a resume, so focus on professional language" - Share constraints: "We only have $500 budget" or "It needs to work on mobile" - Provide background: "I already know Python but not JavaScript" + ### 3. **Constraints** — Setting Boundaries + Constraints prevent unwanted outputs. - + **Example improvements:** + - Set length limits: "Keep it under 100 words" - Specify format: "Use JSON format" or "Write as a numbered list" - Define tone: "Be casual and friendly, not formal" - Say what NOT to include: "Don't use technical jargon" + ## How to Use This Skill - + 1. **Share your prompt** — Give me the original prompt you want to improve 2. **Review suggestions** — I'll show you specific improvements in each area 3. **Choose what you like** — Pick which suggestions to apply -4. **Get the final version** — I'll rewrite your prompt with your chosen improvements +4. **Get the final version** — I'll rewrite your prompt with your chosen + improvements + ## Interactive Selection Process - + When you use this skill, you'll see: - + - **Original prompt** — Your starting point -- **Improvement suggestions** — Specific changes grouped by category (Specificity, Context, Constraints) -- **Preview examples** — What each change would look like with the improvement applied -- **Your choices** — You pick which suggestions help most (you can apply all, some, or none) -Then you get a rewritten prompt combining all your choices. - +- **Improvement suggestions** — Specific changes grouped by category + (Specificity, Context, Constraints) +- **Preview examples** — What each change would look like with the improvement + applied +- **Your choices** — You pick which suggestions help most (you can apply all, + some, or none) Then you get a rewritten prompt combining all your choices. + ### Example Interaction - + **Original:** "Write me a blog post" - + **Suggestions I might offer:** + - **Specificity**: Add a topic (e.g., "about sustainable living") - **Context**: Explain your goal (e.g., "to build authority on my website") -- **Constraints**: Set a word count (e.g., "800-1000 words") -**Your choice:** "I want all three — add topic, goal, and word count" - -**Final rewritten prompt:** -"Write an 800-1000 word blog post about sustainable living for my website. The goal is to establish my authority on eco-friendly practices. Target an audience of people interested in reducing their carbon footprint. Include 3-4 practical tips they can implement immediately, and end with a call-to-action encouraging them to sign up for my newsletter." - +- **Constraints**: Set a word count (e.g., "800-1000 words") **Your choice:** "I + want all three — add topic, goal, and word count" + +**Final rewritten prompt:** "Write an 800-1000 word blog post about sustainable +living for my website. The goal is to establish my authority on eco-friendly +practices. Target an audience of people interested in reducing their carbon +footprint. Include 3-4 practical tips they can implement immediately, and end +with a call-to-action encouraging them to sign up for my newsletter." + ## Tips for Best Results - + - **Start simple** — Even small improvements help - **Focus on your goal** — What outcome do you want? - **Add one constraint at a time** — Too many rules can be confusing - **Test and iterate** — Try the new prompt and see if results improve + ## What Makes a Good Prompt - + A prompt becomes "good" when: + - The AI understands exactly what you want ✓ - You've given enough context to explain why ✓ - You've set boundaries to prevent bad outputs ✓ - Someone else could read it and understand your intent ✓ + --- - + ## Anti-Pattern Detection - -Before suggesting improvements, scan the original prompt for these common mistakes and report them with a warning: - -| Anti-Pattern | Description | Example | -|---|---|---| -| Too generic | No clear subject, action, or goal | "Tell me about AI" | -| Ambiguous pronouns | "it", "that", "this" with no clear referent | "Fix it so it works better" | -| Internal contradiction | Two requirements that cancel each other out | "Be concise but cover everything in detail" | -| Missing context | Requests an action without explaining why or for whom | "Rewrite this paragraph" | - -**Output format:** Before showing improvement suggestions, print a "Detected Issues" block listing any anti-patterns found. If none are found, skip this block silently. Example: - + +Before suggesting improvements, scan the original prompt for these common +mistakes and report them with a warning: + +| Anti-Pattern | Description | Example | +| ---------------------- | ----------------------------------------------------- | ------------------------------------------- | +| Too generic | No clear subject, action, or goal | "Tell me about AI" | +| Ambiguous pronouns | "it", "that", "this" with no clear referent | "Fix it so it works better" | +| Internal contradiction | Two requirements that cancel each other out | "Be concise but cover everything in detail" | +| Missing context | Requests an action without explaining why or for whom | "Rewrite this paragraph" | + +**Output format:** Before showing improvement suggestions, print a "Detected +Issues" block listing any anti-patterns found. If none are found, skip this +block silently. Example: + ``` ⚠️ Detected Issues: - Too generic: No output format specified - Missing context: No audience or goal provided ``` - + --- - + ## Prompt Classification - -Automatically classify the input prompt into one of these types, then tailor your improvement suggestions accordingly: - -| Type | Trigger Keywords | Extra Suggestions to Offer | -|---|---|---| -| `code` | write, fix, debug, refactor, implement | Programming language & version, runtime environment, input/output examples | -| `content` | write, blog, email, post, describe, summarize | Target audience, tone (formal/casual), word count, platform | -| `analysis` | analyze, compare, evaluate, review, assess | Criteria for evaluation, output format (table, prose), depth of detail | -| `qa` | explain, what is, how does, why, define | Knowledge level of audience, analogies allowed?, length of answer | -| `task` | do, create, set up, build, generate, automate | Step-by-step vs one-shot, tools/permissions available, success criteria | - -Show the detected type at the top of your response: `📌 Prompt type detected: [type]` - + +Automatically classify the input prompt into one of these types, then tailor +your improvement suggestions accordingly: + +| Type | Trigger Keywords | Extra Suggestions to Offer | +| ---------- | --------------------------------------------- | -------------------------------------------------------------------------- | +| `code` | write, fix, debug, refactor, implement | Programming language & version, runtime environment, input/output examples | +| `content` | write, blog, email, post, describe, summarize | Target audience, tone (formal/casual), word count, platform | +| `analysis` | analyze, compare, evaluate, review, assess | Criteria for evaluation, output format (table, prose), depth of detail | +| `qa` | explain, what is, how does, why, define | Knowledge level of audience, analogies allowed?, length of answer | +| `task` | do, create, set up, build, generate, automate | Step-by-step vs one-shot, tools/permissions available, success criteria | + +Show the detected type at the top of your response: +`📌 Prompt type detected: [type]` + --- - + ## Chain-of-Thought Mode - -Offer "Chain-of-Thought Enhancement" as an optional improvement when showing suggestions. When the user selects it, add reasoning instructions to the end of the optimized prompt based on type: - -| Prompt Type | Chain-of-Thought Addition | -|---|---| -| General | `"Think step by step before answering."` | -| Analysis | `"Explain your reasoning for each point before giving a conclusion."` | -| Code | `"Outline your approach and data structures before writing any code."` | + +Offer "Chain-of-Thought Enhancement" as an optional improvement when showing +suggestions. When the user selects it, add reasoning instructions to the end of +the optimized prompt based on type: + +| Prompt Type | Chain-of-Thought Addition | +| --------------- | -------------------------------------------------------------------------- | +| General | `"Think step by step before answering."` | +| Analysis | `"Explain your reasoning for each point before giving a conclusion."` | +| Code | `"Outline your approach and data structures before writing any code."` | | Decision-making | `"List pros and cons, then state your recommendation with justification."` | - -**Why it works:** Chain-of-Thought forces the AI to externalize its reasoning process. This reduces hallucination (the AI catches its own errors mid-reasoning), makes outputs easier to verify, and produces more structured answers. Studies show CoT improves accuracy on complex tasks by 20–40%. \ No newline at end of file + +**Why it works:** Chain-of-Thought forces the AI to externalize its reasoning +process. This reduces hallucination (the AI catches its own errors +mid-reasoning), makes outputs easier to verify, and produces more structured +answers. Studies show CoT improves accuracy on complex tasks by 20–40%. diff --git a/TODO.md b/TODO.md index 63862fc..36b7232 100644 --- a/TODO.md +++ b/TODO.md @@ -1,10 +1,12 @@ # TODO - Add image upload field for manager add/update menu item -- [x] Update GraphQL queries/mutations in `lib/manager-context.tsx` to include `imageUrl` +- [x] Update GraphQL queries/mutations in `lib/manager-context.tsx` to include + `imageUrl` - [x] Update `components/organisms/manager/ProductModal.tsx` - [x] Add file input for image selection - [x] Add upload button to call `POST /api/file` - [x] Store returned URL string into `form.imageUrl` - [x] Show upload/loading/error states and image preview -- [x] Update `components/organisms/manager/ProductsTab.tsx` to show image thumbnail in table +- [x] Update `components/organisms/manager/ProductsTab.tsx` to show image + thumbnail in table - [x] Mark TODO progress after each step completed diff --git a/app/(main)/manager-signup/page.tsx b/app/(main)/manager-signup/page.tsx index f7d50c0..faead35 100644 --- a/app/(main)/manager-signup/page.tsx +++ b/app/(main)/manager-signup/page.tsx @@ -251,7 +251,7 @@ export default function ManagerSignupPage() { onChange={handleChange(field)} placeholder={placeholder} disabled={isLoading} - className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-4 pl-10 py-3 transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) disabled:opacity-60 lg:pl-11 ${errors[field] ? "border-red-400" : "border-(--color-border)"}`} + className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-4 py-3 pl-10 transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) disabled:opacity-60 lg:pl-11 ${errors[field] ? "border-red-400" : "border-(--color-border)"}`} /> {errors[field] && ( @@ -280,7 +280,8 @@ export default function ManagerSignupPage() { > {isLoading ? ( <> - Processing... + + Processing... ) : ( "Register" diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx index bc4dba3..e2c6ff0 100644 --- a/app/(main)/page.tsx +++ b/app/(main)/page.tsx @@ -2,8 +2,8 @@ import { SearchBar } from "@/components/molecules/search-bar"; import { ProductGrid } from "@/components/organisms/product-grid"; -import { useAuth } from "@/lib/auth-context"; import { eateryClient } from "@/lib/apollo-clients"; +import { useAuth } from "@/lib/auth-context"; import { allEateriesQuery } from "@/lib/types"; import { gql } from "@apollo/client"; import { useQuery } from "@apollo/client/react"; @@ -34,7 +34,7 @@ function StaffHomePage() { return (
{/* ── Body — same as Customer ── */} -
+
- ); } diff --git a/app/(manager)/manager/create-staff/page.tsx b/app/(manager)/manager/create-staff/page.tsx index 367a963..e5f6e0e 100644 --- a/app/(manager)/manager/create-staff/page.tsx +++ b/app/(manager)/manager/create-staff/page.tsx @@ -131,7 +131,7 @@ export default function CreateStaffPage() { onChange={handleChange(field)} placeholder={placeholder} disabled={isLoading} - className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-4 pl-10 py-3 transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) disabled:opacity-60 lg:pl-11 ${errors[field] ? "border-red-400" : "border-(--color-border)"}`} + className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-4 py-3 pl-10 transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) disabled:opacity-60 lg:pl-11 ${errors[field] ? "border-red-400" : "border-(--color-border)"}`} /> {errors[field] && ( @@ -160,7 +160,8 @@ export default function CreateStaffPage() { > {isLoading ? ( <> - Processing... + + Processing... ) : ( "Create account" diff --git a/app/(manager)/manager/page.tsx b/app/(manager)/manager/page.tsx index 217564f..271e7a9 100644 --- a/app/(manager)/manager/page.tsx +++ b/app/(manager)/manager/page.tsx @@ -238,7 +238,7 @@ export default function ManagerPage() { {dropdownOpen && ( -
+
{/* Tab buttons */} {tabs.map((tab) => ( diff --git a/app/(staff)/staff/schedule/page.tsx b/app/(staff)/staff/schedule/page.tsx index 7e17b67..f0ffb02 100644 --- a/app/(staff)/staff/schedule/page.tsx +++ b/app/(staff)/staff/schedule/page.tsx @@ -12,8 +12,18 @@ import Link from "next/link"; import { useState } from "react"; const MONTH_NAMES = [ - "January", "February", "March", "April", "May", "June", - "July", "August", "September", "October", "November", "December", + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", ]; function getMonday(d: Date): Date { @@ -31,10 +41,16 @@ function formatDateShort(d: Date): string { export default function StaffSchedulePage() { const { user, logout } = useAuth(); const { - view, setView, currentDate, - goToNextWeek, goToPrevWeek, - goToNextMonth, goToPrevMonth, - goToToday, getWeeklyBudget, shifts, + view, + setView, + currentDate, + goToNextWeek, + goToPrevWeek, + goToNextMonth, + goToPrevMonth, + goToToday, + getWeeklyBudget, + shifts, } = useShift(); const [selectedShift, setSelectedShift] = useState(null); @@ -70,7 +86,8 @@ export default function StaffSchedulePage() { // Count shifts this week for stats const totalShiftsThisWeek = shifts.filter((s) => { if (!s.date) return false; - const d = s.date instanceof Date ? s.date : new Date(s.date as unknown as string); + const d = + s.date instanceof Date ? s.date : new Date(s.date as unknown as string); return d >= monday && d <= sunday; }).length; @@ -107,7 +124,9 @@ export default function StaffSchedulePage() { : "bg-transparent text-(--color-text-secondary) hover:bg-gray-50 hover:text-(--color-primary-dark)" }`} > - + Weekly {view === "week" && ( @@ -122,7 +141,9 @@ export default function StaffSchedulePage() { : "bg-transparent text-(--color-text-secondary) hover:bg-gray-50 hover:text-(--color-primary-dark)" }`} > - + Monthly {view === "month" && ( @@ -161,7 +182,10 @@ export default function StaffSchedulePage() { {/* Create shift button */}
diff --git a/components/organisms/forms/LoginForm.tsx b/components/organisms/forms/LoginForm.tsx index 5fc0ab5..ab68eb4 100644 --- a/components/organisms/forms/LoginForm.tsx +++ b/components/organisms/forms/LoginForm.tsx @@ -46,7 +46,10 @@ export default function LoginForm() { const role = (await res.text().catch(() => "")).trim().toLowerCase(); - if (res.ok && (role === "customer" || role === "manager" || role === "staff")) { + if ( + res.ok && + (role === "customer" || role === "manager" || role === "staff") + ) { sessionStorage.setItem("login_phone", phone); sessionStorage.setItem("login_role", role); router.push(role === "customer" ? "/login/otp" : "/login/password"); diff --git a/components/organisms/manager/DeleteConfirm.tsx b/components/organisms/manager/DeleteConfirm.tsx index f44337f..22173dc 100644 --- a/components/organisms/manager/DeleteConfirm.tsx +++ b/components/organisms/manager/DeleteConfirm.tsx @@ -17,7 +17,9 @@ export default function DeleteConfirm({
-

Delete "{name}"?

+

+ Delete "{name}"? +

This action cannot be undone.

diff --git a/components/organisms/manager/ProductsTab.tsx b/components/organisms/manager/ProductsTab.tsx index 92b2f9e..8759567 100644 --- a/components/organisms/manager/ProductsTab.tsx +++ b/components/organisms/manager/ProductsTab.tsx @@ -99,8 +99,8 @@ export default function ProductsTab() {

- Showing {filtered.length}{" "} - / {products.length} items + Showing {filtered.length} /{" "} + {products.length} items

{/* Table */} diff --git a/components/organisms/manager/ReviewsTab.tsx b/components/organisms/manager/ReviewsTab.tsx index 52a7183..89f8455 100644 --- a/components/organisms/manager/ReviewsTab.tsx +++ b/components/organisms/manager/ReviewsTab.tsx @@ -142,7 +142,7 @@ export default function ReviewsTab() { {review.comment}

) : ( -

+

No comment provided.

)} diff --git a/components/organisms/modals/ReviewModal.tsx b/components/organisms/modals/ReviewModal.tsx index e91910f..6c72bae 100644 --- a/components/organisms/modals/ReviewModal.tsx +++ b/components/organisms/modals/ReviewModal.tsx @@ -169,9 +169,7 @@ export default function ReviewModal({
{/* Error message */} - {error && ( -

{error}

- )} + {error &&

{error}

} {/* Footer buttons */}
diff --git a/components/organisms/product-grid/ProductGrid.tsx b/components/organisms/product-grid/ProductGrid.tsx index 5f80a25..b32527d 100644 --- a/components/organisms/product-grid/ProductGrid.tsx +++ b/components/organisms/product-grid/ProductGrid.tsx @@ -4,14 +4,14 @@ import { ProductCard } from "@/components/molecules/cards"; import { useCart } from "@/lib/cart-context"; import { useManager } from "@/lib/manager-context"; +import type { ProductGridProps } from "./ProductGrid.types"; + function toDisplayUrl(filename: string) { if (!filename) return "/imgs/products/placeholder.jpg"; if (filename.startsWith("/") || filename.startsWith("http")) return filename; return `/api/file/${filename}`; } -import type { ProductGridProps } from "./ProductGrid.types"; - export default function ProductGrid({ searchQuery = "", isSidebarOpen = false, diff --git a/components/organisms/shift-schedule/MobileShiftView.tsx b/components/organisms/shift-schedule/MobileShiftView.tsx index 3e78b0f..132381a 100644 --- a/components/organisms/shift-schedule/MobileShiftView.tsx +++ b/components/organisms/shift-schedule/MobileShiftView.tsx @@ -8,8 +8,18 @@ import type { MobileShiftViewProps } from "./ShiftSchedule.types"; const DAY_HEADERS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; const MONTH_NAMES = [ - "January", "February", "March", "April", "May", "June", - "July", "August", "September", "October", "November", "December", + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", ]; function formatDateKey(d: Date): string { @@ -24,8 +34,11 @@ function isToday(d: Date): boolean { return formatDateKey(d) === formatDateKey(today); } -export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps) { - const { currentDate, getShiftsForDate, goToNextMonth, goToPrevMonth } = useShift(); +export default function MobileShiftView({ + onShiftClick, +}: MobileShiftViewProps) { + const { currentDate, getShiftsForDate, goToNextMonth, goToPrevMonth } = + useShift(); const [selectedDate, setSelectedDate] = useState(new Date(2026, 3, 10)); const calendarDays = useMemo(() => { @@ -39,12 +52,16 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps) const days: (Date | null)[] = []; for (let i = 0; i < startOffset; i++) days.push(null); - for (let d = 1; d <= lastDay.getDate(); d++) days.push(new Date(year, month, d)); + for (let d = 1; d <= lastDay.getDate(); d++) + days.push(new Date(year, month, d)); while (days.length % 7 !== 0) days.push(null); return days; }, [currentDate]); - const selectedShifts = useMemo(() => getShiftsForDate(selectedDate), [selectedDate, getShiftsForDate]); + const selectedShifts = useMemo( + () => getShiftsForDate(selectedDate), + [selectedDate, getShiftsForDate], + ); const dayOfWeek = DAY_HEADERS[(selectedDate.getDay() + 6) % 7]; @@ -96,7 +113,8 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps) if (!date) return
; const today = isToday(date); - const selected = formatDateKey(date) === formatDateKey(selectedDate); + const selected = + formatDateKey(date) === formatDateKey(selectedDate); const dayShifts = getShiftsForDate(date); const isWeekend = date.getDay() === 0 || date.getDay() === 6; @@ -136,14 +154,16 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps)

- {dayOfWeek},{" "} - {selectedDate.getDate()}/{selectedDate.getMonth() + 1}/{selectedDate.getFullYear()} + {dayOfWeek}, {selectedDate.getDate()}/{selectedDate.getMonth() + 1}/ + {selectedDate.getFullYear()}

- 0 - ? "bg-(--color-primary)/10 text-(--color-primary)" - : "bg-gray-100 text-(--color-text-muted)" - }`}> + 0 + ? "bg-(--color-primary)/10 text-(--color-primary)" + : "bg-gray-100 text-(--color-text-muted)" + }`} + > {selectedShifts.length} shifts
@@ -151,8 +171,12 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps) {selectedShifts.length === 0 ? (
-

No shifts

-

No shifts created for this day

+

+ No shifts +

+

+ No shifts created for this day +

) : (
diff --git a/components/organisms/shift-schedule/MonthlyCalendar.tsx b/components/organisms/shift-schedule/MonthlyCalendar.tsx index 7d62970..e90ecaf 100644 --- a/components/organisms/shift-schedule/MonthlyCalendar.tsx +++ b/components/organisms/shift-schedule/MonthlyCalendar.tsx @@ -23,7 +23,10 @@ function isToday(d: Date): boolean { ); } -export default function MonthlyCalendar({ onShiftClick, onDateSelect }: MonthlyCalendarProps) { +export default function MonthlyCalendar({ + onShiftClick, + onDateSelect, +}: MonthlyCalendarProps) { const { currentDate, getShiftsForDate } = useShift(); const calendarDays = useMemo(() => { @@ -37,7 +40,8 @@ export default function MonthlyCalendar({ onShiftClick, onDateSelect }: MonthlyC const days: (Date | null)[] = []; for (let i = 0; i < startOffset; i++) days.push(null); - for (let d = 1; d <= lastDay.getDate(); d++) days.push(new Date(year, month, d)); + for (let d = 1; d <= lastDay.getDate(); d++) + days.push(new Date(year, month, d)); while (days.length % 7 !== 0) days.push(null); return days; }, [currentDate]); diff --git a/components/organisms/shift-schedule/ShiftCreateModal.tsx b/components/organisms/shift-schedule/ShiftCreateModal.tsx index 24d04b7..326f97e 100644 --- a/components/organisms/shift-schedule/ShiftCreateModal.tsx +++ b/components/organisms/shift-schedule/ShiftCreateModal.tsx @@ -21,8 +21,16 @@ function TimeInput({ const hour12 = h24 === 0 ? 12 : h24 > 12 ? h24 - 12 : h24; const emit = (newH12: number, newM: number, newIsPM: boolean) => { - let h = newIsPM ? (newH12 === 12 ? 12 : newH12 + 12) : (newH12 === 12 ? 0 : newH12); - onChange(`${h.toString().padStart(2, "0")}:${newM.toString().padStart(2, "0")}`); + let h = newIsPM + ? newH12 === 12 + ? 12 + : newH12 + 12 + : newH12 === 12 + ? 0 + : newH12; + onChange( + `${h.toString().padStart(2, "0")}:${newM.toString().padStart(2, "0")}`, + ); }; return ( @@ -33,23 +41,27 @@ function TimeInput({ min={1} max={12} value={hour12} - onChange={(e) => emit(Math.min(12, Math.max(1, Number(e.target.value))), m, isPM)} + onChange={(e) => + emit(Math.min(12, Math.max(1, Number(e.target.value))), m, isPM) + } className="text-foreground w-12 border-none bg-transparent py-2.5 pl-3 text-sm outline-none" /> - : + : emit(hour12, Math.min(59, Math.max(0, Number(e.target.value))), isPM)} + onChange={(e) => + emit(hour12, Math.min(59, Math.max(0, Number(e.target.value))), isPM) + } className="text-foreground w-10 border-none bg-transparent py-2.5 text-sm outline-none" /> diff --git a/components/organisms/shift-schedule/ShiftDetailModal.tsx b/components/organisms/shift-schedule/ShiftDetailModal.tsx index b985d01..b4dd6da 100644 --- a/components/organisms/shift-schedule/ShiftDetailModal.tsx +++ b/components/organisms/shift-schedule/ShiftDetailModal.tsx @@ -32,7 +32,9 @@ export default function ShiftDetailModal({ // const dept = DEPARTMENTS.find((d) => d.id === shift.department); const isManager = user?.role === "manager"; const registeredStaff = shift.registeredStaff ?? []; - const isRegistered = user ? registeredStaff.some((s) => s.id === user.id) : false; + const isRegistered = user + ? registeredStaff.some((s) => s.id === user.id) + : false; const isFull = registeredStaff.length >= shift.maxStaff; const handleRegister = async () => { @@ -126,15 +128,14 @@ export default function ShiftDetailModal({ Date

- {parseShiftDate(shift.date as Date | string | undefined)?.toLocaleDateString( - "vi-VN", - { - weekday: "long", - day: "2-digit", - month: "2-digit", - year: "numeric", - }, - ) ?? "—"} + {parseShiftDate( + shift.date as Date | string | undefined, + )?.toLocaleDateString("vi-VN", { + weekday: "long", + day: "2-digit", + month: "2-digit", + year: "numeric", + }) ?? "—"}

@@ -164,8 +165,7 @@ export default function ShiftDetailModal({ {/* Registered staff */}

- Registered staff ({registeredStaff.length}/ - {shift.maxStaff}) + Registered staff ({registeredStaff.length}/{shift.maxStaff})

{registeredStaff.length === 0 ? (

diff --git a/components/organisms/shift-schedule/WeeklySchedule.tsx b/components/organisms/shift-schedule/WeeklySchedule.tsx index 61694e2..7aca468 100644 --- a/components/organisms/shift-schedule/WeeklySchedule.tsx +++ b/components/organisms/shift-schedule/WeeklySchedule.tsx @@ -8,8 +8,18 @@ import { useMemo, useState } from "react"; import type { WeeklyScheduleProps } from "./ShiftSchedule.types"; const MONTH_NAMES = [ - "January", "February", "March", "April", "May", "June", - "July", "August", "September", "October", "November", "December", + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", ]; const DAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; @@ -32,13 +42,23 @@ export default function WeeklySchedule({ onCreateShift, mobileCalendarHeader = false, }: WeeklyScheduleProps) { - const { currentDate, getWeekDates, getShiftsForDate, goToNextWeek, goToPrevWeek } = useShift(); + const { + currentDate, + getWeekDates, + getShiftsForDate, + goToNextWeek, + goToPrevWeek, + } = useShift(); const weekDates = getWeekDates(); - const [selectedDate, setSelectedDate] = useState(weekDates[0] ?? currentDate); + const [selectedDate, setSelectedDate] = useState( + weekDates[0] ?? currentDate, + ); const selectedDateRef = useMemo(() => { - return weekDates.find((d) => d === selectedDate) ?? weekDates[0] ?? currentDate; + return ( + weekDates.find((d) => d === selectedDate) ?? weekDates[0] ?? currentDate + ); }, [selectedDate, weekDates, currentDate]); // ── Mobile calendar header view ──────────────────────────────────────────── @@ -83,18 +103,22 @@ export default function WeeklySchedule({ onClick={() => setSelectedDate(date)} className="flex cursor-pointer flex-col items-center gap-1 rounded-xl border-none bg-transparent py-1.5 transition" > - = 5 ? "text-rose-400" : "text-(--color-text-muted)"}`}> + = 5 ? "text-rose-400" : "text-(--color-text-muted)"}`} + > {DAY_LABELS[i]} - = 5 - ? "text-rose-500" - : "text-(--color-text-secondary)" - }`}> + = 5 + ? "text-rose-500" + : "text-(--color-text-secondary)" + }`} + > {new Date(date).getDate()}

@@ -123,12 +147,18 @@ export default function WeeklySchedule({ {dayShifts.length === 0 && !onCreateShift ? (
-

No shifts today

+

+ No shifts today +

) : (
{dayShifts.map((shift) => ( - + ))} {onCreateShift && (