準備完了ボタンを追加

pos/app/components/atoms/ReadyBell.tsx

@@ -0,0 +1,21 @@
+import type { WithId } from "common/lib/typeguard";
+import type { OrderEntity } from "common/models/order";
+import { HiBell, HiBellAlert } from "react-icons/hi2";
+
+type props = {
+  order: WithId<OrderEntity>;
+  changeReady: (ready: boolean) => void;
+};
+
+export const ReadyBell = ({ order, changeReady }: props) => {
+  const isReady = order.readyAt != null;
+  return isReady ? (
+    <button type="button" onClick={() => changeReady(false)}>
+      <HiBellAlert className="h-7 w-7 fill-orange-600" />
+    </button>
+  ) : (
+    <button type="button" onClick={() => changeReady(true)}>
+      <HiBell className="h-7 w-7 fill-stone-400" />
+    </button>
+  );
+};

pos/app/components/molecules/InputComment.tsx

@@ -5,10 +5,10 @@ import { Input } from "../ui/input";
 
 type props = {
   order: WithId<OrderEntity>;
-  mutateOrder: (order: WithId<OrderEntity>, descComment: string) => void; // これをコンポーネントの中で呼び出す
+  addComment: (order: WithId<OrderEntity>, descComment: string) => void; // これをコンポーネントの中で呼び出す
 };
 
-export const InputComment = ({ order, mutateOrder }: props) => {
+export const InputComment = ({ order, addComment }: props) => {
   const [descComment, setDescComment] = useState("");
 
   return (
@@ -26,7 +26,7 @@ export const InputComment = ({ order, mutateOrder }: props) => {
           // MacOSではIME確定時のEnterでもkey === "Enter"が発火してしまう
           // deprecatedではあるがkeyCodeを使う
           if (e.keyCode === 13) {
-            mutateOrder(order, descComment);
+            addComment(order, descComment);
             setDescComment("");
           }
         }}

pos/app/routes/_header.master.tsx

@@ -147,7 +147,7 @@ export default function FielsOfMaster() {
                         ))}
                       </div>
                     )}
-                    <InputComment order={order} mutateOrder={mutateOrder} />
+                    <InputComment order={order} addComment={mutateOrder} />
                   </CardContent>
                 </Card>
               </div>

pos/app/routes/_header.serve.tsx

@@ -16,6 +16,7 @@ import { useCallback } from "react";
 import { toast } from "sonner";
 import useSWRSubscription from "swr/subscription";
 import { z } from "zod";
+import { ReadyBell } from "~/components/atoms/ReadyBell";
 import { InputComment } from "~/components/molecules/InputComment";
 import { RealtimeElapsedTime } from "~/components/molecules/RealtimeElapsedTime";
 import { Button } from "~/components/ui/button";
@@ -33,7 +34,7 @@ export const clientLoader = async () => {
 
 export default function Serve() {
   const submit = useSubmit();
-  const mutateOrder = useCallback(
+  const addComment = useCallback(
     (servedOrder: OrderEntity, descComment: string) => {
       const order = servedOrder.clone();
       order.addComment("serve", descComment);
@@ -57,7 +58,7 @@ export default function Serve() {
     return acc;
   }, 0);
 
-  const submitPayload = useCallback(
+  const beServed = useCallback(
     (servedOrder: OrderEntity) => {
       const order = servedOrder.clone();
       order.beServed();
@@ -81,6 +82,22 @@ export default function Serve() {
     [submit],
   );
 
+  const changeReady = useCallback(
+    (servedOrder: OrderEntity, ready: boolean) => {
+      const order = servedOrder.clone();
+      if (ready) {
+        order.beReady();
+      } else {
+        order.undoReady();
+      }
+      submit(
+        { servedOrder: JSON.stringify(order.toOrder()) },
+        { method: "PUT" },
+      );
+    },
+    [submit],
+  );
+
   return (
     <div className="p-4 font-sans">
       <div className="flex justify-between pb-4">
@@ -148,12 +165,16 @@ export default function Serve() {
                         ))}
                       </div>
                     )}
-                    <InputComment order={order} mutateOrder={mutateOrder} />
+                    <InputComment order={order} addComment={addComment} />
                     <div className="mt-4 flex justify-between">
+                      <ReadyBell
+                        order={order}
+                        changeReady={(ready) => changeReady(order, ready)}
+                      />
                       <Button
                         onClick={() => {
                           const now = new Date();
-                          submitPayload(order);
+                          beServed(order);
                           toast(`提供完了 No.${order.orderId}`, {
                             description: `${dayjs(now).format("H:mm:ss")}`,
                             action: {

pos/package.json

@@ -37,6 +37,7 @@
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "recharts": "^2.13.0",
     "sonner": "^1.5.0",
     "swr": "^2.2.5",