From 9775fa7fdf4107bf34ca01d3156d5f25b858a166 Mon Sep 17 00:00:00 2001
From: "Masaharu.Kato" <masaharu.kato@ivis.co.jp>
Date: Fri, 13 Jun 2025 10:24:02 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=E5=85=A5=E5=8A=9B=E6=AC=84=E3=81=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3=EF=BC=8C=E8=B3=BC=E5=85=A5=E6=97=A5=E3=81=AB?=
 =?UTF-8?q?=E4=BB=8A=E6=97=A5=E3=81=AE=E6=97=A5=E4=BB=98=E3=82=92=E8=A8=AD?=
 =?UTF-8?q?=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/BuyDialog.tsx |  8 ++-
 frontend/src/pages/StockPage.tsx      | 83 ++++++++++++++++++++-------
 frontend/src/pages/TaskListPage.tsx   |  2 +-
 3 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/BuyDialog.tsx b/frontend/src/components/BuyDialog.tsx
index 918a285..0d37efb 100644
--- a/frontend/src/components/BuyDialog.tsx
+++ b/frontend/src/components/BuyDialog.tsx
@@ -9,9 +9,13 @@ import {
     Box,
 } from '@mui/material';
 import { NewStock } from '../types/types';
-import DatePicker from 'react-datepicker';
+import DatePicker, { registerLocale } from 'react-datepicker';
+import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
 
 
+// 日本語ロケールを登録
+    registerLocale('ja', ja);
+
 const BuyDialog = ({
     openDialog,
     setOpenDialog,
@@ -25,7 +29,7 @@ const BuyDialog = ({
     setNewStock: (tobuy: NewStock) => void,
     onSubmit: () => void,
 }) => {
-
+    
     return (
 
 
diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index 7e91f1d..3379f18 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -27,21 +27,26 @@ import {
   MenuItem,
 } from '@mui/material';
 import { STOCK_ERRORS } from '../constants/errorMessages';
+import DatePicker, { registerLocale } from 'react-datepicker';
+import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
 
 // 新規在庫の初期状態
 const EMPTY_STOCK: Omit<Stock, 'stockId' | 'stuffId'> & { stuffId: number | null } & { newAddition: boolean } = {
   stuffId: null,
   stuffName: '',
-  amount: 0,
+  amount: 1,
   price: 0,
   lastUpdate: '',
-  buyDate: '',
+  buyDate: new Date().toISOString(),
   expDate: '',
   category: '',
   newAddition: false, // 材料を新規作成するか否か
   // shop '',
 }
 
+// 日本語ロケールを登録
+registerLocale('ja', ja);
+
 const StockPage: React.FC = () => {
 
   const [stocks, setStocks] = useState<Stock[]>([]);
@@ -86,6 +91,9 @@ const StockPage: React.FC = () => {
       if (newStock.newAddition) {
         newStock.stuffId = null;
       }
+      if (isNaN(newStock.amount)) return;
+      if (isNaN(newStock.price)) return;
+
       console.log(newStock)
       const today = new Date().toISOString().substring(0, 10);
 
@@ -381,7 +389,7 @@ const StockPage: React.FC = () => {
         在庫一覧
       </Typography>
 
-      <Box sx={{textAlign: 'right'}}>
+      <Box sx={{ textAlign: 'right' }}>
         {/* 在庫の食材追加ボタン */}
         <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
           追加
@@ -453,7 +461,7 @@ const StockPage: React.FC = () => {
                 onChange={(e) => {
                   const value = e.target.value;
                   const parsedValue = parseInt(value, 10); // 数値に変換
-                  if (!isNaN(parsedValue)) {
+                  if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
                     setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
                   }
                 }}
@@ -470,7 +478,7 @@ const StockPage: React.FC = () => {
                 onChange={(e) => {
                   const value = e.target.value;
                   const parsedValue = parseInt(value, 10); // 数値に変換
-                  if (!isNaN(parsedValue)) {
+                  if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK
                     setNewStock({ ...newStock, price: parsedValue }); // number型で保存
                   }
                 }}
@@ -479,23 +487,54 @@ const StockPage: React.FC = () => {
                 inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
               />
 
-              {/* 購入日入力フィールド */}
-              <TextField
-                margin="dense"
-                label="購入日(yyyy/MM/dd)"
-                fullWidth
-                value={newStock.buyDate}
-                onChange={(e) => setNewStock({ ...newStock, buyDate: e.target.value })}
-              />
-
-              {/* 賞味・消費期限入力フィールド */}
-              <TextField
-                margin="dense"
-                label="消費・賞味期限(yyyy/MM/dd)"
-                fullWidth
-                value={newStock.expDate}
-                onChange={(e) => setNewStock({ ...newStock, expDate: e.target.value })}
-              />
+              {/* 購入日・消費期限を横並びに */}
+              <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+                {/* 購入日入力フィールド */}
+                <DatePicker
+                  popperClassName="custom-datepicker-popper"
+                  selected={newStock.buyDate ? new Date(newStock.buyDate) : null}
+                  onChange={(date) =>
+                    setNewStock({ ...newStock, buyDate: date ? date.toISOString().split('T')[0] : '' })
+                  }
+                  dateFormat="yyyy/MM/dd"
+                  customInput={
+                    <TextField
+                      margin="dense"
+                      label="購入日(yyyy/MM/dd)"
+                      fullWidth
+                    />
+                  }
+                  isClearable
+                //withPortal // ← 他の文字との重なり対策
+                />
+                {/*
+            <TextField
+              margin="dense"
+              label="購入日(yyyy/MM/dd)"
+              fullWidth
+              value={newStock.buyDate}
+              onChange={(e) => setNewStock({ ...newStock, buyDate: e.target.value })}
+            />
+            */}
+                {/* 消費・賞味期限入力フィールド */}
+                <DatePicker
+                  popperClassName="custom-datepicker-popper"
+                  selected={newStock.expDate ? new Date(newStock.expDate) : null}
+                  onChange={(date) =>
+                    setNewStock({ ...newStock, expDate: date ? date.toISOString().split('T')[0] : '' })
+                  }
+                  dateFormat="yyyy/MM/dd"
+                  customInput={
+                    <TextField
+                      margin="dense"
+                      label="消費・賞味期限(yyyy/MM/dd)"
+                      fullWidth
+                    />
+                  }
+                  isClearable
+                //withPortal
+                />
+              </Box>
             </Box>
           </DialogContent>
           <DialogActions>
diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx
index 29082a3..74b756d 100644
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@@ -65,7 +65,7 @@ const TaskListPage: React.FC = () => {
   
   const [newStock, setNewStock] = useState<NewStock>({
     price: '', // ここではstring
-    buyDate: '',
+    buyDate: new Date().toISOString(),
     expDate: '',
   });
 

From 9ae705a849814d8eb863ac9d17ace53a84f3f0c3 Mon Sep 17 00:00:00 2001
From: "akito.nishiwaki" <akito.nishiwaki@ivis.co.jp>
Date: Fri, 13 Jun 2025 10:52:29 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=E3=82=AB=E3=83=AC=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=E6=97=A5=E6=9C=AC=E6=99=82=E9=96=93=E3=81=A7=E5=87=BA?=
 =?UTF-8?q?=E5=8A=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/BuyDialog.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/BuyDialog.tsx b/frontend/src/components/BuyDialog.tsx
index 0d37efb..6acfdd3 100644
--- a/frontend/src/components/BuyDialog.tsx
+++ b/frontend/src/components/BuyDialog.tsx
@@ -12,6 +12,13 @@ import { NewStock } from '../types/types';
 import DatePicker, { registerLocale } from 'react-datepicker';
 import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
 
+// 日付をyyyy-MM-dd形式で返す関数
+const formatDateLocal = (date: Date) => {
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
 
 // 日本語ロケールを登録
     registerLocale('ja', ja);
@@ -59,7 +66,7 @@ const BuyDialog = ({
                             popperClassName="custom-datepicker-popper"
                             selected={newStock.buyDate ? new Date(newStock.buyDate) : null}
                             onChange={(date) =>
-                                setNewStock({ ...newStock, buyDate: date ? date.toISOString().split('T')[0] : '' })
+                                setNewStock({ ...newStock, buyDate: date ? formatDateLocal(date) : '' })
                             }
                             dateFormat="yyyy/MM/dd"
                             customInput={
@@ -86,7 +93,7 @@ const BuyDialog = ({
                             popperClassName="custom-datepicker-popper"
                             selected={newStock.expDate ? new Date(newStock.expDate) : null}
                             onChange={(date) =>
-                                setNewStock({ ...newStock, expDate: date ? date.toISOString().split('T')[0] : '' })
+                                setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
                             }
                             dateFormat="yyyy/MM/dd"
                             customInput={

From 4fa35de3acb0df5af76492026cf7f1c48c2d41d7 Mon Sep 17 00:00:00 2001
From: "akito.nishiwaki" <akito.nishiwaki@ivis.co.jp>
Date: Fri, 13 Jun 2025 11:47:24 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=E5=9C=A8=E5=BA=AB=E8=BF=BD=E5=8A=A0?=
 =?UTF-8?q?=E3=81=AE=E3=82=AB=E3=83=AC=E3=83=B3=E3=83=80=E3=83=BC=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/StockPage.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index 3379f18..2aa95ba 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -30,6 +30,14 @@ import { STOCK_ERRORS } from '../constants/errorMessages';
 import DatePicker, { registerLocale } from 'react-datepicker';
 import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
 
+// 日付をyyyy-MM-dd形式で返す関数
+const formatDateLocal = (date: Date) => {
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
 // 新規在庫の初期状態
 const EMPTY_STOCK: Omit<Stock, 'stockId' | 'stuffId'> & { stuffId: number | null } & { newAddition: boolean } = {
   stuffId: null,
@@ -494,7 +502,7 @@ const StockPage: React.FC = () => {
                   popperClassName="custom-datepicker-popper"
                   selected={newStock.buyDate ? new Date(newStock.buyDate) : null}
                   onChange={(date) =>
-                    setNewStock({ ...newStock, buyDate: date ? date.toISOString().split('T')[0] : '' })
+                    setNewStock({ ...newStock, buyDate: date ? formatDateLocal(date) : '' })
                   }
                   dateFormat="yyyy/MM/dd"
                   customInput={
@@ -521,7 +529,7 @@ const StockPage: React.FC = () => {
                   popperClassName="custom-datepicker-popper"
                   selected={newStock.expDate ? new Date(newStock.expDate) : null}
                   onChange={(date) =>
-                    setNewStock({ ...newStock, expDate: date ? date.toISOString().split('T')[0] : '' })
+                    setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
                   }
                   dateFormat="yyyy/MM/dd"
                   customInput={