diff --git a/concept-modern/src/pages/tables/general-tables.html b/concept-modern/src/pages/tables/general-tables.html
index 7c3d8f1..ac4bc32 100644
--- a/concept-modern/src/pages/tables/general-tables.html
+++ b/concept-modern/src/pages/tables/general-tables.html
@@ -6,7 +6,7 @@
{{> layouts/header }}
- {{> layouts/sidebar }}
+ {{> layouts/sidebar activeMenu="tables" activePage="general-tables"}}
diff --git a/concept-modern/src/pages/timeline.html b/concept-modern/src/pages/timeline.html
new file mode 100644
index 0000000..7497356
--- /dev/null
+++ b/concept-modern/src/pages/timeline.html
@@ -0,0 +1,342 @@
+
+
+
+ {{> layouts/head pageTitle="Timeline" }}
+
+
+
+ {{> layouts/header }}
+ {{> layouts/sidebar activeMenu="timeline" }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Total Activities
+ 1,234
+
+
+ Today
+ 47
+
+
+ This Week
+ 312
+
+
+ Active Users
+ 89
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Today
+
+
+
+
+
+
+
+
Changed profile picture and updated bio information.
+
+
+
+
+
+
+
+
+
+
Daily backup completed successfully.
+
+
Backup size: 2.4 GB
+
+
+
+
+
+
+
+
+
+
Multiple failed login attempts detected from IP: 192.168.1.100
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Premium Plan Subscription
+
Order #12345
+
+
+
+
+
+
+
+
+
+
Yesterday
+
+
+
+
+
+
+
+
+
+
+
+
+
1,000 Users!
+
Congratulations on reaching this milestone!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
"Great work on the Q4 report! The revenue growth is impressive."
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-45%
+ Query Time
+
+
+
+
+
+30%
+ Performance
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{> layouts/footer }}
+
+
+
+ {{> layouts/scripts }}
+
+
+
+
\ No newline at end of file
diff --git a/concept-modern/src/pages/users.html b/concept-modern/src/pages/users.html
new file mode 100644
index 0000000..da32832
--- /dev/null
+++ b/concept-modern/src/pages/users.html
@@ -0,0 +1,469 @@
+
+
+
+ {{> layouts/head pageTitle="User Management" }}
+
+
+
+ {{> layouts/header }}
+ {{> layouts/sidebar activeMenu="users" }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Total Users
+
2,543
+
+ 12.5%
+
+
+
+
+
+
+
+
+
+
+
+
+
Active Users
+
1,893
+
+ 8.2%
+
+
+
+
+
+
+
+
+
+
+
+
+
New Users
+
127
+
+ 0%
+
+
+
+
+
+
+
+
+
+
+
+
+
Suspended
+
23
+
+ 4.3%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+
+ |
+ User |
+ Email |
+ Role |
+ Status |
+ Joined |
+ Last Active |
+ Actions |
+
+
+
+
+ |
+
+
+
+ |
+
+
+ 
+
+ John Doe
+ @johndoe
+
+ |
+ john.doe@example.com |
+ Admin |
+ Active |
+ Jan 15, 2024 |
+ 2 hours ago |
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+ 
+
+ Jane Smith
+ @janesmith
+
+ |
+ jane.smith@example.com |
+ Manager |
+ Active |
+ Feb 28, 2024 |
+ 5 minutes ago |
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+ 
+
+ Mike Johnson
+ @mikej
+
+ |
+ mike.j@example.com |
+ User |
+ Pending |
+ Mar 10, 2024 |
+ 1 day ago |
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+ 
+
+ Sarah Davis
+ @sarahd
+
+ |
+ sarah.davis@example.com |
+ User |
+ Suspended |
+ Dec 20, 2023 |
+ 1 week ago |
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+ 
+
+ Tom Wilson
+ @tomw
+
+ |
+ tom.wilson@example.com |
+ Guest |
+ Inactive |
+ Nov 5, 2023 |
+ 1 month ago |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+ Showing 1 to 5 of 2,543 entries
+
+
+
+
+
+
+
+ 0 users selected
+
+
+
+
+
+
+
+
+
+
+ {{> layouts/footer }}
+
+
+
+
+
+
+ {{> layouts/scripts }}
+
+
+
+
\ No newline at end of file
diff --git a/concept-modern/src/partials/layouts/sidebar.hbs b/concept-modern/src/partials/layouts/sidebar.hbs
index 9c61f7f..4c5a8df 100644
--- a/concept-modern/src/partials/layouts/sidebar.hbs
+++ b/concept-modern/src/partials/layouts/sidebar.hbs
@@ -131,7 +131,7 @@
Sign Up
- 404 page
+ 404 page
@@ -160,6 +160,31 @@
+
+
+ System
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/concept-modern/src/scss/layouts/_header.scss b/concept-modern/src/scss/layouts/_header.scss
index 47fca1d..b6657cf 100644
--- a/concept-modern/src/scss/layouts/_header.scss
+++ b/concept-modern/src/scss/layouts/_header.scss
@@ -1,7 +1,7 @@
// Header/Navbar Styles
.dashboard-header {
.navbar {
- min-height: 70px;
+ min-height: 60px;
padding: 0 30px;
box-shadow: 0 0 28px 0 rgba(82, 63, 105, 0.08);
background-color: #fff;
diff --git a/concept-modern/src/scss/layouts/_layout.scss b/concept-modern/src/scss/layouts/_layout.scss
index 71bef76..f488417 100644
--- a/concept-modern/src/scss/layouts/_layout.scss
+++ b/concept-modern/src/scss/layouts/_layout.scss
@@ -12,7 +12,7 @@ body {
.dashboard-wrapper {
margin-left: $sidebar-width;
min-height: 100vh;
- padding-top: 70px;
+ padding-top: 60px;
background-color: #efeff6;
@include media-breakpoint-down(lg) {
@@ -22,7 +22,7 @@ body {
.dashboard-content {
padding: 30px 30px 60px;
- min-height: calc(100vh - 70px);
+ min-height: calc(100vh - 60px);
background-color: #efeff6;
@include media-breakpoint-down(md) {
diff --git a/concept-modern/src/scss/layouts/_sidebar.scss b/concept-modern/src/scss/layouts/_sidebar.scss
index 9895cab..7ebd71c 100644
--- a/concept-modern/src/scss/layouts/_sidebar.scss
+++ b/concept-modern/src/scss/layouts/_sidebar.scss
@@ -2,7 +2,7 @@
.nav-left-sidebar {
position: fixed;
width: $sidebar-width;
- top: 70px;
+ top: 60px;
bottom: 0;
left: 0;
z-index: 1040;
diff --git a/concept-modern/src/scss/main.scss b/concept-modern/src/scss/main.scss
index fa798ee..31573a0 100644
--- a/concept-modern/src/scss/main.scss
+++ b/concept-modern/src/scss/main.scss
@@ -29,6 +29,9 @@
@import "pages/influencer";
@import "pages/calendar";
@import "pages/chat";
+@import "pages/settings";
+@import "pages/users";
+@import "pages/timeline";
// Utilities
@import "utilities/scrollbar";
\ No newline at end of file
diff --git a/concept-modern/src/scss/pages/_chat.scss b/concept-modern/src/scss/pages/_chat.scss
index d26a22a..d4d1902 100644
--- a/concept-modern/src/scss/pages/_chat.scss
+++ b/concept-modern/src/scss/pages/_chat.scss
@@ -1,7 +1,7 @@
// Chat Page Styles
.chat-container {
- height: calc(100vh - 180px);
+ height: calc(100vh - 170px);
overflow: hidden;
.row {
diff --git a/concept-modern/src/scss/pages/_settings.scss b/concept-modern/src/scss/pages/_settings.scss
new file mode 100644
index 0000000..9deafc9
--- /dev/null
+++ b/concept-modern/src/scss/pages/_settings.scss
@@ -0,0 +1,194 @@
+// Settings page styles
+.nav-pills {
+ .nav-link {
+ color: $gray-700;
+ border-radius: 0.375rem;
+ padding: 0.75rem 1rem;
+ margin-bottom: 0.25rem;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background-color: $gray-100;
+ color: $primary;
+ }
+
+ &.active {
+ background-color: $primary;
+ color: $white;
+
+ i {
+ color: $white;
+ }
+ }
+
+ i {
+ width: 1.25rem;
+ text-align: center;
+ }
+ }
+}
+
+// Card radio buttons for theme selection
+.card-radio {
+ position: relative;
+
+ .form-check-input {
+ position: absolute;
+ opacity: 0;
+
+ &:checked + .form-check-label {
+ border-color: $primary;
+ background-color: rgba($primary, 0.1);
+
+ i {
+ color: $primary;
+ }
+ }
+ }
+
+ .form-check-label {
+ cursor: pointer;
+ border: 2px solid $gray-300;
+ transition: all 0.3s ease;
+
+ &:hover {
+ border-color: $gray-400;
+ }
+ }
+}
+
+// Color scheme buttons
+.color-scheme-btn {
+ position: relative;
+
+ &.active::after {
+ content: '\f00c';
+ font-family: 'Font Awesome 6 Free';
+ font-weight: 900;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: white;
+ font-size: 0.875rem;
+ }
+}
+
+// Icon circles for integrations
+.icon-circle {
+ width: 48px;
+ height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ font-size: 1.25rem;
+
+ &.bg-primary-light {
+ background-color: rgba($primary, 0.1);
+ color: $primary;
+ }
+
+ &.bg-info-light {
+ background-color: rgba($info, 0.1);
+ color: $info;
+ }
+
+ &.bg-success-light {
+ background-color: rgba($success, 0.1);
+ color: $success;
+ }
+
+ &.bg-warning-light {
+ background-color: rgba($warning, 0.1);
+ color: $warning;
+ }
+
+ &.bg-danger-light {
+ background-color: rgba($danger, 0.1);
+ color: $danger;
+ }
+}
+
+// Settings content spacing
+.tab-content {
+ .card {
+ .card-header {
+ background-color: $white;
+ border-bottom: 2px solid $gray-200;
+
+ h5 {
+ font-weight: 600;
+ color: $gray-800;
+ }
+ }
+
+ .card-body {
+ padding: 2rem;
+ }
+ }
+}
+
+// Form styling
+.form-label {
+ font-weight: 500;
+ color: $gray-700;
+ margin-bottom: 0.5rem;
+}
+
+.form-text {
+ font-size: 0.875rem;
+}
+
+// Session list items
+.list-group-item {
+ border-left: none;
+ border-right: none;
+
+ &:first-child {
+ border-top: none;
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
+}
+
+// API key input group
+.input-group {
+ .form-control[readonly] {
+ background-color: $gray-100;
+ font-family: $font-family-monospace;
+ font-size: 0.875rem;
+ }
+}
+
+// Responsive adjustments
+@include media-breakpoint-down(lg) {
+ .nav-pills {
+ display: flex;
+ flex-wrap: nowrap;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ margin-bottom: 1rem;
+
+ .nav-link {
+ white-space: nowrap;
+ margin-bottom: 0;
+ margin-right: 0.5rem;
+ }
+ }
+}
+
+@include media-breakpoint-down(md) {
+ .tab-content {
+ .card-body {
+ padding: 1.25rem;
+ }
+ }
+
+ .color-scheme-btn {
+ padding: 0.375rem 0.75rem;
+ font-size: 0.875rem;
+ }
+}
\ No newline at end of file
diff --git a/concept-modern/src/scss/pages/_timeline.scss b/concept-modern/src/scss/pages/_timeline.scss
new file mode 100644
index 0000000..854350e
--- /dev/null
+++ b/concept-modern/src/scss/pages/_timeline.scss
@@ -0,0 +1,245 @@
+// Timeline page styles
+.timeline {
+ position: relative;
+ padding-left: 2rem;
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 2px;
+ background-color: $gray-300;
+ }
+}
+
+.timeline-date {
+ margin: 2rem 0 1rem;
+ position: relative;
+
+ h6 {
+ background-color: $white;
+ display: inline-block;
+ padding-right: 1rem;
+ margin-bottom: 0;
+ margin-left: -2rem;
+ font-weight: 600;
+ color: $gray-600;
+ }
+}
+
+.timeline-item {
+ position: relative;
+ display: flex;
+ margin-bottom: 2rem;
+
+ &.new-item {
+ opacity: 0;
+ transform: translateY(20px);
+
+ &.animate-in {
+ animation: fadeInUp 0.5s ease forwards;
+ }
+ }
+}
+
+.timeline-marker {
+ position: absolute;
+ left: -2.5rem;
+ top: 0.5rem;
+ width: 1rem;
+ height: 1rem;
+ border-radius: 50%;
+ z-index: 1;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 0.5rem;
+ height: 0.5rem;
+ background-color: $white;
+ border-radius: 50%;
+ }
+
+ i {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 0.5rem;
+ }
+}
+
+.timeline-content {
+ flex: 1;
+ background-color: $white;
+ border: 1px solid $gray-200;
+ border-radius: 0.5rem;
+ padding: 1.25rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease;
+
+ &:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ transform: translateY(-2px);
+ }
+}
+
+.timeline-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0.75rem;
+
+ img {
+ object-fit: cover;
+ }
+
+ h6 {
+ margin: 0;
+ font-size: 0.9375rem;
+
+ small {
+ font-weight: normal;
+ }
+ }
+
+ .dropdown {
+ .btn {
+ padding: 0.25rem 0.5rem;
+ border: none;
+ background-color: transparent;
+
+ &:hover {
+ background-color: $gray-100;
+ }
+ }
+ }
+}
+
+.timeline-body {
+ font-size: 0.875rem;
+
+ p {
+ line-height: 1.6;
+ }
+
+ .card {
+ border: none;
+ margin-top: 0.5rem;
+
+ .card-body {
+ padding: 1rem;
+ }
+ }
+
+ .progress {
+ margin: 0.5rem 0;
+ }
+
+ .btn-sm {
+ font-size: 0.8125rem;
+ padding: 0.25rem 0.75rem;
+ }
+}
+
+// Activity type colors
+.activity-filters {
+ .form-check-label {
+ display: flex;
+ align-items: center;
+ font-size: 0.875rem;
+
+ i {
+ width: 1.25rem;
+ }
+ }
+}
+
+// Reply input
+.reply-input {
+ .input-group {
+ .form-control {
+ font-size: 0.875rem;
+ }
+
+ .btn {
+ font-size: 0.875rem;
+ }
+ }
+}
+
+// Animations
+@keyframes fadeInUp {
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+// Mobile responsiveness
+@include media-breakpoint-down(md) {
+ .timeline {
+ padding-left: 1.5rem;
+
+ &::before {
+ left: 0;
+ }
+ }
+
+ .timeline-marker {
+ left: -1.75rem;
+ width: 0.875rem;
+ height: 0.875rem;
+
+ &::after {
+ width: 0.375rem;
+ height: 0.375rem;
+ }
+ }
+
+ .timeline-content {
+ padding: 1rem;
+ }
+
+ .timeline-header {
+ flex-wrap: wrap;
+
+ img {
+ width: 28px;
+ height: 28px;
+ }
+
+ h6 {
+ font-size: 0.875rem;
+ }
+
+ .dropdown {
+ margin-left: auto;
+ }
+ }
+
+ .timeline-date h6 {
+ margin-left: -1.5rem;
+ font-size: 0.875rem;
+ }
+}
+
+@include media-breakpoint-down(sm) {
+ .timeline {
+ padding-left: 1rem;
+ }
+
+ .timeline-marker {
+ left: -1.25rem;
+ width: 0.75rem;
+ height: 0.75rem;
+ }
+
+ .timeline-date h6 {
+ margin-left: -1rem;
+ }
+}
\ No newline at end of file
diff --git a/concept-modern/src/scss/pages/_users.scss b/concept-modern/src/scss/pages/_users.scss
new file mode 100644
index 0000000..d2e1b74
--- /dev/null
+++ b/concept-modern/src/scss/pages/_users.scss
@@ -0,0 +1,136 @@
+// User Management page styles
+.icon-circle {
+ width: 48px;
+ height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ font-size: 1.25rem;
+
+ &.bg-primary-light {
+ background-color: rgba($primary, 0.1);
+ }
+
+ &.bg-success-light {
+ background-color: rgba($success, 0.1);
+ }
+
+ &.bg-info-light {
+ background-color: rgba($info, 0.1);
+ }
+
+ &.bg-danger-light {
+ background-color: rgba($danger, 0.1);
+ }
+}
+
+// User table styles
+#userTable {
+ tbody tr {
+ transition: all 0.2s ease;
+
+ &.table-active {
+ background-color: rgba($primary, 0.05);
+ }
+
+ &:hover {
+ background-color: $gray-100;
+ }
+ }
+
+ .form-check-input {
+ cursor: pointer;
+ }
+}
+
+// Bulk actions
+.bulk-actions {
+ background-color: $light;
+ padding: 1rem;
+ border-radius: 0.375rem;
+ margin-top: 1rem;
+ animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+// DataTables customization
+.dataTables_wrapper {
+ .dataTables_length {
+ label {
+ font-weight: normal;
+ color: $text-muted;
+ }
+
+ select {
+ @extend .form-select;
+ width: auto;
+ display: inline-block;
+ margin: 0 0.5rem;
+ }
+ }
+
+ .dataTables_info {
+ color: $text-muted;
+ font-size: 0.875rem;
+ }
+
+ .dataTables_paginate {
+ .pagination {
+ margin: 0;
+ }
+
+ .page-link {
+ padding: 0.375rem 0.75rem;
+ font-size: 0.875rem;
+
+ &:hover {
+ background-color: $gray-100;
+ }
+ }
+ }
+}
+
+// Responsive adjustments
+@include media-breakpoint-down(lg) {
+ .bulk-actions {
+ .btn {
+ font-size: 0.875rem;
+ padding: 0.375rem 0.75rem;
+ }
+ }
+}
+
+@include media-breakpoint-down(md) {
+ .icon-circle {
+ width: 40px;
+ height: 40px;
+ font-size: 1rem;
+ }
+
+ .bulk-actions {
+ .d-flex {
+ flex-direction: column;
+ align-items: stretch !important;
+
+ span {
+ margin-bottom: 0.5rem;
+ text-align: center;
+ }
+
+ .btn {
+ margin: 0.25rem 0 !important;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/concept-modern/vite.config.js b/concept-modern/vite.config.js
index 48c928a..4092a9e 100644
--- a/concept-modern/vite.config.js
+++ b/concept-modern/vite.config.js
@@ -62,6 +62,11 @@ export default defineConfig({
'calendar': resolve(__dirname, 'src/pages/calendar.html'),
'chat': resolve(__dirname, 'src/pages/chat.html'),
'inbox': resolve(__dirname, 'src/pages/inbox.html'),
+ // Settings
+ 'settings': resolve(__dirname, 'src/pages/settings.html'),
+ // User Management
+ 'users': resolve(__dirname, 'src/pages/users.html'),
+ 'timeline': resolve(__dirname, 'src/pages/timeline.html'),
// Misc Pages
'blank-page': resolve(__dirname, 'src/pages/misc/blank-page.html'),
'login': resolve(__dirname, 'src/pages/misc/login.html'),