refactor-upto-phase 6

frontend/src/pages/Sites/DeploymentPanel.tsx

@@ -6,24 +6,23 @@
  */
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import {
-  CheckCircleIcon,
-  XCircleIcon,
-  AlertCircleIcon,
-  RocketIcon,
-  RotateCcwIcon,
-  RefreshCwIcon,
-  FileTextIcon,
-  TagIcon,
-  LinkIcon,
-  CheckSquareIcon,
-  XSquareIcon,
-} from 'lucide-react';
 import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
 import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
 import Badge from '../../components/ui/badge/Badge';
 import { useToast } from '../../components/ui/toast/ToastContainer';
+import {
+  CheckCircleIcon,
+  ErrorIcon,
+  AlertIcon,
+  BoltIcon,
+  ArrowRightIcon,
+  FileIcon,
+  BoxIcon,
+  CheckLineIcon,
+  GridIcon
+} from '../../icons';
 import {
   fetchDeploymentReadiness,
   fetchSiteBlueprints,
@@ -111,7 +110,7 @@ export default function DeploymentPanel() {
     return passed ? (
       <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
     ) : (
-      <XCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
+      <ErrorIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
     );
   };
 
@@ -140,7 +139,7 @@ export default function DeploymentPanel() {
         <PageMeta title="Deployment Panel" />
         <Card className="p-6">
           <div className="text-center py-8">
-            <AlertCircleIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
+            <AlertIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
             <p className="text-gray-600 dark:text-gray-400 mb-2">No blueprints found for this site</p>
             <Button
               variant="primary"
@@ -160,38 +159,34 @@ export default function DeploymentPanel() {
     <div className="p-6">
       <PageMeta title="Deployment Panel" />
       
-      {/* Header */}
-      <div className="mb-6 flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Deployment Panel</h1>
-          <p className="text-gray-600 dark:text-gray-400 mt-1">
-            Check readiness and deploy your site
-          </p>
-        </div>
-        <div className="flex gap-2">
-          <Button
-            variant="outline"
-            onClick={() => navigate(`/sites/${siteId}`)}
-          >
-            Back to Dashboard
-          </Button>
-          <Button
-            variant="outline"
-            onClick={handleRollback}
-            disabled={!selectedBlueprintId}
-          >
-            <RotateCcwIcon className="w-4 h-4 mr-2" />
-            Rollback
-          </Button>
-          <Button
-            variant="primary"
-            onClick={handleDeploy}
-            disabled={deploying || !readiness?.ready || !selectedBlueprintId}
-          >
-            <RocketIcon className={`w-4 h-4 mr-2 ${deploying ? 'animate-pulse' : ''}`} />
-            {deploying ? 'Deploying...' : 'Deploy'}
-          </Button>
-        </div>
+      <PageHeader 
+        title="Deployment Panel"
+        badge={{ icon: <BoltIcon />, color: 'orange' }}
+        hideSiteSector
+      />
+      <div className="mb-6 flex justify-end gap-2">
+        <Button
+          variant="outline"
+          onClick={() => navigate(`/sites/${siteId}`)}
+        >
+          Back to Dashboard
+        </Button>
+        <Button
+          variant="outline"
+          onClick={handleRollback}
+          disabled={!selectedBlueprintId}
+        >
+          <ArrowRightIcon className="w-4 h-4 mr-2 rotate-180" />
+          Rollback
+        </Button>
+        <Button
+          variant="primary"
+          onClick={handleDeploy}
+          disabled={deploying || !readiness?.ready || !selectedBlueprintId}
+        >
+          <BoltIcon className={`w-4 h-4 mr-2 ${deploying ? 'animate-pulse' : ''}`} />
+          {deploying ? 'Deploying...' : 'Deploy'}
+        </Button>
       </div>
 
       {/* Blueprint Selector */}
@@ -286,7 +281,7 @@ export default function DeploymentPanel() {
               <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                 <div className="flex items-center justify-between mb-2">
                   <div className="flex items-center gap-2">
-                    <LinkIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+                    <GridIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                     <h3 className="font-medium text-gray-900 dark:text-white">
                       Cluster Coverage
                     </h3>
@@ -313,7 +308,7 @@ export default function DeploymentPanel() {
               <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                 <div className="flex items-center justify-between mb-2">
                   <div className="flex items-center gap-2">
-                    <CheckSquareIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+                    <CheckLineIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                     <h3 className="font-medium text-gray-900 dark:text-white">
                       Content Validation
                     </h3>
@@ -340,7 +335,7 @@ export default function DeploymentPanel() {
               <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                 <div className="flex items-center justify-between mb-2">
                   <div className="flex items-center gap-2">
-                    <TagIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+                    <BoxIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                     <h3 className="font-medium text-gray-900 dark:text-white">
                       Taxonomy Completeness
                     </h3>
@@ -366,7 +361,7 @@ export default function DeploymentPanel() {
               <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                 <div className="flex items-center justify-between mb-2">
                   <div className="flex items-center gap-2">
-                    <RefreshCwIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+                    <BoltIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                     <h3 className="font-medium text-gray-900 dark:text-white">Sync Status</h3>
                   </div>
                   {getCheckBadge(readiness.checks.sync_status)}
@@ -395,7 +390,7 @@ export default function DeploymentPanel() {
               variant="outline"
               onClick={() => loadReadiness(selectedBlueprintId!)}
             >
-              <RefreshCwIcon className="w-4 h-4 mr-2" />
+              <BoltIcon className="w-4 h-4 mr-2" />
               Refresh Checks
             </Button>
             <Button
@@ -403,7 +398,7 @@ export default function DeploymentPanel() {
               onClick={handleDeploy}
               disabled={deploying || !readiness.ready}
             >
-              <RocketIcon className={`w-4 h-4 mr-2 ${deploying ? 'animate-pulse' : ''}`} />
+              <BoltIcon className={`w-4 h-4 mr-2 ${deploying ? 'animate-pulse' : ''}`} />
               {deploying ? 'Deploying...' : 'Deploy Now'}
             </Button>
           </div>