ss

src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.html

@@ -10,8 +10,8 @@
               <i class="bi bi-grid-3x3-gap"></i>
             </div>
             <div class="title-content">
-              <h1>Dashboard Management</h1>
-              <p>Create and manage your dashboards</p>
+              <h1>{{dashboardData?.thName}}</h1>
+              <!-- <p>Create and manage your dashboards</p> -->
             </div>
           </div>
 

src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.scss

-/* Enhanced Dashboard Management Styles */
+/* Dashboard Viewer Styles - Clean and Responsive */
 
 /* Background */
 .dashboard-background {
   background: linear-gradient(to bottom right, #f8fafc, #e0e7ff);
+  min-height: 100vh;
+}
+
+/* Error Message */
+.error-message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(to bottom right, #f8fafc, #e0e7ff);
+}
+
+.error-message-content {
+  background: white;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e5e7eb;
+  text-align: center;
+  max-width: 500px;
+}
+
+.error-icon {
+  font-size: 3rem;
+  color: #ef4444;
+  margin-bottom: 1rem;
+}
+
+.error-text {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #374151;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.error-description {
+  color: #6b7280;
+  font-size: 1rem;
 }
 
 /* Layout Classes */
@@ -20,8 +59,7 @@
 
 .dashboard-header-container {
   background: white;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   border-bottom: 1px solid #e5e7eb;
   position: sticky;
   top: 0;
@@ -124,18 +162,65 @@
   flex-shrink: 0;
 }
 
-/* Content Area */
+/* Dashboard Content Area - Full Width and Responsive */
 .dashboard-content-area {
-  max-width: 80rem;
-  margin: 0 auto;
-  padding: 1.5rem 1rem;
+  width: 100%;
+  min-height: 100vh;
+  padding: 0;
+  margin: 0;
+  background: linear-gradient(to bottom right, #f8fafc, #e0e7ff);
+}
+
+/* Dashboard Layout Container - Clean and Responsive */
+.dashboard-layout-container {
+  width: 100%;
+  min-height: 100vh;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+/* Dashboard Layout - Responsive Grid */
+.dashboard-layout {
+  width: 100% !important;
+  height: auto !important;
+  min-height: calc(100vh - 2rem);
+  background: transparent;
+
+  .e-panel {
+    border-radius: 12px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    border: 1px solid #e5e7eb;
+    background: white;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    margin: 0;
+
+    &:hover {
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      transform: translateY(-2px);
+    }
+  }
+
+  .e-panel-header {
+    display: none !important; /* Hide panel headers in viewer mode */
+  }
+
+  .e-panel-content {
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  }
 }
 
 .dashboard-content-card {
   background: white;
   border-radius: 0.75rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   border: 1px solid #e5e7eb;
   min-height: 600px;
 }
@@ -197,8 +282,7 @@
 
   &:hover {
     transform: translateY(-1px);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   }
 
   i {
@@ -288,20 +372,15 @@
 .dashboard-layout {
   .e-panel {
     border-radius: 12px;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     border: 1px solid #e5e7eb;
     transition: all 0.3s ease;
     position: relative;
     max-width: 100%;
     overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
 
     &:hover {
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-        0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
       transform: translateY(-2px);
     }
   }
@@ -313,58 +392,41 @@
     padding: 12px 16px;
     font-weight: 600;
     position: relative;
-    flex-shrink: 0;
-    min-height: 48px;
-    display: flex;
-    align-items: center;
   }
 
   .e-panel-content {
-    border-radius: unset !important;
-    background: transparent !important;
+    border-radius: 0 0 12px 12px;
     overflow: hidden;
     position: relative;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    padding: 0 !important;
   }
 }
 
-/* Syncfusion DashboardLayout Override */
+/* Syncfusion DashboardLayout Override for Viewer */
 ::ng-deep {
   #dashboard_default.e-dashboardlayout {
     width: 100% !important;
     height: auto !important;
-    max-height: calc(100vh - 300px) !important;
-    overflow: auto !important;
+    min-height: calc(100vh - 2rem) !important;
+    max-height: none !important;
+    overflow: visible !important;
     position: relative !important;
+    background: transparent !important;
+    padding: 0 !important;
+    margin: 0 !important;
 
     .e-panel {
       max-width: 100% !important;
       overflow: hidden !important;
       position: relative !important;
-      box-sizing: border-box !important;
-      display: flex !important;
-      flex-direction: column !important;
-      height: 100% !important;
-
-      /* Ensure panel respects grid boundaries */
-      min-width: 0 !important;
-      min-height: 0 !important;
+      background: white !important;
+      border: 1px solid #e5e7eb !important;
+      border-radius: 12px !important;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+      margin: 0 !important;
     }
 
     .e-panel-header {
-      flex-shrink: 0 !important;
-      min-height: 48px !important;
-      display: flex !important;
-      align-items: center !important;
-      padding: 12px 16px !important;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-      color: white !important;
-      border-radius: 12px 12px 0 0 !important;
-      font-weight: 600 !important;
+      display: none !important; /* Completely hide headers in viewer */
     }
 
     .e-panel-content {
@@ -372,110 +434,28 @@
       max-width: 100% !important;
       width: 100% !important;
       height: 100% !important;
-      box-sizing: border-box !important;
       padding: 0 !important;
       margin: 0 !important;
-      flex: 1 !important;
-      display: flex !important;
-      flex-direction: column !important;
-      min-height: 0 !important;
+      background: white !important;
+      border-radius: 12px !important;
     }
 
-    /* Widget content constraints */
+    /* Ensure widgets don't overflow */
     .e-panel .e-panel-container {
       width: 100% !important;
       height: 100% !important;
       overflow: hidden !important;
       position: relative !important;
-      box-sizing: border-box !important;
-      padding: 0 !important;
-      margin: 0 !important;
-      flex: 1 !important;
-      display: flex !important;
-      flex-direction: column !important;
-      min-height: 0 !important;
     }
 
+    /* Widget content styling */
     .e-panel .e-panel-container .content {
       width: 100% !important;
       height: 100% !important;
       overflow: hidden !important;
       position: relative !important;
-      box-sizing: border-box !important;
-      display: flex !important;
-      flex-direction: column !important;
       padding: 0 !important;
       margin: 0 !important;
-      flex: 1 !important;
-      min-height: 0 !important;
-    }
-
-    /* Resize handle styling */
-    .e-resize-handle {
-      background: #3b82f6 !important;
-      opacity: 0.7 !important;
-      transition: opacity 0.2s ease !important;
-      z-index: 1000 !important;
-    }
-
-    .e-resize-handle:hover {
-      opacity: 1 !important;
-      background: #2563eb !important;
-    }
-
-    /* Resize handle positioning */
-    .e-resize-handle.e-resize-handle-right {
-      right: -2px !important;
-      width: 4px !important;
-      cursor: ew-resize !important;
-    }
-
-    .e-resize-handle.e-resize-handle-bottom {
-      bottom: -2px !important;
-      height: 4px !important;
-      cursor: ns-resize !important;
-    }
-
-    .e-resize-handle.e-resize-handle-corner {
-      width: 8px !important;
-      height: 8px !important;
-      cursor: nw-resize !important;
-    }
-
-    /* Ensure widgets don't exceed panel boundaries and fill full space */
-    .e-panel .e-panel-container .content > * {
-      max-width: 100% !important;
-      max-height: 100% !important;
-      width: 100% !important;
-      height: 100% !important;
-      overflow: hidden !important;
-      box-sizing: border-box !important;
-      flex: 1 !important;
-      display: flex !important;
-      flex-direction: column !important;
-    }
-
-    /* Specific widget component styling */
-    .e-panel .e-panel-container .content > * {
-      width: 100% !important;
-      height: 100% !important;
-      flex: 1 !important;
-      display: flex !important;
-      flex-direction: column !important;
-      min-height: 0 !important;
-    }
-
-    /* Ensure all child elements fill the space */
-    .e-panel .e-panel-container .content > * > * {
-      width: 100% !important;
-      height: 100% !important;
-      flex: 1 !important;
-      min-height: 0 !important;
-    }
-
-    /* Force all nested elements to use full space */
-    .e-panel .e-panel-container .content * {
-      box-sizing: border-box !important;
     }
   }
 }
@@ -491,8 +471,7 @@
 
     &:hover {
       border-color: #3b82f6;
-      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-        0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     }
   }
 }
@@ -505,188 +484,94 @@
 }
 
 @keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
 }
 
-/* Responsive Design */
-@media (max-width: 1024px) {
-  .header-content {
-    padding: 0 0.75rem;
-  }
-
-  .header-left {
-    gap: 1rem;
-  }
-
-  .header-controls {
-    gap: 1rem;
+/* Responsive Design for Dashboard Viewer */
+@media (max-width: 1200px) {
+  .dashboard-layout-container {
+    padding: 0.75rem;
   }
 
-  .dashboard-selector {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.5rem;
+  ::ng-deep {
+    #dashboard_default.e-dashboardlayout {
+      min-height: calc(100vh - 1.5rem) !important;
+    }
   }
+}
 
-  .selector-label {
-    font-size: 0.8rem;
+@media (max-width: 1024px) {
+  .dashboard-layout-container {
+    padding: 0.5rem;
   }
 
-  .dashboard-select {
-    min-width: 150px;
+  .dashboard-layout {
+    .e-panel {
+      margin: 0.25rem;
+    }
   }
 
-  /* Adjust resize handles for smaller screens */
   ::ng-deep {
     #dashboard_default.e-dashboardlayout {
-      .e-resize-handle {
-        width: 6px !important;
-        height: 6px !important;
-      }
+      min-height: calc(100vh - 1rem) !important;
 
       .e-panel {
-        min-height: 120px !important;
-      }
-
-      .e-panel-content {
-        min-height: 80px !important;
+        border-radius: 8px !important;
       }
     }
   }
 }
 
 @media (max-width: 768px) {
-  .header-flex {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-    padding: 1rem 0;
-  }
-
-  .header-left {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-  }
-
-  .header-title-section {
-    justify-content: center;
-  }
-
-  .header-controls {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-  }
-
-  .dashboard-selector {
-    align-items: center;
-  }
-
-  .action-buttons {
-    justify-content: center;
-    gap: 0.5rem;
-  }
-
-  .custom-btn {
-    padding: 0.4rem 0.8rem;
-    font-size: 0.8rem;
-  }
-
-  .dashboard-content-card {
-    max-height: calc(100vh - 150px);
-  }
-
   .dashboard-layout-container {
-    max-height: calc(100vh - 200px);
+    padding: 0.25rem;
   }
 
   .dashboard-layout {
     .e-panel {
-      margin: 8px;
+      margin: 0.125rem;
+      border-radius: 8px;
     }
   }
 
-  // Syncfusion overrides for mobile
   ::ng-deep {
     #dashboard_default.e-dashboardlayout {
-      max-height: calc(100vh - 250px) !important;
-
-      .e-resize-handle {
-        width: 8px !important;
-        height: 8px !important;
-        opacity: 0.8 !important;
-      }
+      min-height: calc(100vh - 0.5rem) !important;
 
       .e-panel {
-        min-width: 100px !important;
-        min-height: 100px !important;
-      }
-
-      .e-panel-content {
-        min-height: 60px !important;
-      }
-
-      .e-panel .e-panel-container .content > * {
-        min-height: 60px !important;
+        border-radius: 8px !important;
+        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06) !important;
       }
     }
   }
 }
 
 @media (max-width: 480px) {
-  .header-content {
-    padding: 0 0.5rem;
-  }
-
-  .title-content h1 {
-    font-size: 1.25rem;
-  }
-
-  .title-content p {
-    font-size: 0.75rem;
-  }
-
-  .action-buttons {
-    flex-direction: column;
-    gap: 0.5rem;
+  .dashboard-layout-container {
+    padding: 0.125rem;
   }
 
-  .custom-btn {
-    width: 100%;
-    justify-content: center;
+  .dashboard-layout {
+    .e-panel {
+      margin: 0.0625rem;
+      border-radius: 6px;
+    }
   }
 
-  // Syncfusion overrides for small mobile
   ::ng-deep {
     #dashboard_default.e-dashboardlayout {
-      .e-resize-handle {
-        width: 10px !important;
-        height: 10px !important;
-        opacity: 0.9 !important;
-      }
+      min-height: calc(100vh - 0.25rem) !important;
 
       .e-panel {
-        min-width: 80px !important;
-        min-height: 80px !important;
-      }
-
-      .e-panel-content {
-        min-height: 40px !important;
-      }
-
-      .e-panel .e-panel-container .content > * {
-        min-height: 40px !important;
+        border-radius: 6px !important;
+        box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06) !important;
       }
     }
   }
 }
 
+
 .dashboard-container {
   display: flex;
   height: 100vh;
@@ -698,8 +583,7 @@
   background-color: #ffffff; /* bg-white */
   padding: 1rem; /* p-4 */
   overflow-y: auto;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
   border-right: 1px solid #e5e7eb; /* border-r border-gray-200 */
   display: flex;
   flex-direction: column;
@@ -722,8 +606,7 @@
   &:hover {
     background-color: #e0e7ff; /* hover:bg-indigo-50 */
     border-color: #c7d2fe; /* hover:border-indigo-100 */
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-      0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-md */
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-md */
   }
 }
 
@@ -753,8 +636,7 @@
   font-weight: bold;
   padding: 0.5rem 1rem; /* py-2 px-4 */
   border-radius: 0.5rem; /* rounded-lg */
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
   transition: transform 0.2s ease-in-out; /* transition-transform */
   transform: scale(1); /* transform */
 
@@ -818,10 +700,3 @@
 //     text-align: center;
 //     line-height: 90px;
 // }
-
-.e-dashboardlayout.e-control .e-panel {
-  margin: 0 !important;
-  border-radius: 12px !important;
-  box-shadow: unset !important;
-  border: unset !important;
-}