4th

frontend/src/app/todos/page.tsx

@@ -22,6 +22,7 @@ import {
   FilterList,
   Search,
   SelectAll,
+  CloudUpload,
 } from '@mui/icons-material';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useTheme } from '@/providers/ThemeProvider';
@@ -32,6 +33,7 @@ import TodoFilters from '@/components/todos/TodoFilters';
 import BatchActions from '@/components/todos/BatchActions';
 import SearchBar from '@/components/todos/SearchBar';
 import TodoDialog from '@/components/todos/TodoDialog';
+import ExcelImport from '@/components/todos/ExcelImport';
 import { Todo } from '@/types';
 import { todosApi } from '@/lib/api';
 import { useSearchParams } from 'next/navigation';
@@ -60,6 +62,7 @@ const TodosPage = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const [showTodoDialog, setShowTodoDialog] = useState(false);
   const [editingTodo, setEditingTodo] = useState<any>(null);
+  const [showExcelImport, setShowExcelImport] = useState(false);
   const [todos, setTodos] = useState<Todo[]>([]);
   const [loading, setLoading] = useState(true);
   const [currentUser, setCurrentUser] = useState<any>(null);
@@ -508,27 +511,43 @@ const TodosPage = () => {
                 </Box>
               </Box>
               
-              <Button
-                variant="contained"
-                startIcon={<Add />}
-                onClick={handleCreateTodo}
-                sx={{
-                  background: 'linear-gradient(45deg, #3b82f6 30%, #8b5cf6 90%)',
-                  textTransform: 'none',
-                  fontWeight: 600,
-                  px: 3,
-                  py: 1.5,
-                  borderRadius: 2,
-                  boxShadow: '0 4px 12px rgba(59, 130, 246, 0.3)',
-                  '&:hover': {
-                    background: 'linear-gradient(45deg, #2563eb 30%, #7c3aed 90%)',
-                    boxShadow: '0 6px 16px rgba(59, 130, 246, 0.4)',
-                    transform: 'translateY(-1px)',
-                  },
-                }}
-              >
-                新增待辦
-              </Button>
+              <Box sx={{ display: 'flex', gap: 1 }}>
+                <Button
+                  variant="outlined"
+                  startIcon={<CloudUpload />}
+                  onClick={() => setShowExcelImport(true)}
+                  sx={{
+                    textTransform: 'none',
+                    fontWeight: 600,
+                    px: 3,
+                    py: 1.5,
+                    borderRadius: 2,
+                  }}
+                >
+                  Excel 匯入
+                </Button>
+                <Button
+                  variant="contained"
+                  startIcon={<Add />}
+                  onClick={handleCreateTodo}
+                  sx={{
+                    background: 'linear-gradient(45deg, #3b82f6 30%, #8b5cf6 90%)',
+                    textTransform: 'none',
+                    fontWeight: 600,
+                    px: 3,
+                    py: 1.5,
+                    borderRadius: 2,
+                    boxShadow: '0 4px 12px rgba(59, 130, 246, 0.3)',
+                    '&:hover': {
+                      background: 'linear-gradient(45deg, #2563eb 30%, #7c3aed 90%)',
+                      boxShadow: '0 6px 16px rgba(59, 130, 246, 0.4)',
+                      transform: 'translateY(-1px)',
+                    },
+                  }}
+                >
+                  新增待辦
+                </Button>
+              </Box>
             </Box>
           </motion.div>
         </Box>
@@ -779,6 +798,13 @@ const TodosPage = () => {
           onSave={handleSaveTodo}
           onTodoCreated={handleTodoCreated}
         />
+
+        {/* Excel 匯入對話框 */}
+        <ExcelImport
+          open={showExcelImport}
+          onClose={() => setShowExcelImport(false)}
+          onImportComplete={handleTodoCreated}
+        />
       </motion.div>
     </DashboardLayout>
   );