画面設計を変更しました。

・テーブルの行を選択したら詳細・編集画面に遷移
・詳細・編集画面に削除ボタンを配置

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) => {
+  const handleRowClick = (stock: Stock) => {
-    setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : 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={{
+                    onClick={() => handleRowClick(stock)}
-                      backgroundColor: isSelected ? 'yellow' : 'white',
+                    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>