diff --git a/src/hooks/useDocTypeMeta.ts b/src/hooks/useDocTypeMeta.ts
index 238bd06..faa04ce 100644
--- a/src/hooks/useDocTypeMeta.ts
+++ b/src/hooks/useDocTypeMeta.ts
@@ -38,7 +38,8 @@ export const useDocTypeMeta = (doctype: string) => {
         const allowOnSubmitSet = new Set<string>();
         fieldsList.forEach((field: DocTypeField) => {
           // Check both number (1) and boolean (true) formats
-          if (field.allow_on_submit === 1 || field.allow_on_submit === true) {
+          // if (field.allow_on_submit === 1 || field.allow_on_submit === true) {
+          if (field.allow_on_submit === 1){
             allowOnSubmitSet.add(field.fieldname);
           }
         });
diff --git a/src/pages/AssetDetail.tsx b/src/pages/AssetDetail.tsx
index 3a084c4..a87a9d1 100644
--- a/src/pages/AssetDetail.tsx
+++ b/src/pages/AssetDetail.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
 import { useAssetDetails, useAssetMutations } from '../hooks/useAsset';
 import { useDocTypeMeta } from '../hooks/useDocTypeMeta';
-import { FaArrowLeft, FaSave, FaEdit, FaQrcode, FaCheck } from 'react-icons/fa';
+import { FaArrowLeft, FaSave, FaEdit, FaQrcode, FaCheck, FaCalendarAlt, FaHistory, FaFileAlt, FaTrashAlt} from 'react-icons/fa';
 import type { CreateAssetData,AssetFinanceBookRow } from '../services/assetService';
 
 import LinkField from '../components/LinkField';
@@ -500,6 +500,1546 @@ const AssetDetail: React.FC = () => {
   printWindow.document.close();
 };
 
+const handlePPMPlan = async () => {
+  if (!assetName || isNewAsset) {
+    alert('Please save the asset first to view PPM Plan');
+    return;
+  }
+
+  try {
+    // Fetch maintenance logs with "Planned" status for this asset
+    const response = await apiService.apiCall<any>(
+      `/api/resource/Asset Maintenance Log?filters=[["asset_name","=","${assetName}"],["maintenance_status","=","Planned"]]&fields=["name","due_date","periodicity","custom_asset_names","asset_name","maintenance_type","assign_to_name"]`
+    );
+
+    const maintenanceLogs = response?.data || [];
+
+    // Helper function to add days/months/years
+    const addDays = (date: Date, days: number): Date => {
+      const result = new Date(date);
+      result.setDate(result.getDate() + days);
+      return result;
+    };
+
+    const addMonths = (date: Date, months: number): Date => {
+      const result = new Date(date);
+      result.setMonth(result.getMonth() + months);
+      return result;
+    };
+
+    const addYears = (date: Date, years: number): Date => {
+      const result = new Date(date);
+      result.setFullYear(result.getFullYear() + years);
+      return result;
+    };
+
+    const getNextDueDate = (currentDate: Date, periodicity: string): Date => {
+      switch (periodicity) {
+        case 'Daily':
+          return addDays(currentDate, 1);
+        case 'Weekly':
+          return addDays(currentDate, 7);
+        case 'Monthly':
+          return addMonths(currentDate, 1);
+        case 'Quarterly':
+          return addMonths(currentDate, 3);
+        case 'Half-yearly':
+          return addMonths(currentDate, 6);
+        case 'Yearly':
+          return addYears(currentDate, 1);
+        case '2 Yearly':
+          return addYears(currentDate, 2);
+        case '3 Yearly':
+          return addYears(currentDate, 3);
+        default:
+          return addMonths(currentDate, 1);
+      }
+    };
+
+    const formatDate = (date: Date): string => {
+      return date.toISOString().split('T')[0];
+    };
+
+    // Generate PPM data for next 5 years
+    const maxDate = addYears(new Date(), 5);
+    const ppmData: Array<{
+      asset_name: string;
+      custom_asset_names: string;
+      serial_number: string;
+      due_date: string;
+      periodicity: string;
+      maintenance_type: string;
+      assign_to_name: string;
+      status: string;
+    }> = [];
+
+    for (const log of maintenanceLogs) {
+      let dueDate = new Date(log.due_date);
+      const periodicity = log.periodicity || 'Monthly';
+
+      // Generate due dates for the next 5 years (max 60 iterations)
+      for (let i = 0; i < 60; i++) {
+        ppmData.push({
+          asset_name: log.asset_name || '',
+          custom_asset_names: log.custom_asset_names || '',
+          serial_number: formData.custom_serial_number || 'N/A',
+          due_date: formatDate(dueDate),
+          periodicity: periodicity,
+          maintenance_type: log.maintenance_type || '',
+          assign_to_name: log.assign_to_name || '',
+          status: 'Planned'
+        });
+
+        dueDate = getNextDueDate(dueDate, periodicity);
+
+        if (dueDate > maxDate) {
+          break;
+        }
+      }
+    }
+
+    // Sort by due date
+    ppmData.sort((a, b) => new Date(a.due_date).getTime() - new Date(b.due_date).getTime());
+
+    // Open PPM Plan window
+    const ppmWindow = window.open('', '_blank');
+    if (!ppmWindow) return;
+
+    const tableRows = ppmData.length > 0
+      ? ppmData.map((row, index) => `
+          <tr class="${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}">
+            <td class="border px-3 py-2">${row.asset_name}</td>
+            <td class="border px-3 py-2">${row.custom_asset_names}</td>
+            <td class="border px-3 py-2">${row.serial_number}</td>
+            <td class="border px-3 py-2">${row.due_date}</td>
+            <td class="border px-3 py-2">${row.periodicity}</td>
+            <td class="border px-3 py-2">${row.maintenance_type}</td>
+            <td class="border px-3 py-2">${row.assign_to_name}</td>
+            <td class="border px-3 py-2">
+              <span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">${row.status}</span>
+            </td>
+          </tr>
+        `).join('')
+      : `<tr><td colspan="8" class="border px-3 py-4 text-center text-gray-500">No planned maintenance found for this asset</td></tr>`;
+
+    ppmWindow.document.write(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>PPM Plan - ${assetName}</title>
+          <style>
+            @page {
+              margin: 0.5in;
+              size: landscape;
+            }
+            * {
+              margin: 0;
+              padding: 0;
+              box-sizing: border-box;
+            }
+            body {
+              font-family: Arial, sans-serif;
+              padding: 20px;
+              background: #f5f5f5;
+            }
+            .container {
+              max-width: 1400px;
+              margin: 0 auto;
+              background: white;
+              padding: 20px;
+              border-radius: 8px;
+              box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            }
+            .header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 20px;
+              padding-bottom: 15px;
+              border-bottom: 2px solid #3b82f6;
+            }
+            h1 {
+              font-size: 24px;
+              color: #1f2937;
+            }
+            .asset-info {
+              font-size: 14px;
+              color: #6b7280;
+            }
+            .btn {
+              padding: 10px 20px;
+              font-size: 14px;
+              border: none;
+              border-radius: 5px;
+              cursor: pointer;
+              margin-left: 10px;
+            }
+            .btn-print {
+              background: #3b82f6;
+              color: white;
+            }
+            .btn-print:hover {
+              background: #2563eb;
+            }
+            .btn-close {
+              background: #6b7280;
+              color: white;
+            }
+            .btn-close:hover {
+              background: #4b5563;
+            }
+            .table-container {
+              overflow-x: auto;
+              margin-top: 20px;
+            }
+            table {
+              width: 100%;
+              border-collapse: collapse;
+              font-size: 13px;
+            }
+            th {
+              background: #3b82f6;
+              color: white;
+              padding: 12px 8px;
+              text-align: left;
+              border: 1px solid #2563eb;
+              font-weight: 600;
+            }
+            td {
+              border: 1px solid #e5e7eb;
+              padding: 8px;
+            }
+            .bg-white { background: white; }
+            .bg-gray-50 { background: #f9fafb; }
+            .summary {
+              margin-top: 20px;
+              padding: 15px;
+              background: #f0f9ff;
+              border-radius: 5px;
+              font-size: 14px;
+              color: #1e40af;
+            }
+            @media print {
+              .no-print { display: none; }
+              body { background: white; padding: 0; }
+              .container { box-shadow: none; padding: 0; }
+            }
+          </style>
+        </head>
+        <body>
+          <div class="container">
+            <div class="header">
+              <div>
+                <h1>PPM Planner Report</h1>
+                <div class="asset-info">
+                  <strong>Asset ID:</strong> ${assetName} | 
+                  <strong>Asset Name:</strong> ${formData.asset_name || 'N/A'} |
+                  <strong>Generated:</strong> ${new Date().toLocaleDateString()}
+                </div>
+              </div>
+              <div class="no-print">
+                <button class="btn btn-print" onclick="window.print()">Print / Save PDF</button>
+                <button class="btn btn-close" onclick="window.close()">Close</button>
+              </div>
+            </div>
+            
+            <div class="table-container">
+              <table>
+                <thead>
+                  <tr>
+                    <th>Asset ID</th>
+                    <th>Asset Name</th>
+                    <th>Serial Number</th>
+                    <th>Due Date</th>
+                    <th>Periodicity</th>
+                    <th>Maintenance Type</th>
+                    <th>Assigned To</th>
+                    <th>Status</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  ${tableRows}
+                </tbody>
+              </table>
+            </div>
+            
+            <div class="summary">
+              <strong>Summary:</strong> ${ppmData.length} planned maintenance entries for the next 5 years
+            </div>
+          </div>
+        </body>
+      </html>
+    `);
+
+    ppmWindow.document.close();
+
+  } catch (err) {
+    console.error('Error fetching PPM Plan:', err);
+    alert('Failed to load PPM Plan. Please try again.');
+  }
+  };
+
+  const handleAssetHistory = async () => {
+  if (!assetName || isNewAsset) {
+    alert('Please save the asset first to view Asset History');
+    return;
+  }
+
+  try {
+    // Fetch Asset Details
+    const assetResponse = await apiService.apiCall<any>(
+      `/api/resource/Asset/${assetName}`
+    );
+    const assetData = assetResponse?.data || {};
+
+    // Fetch Work Orders
+    const workOrdersResponse = await apiService.apiCall<any>(
+      `/api/resource/Work_Order?filters=[["asset","=","${assetName}"]]&fields=["name","work_order_type","repair_status","creation","total_repair_cost"]`
+    );
+    const workOrders = workOrdersResponse?.data || [];
+
+    // Fetch Asset Maintenance Records
+    const maintenanceResponse = await apiService.apiCall<any>(
+      `/api/resource/Asset Maintenance?filters=[["asset_name","=","${assetName}"]]&fields=["name","maintenance_team","custom_type_of_maintenance"]`
+    );
+    const maintenanceRecords = maintenanceResponse?.data || [];
+
+    // Fetch Maintenance Logs
+    let maintenanceLogs: any[] = [];
+    let maintenanceTasks: any[] = [];
+    
+    for (const maintenance of maintenanceRecords) {
+      // Fetch full maintenance record with tasks
+      const fullMaintenanceResponse = await apiService.apiCall<any>(
+        `/api/resource/Asset Maintenance/${maintenance.name}`
+      );
+      const fullMaintenance = fullMaintenanceResponse?.data || {};
+      
+      if (fullMaintenance.asset_maintenance_tasks) {
+        maintenanceTasks = [...maintenanceTasks, ...fullMaintenance.asset_maintenance_tasks.map((t: any) => ({
+          ...t,
+          maintenance_id: maintenance.name
+        }))];
+      }
+
+      // Fetch maintenance logs
+      const logsResponse = await apiService.apiCall<any>(
+        `/api/resource/Asset Maintenance Log?filters=[["asset_maintenance","=","${maintenance.name}"]]&fields=["name","maintenance_status","assign_to_name","maintenance_type","due_date","completion_date","periodicity","actions_performed"]&order_by=completion_date desc`
+      );
+      maintenanceLogs = [...maintenanceLogs, ...(logsResponse?.data || [])];
+    }
+
+    // Separate completed and pending logs
+    const completedLogs = maintenanceLogs.filter(log => log.maintenance_status === 'Completed');
+    const pendingLogs = maintenanceLogs.filter(log => log.maintenance_status !== 'Completed');
+
+    // Count maintenance status
+    const statusCounts: Record<string, number> = {};
+    maintenanceLogs.forEach(log => {
+      statusCounts[log.maintenance_status] = (statusCounts[log.maintenance_status] || 0) + 1;
+    });
+
+    // Get spare parts from asset
+    const spareParts = assetData.custom_spare_parts || [];
+    
+    // Group spare parts by work order
+    const groupedSpareParts: Record<string, any[]> = {};
+    spareParts.forEach((sp: any) => {
+      const wo = sp.work_order || 'Unassigned';
+      if (!groupedSpareParts[wo]) {
+        groupedSpareParts[wo] = [];
+      }
+      groupedSpareParts[wo].push(sp);
+    });
+
+    // Open Asset History window
+    const historyWindow = window.open('', '_blank');
+    if (!historyWindow) return;
+
+    // Generate Work Orders HTML
+    const workOrdersHTML = workOrders.length > 0
+      ? workOrders.map((wo: any, index: number) => {
+          const statusClass = wo.repair_status === 'Completed' 
+            ? 'bg-green-100 text-green-800' 
+            : wo.repair_status === 'Work In Progress'
+            ? 'bg-yellow-100 text-yellow-800'
+            : 'bg-gray-100 text-gray-800';
+          return `
+            <tr class="${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}">
+              <td class="px-4 py-3 font-medium text-blue-600">${wo.name}</td>
+              <td class="px-4 py-3">${wo.work_order_type || '-'}</td>
+              <td class="px-4 py-3"><span class="px-2 py-1 rounded-full text-xs font-medium ${statusClass}">${wo.repair_status || '-'}</span></td>
+              <td class="px-4 py-3 font-semibold">${parseFloat(wo.total_repair_cost || 0).toFixed(2)} ر.س</td>
+              <td class="px-4 py-3 text-gray-500">${wo.creation ? new Date(wo.creation).toLocaleDateString() : '-'}</td>
+            </tr>
+          `;
+        }).join('')
+      : `<tr><td colspan="5" class="px-4 py-8 text-center text-gray-500">No Work Orders Found</td></tr>`;
+
+    // Generate Spare Parts HTML
+    let sparePartsHTML = '';
+    if (Object.keys(groupedSpareParts).length > 0) {
+      Object.keys(groupedSpareParts).forEach(workOrder => {
+        sparePartsHTML += `
+          <div class="mb-4">
+            <div class="bg-amber-50 border-l-4 border-amber-400 px-4 py-2 mb-2">
+              <span class="font-medium">Work Order: </span>
+              <span class="text-blue-600 font-medium">${workOrder}</span>
+            </div>
+            <table class="w-full">
+              <thead>
+                <tr class="bg-gray-100">
+                  <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600">Item Name</th>
+                  <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600">Quantity</th>
+                  <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600">Cost</th>
+                  <th class="px-4 py-2 text-left text-xs font-semibold text-gray-600">Amount</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${groupedSpareParts[workOrder].map((sp: any, idx: number) => `
+                  <tr class="${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50'}">
+                    <td class="px-4 py-2">${sp.item_code || '-'}</td>
+                    <td class="px-4 py-2">${sp.qty || 0}</td>
+                    <td class="px-4 py-2">${sp.rate || 0} ر.س</td>
+                    <td class="px-4 py-2 font-medium">${sp.amount || 0} ر.س</td>
+                  </tr>
+                `).join('')}
+              </tbody>
+            </table>
+          </div>
+        `;
+      });
+    } else {
+      sparePartsHTML = `<p class="text-gray-500 text-center py-8">No Spare Parts Used</p>`;
+    }
+
+    // Generate Maintenance Records HTML
+    const maintenanceRecordsHTML = maintenanceRecords.length > 0
+      ? maintenanceRecords.map((m: any) => `
+          <div class="bg-white border rounded-lg p-4 mb-3 shadow-sm">
+            <div class="flex justify-between items-start">
+              <div>
+                <p class="text-sm text-gray-500">Maintenance ID</p>
+                <p class="font-medium text-blue-600">${m.name}</p>
+              </div>
+              <div class="text-right">
+                <p class="text-sm text-gray-500">Type</p>
+                <p class="font-medium">${m.custom_type_of_maintenance || '-'}</p>
+              </div>
+            </div>
+            <div class="mt-2">
+              <p class="text-sm text-gray-500">Maintenance Team</p>
+              <p class="font-medium">${m.maintenance_team || '-'}</p>
+            </div>
+          </div>
+        `).join('')
+      : `<p class="text-gray-500 text-center py-8">No Maintenance Records Found</p>`;
+
+    // Generate Maintenance Tasks HTML
+    const maintenanceTasksHTML = maintenanceTasks.length > 0
+      ? maintenanceTasks.map((task: any, index: number) => `
+          <tr class="${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}">
+            <td class="px-4 py-3">${task.assign_to_name || '-'}</td>
+            <td class="px-4 py-3">${task.periodicity || '-'}</td>
+            <td class="px-4 py-3">${task.next_due_date || '-'}</td>
+            <td class="px-4 py-3 text-blue-600 text-sm">${task.maintenance_id || '-'}</td>
+          </tr>
+        `).join('')
+      : `<tr><td colspan="4" class="px-4 py-8 text-center text-gray-500">No Maintenance Tasks Found</td></tr>`;
+
+    // Generate Status Summary HTML
+    const statusSummaryHTML = Object.keys(statusCounts).length > 0
+      ? Object.entries(statusCounts).map(([status, count], index) => {
+          const statusClass = status === 'Completed' 
+            ? 'bg-green-100 text-green-800 border-green-200' 
+            : status === 'Planned'
+            ? 'bg-blue-100 text-blue-800 border-blue-200'
+            : 'bg-yellow-100 text-yellow-800 border-yellow-200';
+          return `
+            <div class="flex items-center justify-between p-3 rounded-lg border ${statusClass}">
+              <span class="font-medium">${status}</span>
+              <span class="text-2xl font-bold">${count}</span>
+            </div>
+          `;
+        }).join('')
+      : `<p class="text-gray-500 text-center">No Data</p>`;
+
+    // Generate Completed Logs HTML
+    const completedLogsHTML = completedLogs.length > 0
+      ? completedLogs.map((log: any, index: number) => `
+          <tr class="${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}">
+            <td class="px-3 py-2 text-blue-600 font-medium">${log.name}</td>
+            <td class="px-3 py-2">${log.assign_to_name || '-'}</td>
+            <td class="px-3 py-2">${log.maintenance_type || '-'}</td>
+            <td class="px-3 py-2">${log.due_date || '-'}</td>
+            <td class="px-3 py-2 text-green-600 font-medium">${log.completion_date || '-'}</td>
+            <td class="px-3 py-2">${log.periodicity || '-'}</td>
+            <td class="px-3 py-2 text-sm text-gray-600">${log.actions_performed || '-'}</td>
+          </tr>
+        `).join('')
+      : `<tr><td colspan="7" class="px-4 py-8 text-center text-gray-500">No Completed Maintenance Logs</td></tr>`;
+
+    // Generate Pending Logs HTML
+    const pendingLogsHTML = pendingLogs.length > 0
+      ? pendingLogs.map((log: any, index: number) => {
+          const statusClass = log.maintenance_status === 'Planned' 
+            ? 'bg-blue-100 text-blue-800' 
+            : 'bg-yellow-100 text-yellow-800';
+          return `
+            <tr class="${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}">
+              <td class="px-3 py-2 text-blue-600 font-medium">${log.name}</td>
+              <td class="px-3 py-2">${log.assign_to_name || '-'}</td>
+              <td class="px-3 py-2">${log.maintenance_type || '-'}</td>
+              <td class="px-3 py-2">${log.due_date || '-'}</td>
+              <td class="px-3 py-2">${log.periodicity || '-'}</td>
+              <td class="px-3 py-2"><span class="px-2 py-1 rounded-full text-xs font-medium ${statusClass}">${log.maintenance_status || '-'}</span></td>
+              <td class="px-3 py-2 text-sm text-gray-600">${log.actions_performed || '-'}</td>
+            </tr>
+          `;
+        }).join('')
+      : `<tr><td colspan="7" class="px-4 py-8 text-center text-gray-500">No Pending/Planned Maintenance Logs</td></tr>`;
+
+    historyWindow.document.write(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>Asset History - ${assetName}</title>
+          <script src="https://cdn.tailwindcss.com"></script>
+          <style>
+            @page { margin: 0.5in; size: landscape; }
+            @media print {
+              .no-print { display: none !important; }
+              .page-break { page-break-before: always; }
+            }
+            body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
+            .section-card {
+              background: white;
+              border-radius: 12px;
+              box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+              margin-bottom: 24px;
+              overflow: hidden;
+            }
+            .section-header {
+              padding: 16px 20px;
+              font-weight: 600;
+              font-size: 16px;
+              display: flex;
+              align-items: center;
+              gap: 10px;
+            }
+            .section-content {
+              padding: 16px 20px;
+            }
+            table {
+              width: 100%;
+              border-collapse: collapse;
+            }
+            th {
+              text-align: left;
+              padding: 12px 16px;
+              font-size: 12px;
+              font-weight: 600;
+              text-transform: uppercase;
+              letter-spacing: 0.5px;
+            }
+            td {
+              border-top: 1px solid #e5e7eb;
+            }
+          </style>
+        </head>
+        <body class="bg-gray-100 min-h-screen">
+          <!-- Header -->
+          <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-6 px-8 no-print">
+            <div class="max-w-7xl mx-auto flex justify-between items-center">
+              <div>
+                <h1 class="text-2xl font-bold">Asset History</h1>
+                <p class="text-blue-200 mt-1">Complete history and maintenance records</p>
+              </div>
+              <div class="flex gap-3">
+                <button onclick="window.print()" class="bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-blue-50 transition">
+                  🖨️ Print / Save PDF
+                </button>
+                <button onclick="window.close()" class="bg-blue-700 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition">
+                  ✕ Close
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="max-w-7xl mx-auto py-6 px-8">
+            <!-- Asset Details Card -->
+            <div class="section-card">
+              <div class="section-header bg-gradient-to-r from-blue-500 to-blue-600 text-white">
+                <span>🔍</span> Asset Details
+              </div>
+              <div class="section-content">
+                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+                  <div class="bg-gray-50 rounded-lg p-4">
+                    <p class="text-xs text-gray-500 uppercase tracking-wide">Asset ID</p>
+                    <p class="font-semibold text-blue-600 mt-1">${assetName}</p>
+                  </div>
+                  <div class="bg-gray-50 rounded-lg p-4">
+                    <p class="text-xs text-gray-500 uppercase tracking-wide">Asset Name</p>
+                    <p class="font-semibold mt-1">${assetData.asset_name || '-'}</p>
+                  </div>
+                  <div class="bg-gray-50 rounded-lg p-4">
+                    <p class="text-xs text-gray-500 uppercase tracking-wide">🏥 Hospital</p>
+                    <p class="font-semibold mt-1">${assetData.company || '-'}</p>
+                  </div>
+                  <div class="bg-gray-50 rounded-lg p-4">
+                    <p class="text-xs text-gray-500 uppercase tracking-wide">📍 Location</p>
+                    <p class="font-semibold mt-1">${assetData.location || '-'}</p>
+                  </div>
+                  <div class="bg-gray-50 rounded-lg p-4">
+                    <p class="text-xs text-gray-500 uppercase tracking-wide">🚛 Supplier</p>
+                    <p class="font-semibold mt-1">${assetData.supplier || '-'}</p>
+                  </div>
+                  <div class="bg-amber-50 rounded-lg p-4 border border-amber-200">
+                    <p class="text-xs text-amber-600 uppercase tracking-wide">💰 Total Repair Cost</p>
+                    <p class="font-bold text-amber-700 mt-1 text-lg">${assetData.custom_total_spare_parts_amount || 0} ر.س</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Two Column Layout -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <!-- Work Orders -->
+              <div class="section-card">
+                <div class="section-header bg-gradient-to-r from-indigo-500 to-indigo-600 text-white">
+                  <span>🔗</span> Linked Work Orders
+                </div>
+                <div class="overflow-x-auto">
+                  <table>
+                    <thead class="bg-gray-50">
+                      <tr>
+                        <th class="text-gray-600">Work Order No</th>
+                        <th class="text-gray-600">Type</th>
+                        <th class="text-gray-600">Status</th>
+                        <th class="text-gray-600">Repair Cost</th>
+                        <th class="text-gray-600">Created</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      ${workOrdersHTML}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+              <!-- Spare Parts -->
+              <div class="section-card">
+                <div class="section-header bg-gradient-to-r from-orange-500 to-orange-600 text-white">
+                  <span>🛠️</span> Items Used for Repair
+                </div>
+                <div class="section-content max-h-96 overflow-y-auto">
+                  ${sparePartsHTML}
+                </div>
+              </div>
+            </div>
+
+            <!-- Maintenance Section -->
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
+              <!-- Maintenance Records -->
+              <div class="section-card">
+                <div class="section-header bg-gradient-to-r from-teal-500 to-teal-600 text-white">
+                  <span>🛠️</span> Maintenance Records
+                </div>
+                <div class="section-content max-h-80 overflow-y-auto">
+                  ${maintenanceRecordsHTML}
+                </div>
+              </div>
+
+              <!-- Maintenance Tasks -->
+              <div class="section-card lg:col-span-2">
+                <div class="section-header bg-gradient-to-r from-purple-500 to-purple-600 text-white">
+                  <span>📋</span> Maintenance Tasks
+                </div>
+                <div class="overflow-x-auto">
+                  <table>
+                    <thead class="bg-gray-50">
+                      <tr>
+                        <th class="text-gray-600">Assigned To</th>
+                        <th class="text-gray-600">Periodicity</th>
+                        <th class="text-gray-600">Next Due Date</th>
+                        <th class="text-gray-600">Maintenance ID</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      ${maintenanceTasksHTML}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+
+            <!-- Periodic Maintenance Summary -->
+            <div class="section-card mt-6">
+              <div class="section-header bg-gradient-to-r from-cyan-500 to-cyan-600 text-white">
+                <span>📜</span> Periodic Maintenance Summary
+              </div>
+              <div class="section-content">
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  ${statusSummaryHTML}
+                </div>
+              </div>
+            </div>
+
+            <!-- Completed Maintenance Logs -->
+            <div class="section-card mt-6">
+              <div class="section-header bg-gradient-to-r from-green-500 to-green-600 text-white">
+                <span>✅</span> Completed Maintenance Logs
+              </div>
+              <div class="overflow-x-auto">
+                <table>
+                  <thead class="bg-gray-50">
+                    <tr>
+                      <th class="text-gray-600">Log ID</th>
+                      <th class="text-gray-600">Assigned To</th>
+                      <th class="text-gray-600">Type</th>
+                      <th class="text-gray-600">Due Date</th>
+                      <th class="text-gray-600">Completed</th>
+                      <th class="text-gray-600">Periodicity</th>
+                      <th class="text-gray-600">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${completedLogsHTML}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <!-- Pending/Planned Maintenance Logs -->
+            <div class="section-card mt-6">
+              <div class="section-header bg-gradient-to-r from-amber-500 to-amber-600 text-white">
+                <span>⏳</span> Pending/Planned Maintenance Logs
+              </div>
+              <div class="overflow-x-auto">
+                <table>
+                  <thead class="bg-gray-50">
+                    <tr>
+                      <th class="text-gray-600">Log ID</th>
+                      <th class="text-gray-600">Assigned To</th>
+                      <th class="text-gray-600">Type</th>
+                      <th class="text-gray-600">Due Date</th>
+                      <th class="text-gray-600">Periodicity</th>
+                      <th class="text-gray-600">Status</th>
+                      <th class="text-gray-600">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${pendingLogsHTML}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <!-- Footer -->
+            <div class="text-center text-gray-500 text-sm mt-8 pb-8">
+              Generated on ${new Date().toLocaleString()} | Asset: ${assetName}
+            </div>
+          </div>
+        </body>
+      </html>
+    `);
+
+    historyWindow.document.close();
+
+  } catch (err) {
+    console.error('Error fetching Asset History:', err);
+    alert('Failed to load Asset History. Please try again.');
+  }
+  };
+
+  const handleInstallationReport = () => {
+    if (!assetName || isNewAsset) {
+      alert('Please save the asset first to view Installation Report');
+      return;
+    }
+
+    const reportWindow = window.open('', '_blank');
+    if (!reportWindow) return;
+
+    // Get current date formatted
+    const today = new Date();
+    const formatDate = (date: Date) => {
+      const day = String(date.getDate()).padStart(2, '0');
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const year = date.getFullYear();
+      return `${day}/${month}/${year}`;
+    };
+
+    // Get spare parts from asset data
+    const spareParts = (asset as any)?.custom_spare_parts || [];
+    
+    // Generate table rows for spare parts
+    let sparePartsRows = '';
+    const minRows = 3;
+    
+    if (spareParts.length > 0) {
+      spareParts.forEach((item: any, index: number) => {
+        sparePartsRows += `
+          <tr>
+            <td>${index + 1}</td>
+            <td>${item.item_name || ''}</td>
+            <td>${item.item_code || ''}</td>
+            <td>${item.uom || ''}</td>
+            <td>${item.qty || ''}</td>
+          </tr>
+        `;
+      });
+      // Add empty rows to fill up to minimum
+      for (let i = spareParts.length; i < minRows; i++) {
+        sparePartsRows += `
+          <tr>
+            <td>${i + 1}</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+          </tr>
+        `;
+      }
+    } else {
+      // All empty rows
+      for (let i = 0; i < minRows; i++) {
+        sparePartsRows += `
+          <tr>
+            <td>${i + 1}</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+          </tr>
+        `;
+      }
+    }
+
+    reportWindow.document.write(`
+      <!DOCTYPE html>
+      <html lang="ar" dir="rtl">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Installation Report - ${assetName}</title>
+        <style>
+          @page {
+            margin: 0.5in;
+            size: A4;
+          }
+          body {
+            font-family: 'Times New Roman', serif;
+            margin: 0;
+            padding: 20px;
+            font-size: 12px;
+            line-height: 1.3;
+            direction: rtl;
+            text-align: right;
+          }
+          
+          .header-line {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 5px;
+          }
+          
+          .header-right {
+            font-weight: bold;
+          }
+          
+          .header-center {
+            font-weight: bold;
+            text-align: center;
+            flex-grow: 1;
+          }
+          
+          .header-left {
+            font-weight: bold;
+          }
+          
+          .dotted-line {
+            border-bottom: 1px dotted #000;
+            display: inline-block;
+            min-width: 100px;
+          }
+          
+          .main-content {
+            margin: 15px 0;
+            text-align: justify;
+          }
+          
+          .equipment-section {
+            margin: 15px 0;
+          }
+          
+          .equipment-line {
+            display: flex;
+            justify-content: space-between;
+            margin: 8px 0;
+            font-weight: bold;
+          }
+          
+          .equipment-item {
+            display: flex;
+            align-items: center;
+            direction: ltr;
+            text-align: left;
+            width: 48%;
+          }
+          
+          .arabic-label {
+            direction: rtl;
+            text-align: right;
+            margin-left: 10px;
+          }
+          
+          .colon {
+            margin: 0 5px;
+          }
+          
+          .field-value {
+            border-bottom: 1px solid #000;
+            min-width: 120px;
+            display: inline-block;
+            height: 18px;
+          }
+          
+          .location-line {
+            margin: 10px 0;
+            font-weight: bold;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+          }
+          
+          .location-arabic {
+            direction: rtl;
+            text-align: right;
+          }
+          
+          .location-english {
+            direction: ltr;
+            text-align: left;
+          }
+          
+          .parts-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 15px 0;
+            border: 2px solid #000;
+          }
+          
+          .parts-table th,
+          .parts-table td {
+            border: 1px solid #000;
+            padding: 6px;
+            text-align: center;
+            font-weight: bold;
+            vertical-align: middle;
+          }
+          
+          .parts-table th {
+            background-color: #f8f8f8;
+            font-size: 11px;
+          }
+          
+          .parts-table .row-number {
+            width: 8%;
+          }
+          
+          .parts-table .description {
+            width: 35%;
+          }
+          
+          .parts-table .part-number {
+            width: 25%;
+          }
+          
+          .parts-table .unit {
+            width: 16%;
+          }
+          
+          .parts-table .quantity {
+            width: 16%;
+          }
+          
+          .footer-text {
+            margin: 20px 0;
+            text-align: justify;
+          }
+          
+          .signatures-section {
+            margin-top: 40px;
+          }
+          
+          .signature-row {
+            display: flex;
+            justify-content: space-between;
+            margin: 30px 0;
+          }
+          
+          .signature-block-right {
+            text-align: left;
+            width: 45%;
+            float: right;
+          }
+          
+          .signature-block-left {
+            text-align: left;
+            width: 45%;
+            float: left;
+          }
+          
+          .signature-title {
+            font-weight: bold;
+            margin-bottom: 3px;
+            font-size: 11px;
+          }
+          
+          .signature-line {
+            border-bottom: 1px solid #000;
+            height: 25px;
+            margin: 8px 0;
+            display: inline-block;
+            width: 120px;
+            margin-left: 10px;
+          }
+          
+          .signature-label {
+            font-size: 10px;
+            font-weight: bold;
+          }
+          
+          .seal-section {
+            text-align: center;
+            margin-top: 30px;
+            font-weight: bold;
+            font-size: 12px;
+          }
+        </style>
+      </head>
+      <body>
+        <!-- Header Section -->
+        <div class="header-line">
+          <div class="header-right">المملكة العربية السعودية</div>
+          <div class="header-center"></div>
+          <div class="header-left">الرقم: <span class="dotted-line">${assetName || ''}</span></div>
+        </div>
+        
+        <div class="header-line">
+          <div class="header-right">تجمع الجوف الصحي</div>
+          <div class="header-center">محضر تركيب</div>
+          <div class="header-left">التاريخ: <span class="dotted-line">${formatDate(today)}</span> هـ</div>
+        </div>
+        
+        <div class="header-line">
+          <div class="header-right">الصيانة الطبية</div>
+          <div class="header-center">INSTALLATION REPORT</div>
+          <div class="header-left">الموافق: <span class="dotted-line">${formatDate(today)}</span> م</div>
+        </div>
+        
+        <div style="margin: 15px 0; font-weight: bold;">
+          مستشفى <span class="dotted-line" style="min-width: 200px;">${formData.company || ''}</span>
+        </div>
+
+        <!-- Main Content -->
+        <div class="main-content">
+          تشهد مستشفى <span class="dotted-line" style="min-width: 180px;">${formData.company || ''}</span> بأن <span class="dotted-line" style="min-width: 180px;">${formData.supplier || ''}</span> قامت بتركيب و توريد قطع الغيار الخاصة التالية والتابعة:
+        </div>
+
+        <!-- Equipment Information -->
+        <div class="equipment-section">
+          <div class="equipment-line">
+            <div class="equipment-item">
+              <span>EQUIPMENT NAME</span>
+              <span class="colon">:</span>
+              <span class="field-value">${formData.asset_name || ''}</span>
+              <span class="arabic-label">اسم الجهاز:</span>
+            </div>
+            <div class="equipment-item">
+              <span>MFR</span>
+              <span class="colon">:</span>
+              <span class="field-value">${formData.custom_manufacturer || ''}</span>
+              <span class="arabic-label">صناعة:</span>
+            </div>
+          </div>
+          
+          <div class="equipment-line">
+            <div class="equipment-item">
+              <span>SERIAL NO</span>
+              <span class="colon">:</span>
+              <span class="field-value">${formData.custom_serial_number || ''}</span>
+              <span class="arabic-label">مسلسل:</span>
+            </div>
+            <div class="equipment-item">
+              <span>MODEL</span>
+              <span class="colon">:</span>
+              <span class="field-value">${formData.custom_model || ''}</span>
+              <span class="arabic-label">موديل:</span>
+            </div>
+          </div>
+        </div>
+        
+        <div class="location-line">
+          <span class="location-arabic">
+            التابع لقسم:
+          </span>
+          <span class="field-value" style="min-width: 300px; flex-grow: 1; margin: 0 10px; text-align: left;">${formData.location || ''}</span>
+          <span class="location-english">
+            LOCATION:
+          </span>
+        </div>
+
+        <!-- Parts Table -->
+        <table class="parts-table">
+          <thead>
+            <tr>
+              <th class="row-number">م</th>
+              <th class="description">وصف القطعة<br>DESCRIPTION</th>
+              <th class="part-number">رقم القطعة<br>PART NO.</th>
+              <th class="unit">الوحدة<br>UNIT</th>
+              <th class="quantity">الكمية<br>QTY.</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${sparePartsRows}
+          </tbody>
+        </table>
+
+        <!-- Footer Text -->
+        <div class="footer-text">
+          وذلك طبقا لعقد صيانة وإصلاح الأجهزة الطبية بمستشفى <span class="dotted-line" style="min-width: 150px;">${formData.company || ''}</span> والجهاز يعمل بحالة جيدة.
+          <br><br>
+          وﷲ الموفق .....
+        </div>
+
+        <!-- Signatures Section -->
+        <div class="signatures-section">
+          <!-- First Row -->
+          <div class="signature-row">
+            <div class="signature-block-right">
+              <div class="signature-title">المسئول في القسم &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dept. Responsible</div>
+              <div><span class="signature-line"></span><span class="signature-label">Name</span></div>
+              <div><span class="signature-line"></span><span class="signature-label">Sign</span></div>
+            </div>
+            
+            <div class="signature-block-left">
+              <div class="signature-title">مدير شركة سمامة &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Site Manager</div>
+              <div><span class="signature-line"></span><span class="signature-label">Name</span></div>
+              <div><span class="signature-line"></span><span class="signature-label">Sign</span></div>
+            </div>
+          </div>
+          
+          <!-- Installation Engineer - Right aligned -->
+          <div style="text-align: left; margin: 25px 0; width: 45%; float: right; clear: both;">
+            <div class="signature-title">مهندس/ فني التركيب &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Installation Eng</div>
+            <div><span class="signature-line"></span><span class="signature-label">Name</span></div>
+            <div><span class="signature-line"></span><span class="signature-label">Sign</span></div>
+          </div>
+          <div style="clear: both;"></div>
+          
+          <!-- Second Row -->
+          <div class="signature-row">
+            <div class="signature-block-right">
+              <div class="signature-title">مشرف الوزارة بالمستشفى &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Hospital Supervisor</div>
+              <div><span class="signature-line"></span><span class="signature-label">Name</span></div>
+              <div><span class="signature-line"></span><span class="signature-label">Sign</span></div>
+            </div>
+            
+            <div class="signature-block-left">
+              <div class="signature-title">مدير المستشفى/ المركز &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Hospital Manager</div>
+              <div><span class="signature-line"></span><span class="signature-label">Name</span></div>
+              <div><span class="signature-line"></span><span class="signature-label">Sign</span></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Official Seal -->
+        <div class="seal-section">
+          الختم الرسمي
+        </div>
+
+        <script>
+          window.onload = function() {
+            window.print();
+          };
+        </script>
+      </body>
+      </html>
+    `);
+
+    reportWindow.document.close();
+  };
+
+  const handleDismantlingReport = () => {
+    if (!assetName || isNewAsset) {
+      alert('Please save the asset first to view Dismantling Report');
+      return;
+    }
+
+    const reportWindow = window.open('', '_blank');
+    if (!reportWindow) return;
+
+    // Get current date formatted
+    const today = new Date();
+    const formatDate = (date: Date) => {
+      const day = String(date.getDate()).padStart(2, '0');
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const year = date.getFullYear();
+      return `${day}/${month}/${year}`;
+    };
+
+    // Calculate usage period if available
+    const creationDate = asset?.creation ? new Date(asset.creation) : null;
+    let usagePeriod = '';
+    if (creationDate) {
+      const years = Math.floor((today.getTime() - creationDate.getTime()) / (1000 * 60 * 60 * 24 * 365));
+      const months = Math.floor(((today.getTime() - creationDate.getTime()) % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24 * 30));
+      usagePeriod = `${years} سنة و ${months} شهر`;
+    }
+
+    reportWindow.document.write(`
+      <!DOCTYPE html>
+      <html lang="ar" dir="rtl">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Dismantling Report - ${assetName}</title>
+        <style>
+          @page {
+            margin: 0.5in;
+            size: A4;
+          }
+          body {
+            font-family: 'Times New Roman', serif;
+            margin: 0;
+            padding: 20px;
+            font-size: 12px;
+            line-height: 1.4;
+            direction: rtl;
+            text-align: right;
+          }
+          
+          .header {
+            text-align: left;
+            margin-bottom: 30px;
+          }
+          
+          .title {
+            text-align: center;
+            font-size: 14px;
+            font-weight: bold;
+            margin: 20px 0;
+          }
+          
+          .department-line {
+            margin: 15px 0;
+            font-weight: bold;
+          }
+          
+          .section-title {
+            font-weight: bold;
+            margin: 20px 0 10px 0;
+          }
+          
+          .reasons-section {
+            margin: 20px 0;
+          }
+          
+          .reasons-table {
+            width: 60%;
+            border-collapse: collapse;
+            margin: 10px 0;
+          }
+          
+          .reasons-table td {
+            border: 2px solid #000;
+            padding: 8px;
+            text-align: center;
+            font-weight: bold;
+            width: 16.66%;
+            height: 30px;
+          }
+          
+          .reason-text {
+            margin: 8px 0;
+            text-align: right;
+            font-size: 11px;
+            direction: rtl;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+          }
+          
+          .committee-opinion {
+            margin: 20px 0;
+            padding: 10px;
+            border: 1px solid #ccc;
+            text-align: justify;
+          }
+          
+          .signatures-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+          }
+          
+          .signatures-table td {
+            padding: 8px;
+            text-align: right;
+            vertical-align: top;
+            font-weight: bold;
+            direction: rtl;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+          }
+          
+          .signature-title {
+            font-size: 11px;
+            height: 30px;
+            font-weight: bold;
+          }
+          
+          .signature-field {
+            height: 25px;
+            font-size: 10px;
+          }
+          
+          .hospital-manager {
+            text-align: right;
+            margin: 20px 0;
+          }
+          
+          .hospital-manager-table {
+            width: 100%;
+            margin: 0;
+            border-collapse: collapse;
+            float: right;
+          }
+          
+          .hospital-manager-table td {
+            padding: 8px;
+            text-align: right;
+            font-weight: bold;
+            direction: rtl;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+          }
+          
+          .seal-section {
+            text-align: center;
+            margin: 30px 0;
+            font-weight: bold;
+          }
+          
+          .footer {
+            margin-top: 40px;
+            text-align: right;
+          }
+          
+          .footer-title {
+            font-weight: bold;
+            margin-bottom: 5px;
+            color: #0066cc;
+          }
+          
+          .footer-name {
+            font-size: 11px;
+            color: #0066cc;
+          }
+          
+          .logo {
+            width: 100px;
+            height: 60px;
+            margin: 0;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+          }
+
+          .logo img {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+          }
+          
+          .equipment-table {
+            width: 100%;
+            border: 1px solid black;
+            border-collapse: collapse;
+          }
+          
+          .equipment-table td {
+            width: 25%;
+            border: 1px solid black;
+            padding: 8px;
+          }
+        </style>
+      </head>
+      <body>
+        <!-- Header Section -->
+        <div class="header">
+          <div class="logo"><img src='/files/SEMH!.png' onerror="this.style.display='none'"></div>
+        </div>
+
+        <!-- Title -->
+        <div class="title">
+          محضر تكهين / إبعاد عن الخدمة
+        </div>
+
+        <!-- Department -->
+        <div class="department-line">
+          القسم : <span style="border-bottom: 1px solid #000; min-width: 200px; display: inline-block;">${formData.department || ''}</span>
+        </div>
+
+        <!-- Equipment Data Section -->
+        <div class="section-title">0-1 بيانات الجهاز المطلوب تكهينه :</div>
+        
+        <table class="equipment-table">
+          <tr>
+            <td>اسم الجهاز</td>
+            <td>${formData.asset_name || ''}</td>
+            <td>الرقم التسلسلي</td>
+            <td>${formData.custom_serial_number || ''}</td>
+          </tr>
+          <tr>
+            <td>الشركة الصانعة</td>
+            <td>${formData.custom_manufacturer || ''}</td>
+            <td>تاريخ التوريد</td>
+            <td>${creationDate ? formatDate(creationDate) : ''}</td>
+          </tr>
+          <tr>
+            <td>الطراز/الموديل</td>
+            <td>${formData.custom_model || ''}</td>
+            <td>مدة استخدام الجهاز</td>
+            <td>${usagePeriod}</td>
+          </tr>
+        </table>
+
+        <!-- Reasons Section -->
+        <div class="section-title">2- أسباب طلب التكهين / إبعاد عن الخدمة :</div>
+        
+        <table class="reasons-table">
+          <tr>
+            <td>أ</td>
+            <td>ب</td>
+            <td>ج</td>
+            <td>د</td>
+            <td>هـ</td>
+            <td>و</td>
+          </tr>
+          <tr>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+          </tr>
+        </table>
+
+        <div class="reason-text">
+          أ) تكاليف قطع الغيار المطلوبة للإصلاح أكثر من نصف قيمة الجهاز (مرفق عرض أسعار قطع الغيار اللازمة للإصلاح).
+        </div>
+        <div class="reason-text">
+          ب) توقف انتاج الجهاز وقطع الغيار من الشركة الصانعة حسب تقرير المورد.
+        </div>
+        <div class="reason-text">
+          ج) جهاز قديم وتم استخدامه أكثر من عشر سنوات.
+        </div>
+        <div class="reason-text">
+          د) ليس للجهاز وكيل معروف بالمملكة في الوقت الحالي ولا يمكن توفير قطع غيار للجهاز.
+        </div>
+        <div class="reason-text">
+          ه) تكرار أعطال الجهاز وإصلاحه على فترات متقاربة.
+        </div>
+        <div class="reason-text">
+          و) أخرى : <span style="border-bottom: 1px solid #000; min-width: 300px; display: inline-block;"></span>
+        </div>
+
+        <!-- Committee Opinion -->
+        <div class="section-title">3- مرئيات اللجنة:</div>
+        <div class="reason-text">
+          بناءاً على الفقرة أ. ج. و. يتم تكهين الجهاز وادراجه ضمن بنود الإحلال المطلوبة للمستشفى.
+        </div>
+
+        <!-- Signatures Section -->
+        <div class="section-title">توقيع اللجنة :</div>
+        
+        <table class="signatures-table">
+          <tr>
+            <td class="signature-title">المقاول</td>
+            <td class="signature-title">رئيس القسم</td>
+            <td class="signature-title">مدير الصيانة الطبية</td>
+            <td class="signature-title">مدير مراقبة المخزون</td>
+          </tr>
+          <tr>
+            <td class="signature-field">الإسم :</td>
+            <td class="signature-field">الإسم :</td>
+            <td class="signature-field">الإسم :</td>
+            <td class="signature-field">الإسم :</td>
+          </tr>
+          <tr>
+            <td class="signature-field">التوقيع :</td>
+            <td class="signature-field">التوقيع :</td>
+            <td class="signature-field">التوقيع :</td>
+            <td class="signature-field">التوقيع :</td>
+          </tr>
+          <tr>
+            <td class="signature-field">التاريخ :</td>
+            <td class="signature-field">التاريخ :</td>
+            <td class="signature-field">التاريخ :</td>
+            <td class="signature-field">التاريخ :</td>
+          </tr>
+        </table>
+
+        <!-- Hospital Manager Section -->
+        <div class="hospital-manager">
+          <table class="hospital-manager-table">
+            <tr>
+              <td class="signature-title">مدير مستشفى</td>
+            </tr>
+            <tr>
+              <td class="signature-field">الإسم :</td>
+            </tr>
+            <tr>
+              <td class="signature-field">التوقيع :</td>
+            </tr>
+            <tr>
+              <td class="signature-field">التاريخ :</td>
+            </tr>
+            <tr>
+              <td class="signature-field">الختم :</td>
+            </tr>
+          </table>
+        </div>
+
+        <!-- Arabic text after last table -->
+        <div style="clear: both; text-align: left; margin: 20px 0;">
+          <div style="font-weight: bold; margin-bottom: 5px;">الصيانة الطبية بتجمع الجوف الصحي</div>
+          <div>المهندس/عبد العزيز زايد الخمعلي</div>
+        </div>
+
+        <!-- Footer -->
+        <div class="footer">
+          <div style="color: #0066cc; font-weight: bold;">تجمع الجوف الصحي</div>
+          <div style="color: #0066cc;">Aljouf Health Cluster</div>
+        </div>
+
+        <script>
+          window.onload = function() {
+            window.print();
+          };
+        </script>
+      </body>
+      </html>
+    `);
+
+    reportWindow.document.close();
+  };
+
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
       {/* Header */}
@@ -531,22 +2071,58 @@ const AssetDetail: React.FC = () => {
             <>
               {/* Print QR Button - Only show if QR code exists */}
               {qrCodeUrl && (
+                
                 <button
                   onClick={handlePrintQR}
-                  className="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg flex items-center gap-2"
+                  className="bg-gray-600 hover:bg-gray-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
                 >
-                  <FaQrcode />
+                  <FaQrcode size={14} />
                   Print QR
                 </button>
               )}
               {/* Stay Plugged Button */}
               <button
                 onClick={handlePrintStayPlugged}
-                className="bg-purple-500 hover:bg-purple-700 text-white px-6 py-2 rounded-lg flex items-center gap-2"
+                className="bg-purple-500 hover:bg-purple-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
               >
                 {/* <FaQrcode /> */}
                 Stay Plugged
               </button>
+              {/* PPM Plan Button */}
+              <button
+                onClick={handlePPMPlan}
+                // className="bg-teal-600 hover:bg-teal-700 text-white px-6 py-2 rounded-lg flex items-center gap-2"
+                className="bg-teal-600 hover:bg-teal-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
+              >
+                <FaCalendarAlt size={14}/>
+                PPM Plan
+              </button>
+              {/* Asset History Button */}
+              <button
+                onClick={handleAssetHistory}
+                className="bg-purple-500 hover:bg-purple-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
+              >
+                <FaHistory size={14}/>
+                Asset History
+              </button>
+              {/* Installation Report Button */}
+              <button
+                onClick={handleInstallationReport}
+                className="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
+              >
+                <FaFileAlt size={14}/>
+                Installation Report
+              </button>
+              {/* Dismantling Report Button - Only show when status is Scrapped */}
+              {asset?.status === 'Scrapped' && (
+                <button
+                  onClick={handleDismantlingReport}
+                  className="bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
+                >
+                  <FaTrashAlt size={14} />
+                  Dismantling Report
+                </button>
+              )}
               <button
                 onClick={() => setIsEditing(true)}
                 className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg flex items-center gap-2"
@@ -716,7 +2292,7 @@ const AssetDetail: React.FC = () => {
                 />
               </div>
 
-              <div>
+              {/* <div>
                 <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                   System ID
                 </label>
@@ -738,7 +2314,7 @@ const AssetDetail: React.FC = () => {
                   disabled={!isEditing}
                   className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                 />
-              </div>
+              </div> */}
 
               <LinkField
                 label="Manufacturer"
@@ -763,7 +2339,7 @@ const AssetDetail: React.FC = () => {
                 />
               </div>
 
-              <div>
+              {/* <div>
                 <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                   Model Number
                 </label>
@@ -773,7 +2349,7 @@ const AssetDetail: React.FC = () => {
                   disabled={!isEditing}
                   className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                 />
-              </div>
+              </div> */}
             </div>
           </div>
 
@@ -823,7 +2399,7 @@ const AssetDetail: React.FC = () => {
                 />
               </div>
 
-              <div>
+              {/* <div>
                 <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                   Area/Unit
                 </label>
@@ -833,7 +2409,7 @@ const AssetDetail: React.FC = () => {
                   disabled={!isEditing}
                   className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                 />
-              </div>
+              </div> */}
 
               <div>
                 <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -1140,41 +2716,6 @@ const AssetDetail: React.FC = () => {
           </div>
         </div>
 
-        {/* End-of-Life Details */}
-        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 mt-6">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
-            <h2 className="text-base font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">
-              End-of-Life Details
-            </h2>
-            <div className="space-y-4">
-              <div>
-                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Expected End-of-Life Date
-                </label>
-                <input
-                  type="date"
-                  disabled={!isEditing}
-                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                />
-              </div>
-
-              <div>
-                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Disposal Method
-                </label>
-                <select
-                  disabled={!isEditing}
-                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-                >
-                  <option value="">Recycling</option>
-                  <option value="Donation">Donation</option>
-                  <option value="Sale">Sale</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </div>
-
 
       {/* Updated Financial Details */}
         <div className="mt-6">
@@ -1365,6 +2906,41 @@ const AssetDetail: React.FC = () => {
             </div>
           </div>
 
+          {/* End-of-Life Details */}
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 mt-6">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+            <h2 className="text-base font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">
+              End-of-Life Details
+            </h2>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Expected End-of-Life Date
+                </label>
+                <input
+                  type="date"
+                  disabled={!isEditing}
+                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Disposal Method
+                </label>
+                <select
+                  disabled={!isEditing}
+                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                >
+                  <option value="">Recycling</option>
+                  <option value="Donation">Donation</option>
+                  <option value="Sale">Sale</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+
 
 
         {/* Financial Details - Full Width */}
diff --git a/src/services/assetService.ts b/src/services/assetService.ts
index 90984da..2253f91 100644
--- a/src/services/assetService.ts
+++ b/src/services/assetService.ts
@@ -27,11 +27,21 @@ export interface Asset {
   modified?: string;
   owner?: string;
   modified_by?: string;
+  status?: string;
 
   calculate_depreciation?: boolean;
   gross_purchase_amount?: number;
   available_for_use_date?:string;
   finance_books?: AssetFinanceBookRow[];
+  custom_spare_parts?: Array<{
+    item_code?: string;
+    item_name?: string;
+    qty?: number;
+    rate?: number;
+    amount?: number;
+    uom?: string;
+    work_order?: string;
+  }>;
 }
 
 export interface AssetListResponse {