スマホに対応した画面設計、編集画面での詳細表示、編集ダイアログでのカレンダー機能を実装しました

frontend/src/pages/StockPage.tsx

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