領収証金額の入力バリデーションの修正

SATE_RECEIPT-17 画面不正

src/components/chip/RequireChip.tsx

@@ -0,0 +1,10 @@
+import { Chip, ChipProps } from "@mui/material";
+
+export type RequireChipProps = { show?: boolean } & ChipProps;
+export default function RequireChip(props: RequireChipProps) {
+  const { show } = props;
+  if (show === false) {
+    return null;
+  }
+  return <Chip size="small" label="必須" color="error" {...props} />;
+}

src/components/stack/StackRow.tsx

@@ -0,0 +1,18 @@
+import { Stack, StackProps } from "@mui/material";
+import { HasChildren } from "@types";
+
+export type StackRowProps = {
+  show?: boolean;
+} & StackProps &
+  HasChildren;
+export default function StackRow(props: StackRowProps) {
+  const { show } = props;
+  if (show === false) {
+    return null;
+  }
+  return (
+    <Stack spacing={1} {...props} direction="row">
+      {props.children}
+    </Stack>
+  );
+}

src/pages/dashboard/receipt-issuing-order/custom/hello-techno/hooks/useInputReceiptStep.tsx

@@ -1,18 +1,11 @@
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Box, Button, Stack, TextField, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import { HasChildren } from "@types";
-import { HTAdjustData, getHTAdjustData } from "api/custom/hello-techno";
-import {
-  FormProvider,
-  RHFAutoComplete,
-  RHFTextField,
-} from "components/hook-form";
-import {
-  AutoCompleteOption,
-  AutoCompleteOptionType,
-  getValue,
-} from "components/hook-form/RHFAutoComplete";
+import { HTAdjustData } from "api/custom/hello-techno";
+import RequireChip from "components/chip/RequireChip";
+import { FormProvider, RHFTextField } from "components/hook-form";
 import RHFDatePicker from "components/hook-form/RHFDatePicker";
+import StackRow from "components/stack/StackRow";
 import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { dateTimeParse } from "utils/datetime";
@@ -21,11 +14,15 @@ import * as Yup from "yup";
 
 type AreaBoxProps = {
   title: string;
+  require?: boolean;
 } & HasChildren;
-function AreaBox({ title, children }: AreaBoxProps) {
+function AreaBox({ title, children, require }: AreaBoxProps) {
   return (
     <Box sx={{ maxWidth: 500 }}>
-      <Typography variant="subtitle1">{title}</Typography>
+      <StackRow>
+        <Typography variant="subtitle1">{title} </Typography>
+        <RequireChip show={require ?? false} />
+      </StackRow>
       {children}
     </Box>
   );
@@ -57,8 +54,16 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) {
         date: Yup.date()
           .required("必須項目です")
           .typeError("正しく入力してください"),
-        amount: Yup.number().required("必須項目です"),
-        tax_amount: Yup.number().required("必須項目です"),
+        amount: Yup.number()
+          .typeError("数値を入力してください")
+          .test("range", "1-50000まで入力できます", function (value) {
+            return typeof value === "number" && 1 <= value && value <= 50000;
+          }),
+        tax_amount: Yup.number()
+          .typeError("数値を入力してください")
+          .test("range", "1-50000まで入力できます", function (value) {
+            return typeof value === "number" && 1 <= value && value <= 50000;
+          }),
         memo: Yup.string().nullable(),
       })
     ),
@@ -99,10 +104,10 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) {
   const element = (
     <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
       <Stack spacing={2} sx={{ p: 1, m: 1 }}>
-        <AreaBox title="利用日">
+        <AreaBox title="利用日" require={true}>
           <RHFDatePicker name="date" size="small" readOnly={readOnly} />
         </AreaBox>
-        <AreaBox title="金額">
+        <AreaBox title="金額" require={true}>
           <RHFTextField
             type="number"
             name="amount"
@@ -114,7 +119,7 @@ export default function useInputReceiptStep({ onNext, onPrev }: Props) {
             readOnly={readOnly}
           />
         </AreaBox>
-        <AreaBox title="消費税(内税)">
+        <AreaBox title="消費税(内税)" require={true}>
           <Stack direction="row" spacing={2}>
             <RHFTextField
               type="number"