From 777fdc72af7516414f9a5ee4a4889055d7ae93f9 Mon Sep 17 00:00:00 2001
From: "Haru.Kusano" <haru.kusano@ivis.co.jp>
Date: Mon, 16 Jun 2025 13:30:17 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=E3=83=9C=E3=83=88=E3=83=A0=E3=83=8A?=
 =?UTF-8?q?=E3=83=93=E3=82=B2=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E4=BD=9C=E6=88=90=EF=BC=86=E3=82=B5=E3=82=A4=E3=83=89=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Layout.tsx  | 102 ++++++++++------------------
 frontend/src/pages/TaskListPage.tsx |   8 +--
 2 files changed, 40 insertions(+), 70 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index fa90b27..10d255d 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -16,7 +16,10 @@ import {
   ListItemIcon,
   ListItemButton,
   Divider,
-  IconButton
+  IconButton,
+  BottomNavigation,
+  BottomNavigationAction,
+  Paper
 } from '@mui/material';
 import {
   Menu as MenuIcon,
@@ -24,6 +27,7 @@ import {
   Inventory as InventoryIcon, // テストページ用のアイコン
   Science as ScienceIcon, // 鈴木
   SoupKitchen as SoupKitchenIcon,
+  ShoppingCart as ShoppingCartIcon
 } from '@mui/icons-material';
 import { useNavigate, Outlet, useLocation } from 'react-router-dom';
 
@@ -31,6 +35,7 @@ const Layout: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [bottomNavi, setBottomNavi] = useState(1);
 
   /**
    * ログアウト処理を行うハンドラー関数
@@ -41,19 +46,9 @@ const Layout: React.FC = () => {
     navigate('/login');
   };
 
-  /**
-   * 画面遷移処理を行うハンドラー関数
-   * 指定されたパスに遷移し、サイドメニューを閉じる
-   */
-  const handleNavigate = (path: string) => {
-    navigate(path);
-    setDrawerOpen(false);
-  };
+  
 
-  // 現在のパスに基づいてメニュー項目が選択状態かどうかを判定
-  const isSelected = (path: string): boolean => {
-    return location.pathname === path;
-  };
+ 
 
   // メニューを開閉するハンドラー
   const toggleDrawer = () => {
@@ -65,15 +60,6 @@ const Layout: React.FC = () => {
       {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
       <AppBar position="static" elevation={0}>
         <Toolbar>
-          <IconButton
-            edge="start"
-            color="inherit"
-            aria-label="menu"
-            onClick={toggleDrawer}
-            sx={{ mr: 2 }}
-          >
-            <MenuIcon />
-          </IconButton>
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             shopchop
           </Typography>
@@ -83,52 +69,36 @@ const Layout: React.FC = () => {
         </Toolbar>
       </AppBar>
 
-      {/* サイドメニュー */}
-      <Drawer
-        anchor="left"
-        open={drawerOpen}
-        onClose={() => setDrawerOpen(false)}
-      >
-        <Box
-          sx={{ width: 250 }}
-          role="presentation"
+     
+
+
+
+      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
+        <BottomNavigation
+          showLabels
+          value={bottomNavi}
+          onChange={(event, newValue) => {
+            setBottomNavi(newValue);
+            switch(newValue) {
+              case 0:
+                navigate('stock');
+                break;
+              case 1:
+                navigate('tasks');
+                break;
+              case 2:
+                navigate('recipeList');
+                break;
+            }
+            // ここでルーティング処理などを行う
+          }}
         >
-          <List>
-            <ListItemButton
-              onClick={() => handleNavigate('/tasks')}
-              selected={isSelected('/tasks')}
-            >
-              <ListItemIcon><ListAltIcon /></ListItemIcon>
-              <ListItemText primary="買うものリスト" />
-            </ListItemButton>
-            {/* テストページへのリンクを追加 */}
+          <BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
+          <BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
+          <BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
+        </BottomNavigation>
+      </Paper>
 
-             {/* 在庫リストへのリンクを追加 */} 
-            <ListItemButton 
-              onClick={() => handleNavigate('/addRecipe')} 
-              selected={isSelected('/addRecipe')}
-            >
-              <ListItemIcon><SoupKitchenIcon /></ListItemIcon>
-              <ListItemText primary="料理の追加" />
-            </ListItemButton>
-            <ListItemButton 
-              onClick={() => handleNavigate('/recipeList')} 
-              selected={isSelected('/recipeList')}
-            >
-              <ListItemIcon><ScienceIcon /></ListItemIcon>
-              <ListItemText primary="料理リスト" />
-            </ListItemButton>
-            <ListItemButton
-              onClick={() => handleNavigate('/stock')}
-              selected={isSelected('/stock')}
-            >
-              <ListItemIcon><InventoryIcon /></ListItemIcon>
-              <ListItemText primary="在庫管理" />
-            </ListItemButton>
-            <Divider />
-          </List>
-        </Box>
-      </Drawer>
 
       {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
       <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx
index 29082a3..7d8b59d 100644
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@@ -294,28 +294,28 @@ const TaskListPage: React.FC = () => {
         </List>
       </div>
       {/* 新規材料作成ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '40%', transform: 'translateX(-50%)' }}>
+      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '20%', transform: 'translateX(-50%)' }}>
         <Typography variant="caption" color="textSecondary">
           材料のみ追加
         </Typography>
       </Box>
       <Fab
         color="primary"
-        sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
+        sx={{ position: 'fixed', bottom: 90, left: '20%', transform: 'translateX(-50%)' }}
         onClick={() => setOpenAddToBuyDialog(true)}
       >
         <AddIcon />
       </Fab>
 
       {/*新規料理追加ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '60%', transform: 'translateX(-50%)' }}>
+      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
         <Typography variant="caption" color="textSecondary">
           料理から追加
         </Typography>
       </Box>
       <Fab
         color="primary"
-        sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }}
+        sx={{ position: 'fixed', bottom: 90, left: '80%', transform: 'translateX(-50%)' }}
         onClick={() => {
           // setOpenAddToBuyDialog(true);
           navigate('/RecipeList');

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 2/5] =?UTF-8?q?=E3=82=B9=E3=83=9E=E3=83=9B=E3=81=AB?=
 =?UTF-8?q?=E5=AF=BE=E5=BF=9C=E3=81=97=E3=81=9F=E7=94=BB=E9=9D=A2=E8=A8=AD?=
 =?UTF-8?q?=E8=A8=88=E3=80=81=E7=B7=A8=E9=9B=86=E7=94=BB=E9=9D=A2=E3=81=A7?=
 =?UTF-8?q?=E3=81=AE=E8=A9=B3=E7=B4=B0=E8=A1=A8=E7=A4=BA=E3=80=81=E7=B7=A8?=
 =?UTF-8?q?=E9=9B=86=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0=E3=81=A7?=
 =?UTF-8?q?=E3=81=AE=E3=82=AB=E3=83=AC=E3=83=B3=E3=83=80=E3=83=BC=E6=A9=9F?=
 =?UTF-8?q?=E8=83=BD=E3=82=92=E5=AE=9F=E8=A3=85=E3=81=97=E3=81=BE=E3=81=97?=
 =?UTF-8?q?=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>
 
         {/* 在庫の食材削除ボタン （全テーブル共通） */}

From c615c88d2db5955aa12823482bd43ce520e5642b Mon Sep 17 00:00:00 2001
From: "Yuna.Suzuki" <yuna.suzuki@ivis.co.jp>
Date: Mon, 16 Jun 2025 13:57:18 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=E5=BE=AE=E8=AA=BF=E6=95=B4=E3=81=97?=
 =?UTF-8?q?=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 | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index 363230e..07206df 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -608,7 +608,8 @@ const StockPage: React.FC = () => {
         </Dialog>
 
         {/* 在庫の食材編集ボタン（全テーブル共通） */}
-        <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, mr: 1 }}>
+        <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{
+          mt: 3, mb: 2, mr: 1 }}>
           詳細・編集
         </Button>
 

From 0fb3e0c21ac2ae25d8db1ad8be9eba67672f762e Mon Sep 17 00:00:00 2001
From: "Yuna.Suzuki" <yuna.suzuki@ivis.co.jp>
Date: Mon, 16 Jun 2025 14:06:04 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=E5=BE=AE=E8=AA=BF=E6=95=B4=E3=81=97?=
 =?UTF-8?q?=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 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index 07206df..48fffee 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -452,6 +452,7 @@ const StockPage: React.FC = () => {
       </Typography>
 
       <Box sx={{ textAlign: 'right' }}>
+      {/* <Box sx={{ position: 'fixed', top: 16, right: 16, zIndex: 1000, display: 'flex', gap: 2 }}> */}
         {/* 在庫の食材追加ボタン */}
         <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
           追加

From 5fd2e33507dc37a07dc7f886ab3e3d36afbee081 Mon Sep 17 00:00:00 2001
From: Amagasu <yosuke.amagasu@ivis.co.jp>
Date: Mon, 16 Jun 2025 14:44:38 +0900
Subject: [PATCH 5/5] show stuffName, when api/tobuy/buy

---
 frontend/src/components/BuyDialog.tsx | 15 ++++++++++++++-
 frontend/src/pages/TaskListPage.tsx   |  3 ++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/BuyDialog.tsx b/frontend/src/components/BuyDialog.tsx
index 6acfdd3..27485fe 100644
--- a/frontend/src/components/BuyDialog.tsx
+++ b/frontend/src/components/BuyDialog.tsx
@@ -26,12 +26,14 @@ const formatDateLocal = (date: Date) => {
 const BuyDialog = ({
     openDialog,
     setOpenDialog,
+    stuffName,
     newStock,
     setNewStock,
     onSubmit,
 }: {
     openDialog: boolean,
     setOpenDialog: (open: boolean) => void,
+    stuffName: string,
     newStock: NewStock,
     setNewStock: (tobuy: NewStock) => void,
     onSubmit: () => void,
@@ -40,11 +42,21 @@ const BuyDialog = ({
     return (
 
 
-        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '500px', maxHeight: '80vh' } }}
+        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '600px', maxHeight: '80vh' } }}
 >
             <DialogTitle>在庫登録</DialogTitle>
             <DialogContent>
                 <Box sx={{ pt: 1 }}>
+                    {/* 材料名表示 */}
+                    <TextField
+                        margin="dense"
+                        label="材料名"
+                        fullWidth
+                        value={stuffName}
+                        disabled
+                        sx={{ marginBottom: 2 , marginTop: 2}}
+                    />
+
                     {/* 価格入力フィールド */}
                     <TextField
                         autoFocus
@@ -58,6 +70,7 @@ const BuyDialog = ({
                                 setNewStock({ ...newStock, price: value })
                             };
                         }}
+                        sx={{ marginBottom: 2 }}
                     />
                     {/* 購入日・消費期限を横並びに */}
                     <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx
index 74b756d..9eccffb 100644
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@@ -251,6 +251,7 @@ const TaskListPage: React.FC = () => {
                   <IconButton color="primary" sx={{ marginRight: 0, marginLeft: 0 }} edge="end" aria-label="購入情報を記入"
                     onClick={() => {
                       setOpenInfoDialog(true)
+                      setEditingItem(tobuy)
                       setSelectedToBuyId(tobuy.tobuyId)
                       // handleDeleteTask(tobuy.tobuyId)
                     }}>
@@ -330,7 +331,7 @@ const TaskListPage: React.FC = () => {
       <AddStuffAmountDialog openDialog={openAddToBuyDialog} setOpenDialog={setOpenAddToBuyDialog} newItem={newToBuy} setNewItem={setNewToBuy} onSubmit={handleAddNewToBuy} />
 
       {/* 購入処理(在庫登録)のための数値入力ダイアログ */}
-      <BuyDialog openDialog={openInfoDialog} setOpenDialog={setOpenInfoDialog} newStock={newStock} setNewStock={setNewStock} onSubmit={handleBuy} />
+      <BuyDialog openDialog={openInfoDialog} setOpenDialog={setOpenInfoDialog} stuffName={editingItem.stuffName} newStock={newStock} setNewStock={setNewStock} onSubmit={handleBuy} />
 
       {/* 数量変更ダイアログ */}
       <EditAmountDialog openDialog={openAmountDialog} setOpenDialog={setOpenAmountDialog}