StockPagwを編集しました

frontend/src/pages/StockPage.tsx

@@ -26,13 +26,14 @@ import CategoryDropDown from "../components/CategoryDropDown";
 const StockPage: React.FC = () => {
 
     const [stocks, setStocks] = useState<Stock[]>([]);
+    // 編集ダイアロボックスの表示状態
+    const [isEditOpen, setIsEditOpen] = useState(false);
+    const handleOpenEdit = () => setIsEditOpen(true);
+    const handleCloseEdit = () => setIsEditOpen(false);
     // 削除メッセージダイアログの表示状態
-    const [open, setOpen] = useState(false);
+    const [isDeleteOpen, setIsDeleteOpen] = useState(false);
-
+    const handleOpenDelete = () => setIsDeleteOpen(true);
-    const handleOpen = () => setOpen(true);
+    const handleCloseDelete = () => setIsDeleteOpen(false);
-    const handleClose = () => setOpen(false);
-
-
     // セル選択の表示状態
     const [selectedRow, setSelectedRow] = useState<number | null>(null);
 
@@ -88,31 +89,30 @@ const StockPage: React.FC = () => {
             </Typography>
 
             {/* タスク編集ボタン */}
-            <Button color="success"
+            {/* <Button color="success"
                 type="submit"
                 variant="contained"
                 sx={{ mt: 3, mb: 2, left: '80%' }}
             >
                 編集
-            </Button>
-
-            {/* タスク削除ボタン */}
-            {/* <Button color="error"
-                type="submit"
-                variant="contained"
-                sx={{ mt: 3, mb: 2, left: '82%' }}
-                onClick={() => setOpenDialog(true)}
-            >
-                削除
             </Button> */}
+             <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{ mt: 3, mb: 2, left: '82%'}}>編集</Button>
+            <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
+                <DialogTitle>在庫の編集</DialogTitle>
+                <DialogContent>
+                    <Typography variant="body1">選択した食材の在庫を編集します</Typography>
+                    <Button variant="contained" color="success" onClick={handleCloseEdit} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '75%' }}>変更を適用</Button>
+                </DialogContent>
+            </Dialog>
 
-            <Button variant="contained" color="error" onClick={handleOpen} sx={{ mt: 3, mb: 2, left: '82%' }}>削除</Button>
+            {/* タスク削除ボタン */}
-            <Dialog open={open} onClose={handleClose}>
+            <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2, left: '82%' }}>削除</Button>
+            <Dialog open={isDeleteOpen} onClose={handleCloseDelete}>
                 <DialogTitle>食材の削除</DialogTitle>
                 <DialogContent>
                     <Typography variant="body1">この操作は取り消せません。本当に削除しますか？</Typography>
                     <Typography variant="body2" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
-                    <Button variant="contained" color="error" onClick={handleClose} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '85%' }}>削除</Button>
+                    <Button variant="contained" color="error" onClick={handleCloseDelete} style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '85%' }}>削除</Button>
                 </DialogContent>
             </Dialog>