add tariff management page layout

src/app/styles/global-styles.scss

@@ -87,7 +87,7 @@
 
 .admin-panel {
 	.admin-sidebar {
-		width: 280px;
+		width: var(--side-bar-width);
 		background: var(--surface);
 		border-right: 1px solid var(--border);
 		position: fixed;
@@ -321,6 +321,13 @@
 			overflow-x: auto;
 		}
 
+		.stats-grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+			gap: 20px;
+			margin-bottom: 24px;
+		}
+
 		.admin-table {
 			width: 100%;
 			border-collapse: collapse;
@@ -732,4 +739,79 @@
 			}
 		}
 	}
+}
+
+#plans-container {
+	.stats-grid {
+		.stat-card {
+			background: var(--surface);
+			padding: 20px;
+			border-radius: 12px;
+			box-shadow: var(--shadow);
+			transition: all 0.3s;
+			border: 1px solid var(--border);
+
+			&:hover {
+				box-shadow: var(--shadow-lg);
+				transform: translateY(-2px);
+			}
+
+			.stat-card-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 12px;
+			}
+
+			.stat-card-title {
+				font-size: 13px;
+				color: var(--text-secondary);
+				font-weight: 500;
+				text-transform: uppercase;
+				letter-spacing: 0.5px;
+			}
+
+			.stat-card-icon {
+				width: 40px;
+				height: 40px;
+				border-radius: 10px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 20px;
+
+				background: #eff6ff;
+			}
+
+			.stat-card-value {
+				font-size: 32px;
+				font-weight: 700;
+				color: var(--text-primary);
+				margin-bottom: 4px;
+			}
+
+			.stat-card-label {
+				font-size: 12px;
+				color: var(--text-secondary);
+			}
+
+			.stat-card-footer {
+				margin-top: 12px;
+				padding-top: 12px;
+				border-top: 1px solid var(--border);
+				font-size: 12px;
+				color: var(--text-secondary);
+			}
+
+			.btn-outline {
+				background: transparent;
+				border: 1px solid var(--border);
+				color: var(--text-primary);
+
+				&:hover {
+					background: var(--background);
+				}
+			}
+		}
+	}
 }