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] =?UTF-8?q?=E3=83=BB=E8=A1=A8=E3=82=92=E4=B8=AD=E5=A4=AE?=
 =?UTF-8?q?=E3=81=9E=E3=82=8D=E3=81=88=E3=81=AB=E3=81=97=E3=81=BE=E3=81=97?=
 =?UTF-8?q?=E3=81=9F=E3=80=82=20=E3=83=BB=E8=BF=BD=E5=8A=A0=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=92=E5=8F=B3=E4=B8=8B=E3=81=AB=E7=BD=AE?=
 =?UTF-8?q?=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>
   );
 };