change dashboard layout

2025-12-11 18:28:35 +07:00
parent cdc2dca7dd
commit 67c6d07e4d
22 changed files with 1185 additions and 549 deletions
@@ -1,3 +1,150 @@
+/* deleted */
+/* .chart-container {
+	.chart-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 20px;
+	}
+
+	.date-filter {
+		background: #f3f4f6;
+		border: none;
+		padding: 8px 15px;
+		border-radius: 10px;
+		font-size: 12px;
+		cursor: pointer;
+		transition: background-color 0.3s;
+	}
+
+	.chart-main-content {
+		padding: 25px;
+		background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+		border-radius: 15px;
+		border: 1px solid #e2e8f0;
+	}
+
+	.chart-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+		gap: 20px;
+	}
+
+	.chart-item.images {
+		--chart-color-1: #10b981;
+		--chart-color-2: #34d399;
+	}
+
+	.chart-item.videos {
+		--chart-color-1: #8b5cf6;
+		--chart-color-2: #7c3aed;
+	}
+
+	.chart-item.audios {
+		--chart-color-1: #f59e0b;
+		--chart-color-2: #d97706;
+	}
+
+	.chart-item.documents {
+		--chart-color-1: #ef4444;
+		--chart-color-2: #dc2626;
+	}
+
+	.chart-item.scripts {
+		--chart-color-1: #4f46e5;
+		--chart-color-2: #4338ca;
+	}
+
+	.chart-item.texts {
+		--chart-color-1: #d97706;
+		--chart-color-2: #b45309;
+	}
+
+	.chart-item {
+		border-left: 4px solid var(--chart-color-1);
+
+		background: white;
+		padding: 20px;
+		border-radius: 12px;
+		box-shadow: 0 2px 10px rgba(16, 185, 129, 0.1);
+
+		&-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 10px;
+			gap: 10px;
+		}
+
+		&-image {
+			width: 32px;
+			height: 32px;
+			border-radius: 8px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: white;
+			font-size: 16px;
+			background: linear-gradient(135deg, var(--chart-color-1), var(--chart-color-2));
+		}
+
+		&-title {
+			font-weight: 600;
+			color: #1f2937;
+		}
+
+		&-count {
+			font-size: 24px;
+			font-weight: 700;
+			color: var(--chart-color-1);
+			margin-bottom: 5px;
+		}
+
+		&-tooltip {
+			font-size: 12px;
+			color: #6b7280;
+		}
+
+		&-progress-bar {
+			margin-top: 10px;
+			height: 4px;
+			background: #e5e7eb;
+			border-radius: 2px;
+			overflow: hidden;
+		}
+
+		&-progress-fill {
+			height: 100%;
+			background: linear-gradient(90deg, var(--chart-color-1), var(--chart-color-2));
+			width: 2%;
+			transition: width 1s ease;
+		}
+
+	}
+
+	.chart-total {
+		margin-top: 20px;
+		padding: 15px;
+		background: white;
+		border-radius: 10px;
+		border: 1px solid #e5e7eb;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.chart-total-text {
+		color: #6b7280;
+		font-size: 14px;
+	}
+
+	.chart-total-count {
+		font-size: 18px;
+		font-weight: 700;
+		color: #1f2937;
+	}
+} */
+
 export default function ChartContainer() {
 	return (
 		<div className="chart-container block-wrapper">