@@ -408,7 +296,7 @@ const layoutClasses = computed(() => {
4,350
@@ -418,10 +306,10 @@ const layoutClasses = computed(() => {
icon="tabler-chevron-up"
:color="(props.donutColors.length ? processColors(props.donutColors) : [vuetifyTheme.current.value.colors.success])[0]"
:size="layoutClasses.iconSize"
- class="me-1"
+ class="me-1 flex-shrink-0"
/>
@@ -432,8 +320,7 @@ const layoutClasses = computed(() => {
{
-
+
\ No newline at end of file
diff --git a/resources/styles/gantt-chart.scss b/resources/styles/gantt-chart.scss
index a03ebb6..f133fad 100644
--- a/resources/styles/gantt-chart.scss
+++ b/resources/styles/gantt-chart.scss
@@ -442,6 +442,11 @@
margin-right: 6px;
opacity: 0.6;
color: rgb(var(--v-theme-on-surface));
+ transition: transform 0.2s ease;
+}
+
+.gantt_tree_icon:hover {
+ transform: scale(1.1);
}
.gantt_task_line.completed-task {
@@ -449,6 +454,11 @@
border: 1px solid rgba(var(--v-theme-success), 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(var(--v-theme-success), 0.3);
+ transition: transform 0.2s ease;
+}
+
+.gantt_task_line.completed-task:hover {
+ transform: translateY(-1px);
}
.gantt_task_line.high-progress-task {
@@ -456,6 +466,11 @@
border: 1px solid rgba(var(--v-theme-primary), 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(var(--v-theme-primary), 0.3);
+ transition: transform 0.2s ease;
+}
+
+.gantt_task_line.high-progress-task:hover {
+ transform: translateY(-1px);
}
.gantt_task_line.medium-progress-task {
@@ -463,6 +478,11 @@
border: 1px solid rgba(var(--v-theme-warning), 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(var(--v-theme-warning), 0.3);
+ transition: transform 0.2s ease;
+}
+
+.gantt_task_line.medium-progress-task:hover {
+ transform: translateY(-1px);
}
.gantt_task_line.low-progress-task {
@@ -470,6 +490,11 @@
border: 1px solid rgba(var(--v-theme-error), 0.8);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(var(--v-theme-error), 0.3);
+ transition: transform 0.2s ease;
+}
+
+.gantt_task_line.low-progress-task:hover {
+ transform: translateY(-1px);
}
.summary-row {
@@ -520,6 +545,7 @@
.gantt_grid_data .gantt_row {
background: rgb(var(--v-theme-surface));
+ transition: background-color 0.2s ease;
}
.gantt_grid_data .gantt_row.gantt_row_odd {
@@ -622,7 +648,7 @@
padding: 8px 10px;
cursor: pointer;
color: rgb(var(--v-theme-on-surface));
- transition: background-color 0.1s ease;
+ transition: all 0.1s ease;
border-radius: 4px;
font-size: 13px;
line-height: 1.4;
@@ -631,6 +657,7 @@
.context-menu-item:hover {
background: rgba(var(--v-theme-primary), 0.1);
+ transform: translateX(2px);
}
.context-menu-item:active {
@@ -745,7 +772,7 @@
.gantt_task_scale .gantt_scale_cell {
background: rgb(var(--v-theme-surface)) !important;
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
- border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+ border-color: rgba(var(--v-theme-on-surface), 0.08) !important;
}
.gantt_bars_area {
@@ -769,4 +796,80 @@
.gantt_task_link .gantt_link_arrow:before {
border-color: rgba(var(--v-theme-on-surface), 0.4) !important;
+}
+
+.gantt_modal_box {
+ background: rgb(var(--v-theme-surface));
+ border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+ border-radius: 12px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ color: rgb(var(--v-theme-on-surface));
+ animation: modalSlideIn 0.3s ease;
+ overflow: hidden;
+}
+
+.gantt_popup_text {
+ padding: 24px;
+ font-size: 15px;
+ line-height: 1.5;
+ color: rgb(var(--v-theme-on-surface));
+ background: rgb(var(--v-theme-surface));
+}
+
+.gantt_popup_controls {
+ padding: 16px 24px;
+ display: flex;
+ gap: 12px;
+ justify-content: flex-end;
+ background: rgb(var(--v-theme-surface));
+ border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.gantt_popup_button {
+ display: inline-flex;
+ align-items: center;
+ padding: 10px 16px;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ user-select: none;
+ outline: none;
+}
+
+.gantt_ok_button {
+ background: rgb(var(--v-theme-primary));
+ color: rgb(var(--v-theme-on-primary));
+ box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
+}
+
+.gantt_ok_button:hover {
+ background: rgba(var(--v-theme-primary), 0.8);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 8px rgba(var(--v-theme-primary), 0.4);
+}
+
+.gantt_cancel_button {
+ background: rgba(var(--v-theme-on-surface), 0.05);
+ color: rgb(var(--v-theme-on-surface));
+ border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.gantt_cancel_button:hover {
+ background: rgba(var(--v-theme-on-surface), 0.1);
+ border-color: rgba(var(--v-border-color), 0.5);
+ transform: translateY(-1px);
+}
+
+.gantt-alert {
+ min-width: 400px;
+ max-width: 500px;
+}
+
+.gantt_popup_button:focus {
+ outline: 2px solid rgba(var(--v-theme-primary), 0.3);
+ outline-offset: 2px;
}
\ No newline at end of file
diff --git a/resources/styles/overview.scss b/resources/styles/overview.scss
new file mode 100644
index 0000000..a944d30
--- /dev/null
+++ b/resources/styles/overview.scss
@@ -0,0 +1,294 @@
+.grid-stack-container {
+ position: relative;
+ transition: all 0.3s ease;
+}
+
+.grid-stack-container.edit-mode-active {
+ padding: 1rem;
+ background: rgba(var(--v-theme-surface), 0.5);
+ border-radius: 12px;
+}
+
+.grid-stack-item {
+ position: relative;
+ transition: all 0.3s ease;
+}
+
+.grid-stack-item.edit-mode {
+ cursor: move;
+}
+
+.grid-stack-item.edit-mode:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.grid-stack-item.edit-mode .grid-stack-item-content {
+ border-radius: 8px;
+}
+
+.grid-stack-item-content {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ overflow: hidden;
+ transition: all 0.2s ease;
+}
+
+.grid-stack-item-content > * {
+ flex: 1;
+ margin-bottom: 3.2rem;
+}
+
+.grid-stack-item:has(AgGridTable) {
+ height: 100vh !important;
+}
+
+.grid-stack-item:has(AgGridTable) .grid-stack-item-content {
+ height: 100vh;
+}
+
+.edit-mode-banner {
+ position: relative;
+ margin: 0 0 2rem 0;
+ border-radius: 20px;
+ overflow: hidden;
+ background: linear-gradient(135deg,
+ rgba(var(--v-theme-primary), 0.9) 0%,
+ rgba(var(--v-theme-secondary), 0.8) 50%,
+ rgba(var(--v-theme-accent), 0.9) 100%);
+ box-shadow: 0 8px 32px rgba(var(--v-theme-primary), 0.3),
+ 0 2px 8px rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(20px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.banner-background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+}
+
+.banner-glow {
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle,
+ rgba(255, 255, 255, 0.1) 0%,
+ transparent 70%);
+}
+
+.banner-particles {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-image: radial-gradient(2px 2px at 20% 30%,
+ rgba(255, 255, 255, 0.3),
+ transparent),
+ radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.2), transparent),
+ radial-gradient(1px 1px at 90% 40%, rgba(255, 255, 255, 0.3), transparent),
+ radial-gradient(2px 2px at 40% 80%, rgba(255, 255, 255, 0.2), transparent);
+ background-size: 200px 200px, 150px 150px, 100px 100px, 250px 250px;
+}
+
+.banner-content {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.5rem 2rem;
+ gap: 1.5rem;
+}
+
+.banner-header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ flex: 1;
+}
+
+.banner-icon {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 12px;
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.edit-icon {
+ color: white;
+ z-index: 2;
+}
+
+.icon-pulse {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: 12px;
+ background: rgba(255, 255, 255, 0.3);
+}
+
+.banner-text {
+ flex: 1;
+}
+
+.banner-title {
+ font-size: 1.4rem;
+ font-weight: 700;
+ color: white;
+ margin: 0 0 0.25rem 0;
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ letter-spacing: -0.5px;
+}
+
+.banner-subtitle {
+ font-size: 0.9rem;
+ color: rgba(255, 255, 255, 0.85);
+ margin: 0;
+ line-height: 1.4;
+ font-weight: 400;
+}
+
+.banner-decorations {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ pointer-events: none;
+ z-index: 1;
+}
+
+.decoration {
+ position: absolute;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.decoration-1 {
+ width: 80px;
+ height: 80px;
+ top: -40px;
+ right: 10%;
+}
+
+.decoration-2 {
+ width: 60px;
+ height: 60px;
+ bottom: -30px;
+ left: 15%;
+}
+
+.decoration-3 {
+ width: 40px;
+ height: 40px;
+ top: 50%;
+ right: 5%;
+}
+
+.drag-handle {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ z-index: 20;
+ cursor: grab;
+ padding: 6px;
+ border-radius: 50%;
+ background: rgba(var(--v-theme-primary), 0.9);
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ opacity: 0;
+ transition: all 0.2s ease;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ color: white;
+}
+
+.drag-handle:hover {
+ background: rgba(var(--v-theme-primary), 1);
+ transform: scale(1.1);
+}
+
+.drag-handle:active {
+ cursor: grabbing;
+ transform: scale(0.95);
+}
+
+.delete-btn-chart {
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ z-index: 5;
+ opacity: 1 !important;
+ background: #dc2626 !important;
+ color: white !important;
+ border-radius: 6px !important;
+ padding: 4px 8px !important;
+ font-size: 12px !important;
+ min-width: auto !important;
+ height: 28px !important;
+ box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
+ transition: all 0.2s ease;
+ backdrop-filter: blur(10px);
+}
+
+.delete-btn-chart:hover {
+ background: #b91c1c !important;
+ transform: scale(1.05);
+ box-shadow: 0 4px 12px rgba(185, 28, 28, 0.4);
+}
+
+.delete-btn-chart:active {
+ transform: scale(0.95);
+}
+
+.edit-mode:hover .drag-handle {
+ opacity: 1;
+}
+
+@media (max-width: 768px) {
+ .banner-content {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ padding: 1.25rem 1rem;
+ }
+
+ .banner-header {
+ flex-direction: column;
+ text-align: center;
+ gap: 0.75rem;
+ }
+
+ .banner-title {
+ font-size: 1.2rem;
+ }
+
+ .banner-subtitle {
+ font-size: 0.85rem;
+ }
+
+ .edit-mode .drag-handle {
+ opacity: 0.7;
+ }
+
+ .delete-btn-chart {
+ font-size: 11px !important;
+ padding: 3px 6px !important;
+ height: 24px !important;
+ }
+}
\ No newline at end of file
diff --git a/typed-router.d.ts b/typed-router.d.ts
index d3d631f..048be83 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -81,6 +81,8 @@ declare module 'vue-router/auto-routes' {
'dashboards-demo': RouteRecordInfo<'dashboards-demo', '/dashboards/demo', Record
, Record>,
'dashboards-ecommerce': RouteRecordInfo<'dashboards-ecommerce', '/dashboards/ecommerce', Record, Record>,
'dashboards-gantt': RouteRecordInfo<'dashboards-gantt', '/dashboards/gantt', Record, Record>,
+ 'dashboards-resource': RouteRecordInfo<'dashboards-resource', '/dashboards/resource', Record, Record>,
+ 'dashboards-task': RouteRecordInfo<'dashboards-task', '/dashboards/task', Record, Record>,
'dashboards-wbs': RouteRecordInfo<'dashboards-wbs', '/dashboards/wbs', Record, Record>,
'extensions-swiper': RouteRecordInfo<'extensions-swiper', '/extensions/swiper', Record, Record>,
'extensions-tour': RouteRecordInfo<'extensions-tour', '/extensions/tour', Record, Record>,