|
|
|
|
@ -26,8 +26,9 @@ import { |
|
|
|
|
Select, |
|
|
|
|
MenuItem, |
|
|
|
|
} from '@mui/material'; |
|
|
|
|
import '../App.css'; |
|
|
|
|
import { GENERAL_ERRORS, STOCK_ERRORS } from '../constants/errorMessages'; |
|
|
|
|
import { Add as AddIcon } from '@mui/icons-material'; |
|
|
|
|
import { Add as AddIcon, KeyboardArrowDown as ArrowDownIcon, KeyboardArrowUp as ArrowUpIcon, Inventory as InventoryIcon } from '@mui/icons-material'; |
|
|
|
|
import DatePicker, { registerLocale } from 'react-datepicker'; |
|
|
|
|
import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
|
|
|
|
|
import { useMessage } from '../components/MessageContext'; |
|
|
|
|
@ -79,6 +80,19 @@ const StockPage: React.FC = () => { |
|
|
|
|
|
|
|
|
|
const { showErrorMessage, showWarningMessage } = useMessage(); |
|
|
|
|
|
|
|
|
|
// カテゴリ名一覧
|
|
|
|
|
const CATEGORY_NAMES = [ |
|
|
|
|
"乳製品", |
|
|
|
|
"魚・肉", |
|
|
|
|
"野菜", |
|
|
|
|
"調味料", |
|
|
|
|
"その他", |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const [openCategory, setOpenCategory] = useState(Object.fromEntries( |
|
|
|
|
CATEGORY_NAMES.map(category => [category, true]) |
|
|
|
|
)); |
|
|
|
|
|
|
|
|
|
// コンポーネントマウント時にタスク一覧を取得
|
|
|
|
|
useEffect(() => { |
|
|
|
|
fetchStocks(); |
|
|
|
|
@ -209,15 +223,6 @@ const StockPage: React.FC = () => { |
|
|
|
|
}; |
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
/** 追加ボタンを押したときにダイアログを開く */ |
|
|
|
|
const handleOpenAdd = () => { |
|
|
|
|
setIsAddOpen(true); |
|
|
|
|
}; |
|
|
|
|
/** 追加ダイアログを閉じる */ |
|
|
|
|
const handleCloseAdd = () => { |
|
|
|
|
setIsAddOpen(false); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* セルを選択して編集画面 |
|
|
|
|
*/ |
|
|
|
|
@ -358,8 +363,8 @@ const StockPage: React.FC = () => { |
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<TableContainer component={Paper}> |
|
|
|
|
<Table> |
|
|
|
|
<TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}> |
|
|
|
|
<Table size="small"> |
|
|
|
|
<TableHead sx={{ backgroundColor: "#ebcba2", color: "#333" }}> |
|
|
|
|
<TableRow> |
|
|
|
|
<TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>食材名</TableCell> |
|
|
|
|
<TableCell align="center" sx={{ width: '20%', fontSize: '16px' }}>数量</TableCell> |
|
|
|
|
@ -588,244 +593,208 @@ const StockPage: React.FC = () => { |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<Container> |
|
|
|
|
<Typography variant="h3" component="h1" sx={{ mb: 4 }} > |
|
|
|
|
<div className="mainContainer"> |
|
|
|
|
<div className="mainTitle"> |
|
|
|
|
<InventoryIcon sx={{ mr: "0.5em" }} /> |
|
|
|
|
在庫リスト |
|
|
|
|
</Typography> |
|
|
|
|
|
|
|
|
|
<Box |
|
|
|
|
sx={{ |
|
|
|
|
position: 'fixed', // ← sticky から fixed に変更
|
|
|
|
|
bottom: 55, // ← 下に固定
|
|
|
|
|
left: 0, |
|
|
|
|
right: 0, |
|
|
|
|
zIndex: 1300, // ダイアログよりは低く
|
|
|
|
|
backgroundColor: '#f5f5f5', |
|
|
|
|
// backgroundColor: 'white',
|
|
|
|
|
// padding: 2,
|
|
|
|
|
px: 2, |
|
|
|
|
py: 1, |
|
|
|
|
display: 'flex', |
|
|
|
|
justifyContent: 'flex-end', // ← 左寄せ
|
|
|
|
|
boxShadow: 'none', // 軽めの上向きシャドウ
|
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
{/* 在庫の食材追加ボタン */} |
|
|
|
|
<Box sx={{ |
|
|
|
|
display: 'flex', flexDirection: 'column', alignItems: 'flex-end', |
|
|
|
|
mr: 2 |
|
|
|
|
}}> |
|
|
|
|
<Typography variant="caption" color="textSecondary"> |
|
|
|
|
食材の追加 |
|
|
|
|
</Typography> |
|
|
|
|
<Fab color="primary" onClick={handleOpenAdd} > |
|
|
|
|
<AddIcon /> |
|
|
|
|
</Fab> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* 新規タスク作成ダイアログ */} |
|
|
|
|
<Dialog open={isAddOpen} onClose={() => setIsAddOpen(false)} disableScrollLock={true}> |
|
|
|
|
<Box display="flex" alignItems="center" > |
|
|
|
|
<DialogTitle sx={{ flexGrow: 1 }}> |
|
|
|
|
<Typography variant="h5" > |
|
|
|
|
在庫に食材を追加 |
|
|
|
|
</Typography> |
|
|
|
|
</DialogTitle> |
|
|
|
|
<FormGroup row> |
|
|
|
|
<FormControlLabel |
|
|
|
|
control={<Checkbox />} |
|
|
|
|
label="食材を新規追加" |
|
|
|
|
checked={newStock.newAddition} |
|
|
|
|
onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })} |
|
|
|
|
/> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Box> |
|
|
|
|
|
|
|
|
|
{/* 新規タスク作成ダイアログ */} |
|
|
|
|
<Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}> |
|
|
|
|
<Box display="flex" alignItems="center" > |
|
|
|
|
<DialogTitle sx={{ flexGrow: 1 }}> |
|
|
|
|
<Typography variant="h5" > |
|
|
|
|
在庫に食材を追加 |
|
|
|
|
</Typography> |
|
|
|
|
</DialogTitle> |
|
|
|
|
<FormGroup row> |
|
|
|
|
<FormControlLabel |
|
|
|
|
control={<Checkbox />} |
|
|
|
|
label="食材を新規追加" |
|
|
|
|
checked={newStock.newAddition} |
|
|
|
|
onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })} |
|
|
|
|
/> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Box> |
|
|
|
|
<DialogContent> |
|
|
|
|
<Box sx={{ pt: 1 }}> |
|
|
|
|
{/*材料カテゴリ選択 */} |
|
|
|
|
|
|
|
|
|
<FormControl sx={{ width: "50%", marginBottom: 2 }}> |
|
|
|
|
<InputLabel id="demo-simple-select-label">カテゴリ</InputLabel> |
|
|
|
|
<Select |
|
|
|
|
labelId="demo-simple-select-label" |
|
|
|
|
value={newStock.category} |
|
|
|
|
onChange={(e) => onChangeCategory(e.target.value)} |
|
|
|
|
> |
|
|
|
|
<MenuItem value="乳製品">乳製品</MenuItem> |
|
|
|
|
<MenuItem value="魚・肉">魚・肉</MenuItem> |
|
|
|
|
<MenuItem value="野菜">野菜</MenuItem> |
|
|
|
|
<MenuItem value="調味料">調味料</MenuItem> |
|
|
|
|
<MenuItem value="その他">その他</MenuItem> |
|
|
|
|
</Select> |
|
|
|
|
</FormControl> |
|
|
|
|
|
|
|
|
|
{!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}> |
|
|
|
|
<InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel> |
|
|
|
|
<Select |
|
|
|
|
labelId="demo-simple-select-label" |
|
|
|
|
value={newStock.stuffId} |
|
|
|
|
onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })} |
|
|
|
|
> |
|
|
|
|
{stuffs.map((stuff) => ( |
|
|
|
|
<MenuItem key={stuff.stuffId} value={stuff.stuffId}> |
|
|
|
|
{stuff.stuffName} |
|
|
|
|
</MenuItem> |
|
|
|
|
))} |
|
|
|
|
</Select> |
|
|
|
|
</FormControl>} |
|
|
|
|
|
|
|
|
|
{/* タスクタイトル入力フィールド */} |
|
|
|
|
{newStock.newAddition && <TextField |
|
|
|
|
autoFocus |
|
|
|
|
margin="dense" |
|
|
|
|
label="材料名" |
|
|
|
|
fullWidth |
|
|
|
|
value={newStock.stuffName} |
|
|
|
|
onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })} |
|
|
|
|
sx={{ marginBottom: 2 }} |
|
|
|
|
/>} |
|
|
|
|
{/* 現在の数量入力フィールド */} |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="現在の数量" |
|
|
|
|
fullWidth |
|
|
|
|
value={newStock.amount} |
|
|
|
|
onChange={(e) => { |
|
|
|
|
const value = e.target.value; |
|
|
|
|
const parsedValue = parseInt(value, 10); // 数値に変換
|
|
|
|
|
if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
|
|
|
|
|
setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
|
|
|
|
|
} |
|
|
|
|
}} |
|
|
|
|
// sx={{ width: "50%" }}
|
|
|
|
|
type="number" |
|
|
|
|
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
|
|
|
|
|
/> |
|
|
|
|
{/* 購入時数量入力フィールド */} |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="購入時の数量" |
|
|
|
|
fullWidth |
|
|
|
|
value={newStock.buyAmount} |
|
|
|
|
onChange={(e) => { |
|
|
|
|
const value = e.target.value; |
|
|
|
|
const parsedValue = parseInt(value, 10); // 数値に変換
|
|
|
|
|
if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
|
|
|
|
|
setNewStock({ ...newStock, buyAmount: parsedValue }); // number型で保存
|
|
|
|
|
} |
|
|
|
|
}} |
|
|
|
|
// sx={{ width: "50%" }}
|
|
|
|
|
type="number" |
|
|
|
|
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
|
|
|
|
|
/> |
|
|
|
|
{/* 購入価格入力フィールド */} |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="購入価格" |
|
|
|
|
fullWidth |
|
|
|
|
value={newStock.price} |
|
|
|
|
onChange={(e) => { |
|
|
|
|
const value = e.target.value; |
|
|
|
|
const parsedValue = parseInt(value, 10); // 数値に変換
|
|
|
|
|
if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK
|
|
|
|
|
setNewStock({ ...newStock, price: parsedValue }); // number型で保存
|
|
|
|
|
} |
|
|
|
|
}} |
|
|
|
|
// sx={{ width: "50%" }}
|
|
|
|
|
type="number" |
|
|
|
|
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
|
|
|
|
|
<DialogContent> |
|
|
|
|
<Box sx={{ pt: 1 }}> |
|
|
|
|
{/*材料カテゴリ選択 */} |
|
|
|
|
|
|
|
|
|
<FormControl sx={{ width: "50%", marginBottom: 2 }}> |
|
|
|
|
<InputLabel id="demo-simple-select-label">カテゴリ</InputLabel> |
|
|
|
|
<Select |
|
|
|
|
labelId="demo-simple-select-label" |
|
|
|
|
value={newStock.category} |
|
|
|
|
onChange={(e) => onChangeCategory(e.target.value)} |
|
|
|
|
> |
|
|
|
|
<MenuItem value="乳製品">乳製品</MenuItem> |
|
|
|
|
<MenuItem value="魚・肉">魚・肉</MenuItem> |
|
|
|
|
<MenuItem value="野菜">野菜</MenuItem> |
|
|
|
|
<MenuItem value="調味料">調味料</MenuItem> |
|
|
|
|
<MenuItem value="その他">その他</MenuItem> |
|
|
|
|
</Select> |
|
|
|
|
</FormControl> |
|
|
|
|
|
|
|
|
|
{!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}> |
|
|
|
|
<InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel> |
|
|
|
|
<Select |
|
|
|
|
labelId="demo-simple-select-label" |
|
|
|
|
value={newStock.stuffId} |
|
|
|
|
onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })} |
|
|
|
|
> |
|
|
|
|
{stuffs.map((stuff) => ( |
|
|
|
|
<MenuItem key={stuff.stuffId} value={stuff.stuffId}> |
|
|
|
|
{stuff.stuffName} |
|
|
|
|
</MenuItem> |
|
|
|
|
))} |
|
|
|
|
</Select> |
|
|
|
|
</FormControl>} |
|
|
|
|
|
|
|
|
|
{/* タスクタイトル入力フィールド */} |
|
|
|
|
{newStock.newAddition && <TextField |
|
|
|
|
autoFocus |
|
|
|
|
margin="dense" |
|
|
|
|
label="材料名" |
|
|
|
|
fullWidth |
|
|
|
|
value={newStock.stuffName} |
|
|
|
|
onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })} |
|
|
|
|
sx={{ marginBottom: 2 }} |
|
|
|
|
/>} |
|
|
|
|
{/* 現在の数量入力フィールド */} |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="現在の数量" |
|
|
|
|
fullWidth |
|
|
|
|
value={newStock.amount} |
|
|
|
|
onChange={(e) => { |
|
|
|
|
const value = e.target.value; |
|
|
|
|
const parsedValue = parseInt(value, 10); // 数値に変換
|
|
|
|
|
if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
|
|
|
|
|
setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
|
|
|
|
|
} |
|
|
|
|
}} |
|
|
|
|
// sx={{ width: "50%" }}
|
|
|
|
|
type="number" |
|
|
|
|
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
|
|
|
|
|
/> |
|
|
|
|
{/* 購入時数量入力フィールド */} |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="購入時の数量" |
|
|
|
|
fullWidth |
|
|
|
|
value={newStock.buyAmount} |
|
|
|
|
onChange={(e) => { |
|
|
|
|
const value = e.target.value; |
|
|
|
|
const parsedValue = parseInt(value, 10); // 数値に変換
|
|
|
|
|
if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
|
|
|
|
|
setNewStock({ ...newStock, buyAmount: parsedValue }); // number型で保存
|
|
|
|
|
} |
|
|
|
|
}} |
|
|
|
|
// sx={{ width: "50%" }}
|
|
|
|
|
type="number" |
|
|
|
|
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
|
|
|
|
|
/> |
|
|
|
|
{/* 購入価格入力フィールド */} |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="購入価格" |
|
|
|
|
fullWidth |
|
|
|
|
value={newStock.price} |
|
|
|
|
onChange={(e) => { |
|
|
|
|
const value = e.target.value; |
|
|
|
|
const parsedValue = parseInt(value, 10); // 数値に変換
|
|
|
|
|
if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK
|
|
|
|
|
setNewStock({ ...newStock, price: parsedValue }); // number型で保存
|
|
|
|
|
} |
|
|
|
|
}} |
|
|
|
|
// sx={{ width: "50%" }}
|
|
|
|
|
type="number" |
|
|
|
|
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
|
|
|
|
|
/> |
|
|
|
|
{/* 購入店舗入力フィールド */} |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="購入店舗" |
|
|
|
|
fullWidth |
|
|
|
|
value={newStock.shop} |
|
|
|
|
onChange={(e) => setNewStock({...newStock, shop: e.target.value})} |
|
|
|
|
/> |
|
|
|
|
{/* 購入日・消費期限を横並びに */} |
|
|
|
|
<Box sx={{ display: 'flex', gap: 2, mb: 2 }}> |
|
|
|
|
{/* 購入日入力フィールド */} |
|
|
|
|
<DatePicker |
|
|
|
|
popperClassName="custom-datepicker-popper" |
|
|
|
|
selected={newStock.buyDate ? new Date(newStock.buyDate) : null} |
|
|
|
|
onChange={(date) => |
|
|
|
|
setNewStock({ ...newStock, buyDate: date ? formatDateLocal(date) : '' }) |
|
|
|
|
} |
|
|
|
|
dateFormat="yyyy/MM/dd" |
|
|
|
|
customInput={ |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="購入日(yyyy/MM/dd)" |
|
|
|
|
fullWidth |
|
|
|
|
/> |
|
|
|
|
} |
|
|
|
|
isClearable |
|
|
|
|
//withPortal // ← 他の文字との重なり対策
|
|
|
|
|
/> |
|
|
|
|
{/* 購入店舗入力フィールド */} |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="購入店舗" |
|
|
|
|
fullWidth |
|
|
|
|
value={newStock.shop} |
|
|
|
|
onChange={(e) => setNewStock({...newStock, shop: e.target.value})} |
|
|
|
|
{/* 消費・賞味期限入力フィールド */} |
|
|
|
|
<DatePicker |
|
|
|
|
popperClassName="custom-datepicker-popper" |
|
|
|
|
selected={newStock.expDate ? new Date(newStock.expDate) : null} |
|
|
|
|
onChange={(date) => |
|
|
|
|
setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' }) |
|
|
|
|
} |
|
|
|
|
dateFormat="yyyy/MM/dd" |
|
|
|
|
customInput={ |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="消費・賞味期限(yyyy/MM/dd)" |
|
|
|
|
fullWidth |
|
|
|
|
/> |
|
|
|
|
} |
|
|
|
|
isClearable |
|
|
|
|
//withPortal
|
|
|
|
|
/> |
|
|
|
|
{/* 購入日・消費期限を横並びに */} |
|
|
|
|
<Box sx={{ display: 'flex', gap: 2, mb: 2 }}> |
|
|
|
|
{/* 購入日入力フィールド */} |
|
|
|
|
<DatePicker |
|
|
|
|
popperClassName="custom-datepicker-popper" |
|
|
|
|
selected={newStock.buyDate ? new Date(newStock.buyDate) : null} |
|
|
|
|
onChange={(date) => |
|
|
|
|
setNewStock({ ...newStock, buyDate: date ? formatDateLocal(date) : '' }) |
|
|
|
|
} |
|
|
|
|
dateFormat="yyyy/MM/dd" |
|
|
|
|
customInput={ |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="購入日(yyyy/MM/dd)" |
|
|
|
|
fullWidth |
|
|
|
|
/> |
|
|
|
|
} |
|
|
|
|
isClearable |
|
|
|
|
//withPortal // ← 他の文字との重なり対策
|
|
|
|
|
/> |
|
|
|
|
{/* 消費・賞味期限入力フィールド */} |
|
|
|
|
<DatePicker |
|
|
|
|
popperClassName="custom-datepicker-popper" |
|
|
|
|
selected={newStock.expDate ? new Date(newStock.expDate) : null} |
|
|
|
|
onChange={(date) => |
|
|
|
|
setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' }) |
|
|
|
|
} |
|
|
|
|
dateFormat="yyyy/MM/dd" |
|
|
|
|
customInput={ |
|
|
|
|
<TextField |
|
|
|
|
margin="dense" |
|
|
|
|
label="消費・賞味期限(yyyy/MM/dd)" |
|
|
|
|
fullWidth |
|
|
|
|
/> |
|
|
|
|
} |
|
|
|
|
isClearable |
|
|
|
|
//withPortal
|
|
|
|
|
/> |
|
|
|
|
</Box> |
|
|
|
|
</Box> |
|
|
|
|
</DialogContent> |
|
|
|
|
<DialogActions> |
|
|
|
|
<Button onClick={() => setIsAddOpen(false)}>キャンセル</Button> |
|
|
|
|
<Button onClick={handleCreateStock} variant="contained"> |
|
|
|
|
追加 |
|
|
|
|
</Button> |
|
|
|
|
</DialogActions> |
|
|
|
|
</Dialog> |
|
|
|
|
</Box> |
|
|
|
|
</DialogContent> |
|
|
|
|
<DialogActions> |
|
|
|
|
<Button onClick={() => setIsAddOpen(false)}>キャンセル</Button> |
|
|
|
|
<Button onClick={handleCreateStock} variant="contained"> |
|
|
|
|
追加 |
|
|
|
|
</Button> |
|
|
|
|
</DialogActions> |
|
|
|
|
</Dialog> |
|
|
|
|
|
|
|
|
|
{/* 各カテゴリを表示 */} |
|
|
|
|
{CATEGORY_NAMES.map(category => { |
|
|
|
|
return ( |
|
|
|
|
<Box sx={{ padding: "1rem" }}> |
|
|
|
|
<Typography variant="h5" component="h1" gutterBottom |
|
|
|
|
onClick={() => setOpenCategory({...openCategory, [category]: !openCategory[category]})} |
|
|
|
|
> |
|
|
|
|
{!openCategory[category] ? <ArrowDownIcon color="primary" /> : <ArrowUpIcon color="primary" />} |
|
|
|
|
{category} |
|
|
|
|
</Typography> |
|
|
|
|
{openCategory[category] && StockTable(stocks, [category])} |
|
|
|
|
</Box> |
|
|
|
|
) |
|
|
|
|
})} |
|
|
|
|
|
|
|
|
|
{/* 材料ボタン - 画面下部に固定表示 */} |
|
|
|
|
<Box className="plusButtonWrapper"> |
|
|
|
|
<Fab color="primary" onClick={() => setIsAddOpen(true)} className="plusButton"> |
|
|
|
|
<AddIcon /> |
|
|
|
|
</Fab> |
|
|
|
|
{/* <Typography className="plusButtonLabel"> |
|
|
|
|
材料の追加 |
|
|
|
|
</Typography> */} |
|
|
|
|
</Box> |
|
|
|
|
|
|
|
|
|
{/* 在庫一覧リスト */} |
|
|
|
|
{/* 乳製品 */} |
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>乳製品</Typography> |
|
|
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
|
|
|
|
{StockTable(stocks, ["乳製品"])} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* 肉・魚 */} |
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>魚・肉</Typography> |
|
|
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
|
|
|
|
{StockTable(stocks, ["魚・肉"])} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* 野菜 */} |
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>野菜</Typography> |
|
|
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
|
|
|
|
{StockTable(stocks, ["野菜"])} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* 調味料 */} |
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>調味料</Typography> |
|
|
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
|
|
|
|
{StockTable(stocks, ["調味料"])} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* その他 */} |
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>その他</Typography> |
|
|
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}> |
|
|
|
|
{StockTable(stocks, ["その他"])} |
|
|
|
|
</div> |
|
|
|
|
<Box sx={{ height: '80px' }} /> {/* フッターの高さと同じくらいに調整 */} |
|
|
|
|
</Container> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
Masaharu.Kato
4 months ago