87 | >(({ className, ...props }, ref) => (
88 | [role=checkbox]]:translate-y-[2px]",
92 | className
93 | )}
94 | {...props}
95 | />
96 | ))
97 | TableCell.displayName = "TableCell"
98 |
99 | const TableCaption = React.forwardRef<
100 | HTMLTableCaptionElement,
101 | React.HTMLAttributes
102 | >(({ className, ...props }, ref) => (
103 |
108 | ))
109 | TableCaption.displayName = "TableCaption"
110 |
111 | export {
112 | Table,
113 | TableHeader,
114 | TableBody,
115 | TableFooter,
116 | TableHead,
117 | TableRow,
118 | TableCell,
119 | TableCaption,
120 | }
121 |
--------------------------------------------------------------------------------
/src/app/guest/menu/menu-order.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Image from "next/image";
3 | import { Button } from "@/components/ui/button";
4 | import { useDishListQuery } from "@/queries/useDish";
5 | import Quantity from "./quantity";
6 | import { useState } from "react";
7 | import { GuestCreateOrdersBodyType } from "@/schemas/guest.schema";
8 | import { useGuestOrderMutation } from "@/queries/useGuest";
9 | import { useRouter } from "next/navigation";
10 | import { handleErrorApi } from "@/lib/utils";
11 |
12 | export default function MenuOrder() {
13 | const { data: listData } = useDishListQuery();
14 | const dishes = listData?.payload.data ?? [];
15 | const { mutateAsync } = useGuestOrderMutation();
16 | const [orders, setOrders] = useState([]);
17 | const totalPrice = dishes.reduce((result, dish) => {
18 | const order = orders.find((order) => order.dishId === dish.id);
19 | if (!order) return result;
20 | return result + order.quantity * dish.price;
21 | }, 0);
22 | const router = useRouter();
23 | const handleQuantityChange = (dishId: number, quantity: number) => {
24 | setOrders((prev) => {
25 | if (quantity === 0) {
26 | return prev.filter((order) => order.dishId !== dishId);
27 | }
28 | const index = prev.findIndex((order) => order.dishId === dishId);
29 | if (index === -1) {
30 | return [...prev, { dishId, quantity }];
31 | }
32 |
33 | const newOrders = [...prev];
34 | newOrders[index] = { ...newOrders[index], quantity };
35 | return newOrders;
36 | });
37 | };
38 |
39 | const handleOrder = async () => {
40 | try {
41 | await mutateAsync(orders);
42 | router.push(`/guest/orders`);
43 | } catch (error) {
44 | handleErrorApi({
45 | error,
46 | });
47 | }
48 | };
49 |
50 | return (
51 | <>
52 | {dishes
53 | .filter((item) => item.status !== "Hidden")
54 | .map((dish) => (
55 |
63 |
64 |
65 | {dish.status === "Unavailable" ? "Hết hàng" : ""}
66 |
67 |
77 |
78 |
79 | {dish.name}
80 | {dish.description}
81 |
82 | {dish.price.toLocaleString("VN")}đ
83 |
84 |
85 |
86 | handleQuantityChange(dish.id, value)}
88 | value={
89 | orders.find((order) => order.dishId === dish.id)?.quantity ??
90 | 0
91 | }
92 | />
93 |
94 |
97 |
105 |
106 |
107 | );
108 | }
109 |
--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
5 | import { X } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Dialog = DialogPrimitive.Root
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger
12 |
13 | const DialogPortal = DialogPrimitive.Portal
14 |
15 | const DialogClose = DialogPrimitive.Close
16 |
17 | const DialogOverlay = React.forwardRef<
18 | React.ElementRef,
19 | React.ComponentPropsWithoutRef
20 | >(({ className, ...props }, ref) => (
21 |
29 | ))
30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
31 |
32 | const DialogContent = React.forwardRef<
33 | React.ElementRef,
34 | React.ComponentPropsWithoutRef
35 | >(({ className, children, ...props }, ref) => (
36 |
37 |
38 |
46 | {children}
47 |
48 |
49 | Close
50 |
51 |
52 |
53 | ))
54 | DialogContent.displayName = DialogPrimitive.Content.displayName
55 |
56 | const DialogHeader = ({
57 | className,
58 | ...props
59 | }: React.HTMLAttributes) => (
60 |
67 | )
68 | DialogHeader.displayName = "DialogHeader"
69 |
70 | const DialogFooter = ({
71 | className,
72 | ...props
73 | }: React.HTMLAttributes) => (
74 |
81 | )
82 | DialogFooter.displayName = "DialogFooter"
83 |
84 | const DialogTitle = React.forwardRef<
85 | React.ElementRef,
86 | React.ComponentPropsWithoutRef
87 | >(({ className, ...props }, ref) => (
88 |
96 | ))
97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
98 |
99 | const DialogDescription = React.forwardRef<
100 | React.ElementRef,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 |
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 |
111 | export {
112 | Dialog,
113 | DialogPortal,
114 | DialogOverlay,
115 | DialogTrigger,
116 | DialogClose,
117 | DialogContent,
118 | DialogHeader,
119 | DialogFooter,
120 | DialogTitle,
121 | DialogDescription,
122 | }
123 |
--------------------------------------------------------------------------------
/src/app/(public)/(auth)/login/login-form.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | "use client";
3 | import { Button } from "@/components/ui/button";
4 | import {
5 | Card,
6 | CardContent,
7 | CardDescription,
8 | CardHeader,
9 | CardTitle,
10 | } from "@/components/ui/card";
11 | import { Input } from "@/components/ui/input";
12 | import { Label } from "@/components/ui/label";
13 | import { useForm } from "react-hook-form";
14 | import { Form, FormField, FormItem, FormMessage } from "@/components/ui/form";
15 | import { LoginBody, LoginBodyType } from "@/schemas/auth.schema";
16 | import { zodResolver } from "@hookform/resolvers/zod";
17 | import { useLoginMutation } from "@/queries/useAuth";
18 | import { toast } from "sonner";
19 | import { handleErrorApi } from "@/lib/utils";
20 | import { useRouter, useSearchParams } from "next/navigation";
21 | import { useEffect } from "react";
22 | import { useAppContext } from "@/components/app-provider";
23 |
24 | export default function LoginForm() {
25 | const loginMutation = useLoginMutation();
26 | const searchParams = useSearchParams();
27 | const clearTokens = searchParams.get("clearTokens");
28 | const { setRole } = useAppContext();
29 |
30 | const router = useRouter();
31 |
32 | useEffect(() => {
33 | if (clearTokens) setRole(undefined);
34 | }, [clearTokens, setRole]);
35 |
36 | const form = useForm({
37 | resolver: zodResolver(LoginBody),
38 | defaultValues: {
39 | email: "",
40 | password: "",
41 | },
42 | });
43 |
44 | const onSubmit = async (data: LoginBodyType) => {
45 | if (loginMutation.isPending) return;
46 | try {
47 | const result = await loginMutation.mutateAsync(data);
48 | toast.success(result.payload.message);
49 | setRole(result?.payload?.data?.account?.role);
50 | router.push("/manage/dashboard");
51 | } catch (error: any) {
52 | handleErrorApi({ error, setError: form.setError });
53 | }
54 | };
55 |
56 | return (
57 |
58 |
59 | Đăng nhập
60 |
61 | Nhập email và mật khẩu của bạn để đăng nhập vào hệ thống
62 |
63 |
64 |
65 |
121 |
122 |
123 |
124 | );
125 | }
126 |
--------------------------------------------------------------------------------
/src/schemas/account.schema.ts:
--------------------------------------------------------------------------------
1 | import { RoleValues } from '@/constants/type'
2 | import z from 'zod'
3 |
4 | export const AccountSchema = z.object({
5 | id: z.number(),
6 | name: z.string(),
7 | email: z.string(),
8 | role: z.string(),
9 | avatar: z.string().nullable()
10 | })
11 |
12 | export type AccountType = z.TypeOf
13 |
14 | export const AccountListRes = z.object({
15 | data: z.array(AccountSchema),
16 | message: z.string()
17 | })
18 |
19 | export type AccountListResType = z.TypeOf
20 |
21 | export const AccountRes = z
22 | .object({
23 | data: AccountSchema,
24 | message: z.string()
25 | })
26 | .strict()
27 |
28 | export type AccountResType = z.TypeOf
29 |
30 | export const CreateEmployeeAccountBody = z
31 | .object({
32 | name: z.string().trim().min(2).max(256),
33 | email: z.string().email(),
34 | avatar: z.string().url().optional(),
35 | password: z.string().min(6).max(100),
36 | confirmPassword: z.string().min(6).max(100)
37 | })
38 | .strict()
39 | .superRefine(({ confirmPassword, password }, ctx) => {
40 | if (confirmPassword !== password) {
41 | ctx.addIssue({
42 | code: 'custom',
43 | message: 'Mật khẩu không khớp',
44 | path: ['confirmPassword']
45 | })
46 | }
47 | })
48 |
49 | export type CreateEmployeeAccountBodyType = z.TypeOf
50 |
51 | export const UpdateEmployeeAccountBody = z
52 | .object({
53 | name: z.string().trim().min(2).max(256),
54 | email: z.string().email(),
55 | avatar: z.string().url().optional(),
56 | changePassword: z.boolean().optional(),
57 | password: z.string().min(6).max(100).optional(),
58 | confirmPassword: z.string().min(6).max(100).optional()
59 | })
60 | .strict()
61 | .superRefine(({ confirmPassword, password, changePassword }, ctx) => {
62 | if (changePassword) {
63 | if (!password || !confirmPassword) {
64 | ctx.addIssue({
65 | code: 'custom',
66 | message: 'Hãy nhập mật khẩu mới và xác nhận mật khẩu mới',
67 | path: ['changePassword']
68 | })
69 | } else if (confirmPassword !== password) {
70 | ctx.addIssue({
71 | code: 'custom',
72 | message: 'Mật khẩu không khớp',
73 | path: ['confirmPassword']
74 | })
75 | }
76 | }
77 | })
78 |
79 | export type UpdateEmployeeAccountBodyType = z.TypeOf
80 |
81 | export const UpdateMeBody = z
82 | .object({
83 | name: z.string().trim().min(2).max(256),
84 | avatar: z.string().url().optional()
85 | })
86 | .strict()
87 |
88 | export type UpdateMeBodyType = z.TypeOf
89 |
90 | export const ChangePasswordBody = z
91 | .object({
92 | oldPassword: z.string().min(6).max(100),
93 | password: z.string().min(6).max(100),
94 | confirmPassword: z.string().min(6).max(100)
95 | })
96 | .strict()
97 | .superRefine(({ confirmPassword, password }, ctx) => {
98 | if (confirmPassword !== password) {
99 | ctx.addIssue({
100 | code: 'custom',
101 | message: 'Mật khẩu mới không khớp',
102 | path: ['confirmPassword']
103 | })
104 | }
105 | })
106 |
107 | export type ChangePasswordBodyType = z.TypeOf
108 |
109 | export const AccountIdParam = z.object({
110 | id: z.coerce.number()
111 | })
112 |
113 | export type AccountIdParamType = z.TypeOf
114 |
115 | export const GetListGuestsRes = z.object({
116 | data: z.array(
117 | z.object({
118 | id: z.number(),
119 | name: z.string(),
120 | tableNumber: z.number().nullable(),
121 | createdAt: z.date(),
122 | updatedAt: z.date()
123 | })
124 | ),
125 | message: z.string()
126 | })
127 |
128 | export type GetListGuestsResType = z.TypeOf
129 |
130 | export const GetGuestListQueryParams = z.object({
131 | fromDate: z.coerce.date().optional(),
132 | toDate: z.coerce.date().optional()
133 | })
134 |
135 | export type GetGuestListQueryParamsType = z.TypeOf
136 |
137 | export const CreateGuestBody = z
138 | .object({
139 | name: z.string().trim().min(2).max(256),
140 | tableNumber: z.number()
141 | })
142 | .strict()
143 |
144 | export type CreateGuestBodyType = z.TypeOf
145 |
146 | export const CreateGuestRes = z.object({
147 | message: z.string(),
148 | data: z.object({
149 | id: z.number(),
150 | name: z.string(),
151 | role: z.enum(RoleValues),
152 | tableNumber: z.number().nullable(),
153 | createdAt: z.date(),
154 | updatedAt: z.date()
155 | })
156 | })
157 |
158 | export type CreateGuestResType = z.TypeOf
159 |
--------------------------------------------------------------------------------
/src/app/manage/setting/change-password-form.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
3 | import { Button } from '@/components/ui/button'
4 | import { Input } from '@/components/ui/input'
5 | import { Label } from '@/components/ui/label'
6 | import { useForm } from 'react-hook-form'
7 | import {
8 | ChangePasswordBody,
9 | ChangePasswordBodyType
10 | } from '@/schemas/account.schema'
11 | import { zodResolver } from '@hookform/resolvers/zod'
12 | import { Form, FormField, FormItem, FormMessage } from '@/components/ui/form'
13 | import { useChangePasswordMutation } from '@/queries/useAccount'
14 | import { toast } from 'sonner'
15 | import { handleErrorApi } from '@/lib/utils'
16 |
17 | export default function ChangePasswordForm() {
18 | const changePasswordMutation = useChangePasswordMutation()
19 | const form = useForm({
20 | resolver: zodResolver(ChangePasswordBody),
21 | defaultValues: {
22 | oldPassword: '',
23 | password: '',
24 | confirmPassword: ''
25 | }
26 | })
27 | const onSubmit = async (data: ChangePasswordBodyType) => {
28 | if(changePasswordMutation.isPending) return
29 | try {
30 | const result = await changePasswordMutation.mutateAsync(data)
31 | toast(result.payload.message)
32 | } catch (error) {
33 | handleErrorApi({error, setError: form.setError})
34 | }
35 | }
36 |
37 | return (
38 |
123 |
124 | )
125 | }
126 |
--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { Slot } from "@radix-ui/react-slot"
6 | import {
7 | Controller,
8 | ControllerProps,
9 | FieldPath,
10 | FieldValues,
11 | FormProvider,
12 | useFormContext,
13 | } from "react-hook-form"
14 |
15 | import { cn } from "@/lib/utils"
16 | import { Label } from "@/components/ui/label"
17 |
18 | const Form = FormProvider
19 |
20 | type FormFieldContextValue<
21 | TFieldValues extends FieldValues = FieldValues,
22 | TName extends FieldPath = FieldPath
23 | > = {
24 | name: TName
25 | }
26 |
27 | const FormFieldContext = React.createContext(
28 | {} as FormFieldContextValue
29 | )
30 |
31 | const FormField = <
32 | TFieldValues extends FieldValues = FieldValues,
33 | TName extends FieldPath = FieldPath
34 | >({
35 | ...props
36 | }: ControllerProps) => {
37 | return (
38 |
39 |
40 |
41 | )
42 | }
43 |
44 | const useFormField = () => {
45 | const fieldContext = React.useContext(FormFieldContext)
46 | const itemContext = React.useContext(FormItemContext)
47 | const { getFieldState, formState } = useFormContext()
48 |
49 | const fieldState = getFieldState(fieldContext.name, formState)
50 |
51 | if (!fieldContext) {
52 | throw new Error("useFormField should be used within ")
53 | }
54 |
55 | const { id } = itemContext
56 |
57 | return {
58 | id,
59 | name: fieldContext.name,
60 | formItemId: `${id}-form-item`,
61 | formDescriptionId: `${id}-form-item-description`,
62 | formMessageId: `${id}-form-item-message`,
63 | ...fieldState,
64 | }
65 | }
66 |
67 | type FormItemContextValue = {
68 | id: string
69 | }
70 |
71 | const FormItemContext = React.createContext(
72 | {} as FormItemContextValue
73 | )
74 |
75 | const FormItem = React.forwardRef<
76 | HTMLDivElement,
77 | React.HTMLAttributes
78 | >(({ className, ...props }, ref) => {
79 | const id = React.useId()
80 |
81 | return (
82 |
83 |
84 |
85 | )
86 | })
87 | FormItem.displayName = "FormItem"
88 |
89 | const FormLabel = React.forwardRef<
90 | React.ElementRef,
91 | React.ComponentPropsWithoutRef
92 | >(({ className, ...props }, ref) => {
93 | const { error, formItemId } = useFormField()
94 |
95 | return (
96 |
102 | )
103 | })
104 | FormLabel.displayName = "FormLabel"
105 |
106 | const FormControl = React.forwardRef<
107 | React.ElementRef,
108 | React.ComponentPropsWithoutRef
109 | >(({ ...props }, ref) => {
110 | const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
111 |
112 | return (
113 |
124 | )
125 | })
126 | FormControl.displayName = "FormControl"
127 |
128 | const FormDescription = React.forwardRef<
129 | HTMLParagraphElement,
130 | React.HTMLAttributes
131 | >(({ className, ...props }, ref) => {
132 | const { formDescriptionId } = useFormField()
133 |
134 | return (
135 |
141 | )
142 | })
143 | FormDescription.displayName = "FormDescription"
144 |
145 | const FormMessage = React.forwardRef<
146 | HTMLParagraphElement,
147 | React.HTMLAttributes
148 | >(({ className, children, ...props }, ref) => {
149 | const { error, formMessageId } = useFormField()
150 | const body = error ? String(error?.message) : children
151 |
152 | if (!body) {
153 | return null
154 | }
155 |
156 | return (
157 |
163 | {body}
164 |
165 | )
166 | })
167 | FormMessage.displayName = "FormMessage"
168 |
169 | export {
170 | useFormField,
171 | Form,
172 | FormItem,
173 | FormLabel,
174 | FormControl,
175 | FormDescription,
176 | FormMessage,
177 | FormField,
178 | }
179 |
--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
5 |
6 | import { cn } from "@/lib/utils"
7 | import { buttonVariants } from "@/components/ui/button"
8 |
9 | const AlertDialog = AlertDialogPrimitive.Root
10 |
11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
12 |
13 | const AlertDialogPortal = AlertDialogPrimitive.Portal
14 |
15 | const AlertDialogOverlay = React.forwardRef<
16 | React.ElementRef,
17 | React.ComponentPropsWithoutRef
18 | >(({ className, ...props }, ref) => (
19 |
27 | ))
28 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
29 |
30 | const AlertDialogContent = React.forwardRef<
31 | React.ElementRef,
32 | React.ComponentPropsWithoutRef
33 | >(({ className, ...props }, ref) => (
34 |
35 |
36 |
44 |
45 | ))
46 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
47 |
48 | const AlertDialogHeader = ({
49 | className,
50 | ...props
51 | }: React.HTMLAttributes) => (
52 |
59 | )
60 | AlertDialogHeader.displayName = "AlertDialogHeader"
61 |
62 | const AlertDialogFooter = ({
63 | className,
64 | ...props
65 | }: React.HTMLAttributes) => (
66 |
73 | )
74 | AlertDialogFooter.displayName = "AlertDialogFooter"
75 |
76 | const AlertDialogTitle = React.forwardRef<
77 | React.ElementRef,
78 | React.ComponentPropsWithoutRef
79 | >(({ className, ...props }, ref) => (
80 |
85 | ))
86 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
87 |
88 | const AlertDialogDescription = React.forwardRef<
89 | React.ElementRef,
90 | React.ComponentPropsWithoutRef
91 | >(({ className, ...props }, ref) => (
92 |
97 | ))
98 | AlertDialogDescription.displayName =
99 | AlertDialogPrimitive.Description.displayName
100 |
101 | const AlertDialogAction = React.forwardRef<
102 | React.ElementRef,
103 | React.ComponentPropsWithoutRef
104 | >(({ className, ...props }, ref) => (
105 |
110 | ))
111 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
112 |
113 | const AlertDialogCancel = React.forwardRef<
114 | React.ElementRef,
115 | React.ComponentPropsWithoutRef
116 | >(({ className, ...props }, ref) => (
117 |
126 | ))
127 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
128 |
129 | export {
130 | AlertDialog,
131 | AlertDialogPortal,
132 | AlertDialogOverlay,
133 | AlertDialogTrigger,
134 | AlertDialogContent,
135 | AlertDialogHeader,
136 | AlertDialogFooter,
137 | AlertDialogTitle,
138 | AlertDialogDescription,
139 | AlertDialogAction,
140 | AlertDialogCancel,
141 | }
142 |
--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 | import { X } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 |
10 | const Sheet = SheetPrimitive.Root
11 |
12 | const SheetTrigger = SheetPrimitive.Trigger
13 |
14 | const SheetClose = SheetPrimitive.Close
15 |
16 | const SheetPortal = SheetPrimitive.Portal
17 |
18 | const SheetOverlay = React.forwardRef<
19 | React.ElementRef,
20 | React.ComponentPropsWithoutRef
21 | >(({ className, ...props }, ref) => (
22 |
30 | ))
31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
32 |
33 | const sheetVariants = cva(
34 | "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
35 | {
36 | variants: {
37 | side: {
38 | top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
39 | bottom:
40 | "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
41 | left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
42 | right:
43 | "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
44 | },
45 | },
46 | defaultVariants: {
47 | side: "right",
48 | },
49 | }
50 | )
51 |
52 | interface SheetContentProps
53 | extends React.ComponentPropsWithoutRef,
54 | VariantProps {}
55 |
56 | const SheetContent = React.forwardRef<
57 | React.ElementRef,
58 | SheetContentProps
59 | >(({ side = "right", className, children, ...props }, ref) => (
60 |
61 |
62 |
67 |
68 |
69 | Close
70 |
71 |
72 | {/* title */}
73 | {React.Children.toArray(children).some(
74 | (child) => React.isValidElement(child) && child.type === SheetTitle
75 | ) ? null : (
76 | Sheet
77 | )}
78 | {children}
79 |
80 |
81 | ))
82 | SheetContent.displayName = SheetPrimitive.Content.displayName
83 |
84 | const SheetHeader = ({
85 | className,
86 | ...props
87 | }: React.HTMLAttributes) => (
88 |
95 | )
96 | SheetHeader.displayName = "SheetHeader"
97 |
98 | const SheetFooter = ({
99 | className,
100 | ...props
101 | }: React.HTMLAttributes) => (
102 |
109 | )
110 | SheetFooter.displayName = "SheetFooter"
111 |
112 | const SheetTitle = React.forwardRef<
113 | React.ElementRef,
114 | React.ComponentPropsWithoutRef
115 | >(({ className, ...props }, ref) => (
116 |
121 | ))
122 | SheetTitle.displayName = SheetPrimitive.Title.displayName
123 |
124 | const SheetDescription = React.forwardRef<
125 | React.ElementRef,
126 | React.ComponentPropsWithoutRef
127 | >(({ className, ...props }, ref) => (
128 |
133 | ))
134 | SheetDescription.displayName = SheetPrimitive.Description.displayName
135 |
136 | export {
137 | Sheet,
138 | SheetPortal,
139 | SheetOverlay,
140 | SheetTrigger,
141 | SheetClose,
142 | SheetContent,
143 | SheetHeader,
144 | SheetFooter,
145 | SheetTitle,
146 | SheetDescription,
147 | }
148 |
--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { type DialogProps } from "@radix-ui/react-dialog"
5 | import { Command as CommandPrimitive } from "cmdk"
6 | import { Search } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 | import { Dialog, DialogContent } from "@/components/ui/dialog"
10 |
11 | const Command = React.forwardRef<
12 | React.ElementRef,
13 | React.ComponentPropsWithoutRef
14 | >(({ className, ...props }, ref) => (
15 |
23 | ))
24 | Command.displayName = CommandPrimitive.displayName
25 |
26 | const CommandDialog = ({ children, ...props }: DialogProps) => {
27 | return (
28 |
35 | )
36 | }
37 |
38 | const CommandInput = React.forwardRef<
39 | React.ElementRef,
40 | React.ComponentPropsWithoutRef
41 | >(({ className, ...props }, ref) => (
42 |
43 |
44 |
52 |
53 | ))
54 |
55 | CommandInput.displayName = CommandPrimitive.Input.displayName
56 |
57 | const CommandList = React.forwardRef<
58 | React.ElementRef,
59 | React.ComponentPropsWithoutRef
60 | >(({ className, ...props }, ref) => (
61 |
66 | ))
67 |
68 | CommandList.displayName = CommandPrimitive.List.displayName
69 |
70 | const CommandEmpty = React.forwardRef<
71 | React.ElementRef,
72 | React.ComponentPropsWithoutRef
73 | >((props, ref) => (
74 |
79 | ))
80 |
81 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
82 |
83 | const CommandGroup = React.forwardRef<
84 | React.ElementRef,
85 | React.ComponentPropsWithoutRef
86 | >(({ className, ...props }, ref) => (
87 |
95 | ))
96 |
97 | CommandGroup.displayName = CommandPrimitive.Group.displayName
98 |
99 | const CommandSeparator = React.forwardRef<
100 | React.ElementRef,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 |
108 | ))
109 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
110 |
111 | const CommandItem = React.forwardRef<
112 | React.ElementRef,
113 | React.ComponentPropsWithoutRef
114 | >(({ className, ...props }, ref) => (
115 |
123 | ))
124 |
125 | CommandItem.displayName = CommandPrimitive.Item.displayName
126 |
127 | const CommandShortcut = ({
128 | className,
129 | ...props
130 | }: React.HTMLAttributes) => {
131 | return (
132 |
139 | )
140 | }
141 | CommandShortcut.displayName = "CommandShortcut"
142 |
143 | export {
144 | Command,
145 | CommandDialog,
146 | CommandInput,
147 | CommandList,
148 | CommandEmpty,
149 | CommandGroup,
150 | CommandItem,
151 | CommandShortcut,
152 | CommandSeparator,
153 | }
154 |
--------------------------------------------------------------------------------
/src/app/guest/orders/orders-cart.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Badge } from "@/components/ui/badge";
4 | import { OrderStatus } from "@/constants/type";
5 | import socket from "@/lib/socket";
6 | import { formatCurrency, getVietnameseOrderStatus } from "@/lib/utils";
7 | import { useGuestGetOrderListMutation } from "@/queries/useGuest";
8 | import {
9 | PayGuestOrdersResType,
10 | UpdateOrderResType,
11 | } from "@/schemas/order.schema";
12 | import Image from "next/image";
13 | import { useEffect, useMemo } from "react";
14 | import { toast } from "sonner";
15 |
16 | export default function OrdersCart() {
17 | const { refetch, data } = useGuestGetOrderListMutation();
18 | const orders = useMemo(() => data?.payload.data ?? [], [data]);
19 |
20 | const { waitingForPaying, paid } = useMemo(() => {
21 | return orders.reduce(
22 | (result, order) => {
23 | if (
24 | order.status === OrderStatus.Delivered ||
25 | order.status === OrderStatus.Processing ||
26 | order.status === OrderStatus.Pending
27 | ) {
28 | return {
29 | ...result,
30 | waitingForPaying: {
31 | price:
32 | result.waitingForPaying.price +
33 | order.dishSnapshot.price * order.quantity,
34 | quantity: result.waitingForPaying.quantity + order.quantity,
35 | },
36 | };
37 | }
38 | if (order.status === OrderStatus.Paid) {
39 | return {
40 | ...result,
41 | paid: {
42 | price:
43 | result.paid.price + order.dishSnapshot.price * order.quantity,
44 | quantity: result.paid.quantity + order.quantity,
45 | },
46 | };
47 | }
48 | return result;
49 | },
50 | {
51 | waitingForPaying: {
52 | price: 0,
53 | quantity: 0,
54 | },
55 | paid: {
56 | price: 0,
57 | quantity: 0,
58 | },
59 | }
60 | );
61 | }, [orders]);
62 |
63 | useEffect(() => {
64 | if (socket.connected) {
65 | onConnect();
66 | }
67 |
68 | function onConnect() {
69 | console.log(socket.id);
70 | }
71 |
72 | function onDisconnect() {
73 | console.log("disconnect");
74 | }
75 |
76 | function onUpdateOrder(data: UpdateOrderResType["data"]) {
77 | console.log("update-order", data);
78 | const {
79 | dishSnapshot: { name },
80 | quantity,
81 | } = data;
82 | toast(
83 | `Món ${name} (SL: ${quantity}) vừa được cập nhật sang trạng thái "${getVietnameseOrderStatus(
84 | data.status
85 | )}"`
86 | );
87 | refetch();
88 | }
89 |
90 | function onPayment(data: PayGuestOrdersResType["data"]) {
91 | const { guest } = data[0];
92 | toast(
93 | `${guest?.name} tại bàn ${guest?.tableNumber} thanh toán thành công ${data.length} đơn`
94 | );
95 | refetch();
96 | }
97 |
98 | socket.on("update-order", onUpdateOrder);
99 | socket.on("payment", onPayment);
100 | socket.on("connect", onConnect);
101 | socket.on("disconnect", onDisconnect);
102 |
103 | return () => {
104 | socket.off("connect", onConnect);
105 | socket.off("disconnect", onDisconnect);
106 | socket.off("update-order", onUpdateOrder);
107 | socket.off("payment", onPayment);
108 | };
109 | }, [refetch]);
110 | return (
111 |
112 | {orders.map((order) => (
113 |
114 |
115 |
116 | {order.dishSnapshot.status === "Unavailable" ? "Hết hàng" : ""}
117 |
118 |
128 |
129 |
130 | {order.dishSnapshot.name}
131 |
132 | {order.dishSnapshot.price.toLocaleString("VN")}đ x
133 | {order.quantity}
134 |
135 |
136 |
137 |
138 | {getVietnameseOrderStatus(order.status)}
139 |
140 |
141 |
142 | ))}
143 |
144 | {paid.quantity !== 0 && (
145 |
146 |
147 | Đã thanh toán · {paid.quantity} món
148 | {formatCurrency(paid.price)}
149 |
150 |
151 | )}
152 |
153 |
154 | Chưa thanh toán · {waitingForPaying.quantity} món
155 | {formatCurrency(waitingForPaying.price)}
156 |
157 |
158 |
58 | {guest && (
59 |
60 |
61 | Tên:
62 | {guest.name}
63 | (#{guest.id})
64 | |
65 | Bàn:
66 | {guest.tableNumber}
67 |
68 |
69 | Ngày đăng ký:
70 | {formatDateTimeToLocaleString(guest.createdAt)}
71 |
72 |
73 | )}
74 |
75 |
76 | Đơn hàng:
77 | {orders.map((order, index) => {
78 | return (
79 |
80 | {index + 1}
81 |
82 | {order.status === OrderStatus.Pending && (
83 |
84 | )}
85 | {order.status === OrderStatus.Processing && (
86 |
87 | )}
88 | {order.status === OrderStatus.Rejected && (
89 |
90 | )}
91 | {order.status === OrderStatus.Delivered && (
92 |
93 | )}
94 | {order.status === OrderStatus.Paid && (
95 |
96 | )}
97 |
98 |
106 |
110 | {order.dishSnapshot.name}
111 |
112 |
113 | x{order.quantity}
114 |
115 |
116 | {formatCurrency(order.quantity * order.dishSnapshot.price)}
117 |
118 |
125 | {formatDateTimeToLocaleString(order.createdAt)}
126 |
127 |
134 | {formatDateTimeToTimeString(order.createdAt)}
135 |
136 |
137 | );
138 | })}
139 |
140 |
141 |
142 | Chưa thanh toán:
143 |
144 |
145 | {formatCurrency(
146 | ordersFilterToPurchase.reduce((acc, order) => {
147 | return acc + order.quantity * order.dishSnapshot.price;
148 | }, 0)
149 | )}
150 |
151 |
152 |
153 |
154 | Đã thanh toán:
155 |
156 |
157 | {formatCurrency(
158 | purchasedOrderFilter.reduce((acc, order) => {
159 | return acc + order.quantity * order.dishSnapshot.price;
160 | }, 0)
161 | )}
162 |
163 |
164 |
165 |
166 |
167 |
176 |
177 | |