dbdoc_engine 0.1.0

data/app/assets/stylesheets/dbdoc_engine/dashboard.css

@@ -0,0 +1,513 @@
+/* === Dashboard Layout === */
+.dashboard-container {
+  background: #f0f2f8;
+  min-height: 100vh;
+  padding: 28px 32px;
+  margin-left: 10px;
+}
+
+.dashboard-title {
+  color: #2d3a5c;
+  font-size: 24px;
+  letter-spacing: -0.3px;
+}
+
+/* === Breadcrumbs === */
+.dashbread {
+  font-weight: bold;
+  color: #5366A0;
+}
+.slash {
+  padding-left: 7px;
+  padding-right: 7px;
+  font-weight: 400;
+  color: #666C79;
+}
+
+/* === Stats Cards Row === */
+.dashboard-stats-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  background: #fff;
+  border-radius: 14px;
+  padding: 20px 22px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  box-shadow: 0 1px 4px rgba(83, 102, 160, 0.08);
+  transition: box-shadow 0.2s, transform 0.2s;
+  border: 1px solid #e8ecf4;
+}
+.stat-card:hover {
+  box-shadow: 0 6px 20px rgba(83, 102, 160, 0.13);
+  transform: translateY(-2px);
+}
+
+.stat-icon-wrap {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  flex-shrink: 0;
+}
+.stat-icon-profile {
+  background: linear-gradient(135deg, #5366A0 0%, #6b7ec7 100%);
+  overflow: hidden;
+}
+.stat-icon-groups {
+  background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
+  color: #fff;
+}
+.stat-icon-tables {
+  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
+  color: #fff;
+}
+.stat-icon-columns {
+  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
+  color: #fff;
+}
+
+.stat-avatar {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+}
+
+.stat-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.stat-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #8b95a8;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
+.stat-value {
+  font-size: 26px;
+  font-weight: 700;
+  color: #2d3a5c;
+  line-height: 1.1;
+}
+.stat-value-sm {
+  font-size: 16px;
+  font-weight: 700;
+  color: #5366A0;
+}
+
+/* === Action Cards Row === */
+.dashboard-action-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.action-card {
+  background: #fff;
+  border-radius: 14px;
+  padding: 20px 22px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 14px;
+  box-shadow: 0 1px 4px rgba(83, 102, 160, 0.08);
+  border: 1px solid #e8ecf4;
+  transition: box-shadow 0.2s, transform 0.2s;
+  position: relative;
+}
+.action-card:hover {
+  box-shadow: 0 6px 20px rgba(83, 102, 160, 0.13);
+  transform: translateY(-2px);
+}
+
+.action-card-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+.action-icon-json {
+  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
+}
+.action-icon-schema {
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+}
+.action-card-excel .action-card-icon {
+  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+}
+
+.action-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+.action-card-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #2d3a5c;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+.action-card-sub {
+  font-size: 13px;
+  color: #8b95a8;
+  font-weight: 500;
+}
+
+.action-btn {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 5px 12px;
+  border-radius: 8px;
+  transition: all 0.15s;
+}
+.action-btn-export {
+  background: #ecfdf5;
+  color: #16a34a;
+  border: 1px solid #bbf7d0;
+}
+.action-btn-export:hover {
+  background: #16a34a;
+  color: #fff;
+  border-color: #16a34a;
+}
+.action-btn-import {
+  background: #eff6ff;
+  color: #3b82f6;
+  border: 1px solid #bfdbfe;
+}
+.action-btn-import:hover {
+  background: #3b82f6;
+  color: #fff;
+  border-color: #3b82f6;
+}
+.action-btn-schema {
+  background: #fffbeb;
+  color: #d97706;
+  border: 1px solid #fde68a;
+}
+.action-btn-schema:hover {
+  background: #d97706;
+  color: #fff;
+  border-color: #d97706;
+}
+.action-btn-upload {
+  background: #f0f9ff;
+  color: #0ea5e9;
+  border: 1px solid #bae6fd;
+}
+.action-btn-upload:hover {
+  background: #0ea5e9;
+  color: #fff;
+  border-color: #0ea5e9;
+}
+
+/* === Drop Zone === */
+.drop-zone {
+  display: none;
+  width: 100%;
+  border: 2px dashed #cbd5e1;
+  border-radius: 10px;
+  padding: 14px;
+  text-align: center;
+  background: #f8fafc;
+  font-size: 13px;
+  color: #64748b;
+  margin-top: 10px;
+  transition: border-color 0.2s, background 0.2s;
+}
+.drop-zone.drag-over {
+  border-color: #5366A0;
+  background: #eef2ff;
+}
+.drop-zone-link {
+  color: #3b82f6;
+  cursor: pointer;
+  text-decoration: underline;
+  font-weight: 600;
+}
+
+/* === Main Content Row === */
+.dashboard-main-row {
+  display: grid;
+  grid-template-columns: 1.6fr 1fr;
+  gap: 24px;
+  margin-top: 0;
+}
+
+.dashboard-table-section {
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 1px 4px rgba(83, 102, 160, 0.08);
+  border: 1px solid #e8ecf4;
+  padding: 22px 24px;
+}
+
+.dashboard-chart-section {
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 1px 4px rgba(83, 102, 160, 0.08);
+  border: 1px solid #e8ecf4;
+  padding: 22px 24px;
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-section-title {
+  color: #2d3a5c;
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 0.2px;
+}
+.dashboard-section-title-right {
+  color: #2d3a5c;
+  font-size: 15px;
+  font-weight: 700;
+  margin-bottom: 18px;
+}
+
+.dashboard-chart-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+}
+.dashboard-chart-wrap canvas {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* === Filter Buttons === */
+.filter-buttons {
+  display: flex;
+  gap: 6px;
+}
+.filter-button {
+  padding: 5px 14px;
+  border-radius: 20px;
+  background: #f1f5f9;
+  color: #64748b;
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: 600;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+.filter-button:hover {
+  background: #e2e8f0;
+  color: #334155;
+}
+.filter-button.active {
+  background: #5366A0;
+  color: #fff;
+  border-color: #5366A0;
+}
+
+/* === Table Styling === */
+.dashboard_table_scroll {
+  height: 340px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+}
+.dashboard_table_scroll::-webkit-scrollbar {
+  width: 5px;
+}
+.dashboard_table_scroll::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 8px;
+}
+
+.dashboard_table_header {
+  background-color: #f8fafc !important;
+  font-size: 12px;
+  font-weight: 700;
+  color: #8b95a8 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.dashboard_table_header th {
+  border-bottom: 2px solid #e8ecf4 !important;
+  padding: 10px 14px !important;
+}
+
+.contents-changelog {
+  font-size: 13px;
+  color: #475569;
+  vertical-align: middle;
+  padding: 10px 14px !important;
+}
+
+.table-hover tbody tr:hover {
+  background-color: #f8fafc;
+}
+
+.table-responsive {
+  overflow-y: auto;
+}
+.sticky-top {
+  z-index: 999;
+  position: sticky;
+  top: 0;
+}
+
+/* === Pagination === */
+.dashboard-pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+.pagination {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.pagination .page-item {
+  margin: 0 2px;
+}
+.pagination .page-item .page-link {
+  border-radius: 6px;
+  color: #64748b;
+  padding: 6px 12px;
+  text-decoration: none;
+  border: 1px solid #e2e8f0;
+  font-size: 13px;
+  background-color: #fff;
+  transition: all 0.15s;
+}
+.pagination .page-item.active .page-link {
+  background-color: #5366A0;
+  color: white;
+  border-color: #5366A0;
+}
+.pagination .page-item .page-link:hover:not(.active) {
+  background-color: #f1f5f9;
+}
+.pagination .page-item.disabled .page-link {
+  color: #cbd5e1;
+  pointer-events: none;
+}
+
+/* === Badge === */
+.badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 5px 10px;
+  border-radius: 6px;
+}
+
+/* === Legacy Classes (Changelog filters) === */
+.changelog-above {
+  background-color: white;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  margin-bottom: 1rem;
+  border-radius: 10px;
+}
+.input-group-text {
+  background-color: #f8fafc;
+  border-color: #e2e8f0;
+}
+.cantrol, .salect {
+  font-size: 13px;
+  padding: 0.375rem 0.75rem;
+}
+.applybutton {
+  background-color: #5366A0;
+  color: white;
+  border: none;
+  font-weight: bold;
+  font-size: 13px;
+  padding: 8px 20px;
+  border-radius: 8px;
+}
+.clear-button {
+  background-color: #f1f5f9;
+  color: #64748b;
+  border: none;
+  font-size: 13px;
+  padding: 8px 20px;
+  border-radius: 8px;
+}
+
+/* === Chart Legend === */
+.chart-legend {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  margin-top: 16px;
+}
+.chart-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #64748b;
+}
+.chart-legend-color {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+/* === Responsive === */
+@media (max-width: 1400px) {
+  .dashboard-stats-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .dashboard-action-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 1200px) {
+  .dashboard-main-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 992px) {
+  .dashboard-stats-row {
+    grid-template-columns: 1fr;
+  }
+  .dashboard-action-row {
+    grid-template-columns: 1fr;
+  }
+  .dashboard-container {
+    padding: 20px 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  .filter-buttons {
+    flex-wrap: wrap;
+  }
+  .d-flex.align-items-center.justify-content-between.mb-3 {
+    flex-direction: column;
+    align-items: flex-start !important;
+    gap: 8px;
+  }
+}

data/app/assets/stylesheets/dbdoc_engine/dbdoc_application.css

@@ -0,0 +1,117 @@
+/* Layout structure styles */
+body {
+  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+/* Ensure sidebar takes full height */
+.sidebar {
+  min-height: 100vh;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+/* Right content wrapper - for everything except sidebar */
+.right-content-wrapper {
+  min-height: 100vh;
+  width: calc(100% - 250px); /* Adjust based on your sidebar width */
+  overflow-x: hidden;
+}
+
+/* When sidebar is closed, adjust the right content width */
+.sidebar.closed + .right-content-wrapper {
+  width: calc(100% - 20px); /* Adjust based on your collapsed sidebar width */
+}
+
+/* Header styles */
+header {
+  width: 100%;
+  z-index: 999;
+}
+
+/* Main content area */
+.main-content {
+  width: 100%;
+}
+
+/* Accordion styles - Fixed to prevent conflicts */
+.accordion-collapse {
+  display: none;
+  overflow: hidden;
+}
+
+.accordion-collapse.show {
+  display: block;
+}
+
+/* Remove any conflicting collapse styles */
+.accordion-collapse.collapse {
+  display: none;
+}
+
+.accordion-collapse.collapse.show {
+  display: block;
+}
+
+/* Accordion button styles */
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 1rem 1.25rem;
+  font-size: 1rem;
+  color: var(--bs-accordion-btn-color, #212529);
+  text-align: left;
+  background-color: var(--bs-accordion-btn-bg, #fff);
+  border: 0;
+  border-radius: 0;
+  overflow-anchor: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
+}
+
+.accordion-button:not(.collapsed) {
+  color: var(--bs-accordion-btn-active-color, #0c63e4);
+  background-color: var(--bs-accordion-btn-active-bg, #e7f1ff);
+  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width, 1px)) 0 var(--bs-accordion-border-color, #dee2e6);
+}
+
+.accordion-button::after {
+  flex-shrink: 0;
+  width: var(--bs-accordion-btn-icon-width, 1.25rem);
+  height: var(--bs-accordion-btn-icon-width, 1.25rem);
+  margin-left: auto;
+  content: "";
+  background-image: var(--bs-accordion-btn-icon, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"));
+  background-repeat: no-repeat;
+  background-size: var(--bs-accordion-btn-icon-width, 1.25rem);
+  transition: transform 0.2s ease-in-out;
+}
+
+.accordion-button.collapsed::after {
+  background-image: var(--bs-accordion-btn-icon, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"));
+  transform: rotate(-90deg);
+}
+
+.accordion-button:not(.collapsed)::after {
+  background-image: var(--bs-accordion-btn-active-icon, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"));
+  transform: rotate(0deg);
+}
+
+/* Ensure smooth transitions */
+.accordion-collapse {
+  transition: all 0.2s ease-in-out;
+}
+
+/* Fix for any potential bootstrap conflicts */
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapse.show {
+  display: block;
+}