Add restart stage to AppUpdateProgress for enhanced update management. Implemented new status handling and UI updates to reflect restart progress, improving user feedback during application updates.

src/components/Dashboard/Management/AppUpdates/AppUpdateProgress.jsx

@@ -4,6 +4,7 @@ import { Button, Flex, Modal, Progress, Typography, theme } from 'antd'
 
 import CloudIcon from '../../../Icons/CloudIcon'
 import HostIcon from '../../../Icons/HostIcon'
+import ReloadIcon from '../../../Icons/ReloadIcon'
 
 import CheckCircleIcon from '../../../Icons/CheckCircleIcon'
 import XMarkCircleIcon from '../../../Icons/XMarkCircleIcon'
@@ -45,6 +46,15 @@ const STAGE_CONFIG = {
       complete: 'Installed',
       error: 'Install failed'
     }
+  },
+  restart: {
+    icon: ReloadIcon,
+    labels: {
+      pending: 'Restart',
+      active: 'Restarting...',
+      complete: 'Restarted',
+      error: 'Restart failed'
+    }
   }
 }
 
@@ -62,20 +72,25 @@ const getDownloadStageStatus = (phase, isError) => {
   return 'pending'
 }
 
+const isInstallComplete = (phase, message) =>
+  phase === 'installing' &&
+  String(message || '')
+    .toLowerCase()
+    .includes('complete')
+
 const getInstallStageStatus = (phase, isError, message) => {
   if (isError && ['downloaded', 'installing'].includes(phase)) return 'error'
-  if (
+  if (isInstallComplete(phase, message)) return 'complete'
-    phase === 'installing' &&
-    String(message || '')
-      .toLowerCase()
-      .includes('complete')
-  ) {
-    return 'complete'
-  }
   if (phase === 'installing') return 'active'
   return 'pending'
 }
 
+const getRestartStageStatus = (phase, isError, message) => {
+  if (isError && isInstallComplete(phase, message)) return 'error'
+  if (isInstallComplete(phase, message)) return 'active'
+  return 'pending'
+}
+
 const getProgressStatus = (stageStatus) => {
   if (stageStatus === 'error') return 'exception'
   if (stageStatus === 'complete') return 'success'
@@ -101,25 +116,19 @@ const UpdateStage = ({ stage, status, percent, detail }) => {
         : StageIcon
 
   return (
-    <Flex align='center' gap='middle'>
+    <Flex align='start' gap='middle' style={{ width: '100%' }}>
-      <StatusIcon style={{ fontSize: 20, color, flexShrink: 0 }} />
+      <StatusIcon style={{ fontSize: 22, color, flexShrink: 0 }} />
-      <Flex align='center' gap='small' style={{ flex: 1, minWidth: 0 }}>
+      <Flex align='start' gap='24px' style={{ flex: 1, minWidth: 0 }}>
-        <Text style={{ flexShrink: 0, minWidth: 96 }}>
+        <Text style={{ flexShrink: 0 }}>{config.labels[resolvedStatus]}</Text>
-          {config.labels[resolvedStatus]}
-        </Text>
         {showProgress && (
-          <Flex vertical gap={4}>
+          <Flex vertical gap={2} style={{ flex: 1 }}>
             <Progress
               percent={resolvedPercent}
               status={getProgressStatus(resolvedStatus)}
               showInfo={typeof resolvedPercent === 'number'}
               style={{ flex: 1, margin: 0 }}
             />
-            {detail && (
+            {detail && <Text type='secondary'>{detail}</Text>}
-              <Text type='secondary' style={{ marginLeft: 36 }}>
-                {detail}
-              </Text>
-            )}
           </Flex>
         )}
       </Flex>
@@ -128,7 +137,7 @@ const UpdateStage = ({ stage, status, percent, detail }) => {
 }
 
 UpdateStage.propTypes = {
-  stage: PropTypes.oneOf(['download', 'install']).isRequired,
+  stage: PropTypes.oneOf(['download', 'install', 'restart']).isRequired,
   status: PropTypes.oneOf(['pending', 'active', 'complete', 'error'])
     .isRequired,
   percent: PropTypes.number,
@@ -150,6 +159,7 @@ const AppUpdateProgress = ({ progress, update, onClose }) => {
 
   const downloadStatus = getDownloadStageStatus(phase, isError)
   const installStatus = getInstallStageStatus(phase, isError, message)
+  const restartStatus = getRestartStageStatus(phase, isError, message)
 
   const downloadPercent =
     downloadStatus === 'active' ? (phase === 'preparing' ? 0 : percent) : null
@@ -163,6 +173,8 @@ const AppUpdateProgress = ({ progress, update, onClose }) => {
 
   const installDetail = installStatus === 'active' ? message : null
 
+  const restartDetail = restartStatus === 'active' ? message : null
+
   return (
     <Flex vertical gap='middle'>
       <Text>
@@ -185,6 +197,11 @@ const AppUpdateProgress = ({ progress, update, onClose }) => {
           percent={installPercent}
           detail={installDetail}
         />
+        <UpdateStage
+          stage='restart'
+          status={restartStatus}
+          detail={restartDetail}
+        />
       </Flex>
 
       <Modal