quick add escalation tab component

2 周前 · 43afd5cd3c
--- a/src/components/PoDetail/EscalationComponent.tsx
+++ b/src/components/PoDetail/EscalationComponent.tsx
@@ -0,0 +1,165 @@
 import React, { useState, ChangeEvent, FormEvent } from 'react';
 import {
    Box,
    Button,
    Collapse,
    FormControl,
    InputLabel,
    Select,
    MenuItem,
    TextField,
    Checkbox,
    FormControlLabel,
    Paper,
    Typography,
    RadioGroup,
    Radio,
 } from '@mui/material';
 import { SelectChangeEvent } from '@mui/material/Select';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';

 interface NameOption {
    value: string;
    label: string;
 }

 interface FormData {
    name: string;
    quantity: string;
    message: string;
 }

 function CollapsibleSelectForm(): JSX.Element {
    const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
    const [formData, setFormData] = useState<FormData>({
        name: '',
        quantity: '',
        message: '',
    });

    const nameOptions: NameOption[] = [
        { value: '', label: '請選擇姓名...' },
        { value: 'john', label: '張大明' },
        { value: 'jane', label: '李小美' },
        { value: 'mike', label: '王志強' },
        { value: 'sarah', label: '陳淑華' },
        { value: 'david', label: '林建國' },
    ];

    const handleInputChange = (
        e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>
    ): void => {
        const { name, value } = e.target;
        setFormData((prev) => ({
            ...prev,
            [name]: value,
        }));
    };

    const handleSubmit = (e: FormEvent<HTMLFormElement>): void => {
        e.preventDefault();
        console.log('表單已提交:', formData);
        // 處理表單提交
    };

    const handleCollapseToggle = (e: ChangeEvent<HTMLInputElement>): void => {
        setIsCollapsed(e.target.checked);
    };

    return (
        // <Paper elevation={3} sx={{ maxWidth: 400, mx: 'auto', p: 3 }}>
        <Paper elevation={3} sx={{ mx: 'auto', p: 3 }}>
            <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                <FormControlLabel
                    control={
                        <Checkbox
                            checked={isCollapsed}
                            onChange={handleCollapseToggle}
                            color="primary"
                        />
                    }
                    label={
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="body1">上報結果</Typography>
                            {isCollapsed ? (
                                <ExpandLessIcon sx={{ ml: 1 }} />
                            ) : (
                                <ExpandMoreIcon sx={{ ml: 1 }} />
                            )}
                        </Box>
                    }
                />
            </Box>

            <Collapse in={!isCollapsed}>
                <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                    <FormControl>
                        <RadioGroup
                            row
                            aria-labelledby="demo-radio-buttons-group-label"
                            defaultValue="pass"
                            name="radio-buttons-group"
                        >
                            <FormControlLabel value="pass" control={<Radio />} label="合格" />
                            <FormControlLabel value="fail" control={<Radio />} label="不合格" />
                        </RadioGroup>
                    </FormControl>
                    <FormControl fullWidth>
                        <InputLabel id="name-label">姓名</InputLabel>
                        <Select
                            labelId="name-label"
                            id="name"
                            name="name"
                            value={formData.name}
                            label="姓名"
                            onChange={handleInputChange}
                        >
                            {nameOptions.map((option: NameOption) => (
                                <MenuItem key={option.value} value={option.value}>
                                    {option.label}
                                </MenuItem>
                            ))}
                        </Select>
                    </FormControl>

                    <TextField
                        fullWidth
                        id="quantity"
                        name="quantity"
                        label="數量"
                        type="number"
                        value={formData.quantity}
                        onChange={handleInputChange}
                        InputProps={{ inputProps: { min: 1 } }}
                        placeholder="請輸入數量"
                    />

                    <TextField
                        fullWidth
                        id="message"
                        name="message"
                        label="備註"
                        multiline
                        rows={4}
                        value={formData.message}
                        onChange={handleInputChange}
                        placeholder="請輸入您的備註"
                    />

                    <Button
                        type="submit"
                        variant="contained"
                        color="primary"
                        fullWidth
                        sx={{ mt: 1 }}
                    >
                        提交
                    </Button>
                </Box>
            </Collapse>
        </Paper>
    );
 }

 export default CollapsibleSelectForm;
--- a/src/components/PoDetail/EscalationLog.tsx
+++ b/src/components/PoDetail/EscalationLog.tsx
@@ -0,0 +1,338 @@
 import React, { useState } from 'react';
 import {
    Box,
    Paper,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    Typography,
    Chip,
    Card,
    CardContent,
 } from '@mui/material';
 import {
    useReactTable,
    getCoreRowModel,
    createColumnHelper,
    flexRender,
 } from '@tanstack/react-table';
 import DescriptionIcon from '@mui/icons-material/Description';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';

 interface QCReport {
    id: string;
    productName: string;
    isQualified: boolean;
    remarks: string;
    reportDate: string;
    batchNumber: string;
    inspector: string;
    testResults: string;
    specifications: string;
 }

 interface QCReportFormProps {
    reports: QCReport[];
 }

 function QCReportForm({ reports }: QCReportFormProps): JSX.Element {
    const [selectedReport, setSelectedReport] = useState<QCReport | null>(null);

    const handleReportClick = (report: QCReport): void => {
        setSelectedReport(report);
    };

    const getQualifiedStatus = (isQualified: boolean) => {
        return isQualified ? (
            <Chip
                icon={<CheckCircleIcon />}
                label="合格"
                color="success"
                size="small"
                sx={{ fontWeight: 'medium' }}
            />
        ) : (
            <Chip
                icon={<CancelIcon />}
                label="不合格"
                color="error"
                size="small"
                sx={{ fontWeight: 'medium' }}
            />
        );
    };

    const columnHelper = createColumnHelper<QCReport>();

    const columns = [
        // columnHelper.accessor('productName', {
        //     header: '產品',
        //     cell: info => (
        //         <Typography variant="body2" fontWeight="medium">
        //             {info.getValue()}
        //         </Typography>
        //     ),
        // }),
        columnHelper.accessor('isQualified', {
            header: '合格',
            cell: info => getQualifiedStatus(info.getValue()),
        }),
        columnHelper.accessor('remarks', {
            header: '備註',
            cell: info => (
                <Typography
                    variant="body2"
                    color="text.secondary"
                    sx={{ maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis' }}
                >
                    {info.getValue()}
                </Typography>
            ),
        }),
        columnHelper.accessor('reportDate', {
            header: '上報日期',
            cell: info => (
                <Typography variant="body2" color="text.secondary">
                    {info.getValue()}
                </Typography>
            ),
        }),
    ];

    const table = useReactTable({
        data: reports,
        columns,
        getCoreRowModel: getCoreRowModel(),
    });

    return (
        <Box sx={{ maxWidth: '1200px', mx: 'auto', p: 3 }}>
            {/* Title */}
            {/* <Box sx={{ mb: 4 }}>
                <Typography variant="h5" fontWeight="bold" color="text.primary">
                    品質控制上報系統
                </Typography>
                <Typography variant="body2" color="text.secondary">
                    品質檢測結果上報與管理
                </Typography>
            </Box> */}

            {/* <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', lg: '2fr 1fr' }, gap: 3 }}> */}
            <Box sx={{ display: 'grid' }}>
                {/* Table Section */}
                <Box>
                    <Typography variant="h6" fontWeight="medium" sx={{ mb: 2 }}>
                        上報資料
                    </Typography>
                    <TableContainer component={Paper} elevation={2}>
                        <Table>
                            <TableHead sx={{ bgcolor: 'grey.50' }}>
                                {table.getHeaderGroups().map(headerGroup => (
                                    <TableRow key={headerGroup.id}>
                                        {headerGroup.headers.map(header => (
                                            <TableCell
                                                key={header.id}
                                                sx={{
                                                    fontSize: '0.75rem',
                                                    fontWeight: 'medium',
                                                    color: 'text.secondary',
                                                    textTransform: 'uppercase',
                                                    py: 2,
                                                    px: 3,
                                                }}
                                            >
                                                {header.isPlaceholder
                                                    ? null
                                                    : flexRender(header.column.columnDef.header, header.getContext())}
                                            </TableCell>
                                        ))}
                                    </TableRow>
                                ))}
                            </TableHead>
                            <TableBody>
                                {table.getRowModel().rows.map(row => (
                                    <TableRow
                                        key={row.id}
                                        onClick={() => handleReportClick(row.original)}
                                        sx={{
                                            cursor: 'pointer',
                                            '&:hover': { bgcolor: 'grey.50' },
                                            bgcolor: selectedReport?.id === row.original.id ? 'primary.light' : 'inherit',
                                            transition: 'background-color 0.15s',
                                        }}
                                    >
                                        {row.getVisibleCells().map(cell => (
                                            <TableCell key={cell.id} sx={{ py: 2, px: 3 }}>
                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                            </TableCell>
                                        ))}
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </TableContainer>
                </Box>

                {/* Details Section */}
                {/* <Box>
                    <Typography variant="h6" fontWeight="medium" sx={{ mb: 2 }}>
                        詳細資訊
                    </Typography>
                    <Card elevation={2} sx={{ minHeight: '300px', bgcolor: 'grey.50' }}>
                        <CardContent>
                            {selectedReport ? (
                                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: 'primary.main', mb: 2 }}>
                                        <DescriptionIcon />
                                        <Typography variant="subtitle1" fontWeight="medium">
                                            上報詳情
                                        </Typography>
                                    </Box>

                                    <Box>
                                        <Typography variant="body2" color="text.secondary" fontWeight="medium">
                                            產品名稱：
                                        </Typography>
                                        <Typography variant="body2">{selectedReport.productName}</Typography>
                                    </Box>

                                    <Box>
                                        <Typography variant="body2" color="text.secondary" fontWeight="medium">
                                            檢測結果：
                                        </Typography>
                                        <Box sx={{ mt: 1 }}>{getQualifiedStatus(selectedReport.isQualified)}</Box>
                                    </Box>

                                    <Box>
                                        <Typography variant="body2" color="text.secondary" fontWeight="medium">
                                            批次號碼：
                                        </Typography>
                                        <Typography variant="body2">{selectedReport.batchNumber}</Typography>
                                    </Box>

                                    <Box>
                                        <Typography variant="body2" color="text.secondary" fontWeight="medium">
                                            檢驗員：
                                        </Typography>
                                        <Typography variant="body2">{selectedReport.inspector}</Typography>
                                    </Box>

                                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                                        <CalendarTodayIcon fontSize="small" sx={{ color: 'text.secondary' }} />
                                        <Typography variant="body2">
                                            上報日期：{selectedReport.reportDate}
                                        </Typography>
                                    </Box>

                                    <Box>
                                        <Typography variant="body2" color="text.secondary" fontWeight="medium" sx={{ mb: 1 }}>
                                            檢測規格：
                                        </Typography>
                                        <Paper sx={{ p: 1, bgcolor: 'background.paper' }}>
                                            <Typography variant="body2">{selectedReport.specifications}</Typography>
                                        </Paper>
                                    </Box>

                                    <Box>
                                        <Typography variant="body2" color="text.secondary" fontWeight="medium" sx={{ mb: 1 }}>
                                            檢測結果詳情：
                                        </Typography>
                                        <Paper sx={{ p: 1, bgcolor: 'background.paper' }}>
                                            <Typography variant="body2">{selectedReport.testResults}</Typography>
                                        </Paper>
                                    </Box>

                                    <Box>
                                        <Typography variant="body2" color="text.secondary" fontWeight="medium" sx={{ mb: 1 }}>
                                            備註 (REMARKS)：
                                        </Typography>
                                        <Paper sx={{ p: 1, bgcolor: 'background.paper' }}>
                                            <Typography variant="body2">{selectedReport.remarks}</Typography>
                                        </Paper>
                                    </Box>
                                </Box>
                            ) : (
                                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
                                    <Typography variant="body2" color="text.secondary">
                                        請點擊表格中的記錄來查看詳細資訊
                                    </Typography>
                                </Box>
                            )}
                        </CardContent>
                    </Card>
                </Box> */}
            </Box>
        </Box>
    );
 }

 // Dummy data
 const dummyReports = [
    // {
    //     id: '1',
    //     productName: '智慧手機 Pro Max',
    //     isQualified: true,
    //     remarks: '所有檢測項目均符合標準規格',
    //     reportDate: '2024-08-07',
    //     batchNumber: 'SPM-240807-001',
    //     inspector: '張品質',
    //     testResults: '外觀檢查：無瑕疵，功能測試：100%通過，性能測試：符合標準',
    //     specifications: '螢幕解析度≥1080p，電池續航≥24小時，防水等級IPX7',
    // },
    {
        id: '2',
        productName: '無線藍牙耳機',
        isQualified: false,
        remarks: '包裝有破損',
        reportDate: '2024-08-06',
        batchNumber: 'WBE-240806-002',
        inspector: '李測試',
        testResults: '音質測試：左右聲道音量差異>3dB，不符合標準',
        specifications: '頻響範圍20Hz-20kHz，左右聲道音量差≤1dB，電池續航≥8小時',
    },
    {
        id: '3',
        productName: '筆記型電腦',
        isQualified: true,
        remarks: '經檢查，無損壞',
        reportDate: '2024-08-05',
        batchNumber: 'NB-240805-003',
        inspector: '王檢驗',
        testResults: '溫度測試：CPU最高溫度75°C，性能測試：符合預期',
        specifications: 'CPU溫度≤85°C，開機時間≤30秒，電池續航≥6小時',
    },
    // {
    //     id: '4',
    //     productName: '智慧手錶',
    //     isQualified: false,
    //     remarks: '防水測試未通過，密封性能不足',
    //     reportDate: '2024-08-04',
    //     batchNumber: 'SW-240804-004',
    //     inspector: '劉品管',
    //     testResults: '防水測試：IPX5等級測試失敗，發現進水現象',
    //     specifications: '防水等級≥IPX7，電池續航≥48小時，心率監測精度≥95%',
    // },
    // {
    //     id: '5',
    //     productName: '平板電腦',
    //     isQualified: true,
    //     remarks: '觸控靈敏度優良，顯示效果佳',
    //     reportDate: '2024-08-03',
    //     batchNumber: 'TB-240803-005',
    //     inspector: '陳測試',
    //     testResults: '觸控測試：反應時間<10ms，顯示測試：色彩準確度98%',
    //     specifications: '螢幕尺寸10.1吋，解析度2K，觸控反應時間≤15ms',
    // },
 ];

 // Main component
 const EscalationLog: React.FC = () => {
    return <QCReportForm reports={dummyReports} />;
 };

 export default EscalationLog;