StockPageを編集しました

frontend/src/pages/StockPage.tsx

@@ -9,6 +9,8 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper
 import {
     Container,
     Typography,
+    Tooltip,
+    Fab,
     Dialog,
     DialogTitle,
     DialogContent,
@@ -24,8 +26,15 @@ import CategoryDropDown from "../components/CategoryDropDown";
 const StockPage: React.FC = () => {
 
     const [stocks, setStocks] = useState<Stock[]>([]);
-    // 在庫編集ダイアログの表示状態
-    const [openDialog, setOpenDialog] = useState(false);
+    // 削除メッセージダイアログの表示状態
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+
+    // セル選択の表示状態
+    const [selectedRow, setSelectedRow] = useState<number | null>(null);
 
     // コンポーネントマウント時にタスク一覧を取得
     useEffect(() => {
@@ -64,6 +73,14 @@ const StockPage: React.FC = () => {
     };
     */
 
+    /**
+     * セルを選択する関数
+     */
+    const handleRowClick = (id: number) => {
+        setSelectedRow(prevSelected => (prevSelected === id ? null : id)); // クリックで選択・解除を切り替え
+    };
+
+
     return (
         <Container>
             <Typography variant="h4" component="h1" gutterBottom>
@@ -80,13 +97,24 @@ const StockPage: React.FC = () => {
             </Button>
 
             {/* タスク削除ボタン */}
-            <Button color="error"
+            {/* <Button color="error"
                 type="submit"
                 variant="contained"
                 sx={{ mt: 3, mb: 2, left: '82%' }}
+                onClick={() => setOpenDialog(true)}
             >
                 削除
-            </Button>
+            </Button> */}
+
+            <Button variant="contained" color="error" onClick={handleOpen} sx={{ mt: 3, mb: 2, left: '82%' }}>削除</Button>
+            <Dialog open={open} onClose={handleClose}>
+                <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>
+                </DialogContent>
+            </Dialog>
 
             <Typography variant="h4" component="h1" gutterBottom>
                 乳製品
@@ -111,8 +139,10 @@ const StockPage: React.FC = () => {
                                 {stocks
                                     .filter(stock => stock.category == "乳製品") // 乳製品だけ抽出
                                     .map(stock => (
-                                        <TableRow key={stock.stock_id}
-                                        >
+                                        <TableRow
+                                            key={stock.stock_id}
+                                            onClick={() => handleRowClick(stock.stock_id)}
+                                            style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}>
                                             <TableCell>{stock.stuff_name}</TableCell>
                                             <TableCell>{stock.amount}</TableCell>
                                             <TableCell>{stock.price}</TableCell>
@@ -148,7 +178,10 @@ const StockPage: React.FC = () => {
                                 {stocks
                                     .filter(stock => stock.category == "肉" || stock.category == "魚") // 肉と魚だけ抽出
                                     .map(stock => (
-                                        <TableRow key={stock.stock_id}>
+                                        <TableRow
+                                            key={stock.stock_id}
+                                            onClick={() => handleRowClick(stock.stock_id)}
+                                            style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}>
                                             <TableCell>{stock.stuff_name}</TableCell>
                                             <TableCell>{stock.amount}</TableCell>
                                             <TableCell>{stock.price}</TableCell>
@@ -184,7 +217,10 @@ const StockPage: React.FC = () => {
                                 {stocks
                                     .filter(stock => stock.category == "野菜") // 野菜だけ抽出
                                     .map(stock => (
-                                        <TableRow key={stock.stock_id}>
+                                        <TableRow
+                                            key={stock.stock_id}
+                                            onClick={() => handleRowClick(stock.stock_id)}
+                                            style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}>
                                             <TableCell>{stock.stuff_name}</TableCell>
                                             <TableCell>{stock.amount}</TableCell>
                                             <TableCell>{stock.price}</TableCell>
@@ -219,7 +255,10 @@ const StockPage: React.FC = () => {
                                 {stocks
                                     .filter(stock => stock.category == "調味料") // 調味料だけ抽出
                                     .map(stock => (
-                                        <TableRow key={stock.stock_id}>
+                                        <TableRow
+                                            key={stock.stock_id}
+                                            onClick={() => handleRowClick(stock.stock_id)}
+                                            style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}>
                                             <TableCell>{stock.stuff_name}</TableCell>
                                             <TableCell>{stock.amount}</TableCell>
                                             <TableCell>{stock.price}</TableCell>
@@ -254,7 +293,10 @@ const StockPage: React.FC = () => {
                                 {stocks
                                     .filter(stock => stock.category == "その他") // その他だけ抽出
                                     .map(stock => (
-                                        <TableRow key={stock.stock_id}>
+                                        <TableRow
+                                            key={stock.stock_id}
+                                            onClick={() => handleRowClick(stock.stock_id)}
+                                            style={{ backgroundColor: selectedRow === stock.stock_id ? "yellow" : "white", cursor: "pointer" }}>
                                             <TableCell>{stock.stuff_name}</TableCell>
                                             <TableCell>{stock.amount}</TableCell>
                                             <TableCell>{stock.price}</TableCell>