first belajar git

scss/_override.scss

@@ -0,0 +1,21 @@
+html {
+    .bg-success {
+        color: white !important;
+    }
+
+    .bg-primary {
+        color: $white !important;
+    }
+
+    .bg-secondary {
+        color: $white !important;
+    }
+
+    .bg-warning {
+        color: $white !important;
+    }
+}
+.border,
+.v-divider {
+    border-color: rgba(var(--v-border-color), 1) !important;
+}

scss/_variables.scss

@@ -0,0 +1,163 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'vuetify/lib/styles/tools/functions' as *;
+
+// Custom Variables
+// colors
+$white: #fff !default;
+
+// cards
+$card-title-size: 18px !default;
+$body-font-family: "Manrope", sans-serif !default;
+$border-radius-root: 8px;
+$btn-letter-spacing: 0 !default;
+// Global Shadowsss
+$box-shadow: 0px 2px 4px -1px #afb6c933;
+
+// Global Radius as per breakeven point
+
+@forward 'vuetify/settings' with (
+    $color-pack: false !default,
+    // Global font size and border radius
+    $font-size-root: 1rem,
+    $border-radius-root: $border-radius-root,
+    $body-font-family: $body-font-family,
+    $heading-font-family: $body-font-family !default,
+    // 👉 Typography
+    $typography:
+        (
+            //36px
+            'h1': (
+                'size': 2.25rem,
+                'weight': 600,
+                'line-height': 3.75rem,
+                'font-family': inherit
+            ),
+            //30px
+            'h2': (
+                'size': 1.875rem,
+                'weight': 600,
+                'line-height': 2.25rem,
+                'font-family': inherit
+            ),
+            //22px
+            'h3': (
+                'size': 1.375rem,
+                'weight': 600,
+                'line-height': 2rem,
+                'font-family': inherit
+            ),
+            //20px
+            'h4': (
+                'size': 1.25rem,
+                'weight': 600,
+                'line-height': 1.6rem,
+                'font-family': inherit
+            ),
+            //18px
+            'h5': (
+                'size': 1.125rem,
+                'weight': 600,
+                'line-height': 1.6rem,
+                'font-family': inherit
+            ),
+            //16px
+            'h6': (
+                'size': 1rem,
+                'weight': 600,
+                'line-height': 1.2rem,
+                'font-family': inherit
+            ),
+            //15px
+            'subtitle-1': (
+                'size': 0.94rem,
+                'weight': 400,
+                'line-height': 1.1rem,
+                'font-family': inherit,
+                'letter-spacing':0rem
+            ),
+            //13px
+            'subtitle-2': (
+                'size': 0.81rem,
+                'weight': 400,
+                'line-height': 1rem,
+                'font-family': inherit,
+                'letter-spacing':0rem
+            ),
+            //14px
+            'body-1': (
+                'size': 0.875rem,
+                'weight': 400,
+                'font-family': inherit,
+                'letter-spacing':0rem
+            ),
+            //12px
+            'body-2': (
+                'size': 0.75rem,
+                'weight': 400,
+                'font-family': inherit,
+                'letter-spacing':0rem
+            ),
+            //13px
+            'button': (
+                'size': 0.81rem,
+                'weight': 600,
+                'font-family': inherit,
+                'text-transform': capitalize
+            ),
+            //14px
+            'caption': (
+                'size':0.875rem,
+                'weight': 400,
+                'font-family': inherit,
+                'letter-spacing':0rem
+            ),
+            //12px
+            'overline': (
+                'size': 0.75rem,
+                'weight': 400,
+                'font-family': inherit,
+                'letter-spacing':0rem
+            )
+        )
+        !default,
+    // 👉 Button
+    $button-border-radius: 8px !default,
+    $button-text-letter-spacing: 0 !default,
+    $button-text-transform: capitalize,
+    $button-elevation: (
+        'default': 0,
+        'hover': 4,
+        'active': 8
+    )
+    !default,
+
+    // 👉 Tooltip
+    $tooltip-background-color: #212121 !default,
+    $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
+    $tooltip-font-size: 0.75rem !default,
+    $tooltip-border-radius: 4px !default,
+    $tooltip-padding: 4px 8px !default,
+
+    // 👉 Rounded
+    $rounded:
+        (
+            0: 0,
+            'sm': $border-radius-root - 4,
+            null: $border-radius-root,
+            'md': $border-radius-root + 4,
+            'lg': $border-radius-root * 2,
+            'xl': $border-radius-root + 8,
+            'pill': 9999px,
+            'circle': 50%
+        ),
+
+    // 👉 Card
+    $card-elevation: 10 !default,
+    $card-title-line-height: 1.6 !default,
+    $card-text-padding: 24px !default,
+    $card-item-padding: 30px 30px !default,
+    $card-actions-padding: 10px 24px 24px !default,
+    $card-subtitle-opacity: 1 !default,
+);

scss/components/_VButtons.scss

@@ -0,0 +1,27 @@
+//
+// global
+
+.v-btn-group .v-btn {
+  height: inherit !important;
+}
+.v-btn {
+  border-radius: $border-radius-root;
+  text-transform: capitalize !important;
+  font-size: 13px !important;
+}
+.v-btn-group {
+  border-color: rgb(var(--v-theme-borderColor)) !important;
+}
+
+.v-btn--size-large{
+  font-size: 14px;
+}
+
+.btn-white{
+  background-color: rgb(var(--v-theme-surface)) !important;
+  padding:10px 15px;
+  &:hover{
+      background-color: rgb(var(--v-theme-primary)) !important; 
+      color: #fff !important;
+  }
+}

scss/components/_VCard.scss

@@ -0,0 +1,60 @@
+// Outline Card
+.v-card--variant-outlined {
+    border-color: rgba(var(--v-theme-borderColor)) !important;
+    background-color:rgb(var(--v-theme-surface)); ;
+}
+
+.v-card--variant-elevated,
+.v-card--variant-flat {
+    color: rgb(var(--v-theme-textPrimary));
+}
+
+.card-hover {
+    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &:hover {
+        img {
+            transform: scale(1.09);
+            transition: transform .2s;
+        }
+    }
+}
+
+.v-card {
+    width: 100%;
+    overflow: visible;
+
+    .color-inherits {
+        color: inherit;
+    }
+
+    .v-card-item{
+        padding: 30px !important;
+    }
+
+    .feature-card {
+        .v-responsive__content {
+            height: 100%;
+        }
+    }
+
+    .v-card-title {
+        line-height: normal;
+        margin-bottom: 8px;
+    }
+    .v-card-subtitle{
+        color: rgb(var(--v-theme-textSecondary));
+    }
+    .v-card-text{
+        font-size: 14px;
+    }
+
+}
+
+// Theme cards
+.cardBordered {
+    .v-card {
+        box-shadow: none !important;
+        border: 1px solid rgb(var(--v-theme-borderColor));
+    }
+}

scss/components/_VField.scss

@@ -0,0 +1,38 @@
+.v-field--variant-outlined .v-field__outline__start.v-locale--is-ltr,
+.v-locale--is-ltr .v-field--variant-outlined .v-field__outline__start {
+    border-radius: $border-radius-root 0 0 $border-radius-root;
+}
+
+.v-field--variant-outlined .v-field__outline__end.v-locale--is-ltr,
+.v-locale--is-ltr .v-field--variant-outlined .v-field__outline__end {
+    border-radius: 0 $border-radius-root $border-radius-root 0;
+}
+
+.v-field {
+    font-size: 14px !important;
+    color:  rgba(var(--v-theme-textPrimary));
+}
+
+// select outlined
+.v-field--variant-outlined .v-field__outline__start,
+.v-field--variant-outlined .v-field__outline__notch::before,
+.v-field--variant-outlined .v-field__outline__notch::after,
+.v-field--variant-outlined .v-field__outline__end {
+    opacity: 1;
+}
+
+
+
+.v-text-field input {
+    font-size: 0.875rem;
+  }
+  .v-field__outline {
+    color: rgb(var(--v-theme-borderColor));
+    --v-field-border-opacity: 1 !important;
+  }
+  .input {
+    .v-field--variant-outlined {
+      background-color: rgba(0, 0, 0, 0.025);
+    }
+  }
+  

scss/components/_VInput.scss

@@ -0,0 +1,34 @@
+// variant
+.v-input--density-default,
+.v-field--variant-solo,
+.v-field--variant-filled {
+    --v-input-control-height: 51px;
+    --v-input-padding-top: 14px;
+}
+
+// comfortable
+.v-input--density-comfortable {
+    --v-input-control-height: 44px;
+}
+
+// compact
+.v-input--density-compact {
+    --v-input-padding-top: 10px;
+}
+.v-label {
+    font-size: 0.875rem;
+    opacity: 1;
+}
+.v-switch .v-label,
+.v-checkbox .v-label {
+    opacity: 1;
+}
+
+.v-text-field__suffix {
+    opacity: 1;
+    padding-left: 20px;
+}
+
+.shadow-none .v-field--variant-solo {
+    box-shadow: none !important;
+}

scss/components/_VNavigationDrawer.scss

@@ -0,0 +1,3 @@
+.v-navigation-drawer__scrim.fade-transition-leave-to {
+  display: none;
+}

scss/components/_VShadow.scss

@@ -0,0 +1,15 @@
+.elevation-9 {
+  box-shadow: rgb(0 0 0 / 5%) 0px 9px 17.5px !important;
+}
+
+.elevation-10 {
+  box-shadow: $box-shadow !important;
+}
+
+.primary-shadow {
+  box-shadow: rgba(var(--v-theme-primary), 0.30) 0px 12px 14px 0px;
+  &:hover {
+    box-shadow: none;
+  }
+}
+

scss/components/_VTable.scss

@@ -0,0 +1,78 @@
+.v-table .v-table__wrapper>table>tbody>tr:not(:last-child)>td,
+.v-table .v-table__wrapper>table>tbody>tr:not(:last-child)>th,
+.v-table .v-table__wrapper>table>thead>tr:last-child>th {
+    border-bottom: thin solid rgba(var(--v-theme-borderColor), 0.6) !important;
+}
+
+.v-table {
+    &.dark-table {
+        background-color: rgb(var(--v-theme-grey200));
+    }
+}
+
+.v-table {
+    .v-table__wrapper {
+        table {
+            tbody {
+                tr {
+
+                    td {
+                        padding: 14px 24px !important;
+
+                        &:first-child {
+                            padding-left: 0 ;
+                        }
+                    }
+                }
+            }
+
+            thead {
+                tr {
+                    th {
+                        padding: 14px 24px !important;
+
+                        &:first-child {
+                            padding-left: 0 ;
+                        }
+                    }
+                }
+            }
+        }
+
+    }
+}
+
+.v-table{
+    &.revenue-table{
+        .v-table__wrapper {
+            table {
+                tbody {
+                    tr {
+    
+                        td {
+                            padding: 14px 24px !important;
+    
+                            &:first-child {
+                                padding-left: 0 !important;
+                            }
+                        }
+                    }
+                }
+    
+                thead {
+                    tr {
+                        th {
+                            padding: 14px 24px !important;
+    
+                            &:first-child {
+                                padding-left: 0 !important;
+                            }
+                        }
+                    }
+                }
+            }
+    
+        }
+    }
+} 
+

scss/layout/_container.scss

@@ -0,0 +1,38 @@
+html {
+    overflow-y: auto;
+}
+
+@media (max-width: 1279px) {
+    .v-main {
+        margin: 0 10px;
+    }
+}
+
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.page-wrapper {
+    min-height: calc(100vh - 100px);
+    padding: 24px;
+
+    @media screen and (max-width: 767px) {
+        padding: 20px 10px;
+    }
+}
+
+.maxWidth {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+
+    @media screen and (max-width: 1199px) {
+        padding: 0 8px !important;
+    }
+}
+
+
+.h-100vh {
+    height: 100vh;
+}

scss/layout/_sidebar.scss

@@ -0,0 +1,181 @@
+/*This is for the logo*/
+.leftSidebar {
+    box-shadow: none !important;
+
+    .logo {
+        padding-left: 7px;
+    }
+
+    .mini-icon {
+        display: none;
+    }
+
+    .mini-text {
+        display: block;
+        font-size: 12px !important;
+        font-weight: 600 !important;
+        letter-spacing: 1.5px !important;
+        text-transform: uppercase !important;
+        color:inherit
+    }
+
+    .v-list--density-default .v-list-subheader {
+        padding-inline-start: 0 !important;
+    }
+
+
+}
+
+/*This is for the Vertical sidebar*/
+.scrollnavbar {
+    height: calc(100vh - 100px);
+
+    .userbottom {
+        position: fixed;
+        bottom: 0px;
+        width: 100%;
+    }
+
+    .smallCap {
+        padding: 20px 0px 10px !important;
+        font-size: 0.875rem;
+        font-weight: 500;
+        margin-top: 24px;
+        color: rgb(var(--v-theme-textPrimary));
+
+        &:first-child {
+            margin-top: 0 !important;
+        }
+    }
+
+
+    /*General Menu css*/
+
+    .v-list-group__items {
+        .v-list-item {
+            min-height: 35px !important;
+            padding-inline-start: calc(12px + var(--indent-padding) / 10) !important;
+
+            .v-list-item__prepend .dot {
+                height: 6px;
+                width: 6px;
+                background-color: rgb(var(--v-theme-textSecondary));
+                border-radius: 50%;
+                margin-inline-end: 8px !important;
+            }
+
+            .v-list-item-title {
+                font-size: 14px !important;
+            }
+
+            &:hover {
+                color: rgb(var(--v-theme-primary));
+
+                .v-list-item__prepend .dot {
+                    background-color: rgb(var(--v-theme-primary));
+                }
+            }
+
+            &.v-list-item--active {
+                .v-list-item__prepend .dot {
+                    background-color: rgb(var(--v-theme-primary));
+                }
+            }
+
+        }
+    }
+
+    .v-list-group__items .v-list-item,
+    .v-list-item {
+        border-radius: $border-radius-root + 4;
+        color: rgba(var(--v-theme-textPrimary),0.8);
+        margin: 0 0 2px;
+
+        &:hover {
+            color: rgb(var(--v-theme-primary));
+        }
+
+        .v-list-item__prepend {
+            margin-inline-end: 13px;
+        }
+
+        .v-list-item__append {
+            font-size: 15px;
+
+            .v-icon {
+                margin-inline-start: 13px;
+            }
+        }
+
+        .v-list-item-title {
+            font-size: 15px;
+
+        }
+    }
+
+    /*This is for the dropdown*/
+    .v-list {
+        color: rgb(var(--v-theme-textSecondary));
+
+        .v-list-subheader {
+            &:first-of-type {
+                border-top: 0;
+            }
+
+            border-top: 1px solid rgb(var(--v-theme-borderColor));
+        }
+
+
+        >.v-list-item.v-list-item--active,
+        .v-list-item--active>.v-list-item__overlay {
+            background: rgb(var(--v-theme-primary));
+            color: white;
+            box-shadow: 0 17px 20px -8px rgba(var(--v-theme-primary), 0.2);
+        }
+
+        >.v-list-group {
+            position: relative;
+
+            >.v-list-item--active,
+            >.v-list-item--active:hover {
+                background: rgb(var(--v-theme-primary));
+                color: white;
+                box-shadow: 0 17px 20px -8px rgba(var(--v-theme-primary), 0.2);
+            }
+
+            .v-list-group__items .v-list-item.v-list-item--active,
+            .v-list-group__items .v-list-item.v-list-item--active>.v-list-item__overlay {
+                background: transparent;
+                color: rgb(var(--v-theme-primary));
+            }
+        }
+    }
+}
+
+.v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
+    padding-inline: 14px;
+}
+
+.v-navigation-drawer--rail {
+
+    .scrollnavbar .v-list .v-list-group__items,
+    .hide-menu {
+        opacity: 1;
+    }
+
+
+    .leftPadding {
+        margin-left: 0px;
+    }
+}
+
+
+// scrollbar 
+.ps__rail-y {
+    z-index: 9;
+}
+
+.v-navigation-drawer {
+    box-shadow: none !important;
+    border-right: 0 !important;
+}

scss/layout/_topbar.scss

@@ -0,0 +1,56 @@
+.v-app-bar {
+    .v-toolbar__content {
+        padding: 0 24px 0 10px;
+        display: flex;
+        gap:8px;
+
+        >.v-btn:first-child {
+            margin-inline-start: 0;
+        }
+
+        .v-btn {
+            &.custom-hover-primary{
+                .iconify{
+                    color: rgba(var(--v-theme-textPrimary), 0.7) !important;
+                }
+                &:hover{
+                    background-color: rgb(var(--v-theme-lightprimary)) ;
+                    .iconify{
+                        color: rgb(var(--v-theme-primary)) !important;
+                    }   
+                   
+                }
+                
+            }
+            
+        }
+    }
+}
+
+.mobile_popup{
+    .v-btn {
+        &.custom-hover-primary{
+            .iconify{
+                color: rgba(var(--v-theme-textPrimary), 0.7) !important;
+            }
+        }
+    }
+}
+
+.custom-text-primary {
+    &:hover {
+        .custom-title {
+            color: rgb(var(--v-theme-primary)) !important;
+        }
+    }
+}
+
+
+
+@media screen and (max-width:1279px) {
+    .mini-sidebar {
+        .v-navigation-drawer.v-navigation-drawer--left {
+            width: 260px !important;
+        }
+    }
+}

scss/pages/_dashboards.scss

@@ -0,0 +1,141 @@
+// Dashboard 1
+.welcome-img{
+    max-height: 200px;
+    height: 200px;
+}
+
+.labels-chart .label-1 {
+    position: absolute;
+    width: 25px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    top: -3px
+}
+
+.labels-chart .label-2 {
+    position: absolute;
+    right: 0;
+    top: 50%
+}
+
+.labels-chart .label-3 {
+    position: absolute;
+    width: 40px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    bottom: 0;
+    text-align: center
+}
+
+.labels-chart .label-4 {
+    position: absolute;
+    top: 50%
+}
+
+// Revenue Products
+.revenue-products {
+    .v-slide-group__content {
+        gap: 24px;
+    }
+
+    .v-btn {
+        background-color: rgba(var(--v-theme-grey100), 0.8);
+        padding: 12px 24px;
+    }
+
+    .v-slide-group-item--active.v-tab--selected {
+        background-color: rgba(var(--v-theme-primary));
+
+        .v-btn__content {
+            color: #fff;
+
+            .v-tab__slider {
+                display: none;
+            }
+        }
+    }
+}
+
+// Dashboard 2
+.bg-primary-gt {
+    background: linear-gradient(261.23deg, rgba(var(--v-theme-primary)) .42%, #5a52ff 100%) !important;
+
+    img {
+        bottom: 0;
+        right: 0;
+        z-index: -1;
+    }
+}
+
+.profit-card {
+    .badge-custom-dark {
+        background-color: rgba(41, 52, 61, .2) !important;
+        padding: 5px 12px;
+        width: fit-content;
+    }
+}
+
+.rounded-bars {
+    .apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path {
+        clip-path: inset(0 0 5% 0 round 20px);
+    }
+}
+
+.rounded-pill-bars .apexcharts-rangebar-area {
+    clip-path: inset(9% 0% 11% round 24px);
+}
+
+// Annual Profit
+.annual-list {
+    .list {
+        &:last-child {
+            border-bottom: 0 !important;
+            padding-bottom: 0 !important;
+        }
+    }
+}
+
+.daily-activities {
+    .line {
+        width: 1px;
+        height: 50px;
+        margin-top: -6px;
+    }
+}
+
+//Dashboard 3
+.primary-gradient {
+    background: linear-gradient(180deg,rgba(var(--v-theme-primary),.12) 0,rgba(var(--v-theme-primary),.03) 100%)
+}
+
+.warning-gradient {
+    background: linear-gradient(180deg,rgba(var(--v-theme-warning),.12) 0,rgba(var(--v-theme-warning),.03) 100%)
+}
+
+.secondary-gradient {
+    background: linear-gradient(180deg,rgba(var(--v-theme-secondary),.12) 0,rgba(var(--v-theme-secondary),.03) 100%)
+}
+
+.error-gradient {
+    background: linear-gradient(180deg,rgba(var(--v-theme-error),.12) 0,rgba(var(--v-theme-error),.03) 100%)
+}
+
+.success-gradient {
+    background: linear-gradient(180deg,rgba(var(--v-theme-success),.12) 0,rgba(var(--v-theme-success),.03) 100%)
+}
+
+
+.icon-grid-width{
+    width: 20% !important;
+    @media screen and (max-width:1190px) {
+        width: 33% !important;
+    }
+}   
+
+@media screen and (max-width:1368px){
+    .welcome-img {
+        max-height: 150px;
+    }
+}

scss/style.scss

@@ -0,0 +1,15 @@
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
+@import './variables';
+@import 'vuetify/styles/main.sass';
+@import './layout/container';
+@import './layout/sidebar';
+@import './layout/topbar';
+@import './components/VButtons';
+@import './components/VCard';
+@import './components/VInput';
+@import './components/VField';
+@import './components/VNavigationDrawer';
+@import './components/VShadow';
+@import './components/VTable'; 
+@import 'pages/dashboards';
+@import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';