no message

src/app/(main)/ps/page.tsx

@@ -1,15 +1,13 @@
 "use client";
 
 import React, { useState, useEffect, useMemo } from "react";
-import {
-  Search,
-  Eye,
-  ListOrdered,
-  LineChart,
-  Download,
-  Network,
-  Loader2,
-} from "lucide-react";
+import Search from "@mui/icons-material/Search";
+import Visibility from "@mui/icons-material/Visibility";
+import FormatListNumbered from "@mui/icons-material/FormatListNumbered";
+import ShowChart from "@mui/icons-material/ShowChart";
+import Download from "@mui/icons-material/Download";
+import Hub from "@mui/icons-material/Hub";
+import { CircularProgress } from "@mui/material";
 import PageTitleBar from "@/components/PageTitleBar";
 import dayjs from "dayjs";
 import { NEXT_PUBLIC_API_URL } from "@/config/api";
@@ -195,7 +193,7 @@ export default function ProductionSchedulePage() {
               onClick={() => setIsExportDialogOpen(true)}
               className="inline-flex items-center gap-2 rounded-lg border border-emerald-500/70 bg-white px-4 py-2 text-sm font-semibold text-emerald-600 shadow-sm transition hover:bg-emerald-50 dark:border-emerald-500/50 dark:bg-slate-800 dark:text-emerald-400 dark:hover:bg-emerald-500/10"
             >
-              <Download className="h-4 w-4" />
+              <Download sx={{ fontSize: 16 }} />
               匯出計劃/物料需求Excel
             </button>
             <button
@@ -205,9 +203,9 @@ export default function ProductionSchedulePage() {
               className="inline-flex items-center gap-2 rounded-lg bg-blue-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-600 disabled:opacity-50"
             >
               {loading ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
+                <CircularProgress size={16} sx={{ display: "block" }} />
               ) : (
-                <LineChart className="h-4 w-4" />
+                <ShowChart sx={{ fontSize: 16 }} />
               )}
               預測排期
             </button>
@@ -233,7 +231,7 @@ export default function ProductionSchedulePage() {
           onClick={handleSearch}
           className="inline-flex items-center gap-2 rounded-lg bg-blue-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-600"
         >
-          <Search className="h-4 w-4" />
+          <Search sx={{ fontSize: 16 }} />
           搜尋
         </button>
       </div>
@@ -270,7 +268,7 @@ export default function ProductionSchedulePage() {
                       onClick={() => handleViewDetail(ps)}
                       className="rounded p-1 text-blue-500 hover:bg-blue-50 hover:text-blue-600 dark:text-blue-400 dark:hover:bg-blue-500/20"
                     >
-                      <Eye className="h-4 w-4" />
+                      <Visibility sx={{ fontSize: 16 }} />
                     </button>
                   </td>
                   <td className="px-4 py-3">
@@ -303,7 +301,7 @@ export default function ProductionSchedulePage() {
           />
           <div className="relative z-10 flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl dark:border-slate-700 dark:bg-slate-800">
             <div className="flex items-center gap-2 border-b border-slate-200 bg-blue-500 px-4 py-3 text-white dark:border-slate-700">
-              <ListOrdered className="h-5 w-5 shrink-0" />
+              <FormatListNumbered sx={{ fontSize: 20, flexShrink: 0 }} />
               <h2 id="detail-title" className="text-lg font-semibold">
                 排期詳細: {selectedPs?.id} (
                 {formatBackendDate(selectedPs?.produceAt)})
@@ -396,9 +394,9 @@ export default function ProductionSchedulePage() {
                 className="inline-flex items-center gap-2 rounded-lg bg-blue-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-600 disabled:opacity-50"
               >
                 {isGenerating ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <CircularProgress size={16} sx={{ display: "block" }} />
                 ) : (
-                  <Network className="h-4 w-4" />
+                  <Hub sx={{ fontSize: 16 }} />
                 )}
                 自動生成工單
               </button>
@@ -491,9 +489,9 @@ export default function ProductionSchedulePage() {
                 className="inline-flex items-center gap-2 rounded-lg bg-blue-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-600 disabled:opacity-50"
               >
                 {loading ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <CircularProgress size={16} sx={{ display: "block" }} />
                 ) : (
-                  <LineChart className="h-4 w-4" />
+                  <ShowChart sx={{ fontSize: 16 }} />
                 )}
                 計算預測排期
               </button>
@@ -549,9 +547,9 @@ export default function ProductionSchedulePage() {
                 className="inline-flex items-center gap-2 rounded-lg bg-emerald-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-emerald-600 disabled:opacity-50"
               >
                 {loading ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <CircularProgress size={16} sx={{ display: "block" }} />
                 ) : (
-                  <Download className="h-4 w-4" />
+                  <Download sx={{ fontSize: 16 }} />
                 )}
                 匯出
               </button>