StockPageを変更しました

frontend/src/pages/AddDishies1.tsx

@@ -1,13 +0,0 @@
-
-import React from 'react';
-import { Box } from '@mui/material';
-
-const AddDishies1: React.FC = () => {
-  return (
-    <Box>
-      {/* 白紙のページ - 何も表示しない */}
-    </Box>
-  );
-};
-
-export default AddDishies1;

frontend/src/pages/StockPage.tsx

@@ -192,23 +192,35 @@ const StockPage: React.FC = () => {
                             </TableRow>
                         </TableHead>
                         <TableBody>
-                            {filteredStocks.map(stock => (
-                                <TableRow
-                                    key={stock.stockId}
-                                    onClick={() => handleRowClick(stock)}
-                                    style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }}
-                                >
-                                    <TableCell>{stock.stuffName}</TableCell>
-                                    <TableCell>{stock.amount}</TableCell>
-                                    <TableCell>{stock.price}</TableCell>
-                                    <TableCell>{formatDate(stock.expDate)}</TableCell>
-                                    <TableCell>{formatDate(stock.buyDate)}</TableCell>
-                                </TableRow>
-                            ))}
+                            {filteredStocks.map(stock => {
+                                const today = new Date();
+                                const expDate = new Date(stock.expDate);
+                                const timeDiff = expDate.getTime() - today.getTime();
+                                const daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
+
+                                return (
+                                    <TableRow
+                                        key={stock.stockId}
+                                        onClick={() => handleRowClick(stock)}
+                                        style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }}
+                                    >
+                                        <TableCell>{stock.stuffName}</TableCell>
+                                        <TableCell>{stock.amount}</TableCell>
+                                        <TableCell>{stock.price}</TableCell>
+                                        <TableCell
+                                            style={daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}}
+                                        >
+                                            {formatDate(stock.expDate)}
+                                        </TableCell>
+                                        <TableCell>{formatDate(stock.buyDate)}</TableCell>
+                                    </TableRow>
+                                );
+                            })}
                         </TableBody>
                     </Table>
                 </TableContainer>
 
+
                 {/* 編集ダイアログ */}
                 <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
                     <DialogTitle>在庫の編集</DialogTitle>
@@ -251,7 +263,7 @@ const StockPage: React.FC = () => {
                                     onChange={handleChange}
                                 />
 
-                                <Button onClick={() => {setIsEditOpen(false); setSelectedRow(null);}} sx={{ mt: 3, mb: 2, left: '68%' }}>キャンセル</Button>
+                                <Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }} sx={{ mt: 3, mb: 2, left: '68%' }}>キャンセル</Button>
                                 <Button
                                     variant="contained"
                                     color="success"
@@ -277,9 +289,9 @@ const StockPage: React.FC = () => {
                     <DialogContent>
                         {selectedRow && (
                             <>
-                                <Typography variant="h4">{selectedRow.stuffName}を削除します。</Typography>
+                                <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 onClick={() => { setIsDeleteOpen(false); setSelectedRow(null); }} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
                                 <Button variant="contained" color="error" onClick={() => {
                                     handleDeleteStock(selectedRow.stockId);
                                     setIsDeleteOpen(false); // 削除処理後にダイアログを閉じる
@@ -311,7 +323,6 @@ const StockPage: React.FC = () => {
             {/* タスク削除ボタン */}
             <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2, left: '82%' }}>削除</Button>
 
-
             {/* 在庫一覧リスト */}
             {/* 乳製品 */}
             <Typography variant="h4" component="h1" gutterBottom>乳製品</Typography>