Feature: Rewamp super admin dashboard (chatwoot#882)

.scss-lint.yml

@@ -177,6 +177,8 @@ linters:
     allow_element_with_attribute: false
     allow_element_with_class: false
     allow_element_with_id: false
+    exclude:
+      - 'app/assets/stylesheets/administrate/components/_buttons.scss'
 
   SelectorDepth:
     enabled: true
@@ -279,3 +281,4 @@ linters:
 exclude:
   - 'app/javascript/widget/assets/scss/_reset.scss'
   - 'app/javascript/widget/assets/scss/sdk.css'
+  - 'app/assets/stylesheets/administrate/reset/_normalize.scss'

app/assets/config/manifest.js

@@ -1,3 +1,4 @@
 //= link_tree ../images
 //= link administrate/application.css
 //= link administrate/application.js
+//= link dashboardChart.js

app/assets/javascripts/dashboardChart.js

@@ -0,0 +1,55 @@
+// eslint-disable-next-line
+function prepareData(data) {
+  var labels = [];
+  var dataSet = [];
+  data.forEach(item => {
+    labels.push(item[0]);
+    dataSet.push(item[1]);
+  });
+  return { labels, dataSet };
+}
+
+function getChartOptions() {
+  var fontFamily =
+    'Inter,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+  return {
+    responsive: true,
+    legend: { labels: { fontFamily } },
+    scales: {
+      xAxes: [
+        {
+          barPercentage: 1.26,
+          ticks: { fontFamily },
+          gridLines: { display: false },
+        },
+      ],
+      yAxes: [
+        {
+          ticks: { fontFamily },
+          gridLines: { display: false },
+        },
+      ],
+    },
+  };
+}
+
+// eslint-disable-next-line
+function drawSuperAdminDashboard(data) {
+  var ctx = document.getElementById('dashboard-chart').getContext('2d');
+  var chartData = prepareData(data);
+  // eslint-disable-next-line
+  new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: chartData.labels,
+      datasets: [
+        {
+          label: 'Conversations',
+          data: chartData.dataSet,
+          backgroundColor: '#1f93ff',
+        },
+      ],
+    },
+    options: getChartOptions(),
+  });
+}

app/assets/stylesheets/administrate/application.scss

@@ -0,0 +1,32 @@
+@charset 'utf-8';
+
+@import 'reset/normalize';
+
+@import 'utilities/variables';
+@import 'utilities/text-color';
+
+@import 'selectize';
+@import 'datetime_picker';
+
+@import 'library/clearfix';
+@import 'library/data-label';
+@import 'library/variables';
+
+@import 'base/forms';
+@import 'base/layout';
+@import 'base/lists';
+@import 'base/tables';
+@import 'base/typography';
+
+@import 'components/app-container';
+@import 'components/attributes';
+@import 'components/buttons';
+@import 'components/cells';
+@import 'components/field-unit';
+@import 'components/flashes';
+@import 'components/form-actions';
+@import 'components/main-content';
+@import 'components/navigation';
+@import 'components/pagination';
+@import 'components/search';
+@import 'components/reports';

app/assets/stylesheets/administrate/base/_forms.scss

@@ -0,0 +1,103 @@
+fieldset {
+  background-color: transparent;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  font-weight: $font-weight-medium;
+  margin: 0;
+  padding: 0;
+}
+
+label {
+  display: block;
+  font-weight: $font-weight-medium;
+  margin: 0;
+}
+
+input,
+select {
+  display: block;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+}
+
+input,
+select,
+textarea {
+  display: block;
+  font-family: $base-font-family;
+  font-size: 16px;
+}
+
+[type="color"],
+[type="date"],
+[type="datetime-local"],
+[type="email"],
+[type="month"],
+[type="number"],
+[type="password"],
+[type="search"],
+[type="tel"],
+[type="text"],
+[type="time"],
+[type="url"],
+[type="week"],
+input:not([type]),
+textarea {
+  appearance: none;
+  background-color: $white;
+  border: $base-border;
+  border-radius: $base-border-radius;
+  padding: 0.5em;
+  transition: border-color $base-duration $base-timing;
+  width: 100%;
+
+  &:hover {
+    border-color: mix($black, $base-border-color, 20%);
+  }
+
+  &:focus {
+    border-color: $action-color;
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: mix($black, $white, 5%);
+    cursor: not-allowed;
+
+    &:hover {
+      border: $base-border;
+    }
+  }
+}
+
+textarea {
+  resize: vertical;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  display: inline;
+  margin-right: $small-spacing / 2;
+}
+
+[type="file"] {
+  width: 100%;
+}
+
+select {
+  width: 100%;
+}
+
+[type="checkbox"],
+[type="radio"],
+[type="file"],
+select {
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+}

app/assets/stylesheets/administrate/base/_layout.scss

@@ -0,0 +1,22 @@
+html {
+  background-color: $color-white;
+  box-sizing: border-box;
+  font-size: 10px;
+  -webkit-font-smoothing: antialiased;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+figure {
+  margin: 0;
+}
+
+img,
+picture {
+  margin: 0;
+  max-width: 100%;
+}

app/assets/stylesheets/administrate/base/_lists.scss

@@ -0,0 +1,19 @@
+ul,
+ol {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+dl {
+  margin-bottom: $small-spacing;
+
+  dt {
+    font-weight: $font-weight-medium;
+    margin-top: $small-spacing;
+  }
+
+  dd {
+    margin: 0;
+  }
+}

app/assets/stylesheets/administrate/base/_tables.scss

@@ -0,0 +1,71 @@
+table {
+  border-collapse: collapse;
+  font-size: $font-size-default;
+  text-align: left;
+  width: 100%;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+tr {
+  border-bottom: $base-border;
+
+  th {
+    font-weight: $font-weight-medium;
+
+    &.cell-label--avatar-field {
+      a {
+        display: none;
+      }
+    }
+  }
+}
+
+tbody tr {
+  &:hover {
+    background-color: $base-background-color;
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: -($focus-outline-width);
+  }
+
+  td {
+    &.cell-data--avatar-field {
+      line-height: 1;
+      text-align: center;
+
+      img {
+        border-radius: 50%;
+        height: $space-large;
+        max-height: $space-large;
+        width: $space-large;
+      }
+    }
+  }
+}
+
+td,
+th {
+  padding: $space-slab;
+  vertical-align: middle;
+}
+
+td:first-child,
+th:first-child {
+  padding-left: 0;
+}
+
+td:last-child,
+th:last-child {
+  padding-right: 0;
+}
+
+td img {
+  max-height: 2rem;
+}

app/assets/stylesheets/administrate/base/_typography.scss

@@ -0,0 +1,44 @@
+body {
+  color: $base-font-color;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $heading-font-family;
+  font-size: $base-font-size;
+  line-height: $heading-line-height;
+  margin: 0;
+}
+
+p {
+  margin: 0 0 $small-spacing;
+}
+
+a {
+  color: $action-color;
+  transition: color $base-duration $base-timing;
+
+  &:hover {
+    color: mix($black, $action-color, 25%);
+  }
+
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+}
+
+hr {
+  border-bottom: $base-border;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  margin: $base-spacing 0;
+}

app/assets/stylesheets/administrate/components/_app-container.scss

@@ -0,0 +1,8 @@
+.app-container {
+  align-items: stretch;
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100rem;
+  min-height: 100vh;
+}