Dashboard UpDATE

src/components/ProductionProcess/EquipmentStatusDashboard.tsx

@@ -244,16 +244,22 @@ const EquipmentStatusDashboard: React.FC = () => {
                   </Typography>
 
                   <TableContainer component={Paper} sx={{ maxHeight: 440, overflow: 'auto' }}>
-                    <Table size="small">
+                    <Table size="small" sx={{ tableLayout: 'fixed', width: '100%' }}>
                       <TableHead>
                         <TableRow sx={{ position: 'sticky', top: 0, zIndex: 1, backgroundColor: 'background.paper' }}>
-                          <TableCell>
+                          <TableCell sx={{ width: '15%', minWidth: 150 }}>
                             <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                               {t("Equipment Name and Code")}
                             </Typography>
                           </TableCell>
                           {details.map((d) => (
-                            <TableCell key={d.equipmentDetailId}>
+                            <TableCell 
+                              key={d.equipmentDetailId}
+                              sx={{ 
+                                width: `${85 / details.length}%`,
+                                textAlign: 'left'
+                              }}
+                            >
                               <Box sx={{ display: "flex", flexDirection: "column" }}>
                                 <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                                   {d.equipmentDetailName || "-"}
@@ -269,13 +275,19 @@ const EquipmentStatusDashboard: React.FC = () => {
                       <TableBody>
                         {/* 工序 Row */}
                         <TableRow>
-                          <TableCell>
+                          <TableCell sx={{ width: '15%', minWidth: 150 }}>
                             <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                               {t("Process")}
                             </Typography>
                           </TableCell>
                           {details.map((d) => (
-                            <TableCell key={d.equipmentDetailId}>
+                            <TableCell 
+                              key={d.equipmentDetailId}
+                              sx={{ 
+                                width: `${85 / details.length}%`,
+                                textAlign: 'left'
+                              }}
+                            >
                               {d.status === "Processing" ? d.currentProcess?.processName || "-" : "-"}
                             </TableCell>
                           ))}
@@ -283,7 +295,7 @@ const EquipmentStatusDashboard: React.FC = () => {
 
                         {/* 狀態 Row - 修改：Processing 时只显示 job order code */}
                         <TableRow>
-                          <TableCell>
+                          <TableCell sx={{ width: '15%', minWidth: 150 }}>
                             <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                               {t("Status")}
                             </Typography>
@@ -295,7 +307,13 @@ const EquipmentStatusDashboard: React.FC = () => {
                             // Processing 时只显示 job order code，不显示 Chip
                             if (d.status === "Processing" && cp?.jobOrderCode) {
                               return (
-                                <TableCell key={d.equipmentDetailId}>
+                                <TableCell 
+                                  key={d.equipmentDetailId}
+                                  sx={{ 
+                                    width: `${85 / details.length}%`,
+                                    textAlign: 'left'
+                                  }}
+                                >
                                   <Typography variant="body2" sx={{ fontWeight: 500 }}>
                                    {cp.jobOrderCode}
                                   </Typography>
@@ -305,7 +323,13 @@ const EquipmentStatusDashboard: React.FC = () => {
                             
                             // 其他状态显示 Chip
                             return (
-                              <TableCell key={d.equipmentDetailId}>
+                              <TableCell 
+                                key={d.equipmentDetailId}
+                                sx={{ 
+                                  width: `${85 / details.length}%`,
+                                  textAlign: 'left'
+                                }}
+                              >
                                 <Chip label={t(`${d.status}`)} color={chipColor} size="small" />
                               </TableCell>
                             );
@@ -316,13 +340,19 @@ const EquipmentStatusDashboard: React.FC = () => {
 
                         {/* 開始時間 Row */}
                         <TableRow>
-                          <TableCell>
+                          <TableCell sx={{ width: '15%', minWidth: 150 }}>
                             <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                               {t("Start Time")}
                             </Typography>
                           </TableCell>
                           {details.map((d) => (
-                            <TableCell key={d.equipmentDetailId}>
+                            <TableCell 
+                              key={d.equipmentDetailId}
+                              sx={{ 
+                                width: `${85 / details.length}%`,
+                                textAlign: 'left'
+                              }}
+                            >
                               {d.status === "Processing"
                                 ? formatDateTime(d.currentProcess?.startTime)
                                 : "-"}
@@ -332,13 +362,19 @@ const EquipmentStatusDashboard: React.FC = () => {
 
                         {/* 預計完成時間 Row */}
                         <TableRow>
-                          <TableCell>
+                          <TableCell sx={{ width: '15%', minWidth: 150 }}>
                             <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                               {t("預計完成時間")}
                             </Typography>
                           </TableCell>
                           {details.map((d) => (
-                            <TableCell key={d.equipmentDetailId}>
+                            <TableCell 
+                              key={d.equipmentDetailId}
+                              sx={{ 
+                                width: `${85 / details.length}%`,
+                                textAlign: 'left'
+                              }}
+                            >
                               {d.status === "Processing"
                                 ? calculateEstimatedCompletionTime(
                                     d.currentProcess?.startTime,
@@ -351,13 +387,19 @@ const EquipmentStatusDashboard: React.FC = () => {
 
                         {/* 剩餘時間 Row */}
                         <TableRow>
-                          <TableCell>
+                          <TableCell sx={{ width: '15%', minWidth: 150 }}>
                             <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                               {t("Remaining Time (min)")}
                             </Typography>
                           </TableCell>
                           {details.map((d) => (
-                            <TableCell align="right" key={d.equipmentDetailId}>
+                            <TableCell 
+                              key={d.equipmentDetailId}
+                              sx={{ 
+                                width: `${85 / details.length}%`,
+                                textAlign: 'left'
+                              }}
+                            >
                               {d.status === "Processing"
                                 ? calculateRemainingTime(
                                     d.currentProcess?.startTime,