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

---
 frontend/src/pages/StockPage.tsx | 143 +++++++++++++++++++++++--------
 1 file changed, 109 insertions(+), 34 deletions(-)

diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index 76f9352..93e5d9b 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -26,6 +26,7 @@ import {
   Select,
   MenuItem,
 } from '@mui/material';
+import { Add as AddIcon } from '@mui/icons-material';
 import { STOCK_ERRORS } from '../constants/errorMessages';
 import DatePicker, { registerLocale } from 'react-datepicker';
 import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
@@ -103,6 +104,26 @@ const StockPage: React.FC = () => {
       if (isNaN(newStock.price)) return;
 
       console.log(newStock)
+
+      // 購入日と消費・賞味期限の整合性チェック
+      const buy = new Date(newStock.buyDate);
+      const exp = new Date(newStock.expDate);
+      // 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得
+      const buyDateOnly = new Date(buy);
+      buyDateOnly.setHours(0, 0, 0, 0);
+      const expDateOnly = new Date(exp);
+      expDateOnly.setHours(0, 0, 0, 0);
+
+      console.log("新規作成buy:", buy);
+      console.log("新規作成exp:", exp);
+      console.log("新規作成buyDateOnly:", buyDateOnly);
+      console.log("新規作成expDateOnly:", expDateOnly);
+
+      if (buyDateOnly.getTime() > expDateOnly.getTime()) {
+        alert("購入日は消費・賞味期限より前の日付を設定してください。");
+        return;
+      }
+
       const today = new Date().toISOString().substring(0, 10);
 
       const updatedStock = { ...newStock, lastUpdate: today }; // lastUpdate に today を設定
@@ -183,17 +204,18 @@ const StockPage: React.FC = () => {
   };
 
   /**
-   * セルを選択する関数. 再度クリックで選択解除 → 行選択ではなくチェックボックスにしたため不要
+   * セルを選択する関数. 再度クリックで選択解除 → 修正
    */
   // const handleRowClick = (stock: Stock) => {
   //   setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock));
   // };
-  // チェックボックス切り替え
-  const handleCheckboxChange = (stock: Stock) => {
-    setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock));
+  // セルを選択して編集画面
+  const handleRowClick = (stock: Stock) => {
+    setSelectedRow(stock);           // 行選択
+    setEditStock({ ...stock });      // 編集対象にセット
+    setIsEditOpen(true);             // 編集ダイアログを開く
   };
 
-
   /** 編集ボタンを押したときにダイアログを開く */
   // ダイアログを開く際に `selectedRow` の値を `editStock` にセット
   const handleOpenEdit = () => {
@@ -208,10 +230,28 @@ const StockPage: React.FC = () => {
   const handleApplyChanges = async () => {
     if (!editStock) return;
 
+    // 購入日が消費・賞味期限より未来の場合はエラー表示
+    const buy = new Date(editStock.buyDate);
+    const exp = new Date(editStock.expDate);
+    // 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得
+    const buyDateOnly = new Date(buy);
+    buyDateOnly.setHours(0, 0, 0, 0);
+    const expDateOnly = new Date(exp);
+    expDateOnly.setHours(0, 0, 0, 0);
+    console.log("編集buy:", buy);
+    console.log("編集exp:", exp);
+    console.log("編集buyDateOnly:", buyDateOnly);
+    console.log("編集expDateOnly:", expDateOnly);
+
+    if (buy > exp) {
+      alert("購入日は消費・賞味期限より前の日付を設定してください。");
+      return;
+    }
+
     try {
       if (Number(editStock.amount) === 0) {
         // 数量が 0 の場合は削除処理へ誘導
-        setIsEditOpen(false);         // 編集ダイアログを閉じる
+        // setIsEditOpen(false);         // 編集ダイアログを閉じる
         setSelectedRow(editStock);    // 削除対象をセット
         setIsDeleteOpen(true);        // 削除ダイアログを開く
         return;
@@ -292,7 +332,6 @@ const StockPage: React.FC = () => {
           <Table>
             <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
               <TableRow>
-                <TableCell padding="checkbox" />
                 <TableCell>食材名</TableCell>
                 <TableCell>数量</TableCell>
                 <TableCell>消費・賞味期限</TableCell>
@@ -300,26 +339,28 @@ const StockPage: React.FC = () => {
             </TableHead>
             <TableBody>
               {filteredStocks.map(stock => {
-                const isSelected = selectedRow?.stockId === stock.stockId;
                 const today = new Date();
                 const expDate = new Date(stock.expDate);
-                const timeDiff = expDate.getTime() - today.getTime();
+                // 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得
+                const todayDateOnly = new Date(today);
+                todayDateOnly.setHours(0, 0, 0, 0);
+                const expDateOnly = new Date(expDate);
+                expDateOnly.setHours(0, 0, 0, 0);
+                const timeDiff = expDateOnly.getTime() - todayDateOnly.getTime();
                 const daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
 
+                console.log("テーブルtoday:", today);
+                console.log("テーブルexp:", expDate);
+                console.log("テーブルtodayDateOnly:", todayDateOnly);
+                console.log("テーブルexpDateOnly:", expDateOnly);
+                console.log("日数差:", daysLeft);
+
                 return (
                   <TableRow
                     key={stock.stockId}
-                    sx={{
-                      backgroundColor: isSelected ? 'yellow' : 'white',
-                    }}
-
+                    onClick={() => handleRowClick(stock)}
+                    style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }}
                   >
-                    <TableCell padding="checkbox">
-                      <Checkbox
-                        checked={isSelected}
-                        onChange={() => handleCheckboxChange(stock)}
-                      />
-                    </TableCell>
                     <TableCell>{stock.stuffName}</TableCell>
                     <TableCell>{stock.amount}</TableCell>
                     <TableCell
@@ -337,11 +378,15 @@ const StockPage: React.FC = () => {
 
         {/* 編集ダイアログ */}
         <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
-          <DialogTitle>在庫の編集</DialogTitle>
+          <DialogTitle>
+            <Typography variant="h5" >
+              在庫の編集
+            </Typography>
+          </DialogTitle>
           <DialogContent>
             {editStock && (
               <>
-                <Typography variant="h4">{editStock.stuffName}</Typography>
+                <Typography variant="h4">【{editStock.stuffName}】</Typography>
                 <TextField
                   label="数量"
                   fullWidth
@@ -425,9 +470,10 @@ const StockPage: React.FC = () => {
                   <Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }}>
                     キャンセル
                   </Button>
-                  <Button variant="contained" color="success" onClick={handleApplyChanges}>
+                  <Button variant="contained" color="success" onClick={handleApplyChanges} sx={{ mt: 3, mb: 2 }}>
                     変更を適用
                   </Button>
+                  <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2 }}>削除</Button>
                 </Box>
               </>
             )}
@@ -441,7 +487,11 @@ const StockPage: React.FC = () => {
           maxWidth="sm"
           sx={{ overflow: "hidden" }}
         >
-          <DialogTitle>食材の削除</DialogTitle>
+          <DialogTitle>
+            <Typography variant="h5" >
+              食材の削除
+            </Typography>
+          </DialogTitle>
           <DialogContent>
             {selectedRow && (
               <>
@@ -451,7 +501,7 @@ const StockPage: React.FC = () => {
                 <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
                   <Button onClick={() => {
                     setIsDeleteOpen(false);
-                    setSelectedRow(null);
+                    // setSelectedRow(null);
                   }}>
                     キャンセル
                   </Button>
@@ -462,6 +512,7 @@ const StockPage: React.FC = () => {
                       handleDeleteStock(selectedRow.stockId);
                       setIsDeleteOpen(false);
                       setSelectedRow(null);
+                      setIsEditOpen(false);
                     }}
                   >
                     削除
@@ -475,11 +526,10 @@ const StockPage: React.FC = () => {
     );
   };
 
-
   return (
     <Container>
-      <Typography variant="h4" component="h1" gutterBottom>
-        在庫一覧
+      <Typography variant="h3" component="h1" gutterBottom>
+        在庫リスト
       </Typography>
 
       {/* <Box sx={{ textAlign: 'right' }}> */}
@@ -499,14 +549,39 @@ const StockPage: React.FC = () => {
       >
 
         {/* 在庫の食材追加ボタン */}
-        <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
+        {/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
+          追加
+        </Button> */}
+        {/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
           追加
-        </Button>
+        </Button> */}
+        {/* <Typography variant="caption" color="textSecondary">
+          食材の追加
+        </Typography>
+        <Fab
+          color="primary"
+          onClick={handleOpenAdd}
+        >
+          <AddIcon />
+        </Fab> */}
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <Typography variant="caption" color="textSecondary">
+            食材の追加
+          </Typography>
+          <Fab color="primary" onClick={handleOpenAdd}>
+            <AddIcon />
+          </Fab>
+        </Box>
+
 
         {/* 新規タスク作成ダイアログ */}
         <Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
           <Box display="flex" alignItems="center" >
-            <DialogTitle sx={{ flexGrow: 1 }}>在庫に食材を追加</DialogTitle>
+            <DialogTitle sx={{ flexGrow: 1 }}>
+              <Typography variant="h5" >
+                在庫に食材を追加
+              </Typography>
+            </DialogTitle>
             <FormGroup row>
               <FormControlLabel
                 control={<Checkbox />}
@@ -644,15 +719,15 @@ const StockPage: React.FC = () => {
           </DialogActions>
         </Dialog>
 
-        {/* 在庫の食材編集ボタン（全テーブル共通） */}
+        {/* 在庫の食材編集ボタン（全テーブル共通）
         <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{
           mt: 3, mb: 2, mr: 1
         }}>
           詳細・編集
-        </Button>
+        </Button> */}
 
-        {/* 在庫の食材削除ボタン （全テーブル共通） */}
-        <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2 }}>削除</Button>
+        {/* 在庫の食材削除ボタン （全テーブル共通）
+        <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2 }}>削除</Button> */}
 
       </Box>
 

From b211d15c4422b024282296e0324efdd1bc33e581 Mon Sep 17 00:00:00 2001
From: "Yuna.Suzuki" <yuna.suzuki@ivis.co.jp>
Date: Tue, 17 Jun 2025 14:46:07 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=E3=83=BB=E8=A1=A8=E3=82=92=E4=B8=AD?=
 =?UTF-8?q?=E5=A4=AE=E3=81=9E=E3=82=8D=E3=81=88=E3=81=AB=E3=81=97=E3=81=BE?=
 =?UTF-8?q?=E3=81=97=E3=81=9F=E3=80=82=20=E3=83=BB=E8=BF=BD=E5=8A=A0?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E5=8F=B3=E4=B8=8B=E3=81=AB?=
 =?UTF-8?q?=E7=BD=AE=E3=81=8D=E3=81=BE=E3=81=97=E3=81=9F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/StockPage.tsx | 435 ++++++++++++++++---------------
 1 file changed, 225 insertions(+), 210 deletions(-)

diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index 93e5d9b..f97bd66 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -114,10 +114,10 @@ const StockPage: React.FC = () => {
       const expDateOnly = new Date(exp);
       expDateOnly.setHours(0, 0, 0, 0);
 
-      console.log("新規作成buy:", buy);
-      console.log("新規作成exp:", exp);
-      console.log("新規作成buyDateOnly:", buyDateOnly);
-      console.log("新規作成expDateOnly:", expDateOnly);
+      // console.log("新規作成buy:", buy);
+      // console.log("新規作成exp:", exp);
+      // console.log("新規作成buyDateOnly:", buyDateOnly);
+      // console.log("新規作成expDateOnly:", expDateOnly);
 
       if (buyDateOnly.getTime() > expDateOnly.getTime()) {
         alert("購入日は消費・賞味期限より前の日付を設定してください。");
@@ -238,10 +238,10 @@ const StockPage: React.FC = () => {
     buyDateOnly.setHours(0, 0, 0, 0);
     const expDateOnly = new Date(exp);
     expDateOnly.setHours(0, 0, 0, 0);
-    console.log("編集buy:", buy);
-    console.log("編集exp:", exp);
-    console.log("編集buyDateOnly:", buyDateOnly);
-    console.log("編集expDateOnly:", expDateOnly);
+    // console.log("編集buy:", buy);
+    // console.log("編集exp:", exp);
+    // console.log("編集buyDateOnly:", buyDateOnly);
+    // console.log("編集expDateOnly:", expDateOnly);
 
     if (buy > exp) {
       alert("購入日は消費・賞味期限より前の日付を設定してください。");
@@ -332,9 +332,9 @@ const StockPage: React.FC = () => {
           <Table>
             <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
               <TableRow>
-                <TableCell>食材名</TableCell>
-                <TableCell>数量</TableCell>
-                <TableCell>消費・賞味期限</TableCell>
+                <TableCell align="center" sx={{ width: '30%' }}>食材名</TableCell>
+                <TableCell align="center" sx={{ width: '30%' }}>数量</TableCell>
+                <TableCell align="center" sx={{ width: '40%' }}>消費・賞味期限</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -349,11 +349,11 @@ const StockPage: React.FC = () => {
                 const timeDiff = expDateOnly.getTime() - todayDateOnly.getTime();
                 const daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
 
-                console.log("テーブルtoday:", today);
-                console.log("テーブルexp:", expDate);
-                console.log("テーブルtodayDateOnly:", todayDateOnly);
-                console.log("テーブルexpDateOnly:", expDateOnly);
-                console.log("日数差:", daysLeft);
+                // console.log("テーブルtoday:", today);
+                // console.log("テーブルexp:", expDate);
+                // console.log("テーブルtodayDateOnly:", todayDateOnly);
+                // console.log("テーブルexpDateOnly:", expDateOnly);
+                // console.log("日数差:", daysLeft);
 
                 return (
                   <TableRow
@@ -361,9 +361,9 @@ const StockPage: React.FC = () => {
                     onClick={() => handleRowClick(stock)}
                     style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }}
                   >
-                    <TableCell>{stock.stuffName}</TableCell>
-                    <TableCell>{stock.amount}</TableCell>
-                    <TableCell
+                    <TableCell align="center" sx={{ width: '30%' }}>{stock.stuffName}</TableCell>
+                    <TableCell align="center" sx={{ width: '30%' }}>{stock.amount}</TableCell>
+                    <TableCell align="center" sx={{ width: '40%' }}
                       style={daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}}
                     >
                       {formatDate(stock.expDate)}
@@ -528,12 +528,12 @@ const StockPage: React.FC = () => {
 
   return (
     <Container>
-      <Typography variant="h3" component="h1" gutterBottom>
+      <Typography variant="h3" component="h1" sx={{ mb: 4 }} >
         在庫リスト
       </Typography>
 
       {/* <Box sx={{ textAlign: 'right' }}> */}
-      <Box
+      {/* <Box
         sx={{
           position: 'sticky',
           top: 0,
@@ -546,16 +546,29 @@ const StockPage: React.FC = () => {
           borderBottom: 'none', // ← これで線を消す
           boxShadow: 'none',    // ← 影も消す
         }}
-      >
+      > */}
+        <Box
+          sx={{
+            position: 'fixed',     // ← sticky から fixed に変更
+            bottom: 0,             // ← 下に固定
+            left: 0,
+            right: 0,
+            zIndex: 1300,          // ダイアログよりは低く
+            backgroundColor: '#f5f5f5',
+            padding: 2,
+            display: 'flex',
+            boxShadow: 'none', // 軽めの上向きシャドウ
+          }}
+        >
 
-        {/* 在庫の食材追加ボタン */}
-        {/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
+          {/* 在庫の食材追加ボタン */}
+          {/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
           追加
         </Button> */}
-        {/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
+          {/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
           追加
         </Button> */}
-        {/* <Typography variant="caption" color="textSecondary">
+          {/* <Typography variant="caption" color="textSecondary">
           食材の追加
         </Typography>
         <Fab
@@ -564,203 +577,205 @@ const StockPage: React.FC = () => {
         >
           <AddIcon />
         </Fab> */}
-        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-          <Typography variant="caption" color="textSecondary">
-            食材の追加
-          </Typography>
-          <Fab color="primary" onClick={handleOpenAdd}>
-            <AddIcon />
-          </Fab>
-        </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
+      ml: 90, }}>
+            <Typography variant="caption" color="textSecondary">
+              食材の追加
+            </Typography>
+            <Fab color="primary" onClick={handleOpenAdd} >
+              <AddIcon />
+            </Fab>
+          </Box>
 
 
-        {/* 新規タスク作成ダイアログ */}
-        <Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
-          <Box display="flex" alignItems="center" >
-            <DialogTitle sx={{ flexGrow: 1 }}>
-              <Typography variant="h5" >
-                在庫に食材を追加
-              </Typography>
-            </DialogTitle>
-            <FormGroup row>
-              <FormControlLabel
-                control={<Checkbox />}
-                label="食材を新規追加"
-                checked={newStock.newAddition}
-                onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })}
-              />
-            </FormGroup>
-          </Box>
-          <DialogContent>
-            <Box sx={{ pt: 1 }}>
-              {/*材料カテゴリ選択 */}
-
-              <FormControl sx={{ width: "50%", marginBottom: 2 }}>
-                <InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
-                <Select
-                  labelId="demo-simple-select-label"
-                  value={newStock.category}
-                  onChange={(e) => onChangeCategory(e.target.value)}
-                >
-                  <MenuItem value="乳製品">乳製品</MenuItem>
-                  <MenuItem value="魚・肉">魚・肉</MenuItem>
-                  <MenuItem value="野菜">野菜</MenuItem>
-                  <MenuItem value="調味料">調味料</MenuItem>
-                  <MenuItem value="その他">その他</MenuItem>
-                </Select>
-              </FormControl>
-
-              {!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}>
-                <InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel>
-                <Select
-                  labelId="demo-simple-select-label"
-                  value={newStock.stuffId}
-                  onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })}
-                >
-                  {stuffs.map((stuff) => (
-                    <MenuItem key={stuff.stuffId} value={stuff.stuffId}>
-                      {stuff.stuffName}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>}
-
-              {/* タスクタイトル入力フィールド */}
-              {newStock.newAddition && <TextField
-                autoFocus
-                margin="dense"
-                label="材料名"
-                fullWidth
-                value={newStock.stuffName}
-                onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })}
-                sx={{ marginBottom: 2 }}
-              />}
-              {/* 数量入力フィールド */}
-              <TextField
-                margin="dense"
-                label="数量"
-                fullWidth
-                value={newStock.amount}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  const parsedValue = parseInt(value, 10); // 数値に変換
-                  if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
-                    setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
-                  }
-                }}
-                // sx={{ width: "50%" }}
-                type="number"
-                inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
-              />
-              {/* 購入価格入力フィールド */}
-              <TextField
-                margin="dense"
-                label="購入価格"
-                fullWidth
-                value={newStock.price}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  const parsedValue = parseInt(value, 10); // 数値に変換
-                  if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK
-                    setNewStock({ ...newStock, price: parsedValue }); // number型で保存
-                  }
-                }}
-                // sx={{ width: "50%" }}
-                type="number"
-                inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
-              />
-
-              {/* 購入日・消費期限を横並びに */}
-              <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 ? formatDateLocal(date) : '' })
-                  }
-                  dateFormat="yyyy/MM/dd"
-                  customInput={
-                    <TextField
-                      margin="dense"
-                      label="購入日(yyyy/MM/dd)"
-                      fullWidth
-                    />
-                  }
-                  isClearable
-                //withPortal // ← 他の文字との重なり対策
-                />
-                {/* 消費・賞味期限入力フィールド */}
-                <DatePicker
-                  popperClassName="custom-datepicker-popper"
-                  selected={newStock.expDate ? new Date(newStock.expDate) : null}
-                  onChange={(date) =>
-                    setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
-                  }
-                  dateFormat="yyyy/MM/dd"
-                  customInput={
-                    <TextField
-                      margin="dense"
-                      label="消費・賞味期限(yyyy/MM/dd)"
-                      fullWidth
-                    />
-                  }
-                  isClearable
-                //withPortal
+          {/* 新規タスク作成ダイアログ */}
+          <Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
+            <Box display="flex" alignItems="center" >
+              <DialogTitle sx={{ flexGrow: 1 }}>
+                <Typography variant="h5" >
+                  在庫に食材を追加
+                </Typography>
+              </DialogTitle>
+              <FormGroup row>
+                <FormControlLabel
+                  control={<Checkbox />}
+                  label="食材を新規追加"
+                  checked={newStock.newAddition}
+                  onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })}
                 />
-              </Box>
+              </FormGroup>
             </Box>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={() => setIsAddOpen(false)}>キャンセル</Button>
-            <Button onClick={handleCreateStock} variant="contained">
-              追加
-            </Button>
-          </DialogActions>
-        </Dialog>
+            <DialogContent>
+              <Box sx={{ pt: 1 }}>
+                {/*材料カテゴリ選択 */}
+
+                <FormControl sx={{ width: "50%", marginBottom: 2 }}>
+                  <InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
+                  <Select
+                    labelId="demo-simple-select-label"
+                    value={newStock.category}
+                    onChange={(e) => onChangeCategory(e.target.value)}
+                  >
+                    <MenuItem value="乳製品">乳製品</MenuItem>
+                    <MenuItem value="魚・肉">魚・肉</MenuItem>
+                    <MenuItem value="野菜">野菜</MenuItem>
+                    <MenuItem value="調味料">調味料</MenuItem>
+                    <MenuItem value="その他">その他</MenuItem>
+                  </Select>
+                </FormControl>
+
+                {!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}>
+                  <InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel>
+                  <Select
+                    labelId="demo-simple-select-label"
+                    value={newStock.stuffId}
+                    onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })}
+                  >
+                    {stuffs.map((stuff) => (
+                      <MenuItem key={stuff.stuffId} value={stuff.stuffId}>
+                        {stuff.stuffName}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>}
+
+                {/* タスクタイトル入力フィールド */}
+                {newStock.newAddition && <TextField
+                  autoFocus
+                  margin="dense"
+                  label="材料名"
+                  fullWidth
+                  value={newStock.stuffName}
+                  onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })}
+                  sx={{ marginBottom: 2 }}
+                />}
+                {/* 数量入力フィールド */}
+                <TextField
+                  margin="dense"
+                  label="数量"
+                  fullWidth
+                  value={newStock.amount}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    const parsedValue = parseInt(value, 10); // 数値に変換
+                    if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
+                      setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
+                    }
+                  }}
+                  // sx={{ width: "50%" }}
+                  type="number"
+                  inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+                />
+                {/* 購入価格入力フィールド */}
+                <TextField
+                  margin="dense"
+                  label="購入価格"
+                  fullWidth
+                  value={newStock.price}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    const parsedValue = parseInt(value, 10); // 数値に変換
+                    if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK
+                      setNewStock({ ...newStock, price: parsedValue }); // number型で保存
+                    }
+                  }}
+                  // sx={{ width: "50%" }}
+                  type="number"
+                  inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+                />
 
-        {/* 在庫の食材編集ボタン（全テーブル共通）
+                {/* 購入日・消費期限を横並びに */}
+                <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 ? formatDateLocal(date) : '' })
+                    }
+                    dateFormat="yyyy/MM/dd"
+                    customInput={
+                      <TextField
+                        margin="dense"
+                        label="購入日(yyyy/MM/dd)"
+                        fullWidth
+                      />
+                    }
+                    isClearable
+                  //withPortal // ← 他の文字との重なり対策
+                  />
+                  {/* 消費・賞味期限入力フィールド */}
+                  <DatePicker
+                    popperClassName="custom-datepicker-popper"
+                    selected={newStock.expDate ? new Date(newStock.expDate) : null}
+                    onChange={(date) =>
+                      setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
+                    }
+                    dateFormat="yyyy/MM/dd"
+                    customInput={
+                      <TextField
+                        margin="dense"
+                        label="消費・賞味期限(yyyy/MM/dd)"
+                        fullWidth
+                      />
+                    }
+                    isClearable
+                  //withPortal
+                  />
+                </Box>
+              </Box>
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={() => setIsAddOpen(false)}>キャンセル</Button>
+              <Button onClick={handleCreateStock} variant="contained">
+                追加
+              </Button>
+            </DialogActions>
+          </Dialog>
+
+          {/* 在庫の食材編集ボタン（全テーブル共通）
         <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{
           mt: 3, mb: 2, mr: 1
         }}>
           詳細・編集
         </Button> */}
 
-        {/* 在庫の食材削除ボタン （全テーブル共通）
+          {/* 在庫の食材削除ボタン （全テーブル共通）
         <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2 }}>削除</Button> */}
 
-      </Box>
-
-      {/* 在庫一覧リスト */}
-      {/* 乳製品 */}
-      <Typography variant="h4" component="h1" gutterBottom>乳製品</Typography>
-      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-        {StockTable(stocks, ["乳製品"])}
-      </div>
-
-      {/* 肉・魚 */}
-      <Typography variant="h4" component="h1" gutterBottom>魚・肉</Typography>
-      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-        {StockTable(stocks, ["魚・肉"])}
-      </div>
-
-      {/* 野菜 */}
-      <Typography variant="h4" component="h1" gutterBottom>野菜</Typography>
-      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-        {StockTable(stocks, ["野菜"])}
-      </div>
-
-      {/* 調味料 */}
-      <Typography variant="h4" component="h1" gutterBottom>調味料</Typography>
-      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-        {StockTable(stocks, ["調味料"])}
-      </div>
-
-      {/* その他 */}
-      <Typography variant="h4" component="h1" gutterBottom>その他</Typography>
-      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-        {StockTable(stocks, ["その他"])}
-      </div>
+        </Box>
+
+        {/* 在庫一覧リスト */}
+        {/* 乳製品 */}
+        <Typography variant="h4" component="h1" gutterBottom>乳製品</Typography>
+        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+          {StockTable(stocks, ["乳製品"])}
+        </div>
+
+        {/* 肉・魚 */}
+        <Typography variant="h4" component="h1" gutterBottom>魚・肉</Typography>
+        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+          {StockTable(stocks, ["魚・肉"])}
+        </div>
+
+        {/* 野菜 */}
+        <Typography variant="h4" component="h1" gutterBottom>野菜</Typography>
+        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+          {StockTable(stocks, ["野菜"])}
+        </div>
+
+        {/* 調味料 */}
+        <Typography variant="h4" component="h1" gutterBottom>調味料</Typography>
+        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+          {StockTable(stocks, ["調味料"])}
+        </div>
+
+        {/* その他 */}
+        <Typography variant="h4" component="h1" gutterBottom>その他</Typography>
+        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+          {StockTable(stocks, ["その他"])}
+        </div>
+        <Box sx={{ height: '80px' }} /> {/* フッターの高さと同じくらいに調整 */}
     </Container>
   );
 };

From 05623ea8c2a7af3bfb21ba96439a9e483ba4706e Mon Sep 17 00:00:00 2001
From: "Yuna.Suzuki" <yuna.suzuki@ivis.co.jp>
Date: Tue, 17 Jun 2025 15:21:09 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=E6=96=87=E5=AD=97=E3=82=92=E5=A4=A7?=
 =?UTF-8?q?=E3=81=8D=E3=81=8F=E3=81=97=E3=81=9F=E3=82=8A=E3=81=97=E3=81=BE?=
 =?UTF-8?q?=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 | 451 ++++++++++++++-----------------
 1 file changed, 202 insertions(+), 249 deletions(-)

diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index f97bd66..4775b77 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -204,12 +204,8 @@ const StockPage: React.FC = () => {
   };
 
   /**
-   * セルを選択する関数. 再度クリックで選択解除 → 修正
+   * セルを選択して編集画面
    */
-  // const handleRowClick = (stock: Stock) => {
-  //   setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock));
-  // };
-  // セルを選択して編集画面
   const handleRowClick = (stock: Stock) => {
     setSelectedRow(stock);           // 行選択
     setEditStock({ ...stock });      // 編集対象にセット
@@ -301,7 +297,6 @@ const StockPage: React.FC = () => {
     }
   };
 
-
   /** 編集ダイアログを閉じる */
   const handleCloseEdit = () => {
     setIsEditOpen(false);
@@ -332,9 +327,9 @@ const StockPage: React.FC = () => {
           <Table>
             <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
               <TableRow>
-                <TableCell align="center" sx={{ width: '30%' }}>食材名</TableCell>
-                <TableCell align="center" sx={{ width: '30%' }}>数量</TableCell>
-                <TableCell align="center" sx={{ width: '40%' }}>消費・賞味期限</TableCell>
+                <TableCell align="center" sx={{ width: '40%', fontSize: '16px'}}>食材名</TableCell>
+                <TableCell align="center" sx={{ width: '20%', fontSize: '16px' }}>数量</TableCell>
+                <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>消費・賞味期限</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -361,9 +356,9 @@ const StockPage: React.FC = () => {
                     onClick={() => handleRowClick(stock)}
                     style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }}
                   >
-                    <TableCell align="center" sx={{ width: '30%' }}>{stock.stuffName}</TableCell>
-                    <TableCell align="center" sx={{ width: '30%' }}>{stock.amount}</TableCell>
-                    <TableCell align="center" sx={{ width: '40%' }}
+                    <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>{stock.stuffName}</TableCell>
+                    <TableCell align="center" sx={{ width: '20%', fontSize: '16px' }}>{stock.amount}</TableCell>
+                    <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}
                       style={daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}}
                     >
                       {formatDate(stock.expDate)}
@@ -375,7 +370,6 @@ const StockPage: React.FC = () => {
           </Table>
         </TableContainer>
 
-
         {/* 編集ダイアログ */}
         <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
           <DialogTitle>
@@ -401,7 +395,6 @@ const StockPage: React.FC = () => {
                       e.preventDefault();
                     }
                   }}
-
                 />
                 <TextField
                   label="購入価格"
@@ -417,7 +410,6 @@ const StockPage: React.FC = () => {
                       e.preventDefault();
                     }
                   }}
-
                 />
                 {/* 購入日・消費期限を横並びに */}
                 <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
@@ -532,250 +524,211 @@ const StockPage: React.FC = () => {
         在庫リスト
       </Typography>
 
-      {/* <Box sx={{ textAlign: 'right' }}> */}
-      {/* <Box
+      <Box
         sx={{
-          position: 'sticky',
-          top: 0,
-          zIndex: 1000,
+          position: 'fixed',     // ← sticky から fixed に変更
+          bottom: 0,             // ← 下に固定
+          left: 0,
+          right: 0,
+          zIndex: 1300,          // ダイアログよりは低く
           backgroundColor: '#f5f5f5',
           padding: 2,
           display: 'flex',
-          gap: 0.5,
-          justifyContent: 'flex-end', // ← 右寄せ
-          borderBottom: 'none', // ← これで線を消す
-          boxShadow: 'none',    // ← 影も消す
+          justifyContent: 'flex-end', // ← 左寄せ
+          boxShadow: 'none', // 軽めの上向きシャドウ
         }}
-      > */}
-        <Box
-          sx={{
-            position: 'fixed',     // ← sticky から fixed に変更
-            bottom: 0,             // ← 下に固定
-            left: 0,
-            right: 0,
-            zIndex: 1300,          // ダイアログよりは低く
-            backgroundColor: '#f5f5f5',
-            padding: 2,
-            display: 'flex',
-            boxShadow: 'none', // 軽めの上向きシャドウ
-          }}
-        >
-
-          {/* 在庫の食材追加ボタン */}
-          {/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
-          追加
-        </Button> */}
-          {/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
-          追加
-        </Button> */}
-          {/* <Typography variant="caption" color="textSecondary">
-          食材の追加
-        </Typography>
-        <Fab
-          color="primary"
-          onClick={handleOpenAdd}
-        >
-          <AddIcon />
-        </Fab> */}
-          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
-      ml: 90, }}>
-            <Typography variant="caption" color="textSecondary">
-              食材の追加
-            </Typography>
-            <Fab color="primary" onClick={handleOpenAdd} >
-              <AddIcon />
-            </Fab>
-          </Box>
+      >
 
+        {/* 在庫の食材追加ボタン */}
+        <Box sx={{
+          display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
+          mr: 2,
+        }}>
+          <Typography variant="caption" color="textSecondary">
+            食材の追加
+          </Typography>
+          <Fab color="primary" onClick={handleOpenAdd} >
+            <AddIcon />
+          </Fab>
+        </Box>
 
-          {/* 新規タスク作成ダイアログ */}
-          <Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
-            <Box display="flex" alignItems="center" >
-              <DialogTitle sx={{ flexGrow: 1 }}>
-                <Typography variant="h5" >
-                  在庫に食材を追加
-                </Typography>
-              </DialogTitle>
-              <FormGroup row>
-                <FormControlLabel
-                  control={<Checkbox />}
-                  label="食材を新規追加"
-                  checked={newStock.newAddition}
-                  onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })}
-                />
-              </FormGroup>
-            </Box>
-            <DialogContent>
-              <Box sx={{ pt: 1 }}>
-                {/*材料カテゴリ選択 */}
-
-                <FormControl sx={{ width: "50%", marginBottom: 2 }}>
-                  <InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
-                  <Select
-                    labelId="demo-simple-select-label"
-                    value={newStock.category}
-                    onChange={(e) => onChangeCategory(e.target.value)}
-                  >
-                    <MenuItem value="乳製品">乳製品</MenuItem>
-                    <MenuItem value="魚・肉">魚・肉</MenuItem>
-                    <MenuItem value="野菜">野菜</MenuItem>
-                    <MenuItem value="調味料">調味料</MenuItem>
-                    <MenuItem value="その他">その他</MenuItem>
-                  </Select>
-                </FormControl>
-
-                {!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}>
-                  <InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel>
-                  <Select
-                    labelId="demo-simple-select-label"
-                    value={newStock.stuffId}
-                    onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })}
-                  >
-                    {stuffs.map((stuff) => (
-                      <MenuItem key={stuff.stuffId} value={stuff.stuffId}>
-                        {stuff.stuffName}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>}
-
-                {/* タスクタイトル入力フィールド */}
-                {newStock.newAddition && <TextField
-                  autoFocus
-                  margin="dense"
-                  label="材料名"
-                  fullWidth
-                  value={newStock.stuffName}
-                  onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })}
-                  sx={{ marginBottom: 2 }}
-                />}
-                {/* 数量入力フィールド */}
-                <TextField
-                  margin="dense"
-                  label="数量"
-                  fullWidth
-                  value={newStock.amount}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    const parsedValue = parseInt(value, 10); // 数値に変換
-                    if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
-                      setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
-                    }
-                  }}
-                  // sx={{ width: "50%" }}
-                  type="number"
-                  inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+        {/* 新規タスク作成ダイアログ */}
+        <Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
+          <Box display="flex" alignItems="center" >
+            <DialogTitle sx={{ flexGrow: 1 }}>
+              <Typography variant="h5" >
+                在庫に食材を追加
+              </Typography>
+            </DialogTitle>
+            <FormGroup row>
+              <FormControlLabel
+                control={<Checkbox />}
+                label="食材を新規追加"
+                checked={newStock.newAddition}
+                onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })}
+              />
+            </FormGroup>
+          </Box>
+          <DialogContent>
+            <Box sx={{ pt: 1 }}>
+              {/*材料カテゴリ選択 */}
+
+              <FormControl sx={{ width: "50%", marginBottom: 2 }}>
+                <InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
+                <Select
+                  labelId="demo-simple-select-label"
+                  value={newStock.category}
+                  onChange={(e) => onChangeCategory(e.target.value)}
+                >
+                  <MenuItem value="乳製品">乳製品</MenuItem>
+                  <MenuItem value="魚・肉">魚・肉</MenuItem>
+                  <MenuItem value="野菜">野菜</MenuItem>
+                  <MenuItem value="調味料">調味料</MenuItem>
+                  <MenuItem value="その他">その他</MenuItem>
+                </Select>
+              </FormControl>
+
+              {!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}>
+                <InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel>
+                <Select
+                  labelId="demo-simple-select-label"
+                  value={newStock.stuffId}
+                  onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })}
+                >
+                  {stuffs.map((stuff) => (
+                    <MenuItem key={stuff.stuffId} value={stuff.stuffId}>
+                      {stuff.stuffName}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>}
+
+              {/* タスクタイトル入力フィールド */}
+              {newStock.newAddition && <TextField
+                autoFocus
+                margin="dense"
+                label="材料名"
+                fullWidth
+                value={newStock.stuffName}
+                onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })}
+                sx={{ marginBottom: 2 }}
+              />}
+              {/* 数量入力フィールド */}
+              <TextField
+                margin="dense"
+                label="数量"
+                fullWidth
+                value={newStock.amount}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  const parsedValue = parseInt(value, 10); // 数値に変換
+                  if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
+                    setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
+                  }
+                }}
+                // sx={{ width: "50%" }}
+                type="number"
+                inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+              />
+              {/* 購入価格入力フィールド */}
+              <TextField
+                margin="dense"
+                label="購入価格"
+                fullWidth
+                value={newStock.price}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  const parsedValue = parseInt(value, 10); // 数値に変換
+                  if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK
+                    setNewStock({ ...newStock, price: parsedValue }); // number型で保存
+                  }
+                }}
+                // sx={{ width: "50%" }}
+                type="number"
+                inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+              />
+
+              {/* 購入日・消費期限を横並びに */}
+              <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 ? formatDateLocal(date) : '' })
+                  }
+                  dateFormat="yyyy/MM/dd"
+                  customInput={
+                    <TextField
+                      margin="dense"
+                      label="購入日(yyyy/MM/dd)"
+                      fullWidth
+                    />
+                  }
+                  isClearable
+                //withPortal // ← 他の文字との重なり対策
                 />
-                {/* 購入価格入力フィールド */}
-                <TextField
-                  margin="dense"
-                  label="購入価格"
-                  fullWidth
-                  value={newStock.price}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    const parsedValue = parseInt(value, 10); // 数値に変換
-                    if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK
-                      setNewStock({ ...newStock, price: parsedValue }); // number型で保存
-                    }
-                  }}
-                  // sx={{ width: "50%" }}
-                  type="number"
-                  inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+                {/* 消費・賞味期限入力フィールド */}
+                <DatePicker
+                  popperClassName="custom-datepicker-popper"
+                  selected={newStock.expDate ? new Date(newStock.expDate) : null}
+                  onChange={(date) =>
+                    setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
+                  }
+                  dateFormat="yyyy/MM/dd"
+                  customInput={
+                    <TextField
+                      margin="dense"
+                      label="消費・賞味期限(yyyy/MM/dd)"
+                      fullWidth
+                    />
+                  }
+                  isClearable
+                //withPortal
                 />
-
-                {/* 購入日・消費期限を横並びに */}
-                <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 ? formatDateLocal(date) : '' })
-                    }
-                    dateFormat="yyyy/MM/dd"
-                    customInput={
-                      <TextField
-                        margin="dense"
-                        label="購入日(yyyy/MM/dd)"
-                        fullWidth
-                      />
-                    }
-                    isClearable
-                  //withPortal // ← 他の文字との重なり対策
-                  />
-                  {/* 消費・賞味期限入力フィールド */}
-                  <DatePicker
-                    popperClassName="custom-datepicker-popper"
-                    selected={newStock.expDate ? new Date(newStock.expDate) : null}
-                    onChange={(date) =>
-                      setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
-                    }
-                    dateFormat="yyyy/MM/dd"
-                    customInput={
-                      <TextField
-                        margin="dense"
-                        label="消費・賞味期限(yyyy/MM/dd)"
-                        fullWidth
-                      />
-                    }
-                    isClearable
-                  //withPortal
-                  />
-                </Box>
               </Box>
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={() => setIsAddOpen(false)}>キャンセル</Button>
-              <Button onClick={handleCreateStock} variant="contained">
-                追加
-              </Button>
-            </DialogActions>
-          </Dialog>
-
-          {/* 在庫の食材編集ボタン（全テーブル共通）
-        <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{
-          mt: 3, mb: 2, mr: 1
-        }}>
-          詳細・編集
-        </Button> */}
-
-          {/* 在庫の食材削除ボタン （全テーブル共通）
-        <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2 }}>削除</Button> */}
-
-        </Box>
-
-        {/* 在庫一覧リスト */}
-        {/* 乳製品 */}
-        <Typography variant="h4" component="h1" gutterBottom>乳製品</Typography>
-        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-          {StockTable(stocks, ["乳製品"])}
-        </div>
-
-        {/* 肉・魚 */}
-        <Typography variant="h4" component="h1" gutterBottom>魚・肉</Typography>
-        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-          {StockTable(stocks, ["魚・肉"])}
-        </div>
-
-        {/* 野菜 */}
-        <Typography variant="h4" component="h1" gutterBottom>野菜</Typography>
-        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-          {StockTable(stocks, ["野菜"])}
-        </div>
-
-        {/* 調味料 */}
-        <Typography variant="h4" component="h1" gutterBottom>調味料</Typography>
-        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-          {StockTable(stocks, ["調味料"])}
-        </div>
-
-        {/* その他 */}
-        <Typography variant="h4" component="h1" gutterBottom>その他</Typography>
-        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-          {StockTable(stocks, ["その他"])}
-        </div>
-        <Box sx={{ height: '80px' }} /> {/* フッターの高さと同じくらいに調整 */}
+            </Box>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setIsAddOpen(false)}>キャンセル</Button>
+            <Button onClick={handleCreateStock} variant="contained">
+              追加
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </Box>
+
+      {/* 在庫一覧リスト */}
+      {/* 乳製品 */}
+      <Typography variant="h4" component="h1" gutterBottom>乳製品</Typography>
+      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+        {StockTable(stocks, ["乳製品"])}
+      </div>
+
+      {/* 肉・魚 */}
+      <Typography variant="h4" component="h1" gutterBottom>魚・肉</Typography>
+      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+        {StockTable(stocks, ["魚・肉"])}
+      </div>
+
+      {/* 野菜 */}
+      <Typography variant="h4" component="h1" gutterBottom>野菜</Typography>
+      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+        {StockTable(stocks, ["野菜"])}
+      </div>
+
+      {/* 調味料 */}
+      <Typography variant="h4" component="h1" gutterBottom>調味料</Typography>
+      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+        {StockTable(stocks, ["調味料"])}
+      </div>
+
+      {/* その他 */}
+      <Typography variant="h4" component="h1" gutterBottom>その他</Typography>
+      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+        {StockTable(stocks, ["その他"])}
+      </div>
+      <Box sx={{ height: '80px' }} /> {/* フッターの高さと同じくらいに調整 */}
     </Container>
   );
 };

From 6d26f00e31285be76164ed0cb7db7acaef2d82cb Mon Sep 17 00:00:00 2001
From: "Yuna.Suzuki" <yuna.suzuki@ivis.co.jp>
Date: Tue, 17 Jun 2025 15:48:52 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=E9=A3=9F=E6=9D=90=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3=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 | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index a2c9d43..436250d 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -330,7 +330,7 @@ const StockPage: React.FC = () => {
           <Table>
             <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
               <TableRow>
-                <TableCell align="center" sx={{ width: '40%', fontSize: '16px'}}>食材名</TableCell>
+                <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>食材名</TableCell>
                 <TableCell align="center" sx={{ width: '20%', fontSize: '16px' }}>数量</TableCell>
                 <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>消費・賞味期限</TableCell>
               </TableRow>
@@ -530,12 +530,15 @@ const StockPage: React.FC = () => {
       <Box
         sx={{
           position: 'fixed',     // ← sticky から fixed に変更
-          bottom: 0,             // ← 下に固定
+          bottom: 55,             // ← 下に固定
           left: 0,
           right: 0,
           zIndex: 1300,          // ダイアログよりは低く
           backgroundColor: '#f5f5f5',
-          padding: 2,
+          // backgroundColor: 'white',
+          // padding: 2,
+          px: 2,
+          py: 1,
           display: 'flex',
           justifyContent: 'flex-end', // ← 左寄せ
           boxShadow: 'none', // 軽めの上向きシャドウ

From 397cf88649b03ac6648da53cee96a733e4aeb2e9 Mon Sep 17 00:00:00 2001
From: "Yuna.Suzuki" <yuna.suzuki@ivis.co.jp>
Date: Tue, 17 Jun 2025 16:08:40 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E3=83=A1?=
 =?UTF-8?q?=E3=83=83=E3=82=BB=E3=83=BC=E3=82=B8=E3=81=AE=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E3=82=92=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 | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx
index 436250d..200e91f 100644
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@@ -74,7 +74,8 @@ const StockPage: React.FC = () => {
   // 在庫の編集状態
   const [editStock, setEditStock] = useState<Stock | null>(null);
 
-  const { showWarningMessage } = useMessage();
+  // const { showWarningMessage } = useMessage();
+  const { showErrorMessage } = useMessage();
 
   // コンポーネントマウント時にタスク一覧を取得
   useEffect(() => {
@@ -123,7 +124,8 @@ const StockPage: React.FC = () => {
       // console.log("新規作成expDateOnly:", expDateOnly);
 
       if (buyDateOnly.getTime() > expDateOnly.getTime()) {
-        alert("購入日は消費・賞味期限より前の日付を設定してください。");
+        // alert("購入日は消費・賞味期限より前の日付を設定してください。");
+        showErrorMessage('購入日は消費・賞味期限より前の日付を設定してください．');
         return;
       }
 
@@ -215,16 +217,6 @@ const StockPage: React.FC = () => {
     setIsEditOpen(true);             // 編集ダイアログを開く
   };
 
-  /** 編集ボタンを押したときにダイアログを開く */
-  // ダイアログを開く際に `selectedRow` の値を `editStock` にセット
-  const handleOpenEdit = () => {
-    if (selectedRow) {
-      setEditStock({ ...selectedRow });
-      setIsEditOpen(true);
-    } else {
-      showWarningMessage("編集する食材を選択してください。");
-    }
-  };
   // 変更を適用. 数量に0を入力したとき、削除ダイアログに飛ぶ機能を追加
   const handleApplyChanges = async () => {
     if (!editStock) return;
@@ -243,7 +235,8 @@ const StockPage: React.FC = () => {
     // console.log("編集expDateOnly:", expDateOnly);
 
     if (buy > exp) {
-      alert("購入日は消費・賞味期限より前の日付を設定してください。");
+      // alert("購入日は消費・賞味期限より前の日付を設定してください。");
+      showErrorMessage('購入日は消費・賞味期限より前の日付を設定してください．');
       return;
     }
 
@@ -310,7 +303,8 @@ const StockPage: React.FC = () => {
     if (selectedRow) {
       setIsDeleteOpen(true);
     } else {
-      showWarningMessage("削除する食材を選択してください。");
+      // showWarningMessage("削除する食材を選択してください。");
+      showErrorMessage('削除する食材を選択してください．');
     }
   };
   /** 削除ダイアログを閉じる */