routie dev init since i didn't adhere to any proper guidance up until now

frontend/node_modules/vuetify/lib/labs/VPie/VPie.sass

@@ -0,0 +1,112 @@
+@use '../../styles/tools'
+@use './variables' as *
+
+@include tools.layer('components')
+  .v-pie
+    display: grid
+    align-items: center
+    column-gap: 24px
+    --v-pie-size: 250px
+
+    &--legend
+      &-top
+        grid-template-areas: 'title' 'legend' 'content'
+        grid-template-columns: var(--v-pie-size)
+      &-bottom
+        grid-template-areas: 'title' 'content' 'legend'
+        grid-template-columns: var(--v-pie-size)
+      &-right
+        grid-template-areas: 'title .' 'content legend'
+      &-left
+        grid-template-areas: '. title' 'legend content'
+      &-hidden
+        grid-template-areas: 'title' 'content'
+
+    &__title
+      grid-area: title
+      text-align: center
+      padding-bottom: $pie-title-padding-bottom
+
+    &__content
+      grid-area: content
+      position: relative
+      width: var(--v-pie-size)
+      height: var(--v-pie-size)
+
+      @include tools.layer('overrides')
+        .v-overlay__scrim,
+        .v-overlay__content
+          pointer-events: none
+
+      @include tools.layer('trumps')
+        // expected to get bg-* class for text color
+        // actual background is applied to underlay
+        background: none
+
+    &__segments
+      border-radius: 50%
+
+    &__content-underlay
+      border-radius: 50%
+      position: absolute
+      inset: $pie-underlay-inset
+      pointer-events: none
+      z-index: -1
+
+    &__center-content
+      position: absolute
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%)
+      pointer-events: none
+
+      > div
+        pointer-events: auto
+
+    &__legend
+      grid-area: legend
+      padding-block: $pie-legend-padding-block
+
+      .v-avatar
+        border: $pie-legend-avatar-border
+
+      .v-chip__content
+        width: 100%
+
+      .v-chip-group .v-chip:not(.v-chip--selected)
+        opacity: $pie-legend-chip-disabled-opacity
+
+      &__text
+        font-size: $pie-legend-chip-default-font-size
+        white-space: nowrap
+        width: 100%
+
+        .v-chip--density-compact &
+          font-size: $pie-legend-chip-compact-font-size
+
+    .v-chip.v-chip--density-comfortable .v-avatar--start
+      margin-inline-start: -6px
+
+    .v-chip.v-chip--density-default .v-avatar--start
+      margin-inline-start: -4px
+
+    &-segment
+      pointer-events: none
+      position: absolute
+      inset: 0
+
+      .v-pie-segment__overlay
+        pointer-events: auto
+        opacity: 0
+
+    &__tooltip-content
+      .v-list-item
+        padding-inline: 0
+        min-width: $pie-tooltip-min-width
+        zoom: 0.88
+
+      .v-list-item-subtitle
+        opacity: 1
+
+      .v-avatar
+        border: $pie-tooltip-avatar-border