chore: release [ci skip]
This commit is contained in:
gitea-actions
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
---
|
||||
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
|
||||
@@ -9,62 +14,83 @@ 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"
|
||||
- **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."
|
||||
**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
|
||||
|
||||
@@ -72,27 +98,33 @@ Then you get a rewritten prompt combining all your choices.
|
||||
- **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:
|
||||
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" |
|
||||
| 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:
|
||||
**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:
|
||||
@@ -104,29 +136,36 @@ Before suggesting improvements, scan the original prompt for these common mistak
|
||||
|
||||
## Prompt Classification
|
||||
|
||||
Automatically classify the input prompt into one of these types, then tailor your improvement suggestions accordingly:
|
||||
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 |
|
||||
| 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]`
|
||||
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:
|
||||
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."` |
|
||||
| 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%.
|
||||
**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%.
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)"}`}
|
||||
/>
|
||||
</div>
|
||||
{errors[field] && (
|
||||
@@ -280,7 +280,8 @@ export default function ManagerSignupPage() {
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<i className="fa-solid fa-spinner fa-spin mr-2"></i>Processing...
|
||||
<i className="fa-solid fa-spinner fa-spin mr-2"></i>
|
||||
Processing...
|
||||
</>
|
||||
) : (
|
||||
"Register"
|
||||
|
||||
+2
-2
@@ -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 (
|
||||
<div className="bg-background flex min-h-[calc(100vh-var(--spacing-header-height))] flex-col items-start">
|
||||
{/* ── Body — same as Customer ── */}
|
||||
<main className="min-w-0 w-full flex-1 px-4 py-6 md:px-6 lg:px-8">
|
||||
<main className="w-full min-w-0 flex-1 px-4 py-6 md:px-6 lg:px-8">
|
||||
<div className="mb-5 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
|
||||
<SearchBar
|
||||
value={searchQuery}
|
||||
|
||||
@@ -155,7 +155,6 @@ export default function PaymentPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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)"}`}
|
||||
/>
|
||||
</div>
|
||||
{errors[field] && (
|
||||
@@ -160,7 +160,8 @@ export default function CreateStaffPage() {
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<i className="fa-solid fa-spinner fa-spin mr-2"></i>Processing...
|
||||
<i className="fa-solid fa-spinner fa-spin mr-2"></i>
|
||||
Processing...
|
||||
</>
|
||||
) : (
|
||||
"Create account"
|
||||
|
||||
@@ -238,7 +238,7 @@ export default function ManagerPage() {
|
||||
</button>
|
||||
|
||||
{dropdownOpen && (
|
||||
<div className="absolute right-0 top-full z-50 mt-2 w-52 overflow-hidden rounded-2xl border border-(--color-border-light) bg-white shadow-xl">
|
||||
<div className="absolute top-full right-0 z-50 mt-2 w-52 overflow-hidden rounded-2xl border border-(--color-border-light) bg-white shadow-xl">
|
||||
<div className="p-1.5">
|
||||
{/* Tab buttons */}
|
||||
{tabs.map((tab) => (
|
||||
|
||||
@@ -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<ShiftEntity | null>(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)"
|
||||
}`}
|
||||
>
|
||||
<i className={`fa-solid fa-table-columns w-4 text-center ${view === "week" ? "text-(--color-primary)" : ""}`}></i>
|
||||
<i
|
||||
className={`fa-solid fa-table-columns w-4 text-center ${view === "week" ? "text-(--color-primary)" : ""}`}
|
||||
></i>
|
||||
<span className="flex-1 text-left">Weekly</span>
|
||||
{view === "week" && (
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-(--color-primary)"></span>
|
||||
@@ -122,7 +141,9 @@ export default function StaffSchedulePage() {
|
||||
: "bg-transparent text-(--color-text-secondary) hover:bg-gray-50 hover:text-(--color-primary-dark)"
|
||||
}`}
|
||||
>
|
||||
<i className={`fa-solid fa-calendar w-4 text-center ${view === "month" ? "text-(--color-primary)" : ""}`}></i>
|
||||
<i
|
||||
className={`fa-solid fa-calendar w-4 text-center ${view === "month" ? "text-(--color-primary)" : ""}`}
|
||||
></i>
|
||||
<span className="flex-1 text-left">Monthly</span>
|
||||
{view === "month" && (
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-(--color-primary)"></span>
|
||||
@@ -161,7 +182,10 @@ export default function StaffSchedulePage() {
|
||||
{/* Create shift button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setCreateDate(undefined); setCreateOpen(true); }}
|
||||
onClick={() => {
|
||||
setCreateDate(undefined);
|
||||
setCreateOpen(true);
|
||||
}}
|
||||
className="mt-1 flex w-full cursor-pointer items-center gap-3 rounded-xl border-none bg-(--color-primary)/10 px-3 py-2.5 text-sm font-semibold text-(--color-primary) transition-all hover:bg-(--color-primary)/20"
|
||||
>
|
||||
<i className="fa-solid fa-plus w-4 text-center"></i>
|
||||
@@ -201,15 +225,21 @@ export default function StaffSchedulePage() {
|
||||
<div className="border-t border-(--color-border-light) p-3">
|
||||
<div className="flex items-center gap-3 rounded-xl bg-gray-50 p-3">
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-(--color-primary)/15">
|
||||
<i className={`fa-solid ${isManager ? "fa-user-tie" : "fa-user"} text-sm text-(--color-primary)`}></i>
|
||||
<i
|
||||
className={`fa-solid ${isManager ? "fa-user-tie" : "fa-user"} text-sm text-(--color-primary)`}
|
||||
></i>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-foreground truncate text-sm font-semibold">
|
||||
{user?.name ?? "Staff"}
|
||||
</p>
|
||||
<span className={`inline-block rounded-full px-2 py-px text-[10px] font-semibold ${
|
||||
isManager ? "bg-(--color-primary)/10 text-(--color-primary)" : "bg-gray-100 text-(--color-text-muted)"
|
||||
}`}>
|
||||
<span
|
||||
className={`inline-block rounded-full px-2 py-px text-[10px] font-semibold ${
|
||||
isManager
|
||||
? "bg-(--color-primary)/10 text-(--color-primary)"
|
||||
: "bg-gray-100 text-(--color-text-muted)"
|
||||
}`}
|
||||
>
|
||||
{isManager ? "Manager" : "Staff"}
|
||||
</span>
|
||||
</div>
|
||||
@@ -309,7 +339,10 @@ export default function StaffSchedulePage() {
|
||||
{isManager && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setCreateDate(undefined); setCreateOpen(true); }}
|
||||
onClick={() => {
|
||||
setCreateDate(undefined);
|
||||
setCreateOpen(true);
|
||||
}}
|
||||
className="hidden cursor-pointer items-center gap-2 rounded-xl border-none bg-(--color-primary) px-4 py-2 text-xs font-bold text-white shadow-sm transition hover:opacity-90 md:flex"
|
||||
>
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
@@ -375,7 +408,10 @@ export default function StaffSchedulePage() {
|
||||
<button
|
||||
title="Create shift"
|
||||
type="button"
|
||||
onClick={() => { setCreateDate(undefined); setCreateOpen(true); }}
|
||||
onClick={() => {
|
||||
setCreateDate(undefined);
|
||||
setCreateOpen(true);
|
||||
}}
|
||||
className="fixed right-4 bottom-6 z-30 flex h-14 w-14 cursor-pointer items-center justify-center rounded-full border-none bg-(--color-primary) text-white shadow-xl transition hover:opacity-90 md:hidden"
|
||||
>
|
||||
<i className="fa-solid fa-plus text-lg"></i>
|
||||
@@ -388,7 +424,10 @@ export default function StaffSchedulePage() {
|
||||
<ShiftDetailModal
|
||||
shift={selectedShift}
|
||||
isOpen={detailOpen}
|
||||
onClose={() => { setDetailOpen(false); setSelectedShift(null); }}
|
||||
onClose={() => {
|
||||
setDetailOpen(false);
|
||||
setSelectedShift(null);
|
||||
}}
|
||||
/>
|
||||
<ShiftCreateModal
|
||||
isOpen={createOpen}
|
||||
|
||||
@@ -8,7 +8,9 @@ function formatWage(wage: number): string {
|
||||
return wage.toLocaleString("vi-VN");
|
||||
}
|
||||
|
||||
function getShiftPeriod(startTime: string): "morning" | "afternoon" | "evening" {
|
||||
function getShiftPeriod(
|
||||
startTime: string,
|
||||
): "morning" | "afternoon" | "evening" {
|
||||
const h = parseInt(startTime.split(":")[0] ?? "0", 10);
|
||||
if (h < 12) return "morning";
|
||||
if (h < 18) return "afternoon";
|
||||
@@ -36,7 +38,11 @@ const PERIOD_STYLES = {
|
||||
},
|
||||
};
|
||||
|
||||
export default function ShiftCard({ shift, compact = false, onClick }: ShiftCardProps) {
|
||||
export default function ShiftCard({
|
||||
shift,
|
||||
compact = false,
|
||||
onClick,
|
||||
}: ShiftCardProps) {
|
||||
const registeredCount = shift.registeredStaff?.length ?? 0;
|
||||
const period = getShiftPeriod(shift.startTime);
|
||||
const s = PERIOD_STYLES[period];
|
||||
@@ -49,12 +55,16 @@ export default function ShiftCard({ shift, compact = false, onClick }: ShiftCard
|
||||
className={`group w-full cursor-pointer rounded-xl border-l-[3px] bg-white text-left shadow-sm transition hover:-translate-y-px hover:shadow-md ${s.border}`}
|
||||
>
|
||||
<div className="px-2.5 py-2">
|
||||
<p className={`text-xs font-bold leading-tight ${s.text}`}>
|
||||
<p className={`text-xs leading-tight font-bold ${s.text}`}>
|
||||
{shift.startTime}–{shift.endTime}
|
||||
</p>
|
||||
<div className="mt-1 flex items-center justify-between gap-1">
|
||||
<p className="text-[10px] text-(--color-text-muted)">{formatWage(shift.wage ?? 0)}đ</p>
|
||||
<span className={`rounded-full px-1.5 py-px text-[9px] font-semibold ${s.badge}`}>
|
||||
<p className="text-[10px] text-(--color-text-muted)">
|
||||
{formatWage(shift.wage ?? 0)}đ
|
||||
</p>
|
||||
<span
|
||||
className={`rounded-full px-1.5 py-px text-[9px] font-semibold ${s.badge}`}
|
||||
>
|
||||
{registeredCount}/{shift.maxStaff}
|
||||
</span>
|
||||
</div>
|
||||
@@ -82,7 +92,9 @@ export default function ShiftCard({ shift, compact = false, onClick }: ShiftCard
|
||||
{(shift.wage ?? 0).toLocaleString("vi-VN")} VND/ca
|
||||
</p>
|
||||
</div>
|
||||
<span className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold ${s.badge}`}>
|
||||
<span
|
||||
className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold ${s.badge}`}
|
||||
>
|
||||
{registeredCount}/{shift.maxStaff} staff
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -17,7 +17,9 @@ export default function DeleteConfirm({
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
||||
<i className="fa-solid fa-trash-can text-xl text-red-500"></i>
|
||||
</div>
|
||||
<h3 className="text-foreground text-base font-bold">Delete "{name}"?</h3>
|
||||
<h3 className="text-foreground text-base font-bold">
|
||||
Delete "{name}"?
|
||||
</h3>
|
||||
<p className="text-sm text-(--color-text-muted)">
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
|
||||
@@ -99,8 +99,8 @@ export default function ProductsTab() {
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-(--color-text-muted)">
|
||||
Showing <strong className="text-foreground">{filtered.length}</strong>{" "}
|
||||
/ {products.length} items
|
||||
Showing <strong className="text-foreground">{filtered.length}</strong> /{" "}
|
||||
{products.length} items
|
||||
</p>
|
||||
|
||||
{/* Table */}
|
||||
|
||||
@@ -142,7 +142,7 @@ export default function ReviewsTab() {
|
||||
{review.comment}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm italic text-(--color-text-muted)">
|
||||
<p className="text-sm text-(--color-text-muted) italic">
|
||||
No comment provided.
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -169,9 +169,7 @@ export default function ReviewModal({
|
||||
</div>
|
||||
|
||||
{/* Error message */}
|
||||
{error && (
|
||||
<p className="mb-4 text-sm text-red-500">{error}</p>
|
||||
)}
|
||||
{error && <p className="mb-4 text-sm text-red-500">{error}</p>}
|
||||
|
||||
{/* Footer buttons */}
|
||||
<div className="flex gap-3">
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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<Date>(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 <div key={`empty-${i}`} className="p-1" />;
|
||||
|
||||
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)
|
||||
<div>
|
||||
<div className="mb-3 flex items-center justify-between px-1">
|
||||
<h3 className="text-sm font-bold text-(--color-primary-dark)">
|
||||
{dayOfWeek},{" "}
|
||||
{selectedDate.getDate()}/{selectedDate.getMonth() + 1}/{selectedDate.getFullYear()}
|
||||
{dayOfWeek}, {selectedDate.getDate()}/{selectedDate.getMonth() + 1}/
|
||||
{selectedDate.getFullYear()}
|
||||
</h3>
|
||||
<span className={`rounded-full px-2.5 py-1 text-xs font-semibold ${
|
||||
selectedShifts.length > 0
|
||||
? "bg-(--color-primary)/10 text-(--color-primary)"
|
||||
: "bg-gray-100 text-(--color-text-muted)"
|
||||
}`}>
|
||||
<span
|
||||
className={`rounded-full px-2.5 py-1 text-xs font-semibold ${
|
||||
selectedShifts.length > 0
|
||||
? "bg-(--color-primary)/10 text-(--color-primary)"
|
||||
: "bg-gray-100 text-(--color-text-muted)"
|
||||
}`}
|
||||
>
|
||||
{selectedShifts.length} shifts
|
||||
</span>
|
||||
</div>
|
||||
@@ -151,8 +171,12 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps)
|
||||
{selectedShifts.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-(--color-border-light) py-10 text-center">
|
||||
<i className="fa-regular fa-calendar-xmark mb-3 text-3xl text-gray-200"></i>
|
||||
<p className="text-sm font-medium text-(--color-text-muted)">No shifts</p>
|
||||
<p className="mt-0.5 text-xs text-(--color-text-muted)">No shifts created for this day</p>
|
||||
<p className="text-sm font-medium text-(--color-text-muted)">
|
||||
No shifts
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs text-(--color-text-muted)">
|
||||
No shifts created for this day
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2.5">
|
||||
|
||||
@@ -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]);
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
<span className="select-none text-sm text-(--color-text-muted)">:</span>
|
||||
<span className="text-sm text-(--color-text-muted) select-none">:</span>
|
||||
<input
|
||||
title={`${title} minute`}
|
||||
type="number"
|
||||
min={0}
|
||||
max={59}
|
||||
value={m.toString().padStart(2, "0")}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => emit(hour12, m, !isPM)}
|
||||
className="ml-1 mr-2 cursor-pointer rounded-lg border-none bg-(--color-primary)/10 px-2 py-1 text-xs font-bold text-(--color-primary) transition hover:bg-(--color-primary) hover:text-white"
|
||||
className="mr-2 ml-1 cursor-pointer rounded-lg border-none bg-(--color-primary)/10 px-2 py-1 text-xs font-bold text-(--color-primary) transition hover:bg-(--color-primary) hover:text-white"
|
||||
>
|
||||
{isPM ? "PM" : "AM"}
|
||||
</button>
|
||||
|
||||
@@ -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
|
||||
</p>
|
||||
<p className="text-foreground mt-1 text-sm font-bold">
|
||||
{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",
|
||||
}) ?? "—"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl bg-gray-50 p-3">
|
||||
@@ -164,8 +165,7 @@ export default function ShiftDetailModal({
|
||||
{/* Registered staff */}
|
||||
<div>
|
||||
<p className="mb-2 text-xs font-semibold text-(--color-text-secondary)">
|
||||
Registered staff ({registeredStaff.length}/
|
||||
{shift.maxStaff})
|
||||
Registered staff ({registeredStaff.length}/{shift.maxStaff})
|
||||
</p>
|
||||
{registeredStaff.length === 0 ? (
|
||||
<p className="text-xs text-(--color-text-muted) italic">
|
||||
|
||||
@@ -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<Date>(weekDates[0] ?? currentDate);
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(
|
||||
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"
|
||||
>
|
||||
<span className={`text-[10px] font-semibold uppercase ${i >= 5 ? "text-rose-400" : "text-(--color-text-muted)"}`}>
|
||||
<span
|
||||
className={`text-[10px] font-semibold uppercase ${i >= 5 ? "text-rose-400" : "text-(--color-text-muted)"}`}
|
||||
>
|
||||
{DAY_LABELS[i]}
|
||||
</span>
|
||||
<span className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold transition ${
|
||||
today
|
||||
? "bg-(--color-primary) text-white shadow-sm"
|
||||
: active
|
||||
? "bg-(--color-primary)/15 text-(--color-primary)"
|
||||
: i >= 5
|
||||
? "text-rose-500"
|
||||
: "text-(--color-text-secondary)"
|
||||
}`}>
|
||||
<span
|
||||
className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold transition ${
|
||||
today
|
||||
? "bg-(--color-primary) text-white shadow-sm"
|
||||
: active
|
||||
? "bg-(--color-primary)/15 text-(--color-primary)"
|
||||
: i >= 5
|
||||
? "text-rose-500"
|
||||
: "text-(--color-text-secondary)"
|
||||
}`}
|
||||
>
|
||||
{new Date(date).getDate()}
|
||||
</span>
|
||||
<div className="flex min-h-2 items-center gap-px">
|
||||
@@ -123,12 +147,18 @@ export default function WeeklySchedule({
|
||||
{dayShifts.length === 0 && !onCreateShift ? (
|
||||
<div className="rounded-2xl border border-dashed border-(--color-border-light) py-10 text-center">
|
||||
<i className="fa-regular fa-calendar-xmark mb-2 text-3xl text-gray-200"></i>
|
||||
<p className="text-sm text-(--color-text-muted)">No shifts today</p>
|
||||
<p className="text-sm text-(--color-text-muted)">
|
||||
No shifts today
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2.5">
|
||||
{dayShifts.map((shift) => (
|
||||
<ShiftCard key={shift.id} shift={shift} onClick={onShiftClick} />
|
||||
<ShiftCard
|
||||
key={shift.id}
|
||||
shift={shift}
|
||||
onClick={onShiftClick}
|
||||
/>
|
||||
))}
|
||||
{onCreateShift && (
|
||||
<button
|
||||
@@ -169,18 +199,23 @@ export default function WeeklySchedule({
|
||||
: "bg-gray-50/80 font-semibold text-(--color-text-muted)"
|
||||
}`}
|
||||
>
|
||||
<span className="block text-[11px] font-semibold uppercase tracking-wider">
|
||||
<span className="block text-[11px] font-semibold tracking-wider uppercase">
|
||||
{DAY_LABELS[i]}
|
||||
</span>
|
||||
<span className={`mt-0.5 inline-flex h-7 w-7 items-center justify-center rounded-full text-sm font-bold ${
|
||||
today
|
||||
? "bg-(--color-primary) text-white shadow-sm"
|
||||
: "text-(--color-text-secondary)"
|
||||
}`}>
|
||||
<span
|
||||
className={`mt-0.5 inline-flex h-7 w-7 items-center justify-center rounded-full text-sm font-bold ${
|
||||
today
|
||||
? "bg-(--color-primary) text-white shadow-sm"
|
||||
: "text-(--color-text-secondary)"
|
||||
}`}
|
||||
>
|
||||
{date.getDate()}
|
||||
</span>
|
||||
<span className={`mt-0.5 block text-[10px] font-normal ${today ? "text-(--color-primary)/70" : "text-(--color-text-muted)"}`}>
|
||||
{(date.getMonth() + 1).toString().padStart(2, "0")}/{date.getFullYear()}
|
||||
<span
|
||||
className={`mt-0.5 block text-[10px] font-normal ${today ? "text-(--color-primary)/70" : "text-(--color-text-muted)"}`}
|
||||
>
|
||||
{(date.getMonth() + 1).toString().padStart(2, "0")}/
|
||||
{date.getFullYear()}
|
||||
</span>
|
||||
</th>
|
||||
);
|
||||
@@ -189,11 +224,16 @@ export default function WeeklySchedule({
|
||||
</thead>
|
||||
<tbody>
|
||||
{DEPARTMENTS.map((dept, deptIdx) => (
|
||||
<tr key={dept.id} className={deptIdx % 2 === 0 ? "bg-white" : "bg-gray-50/40"}>
|
||||
<tr
|
||||
key={dept.id}
|
||||
className={deptIdx % 2 === 0 ? "bg-white" : "bg-gray-50/40"}
|
||||
>
|
||||
<td className="border-r border-b border-(--color-border-light) px-4 py-3 align-top">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-(--color-primary)/10">
|
||||
<i className={`${dept.icon} text-xs text-(--color-primary)`}></i>
|
||||
<i
|
||||
className={`${dept.icon} text-xs text-(--color-primary)`}
|
||||
></i>
|
||||
</div>
|
||||
<span className="text-xs font-semibold text-(--color-text-secondary)">
|
||||
{dept.name}
|
||||
@@ -212,7 +252,12 @@ export default function WeeklySchedule({
|
||||
>
|
||||
<div className="flex min-h-[88px] flex-col gap-1.5">
|
||||
{shifts.map((shift) => (
|
||||
<ShiftCard key={shift.id} shift={shift} compact onClick={onShiftClick} />
|
||||
<ShiftCard
|
||||
key={shift.id}
|
||||
shift={shift}
|
||||
compact
|
||||
onClick={onShiftClick}
|
||||
/>
|
||||
))}
|
||||
{onCreateShift && (
|
||||
<button
|
||||
|
||||
@@ -16,7 +16,7 @@ spec:
|
||||
spec:
|
||||
containers:
|
||||
- name: frontend-container
|
||||
image: git.demonkernel.io.vn/foodsurf/frontend:1.2.9
|
||||
image: git.demonkernel.io.vn/foodsurf/frontend:1.2.10
|
||||
ports:
|
||||
- containerPort: 3000
|
||||
resources:
|
||||
|
||||
+71
-47
@@ -177,9 +177,12 @@ export function ShiftProvider({ children }: { children: ReactNode }) {
|
||||
client: eateryClient,
|
||||
});
|
||||
|
||||
const [mutateDeleteShift] = useMutation<{ deleteShift: boolean }>(DELETE_SHIFT, {
|
||||
client: eateryClient,
|
||||
});
|
||||
const [mutateDeleteShift] = useMutation<{ deleteShift: boolean }>(
|
||||
DELETE_SHIFT,
|
||||
{
|
||||
client: eateryClient,
|
||||
},
|
||||
);
|
||||
|
||||
const [mutateRegisterShift] = useMutation<
|
||||
{ registerShift: { staffId: string } },
|
||||
@@ -285,9 +288,13 @@ export function ShiftProvider({ children }: { children: ReactNode }) {
|
||||
const weekKeys = new Set(weekDates.map(formatDate));
|
||||
return shifts
|
||||
.filter(
|
||||
(s) => weekKeys.has(dateKey(s.date)) && (s.registeredStaff ?? []).length > 0,
|
||||
(s) =>
|
||||
weekKeys.has(dateKey(s.date)) && (s.registeredStaff ?? []).length > 0,
|
||||
)
|
||||
.reduce((sum, s) => sum + (s.wage ?? 0) * (s.registeredStaff ?? []).length, 0);
|
||||
.reduce(
|
||||
(sum, s) => sum + (s.wage ?? 0) * (s.registeredStaff ?? []).length,
|
||||
0,
|
||||
);
|
||||
}, [shifts, getWeekDates]);
|
||||
|
||||
// ── Shift actions ───────────────────────────────────────────────────────
|
||||
@@ -311,7 +318,13 @@ export function ShiftProvider({ children }: { children: ReactNode }) {
|
||||
|
||||
if (
|
||||
shift.date &&
|
||||
hasConflict(shift.date, shift.startTime, shift.endTime, staffId, shiftId)
|
||||
hasConflict(
|
||||
shift.date,
|
||||
shift.startTime,
|
||||
shift.endTime,
|
||||
staffId,
|
||||
shiftId,
|
||||
)
|
||||
) {
|
||||
return {
|
||||
success: false,
|
||||
@@ -338,7 +351,9 @@ export function ShiftProvider({ children }: { children: ReactNode }) {
|
||||
setShifts((prev) =>
|
||||
prev.map((s) => {
|
||||
if (s.id !== shiftId) return s;
|
||||
const updated = (s.registeredStaff ?? []).filter((rs) => rs.id !== staffId);
|
||||
const updated = (s.registeredStaff ?? []).filter(
|
||||
(rs) => rs.id !== staffId,
|
||||
);
|
||||
return {
|
||||
...s,
|
||||
registeredStaff: updated,
|
||||
@@ -347,51 +362,60 @@ export function ShiftProvider({ children }: { children: ReactNode }) {
|
||||
);
|
||||
}, []);
|
||||
|
||||
const createShift = useCallback(async (shift: Omit<ShiftEntity, "id">) => {
|
||||
try {
|
||||
const { data } = await mutateCreateShift({
|
||||
variables: {
|
||||
shiftInput: {
|
||||
date: toLocalDateISO(shift.date ?? new Date()),
|
||||
startTime: shift.startTime,
|
||||
endTime: shift.endTime,
|
||||
maxStaff: shift.maxStaff,
|
||||
wage: shift.wage,
|
||||
const createShift = useCallback(
|
||||
async (shift: Omit<ShiftEntity, "id">) => {
|
||||
try {
|
||||
const { data } = await mutateCreateShift({
|
||||
variables: {
|
||||
shiftInput: {
|
||||
date: toLocalDateISO(shift.date ?? new Date()),
|
||||
startTime: shift.startTime,
|
||||
endTime: shift.endTime,
|
||||
maxStaff: shift.maxStaff,
|
||||
wage: shift.wage,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
if (data) {
|
||||
// Optimistic: dùng date từ server nếu có, fallback sang local
|
||||
const serverDate = data.createShift.date
|
||||
? new Date(data.createShift.date as unknown as string)
|
||||
: shift.date;
|
||||
setShifts((prev) => [...prev, {
|
||||
...data.createShift,
|
||||
date: serverDate,
|
||||
wage: data.createShift.wage ?? shift.wage,
|
||||
registeredStaff: [],
|
||||
}]);
|
||||
// Refetch để đồng bộ với server
|
||||
refetch();
|
||||
if (data) {
|
||||
// Optimistic: dùng date từ server nếu có, fallback sang local
|
||||
const serverDate = data.createShift.date
|
||||
? new Date(data.createShift.date as unknown as string)
|
||||
: shift.date;
|
||||
setShifts((prev) => [
|
||||
...prev,
|
||||
{
|
||||
...data.createShift,
|
||||
date: serverDate,
|
||||
wage: data.createShift.wage ?? shift.wage,
|
||||
registeredStaff: [],
|
||||
},
|
||||
]);
|
||||
// Refetch để đồng bộ với server
|
||||
refetch();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[createShift] mutation failed:", err);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[createShift] mutation failed:", err);
|
||||
}
|
||||
}, [mutateCreateShift, refetch]);
|
||||
},
|
||||
[mutateCreateShift, refetch],
|
||||
);
|
||||
|
||||
const deleteShift = useCallback(async (shiftId: string) => {
|
||||
try {
|
||||
const { data } = await mutateDeleteShift({
|
||||
variables: { id: shiftId },
|
||||
});
|
||||
if (data?.deleteShift) {
|
||||
setShifts((prev) => prev.filter((s) => s.id !== shiftId));
|
||||
const deleteShift = useCallback(
|
||||
async (shiftId: string) => {
|
||||
try {
|
||||
const { data } = await mutateDeleteShift({
|
||||
variables: { id: shiftId },
|
||||
});
|
||||
if (data?.deleteShift) {
|
||||
setShifts((prev) => prev.filter((s) => s.id !== shiftId));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[deleteShift] mutation failed:", err);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[deleteShift] mutation failed:", err);
|
||||
}
|
||||
}, [mutateDeleteShift]);
|
||||
},
|
||||
[mutateDeleteShift],
|
||||
);
|
||||
|
||||
return (
|
||||
<ShiftContext.Provider
|
||||
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "temp",
|
||||
"version": "1.2.9",
|
||||
"version": "1.2.10",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "temp",
|
||||
"version": "1.2.9",
|
||||
"version": "1.2.10",
|
||||
"dependencies": {
|
||||
"@apollo/client": "^4.1.9",
|
||||
"@tailwindcss/postcss": "^4.2.4",
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "temp",
|
||||
"version": "1.2.9",
|
||||
"version": "1.2.10",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
|
||||
Reference in New Issue
Block a user