From be711eccea66002fadab4178960cac1f682333d6 Mon Sep 17 00:00:00 2001
From: "Yuna.Suzuki" <yuna.suzuki@ivis.co.jp>
Date: Mon, 16 Jun 2025 13:41:18 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B9=E3=83=9E=E3=83=9B=E3=81=AB=E5=AF=BE?=
 =?UTF-8?q?=E5=BF=9C=E3=81=97=E3=81=9F=E7=94=BB=E9=9D=A2=E8=A8=AD=E8=A8=88?=
 =?UTF-8?q?=E3=80=81=E7=B7=A8=E9=9B=86=E7=94=BB=E9=9D=A2=E3=81=A7=E3=81=AE?=
 =?UTF-8?q?=E8=A9=B3=E7=B4=B0=E8=A1=A8=E7=A4=BA=E3=80=81=E7=B7=A8=E9=9B=86?=
 =?UTF-8?q?=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0=E3=81=A7=E3=81=AE?=
 =?UTF-8?q?=E3=82=AB=E3=83=AC=E3=83=B3=E3=83=80=E3=83=BC=E6=A9=9F=E8=83=BD?=
 =?UTF-8?q?=E3=82=92=E5=AE=9F=E8=A3=85=E3=81=97=E3=81=BE=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/StockPage.tsx | 104 +++++++++++++++++++++++--------
 1 file changed, 79 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index 2aa95ba..363230e 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -146,7 +146,7 @@ const StockPage: React.FC = () => {
   };
 
   /**
-   * カテゴリー選択？？
+   * カテゴリー選択
    */
   const onChangeCategory = async (category: string) => {
     setNewStock({ ...newStock, category })
@@ -270,8 +270,6 @@ const StockPage: React.FC = () => {
               <TableRow>
                 <TableCell>食材名</TableCell>
                 <TableCell>数量</TableCell>
-                <TableCell>購入価格</TableCell>
-                <TableCell>購入日</TableCell>
                 <TableCell>消費・賞味期限</TableCell>
               </TableRow>
             </TableHead>
@@ -290,8 +288,6 @@ const StockPage: React.FC = () => {
                   >
                     <TableCell>{stock.stuffName}</TableCell>
                     <TableCell>{stock.amount}</TableCell>
-                    <TableCell>{stock.price}</TableCell>
-                    <TableCell>{formatDate(stock.buyDate)}</TableCell>
                     <TableCell
                       style={daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}}
                     >
@@ -330,6 +326,54 @@ const StockPage: React.FC = () => {
                   value={editStock.price}
                   onChange={handleChange}
                 />
+                {/* 購入日・消費期限を横並びに */}
+                <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+                  {/* 購入日 */}
+                  <DatePicker
+                    selected={editStock.buyDate ? new Date(editStock.buyDate) : null}
+                    onChange={(date) => {
+                      if (editStock) {
+                        setEditStock({
+                          ...editStock,
+                          buyDate: date ? formatDateLocal(date) : '',
+                        });
+                      }
+                    }}
+                    dateFormat="yyyy/MM/dd"
+                    customInput={
+                      <TextField
+                        margin="normal"
+                        label="購入日 (yyyy/MM/dd)"
+                        fullWidth
+                        name="buyDate"
+                      />
+                    }
+                    isClearable
+                  />
+                  {/* 消費・賞味期限 */}
+                  <DatePicker
+                    selected={editStock.expDate ? new Date(editStock.expDate) : null}
+                    onChange={(date) => {
+                      if (editStock) {
+                        setEditStock({
+                          ...editStock,
+                          expDate: date ? formatDateLocal(date) : '',
+                        });
+                      }
+                    }}
+                    dateFormat="yyyy/MM/dd"
+                    customInput={
+                      <TextField
+                        margin="normal"
+                        label="消費・賞味期限 (yyyy/MM/dd)"
+                        fullWidth
+                        name="expDate"
+                      />
+                    }
+                    isClearable
+                  />
+                </Box>
+                {/* 以前の書き方
                 <TextField
                   label="購入日 (yyyy-MM-dd)"
                   fullWidth
@@ -345,18 +389,15 @@ const StockPage: React.FC = () => {
                   name="expDate"
                   value={editStock.expDate}
                   onChange={handleChange}
-                />
-
-                <Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }} sx={{ mt: 3, mb: 2, left: '68%' }}>キャンセル</Button>
-                <Button
-                  variant="contained"
-                  color="success"
-                  onClick={handleApplyChanges}
-                  sx={{ mt: 3, mb: 2, left: "68%" }}
-                >
-                  変更を適用
-                </Button>
-
+                /> */}
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
+                  <Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }}>
+                    キャンセル
+                  </Button>
+                  <Button variant="contained" color="success" onClick={handleApplyChanges}>
+                    変更を適用
+                  </Button>
+                </Box>
               </>
             )}
           </DialogContent>
@@ -375,13 +416,26 @@ const StockPage: React.FC = () => {
               <>
                 <Typography variant="h4">【{selectedRow.stuffName}】を削除します。</Typography>
                 <Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
-                <Button onClick={() => { setIsDeleteOpen(false); setSelectedRow(null); }} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
-                <Button variant="contained" color="error" onClick={() => {
-                  handleDeleteStock(selectedRow.stockId);
-                  setIsDeleteOpen(false); // 削除処理後にダイアログを閉じる
-                  setSelectedRow(null); // セルの選択を解除
-                }}
-                  style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
+
+                <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
+                  <Button onClick={() => {
+                    setIsDeleteOpen(false);
+                    setSelectedRow(null);
+                  }}>
+                    キャンセル
+                  </Button>
+                  <Button
+                    variant="contained"
+                    color="error"
+                    onClick={() => {
+                      handleDeleteStock(selectedRow.stockId);
+                      setIsDeleteOpen(false);
+                      setSelectedRow(null);
+                    }}
+                  >
+                    削除
+                  </Button>
+                </Box>
               </>
             )}
           </DialogContent>
@@ -555,7 +609,7 @@ const StockPage: React.FC = () => {
 
         {/* 在庫の食材編集ボタン（全テーブル共通） */}
         <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, mr: 1 }}>
-          編集
+          詳細・編集
         </Button>
 
         {/* 在庫の食材削除ボタン （全テーブル共通） */}