checkin footers detail

pages/CheckInPasien/checkIn.vue

@@ -2,8 +2,9 @@
   <v-app class="bg-modern">
     <v-main class="no-overflow">
       <v-container fluid class="no-scroll-container pa-2 pa-md-4">
-        <v-row align="start" justify="center" class="fill-height">
-          <v-col cols="12" sm="11" md="10" lg="8" xl="7" class="d-flex flex-column">
+        <v-row align="start" justify="center" class="fill-height layout-with-sidebar" no-gutters>
+          <!-- Main Content -->
+          <v-col cols="12" sm="11" md="10" lg="8" xl="7" class="d-flex flex-column main-content-col">
             <!-- Main Card dengan Glassmorphism -->
             <v-card class="main-card" elevation="0">
               
@@ -601,37 +602,68 @@
               </v-card-text>
             </v-card>
 
-            <!-- Stats Footer Minimalis -->
-            <div class="stats-footer-modern mt-3">
-              <v-row dense>
-                <v-col cols="4">
-                  <div class="stat-card-modern">
-                    <div class="stat-icon-modern">
-                      <v-icon :color="primaryColor" size="20">mdi-clock-outline</v-icon>
-                    </div>
-                    <div class="stat-value">{{ statsToday }}</div>
-                    <div class="stat-label">Hari Ini</div>
-                  </div>
-                </v-col>
-                <v-col cols="4">
-                  <div class="stat-card-modern">
-                    <div class="stat-icon-modern">
-                      <v-icon color="success" size="20">mdi-check-circle</v-icon>
-                    </div>
-                    <div class="stat-value">{{ statsCompleted }}</div>
-                    <div class="stat-label">Selesai</div>
-                  </div>
-                </v-col>
-                <v-col cols="4">
-                  <div class="stat-card-modern">
-                    <div class="stat-icon-modern">
-                      <v-icon :color="secondaryColor" size="20">mdi-account-group</v-icon>
-                    </div>
-                    <div class="stat-value">{{ statsWaiting }}</div>
-                    <div class="stat-label">Menunggu</div>
-                  </div>
-                </v-col>
-              </v-row>
+            <!-- Stats Footer (Horizontal) - For Small Screens -->
+            <div class="stats-footer-horizontal mt-3">
+              <div class="stat-item-footer stat-item-footer-primary">
+                <div class="stat-icon-footer">
+                  <v-icon color="#5865f2" size="20">mdi-clock-outline</v-icon>
+                </div>
+                <div class="stat-content-footer">
+                  <div class="stat-value-footer">{{ statsToday }}</div>
+                  <div class="stat-label-footer">Hari Ini</div>
+                </div>
+              </div>
+              <div class="stat-item-footer stat-item-footer-success">
+                <div class="stat-icon-footer">
+                  <v-icon color="#57f287" size="20">mdi-check-circle</v-icon>
+                </div>
+                <div class="stat-content-footer">
+                  <div class="stat-value-footer">{{ statsCompleted }}</div>
+                  <div class="stat-label-footer">Selesai</div>
+                </div>
+              </div>
+              <div class="stat-item-footer stat-item-footer-secondary">
+                <div class="stat-icon-footer">
+                  <v-icon color="#faa61a" size="20">mdi-account-group</v-icon>
+                </div>
+                <div class="stat-content-footer">
+                  <div class="stat-value-footer">{{ statsWaiting }}</div>
+                  <div class="stat-label-footer">Menunggu</div>
+                </div>
+              </div>
+            </div>
+          </v-col>
+
+          <!-- Stats Sidebar (Discord-style) - Right Side -->
+          <v-col cols="auto" class="stats-sidebar-right d-none d-lg-flex">
+            <div class="stats-sidebar-discord">
+              <div class="stat-item-discord stat-item-primary" :title="`Hari Ini: ${statsToday} check-in`">
+                <div class="stat-icon-discord">
+                  <v-icon color="#5865f2" size="26">mdi-clock-outline</v-icon>
+                </div>
+                <div class="stat-content-discord">
+                  <div class="stat-value-discord">{{ statsToday }}</div>
+                  <div class="stat-label-discord">Hari Ini</div>
+                </div>
+              </div>
+              <div class="stat-item-discord stat-item-success" :title="`Selesai: ${statsCompleted} check-in`">
+                <div class="stat-icon-discord">
+                  <v-icon color="#57f287" size="26">mdi-check-circle</v-icon>
+                </div>
+                <div class="stat-content-discord">
+                  <div class="stat-value-discord">{{ statsCompleted }}</div>
+                  <div class="stat-label-discord">Selesai</div>
+                </div>
+              </div>
+              <div class="stat-item-discord stat-item-secondary" :title="`Menunggu: ${statsWaiting} pasien`">
+                <div class="stat-icon-discord">
+                  <v-icon color="#faa61a" size="26">mdi-account-group</v-icon>
+                </div>
+                <div class="stat-content-discord">
+                  <div class="stat-value-discord">{{ statsWaiting }}</div>
+                  <div class="stat-label-discord">Menunggu</div>
+                </div>
+              </div>
             </div>
           </v-col>
         </v-row>
@@ -3864,6 +3896,238 @@ if (typeof window !== 'undefined') {
   animation: slideUp 0.5s ease-out 0.3s both;
 }
 
+/* Layout with Sidebar */
+.layout-with-sidebar {
+  gap: 0;
+}
+
+@media (min-width: 1264px) {
+  .layout-with-sidebar {
+    gap: 16px;
+  }
+}
+
+/* Stats Sidebar Discord-style (Right Side) */
+.main-content-col {
+  padding-right: 0;
+}
+
+@media (min-width: 1264px) {
+  .main-content-col {
+    padding-right: 20px;
+  }
+}
+
+.stats-sidebar-right {
+  padding-left: 0;
+  min-width: 80px;
+  display: none;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-shrink: 0;
+}
+
+@media (min-width: 1264px) {
+  .stats-sidebar-right {
+    display: flex !important;
+  }
+}
+
+.stats-sidebar-discord {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 4px;
+  width: 80px;
+  height: fit-content;
+  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+@media (min-width: 1264px) {
+  .stats-sidebar-discord {
+    position: sticky;
+    top: 12px;
+  }
+}
+
+.stat-item-discord {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  width: 72px;
+  margin: 0 auto;
+  padding: 8px 0;
+  border-radius: 12px;
+}
+
+.stat-item-discord::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 0;
+  background: currentColor;
+  border-radius: 0 3px 3px 0;
+  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 0;
+}
+
+.stat-item-discord:hover::before {
+  height: 40px;
+  opacity: 1;
+}
+
+.stat-item-primary {
+  color: #5865f2;
+}
+
+.stat-item-success {
+  color: #57f287;
+}
+
+.stat-item-secondary {
+  color: #faa61a;
+}
+
+.stat-item-discord:hover {
+  background: rgba(0, 0, 0, 0.04);
+  transform: translateX(2px);
+}
+
+.stat-icon-discord {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  background: #f5f5f5;
+  border: 2px solid rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.stat-icon-discord::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  padding: 2px;
+  background: linear-gradient(135deg, currentColor, transparent);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+.stat-item-discord:hover .stat-icon-discord::after {
+  opacity: 1;
+}
+
+.stat-icon-discord .v-icon {
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  z-index: 1;
+}
+
+.stat-item-primary .stat-icon-discord {
+  background: rgba(88, 101, 242, 0.1);
+  border-color: rgba(88, 101, 242, 0.3);
+}
+
+.stat-item-primary:hover .stat-icon-discord {
+  background: #5865f2;
+  border-color: #5865f2;
+  border-radius: 18px;
+  box-shadow: 0 4px 16px rgba(88, 101, 242, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.stat-item-primary:hover .stat-icon-discord .v-icon {
+  color: white !important;
+  transform: scale(1.1) rotate(5deg);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+}
+
+.stat-item-success .stat-icon-discord {
+  background: rgba(87, 242, 135, 0.1);
+  border-color: rgba(87, 242, 135, 0.3);
+}
+
+.stat-item-success:hover .stat-icon-discord {
+  background: #57f287;
+  border-color: #57f287;
+  border-radius: 18px;
+  box-shadow: 0 4px 16px rgba(87, 242, 135, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.stat-item-success:hover .stat-icon-discord .v-icon {
+  color: white !important;
+  transform: scale(1.1) rotate(-5deg);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+}
+
+.stat-item-secondary .stat-icon-discord {
+  background: rgba(250, 166, 26, 0.1);
+  border-color: rgba(250, 166, 26, 0.3);
+}
+
+.stat-item-secondary:hover .stat-icon-discord {
+  background: #faa61a;
+  border-color: #faa61a;
+  border-radius: 18px;
+  box-shadow: 0 4px 16px rgba(250, 166, 26, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.stat-item-secondary:hover .stat-icon-discord .v-icon {
+  color: white !important;
+  transform: scale(1.1) rotate(5deg);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+}
+
+.stat-content-discord {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  margin-top: 8px;
+  opacity: 0.8;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.stat-item-discord:hover .stat-content-discord {
+  opacity: 1;
+  transform: translateY(-1px);
+}
+
+.stat-value-discord {
+  font-size: 15px;
+  font-weight: 800;
+  color: #1a1a1a;
+  letter-spacing: -0.3px;
+  line-height: 1.2;
+}
+
+.stat-label-discord {
+  font-size: 9px;
+  color: #6b7280;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  line-height: 1.2;
+  text-align: center;
+}
+
 @keyframes slideUp {
   from { 
     opacity: 0; 
@@ -4153,6 +4417,152 @@ if (typeof window !== 'undefined') {
     max-height: 220px;
     max-width: 220px;
   }
+  
+  /* Hide stats sidebar on mobile */
+  .stats-sidebar-right {
+    display: none !important;
+  }
+  
+  .main-content-col {
+    padding-right: 0 !important;
+  }
+}
+
+/* Stats Footer Horizontal - For Small Screens */
+.stats-footer-horizontal {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+  padding: 12px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.stat-item-footer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 4px;
+  border-radius: 10px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  position: relative;
+}
+
+.stat-item-footer:hover {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.stat-icon-footer {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  background: #f5f5f5;
+  border: 2px solid rgba(0, 0, 0, 0.08);
+  margin-bottom: 6px;
+}
+
+.stat-item-footer-primary .stat-icon-footer {
+  background: rgba(88, 101, 242, 0.1);
+  border-color: rgba(88, 101, 242, 0.3);
+}
+
+.stat-item-footer-primary:hover .stat-icon-footer {
+  background: #5865f2;
+  border-color: #5865f2;
+  transform: scale(1.1);
+}
+
+.stat-item-footer-primary:hover .stat-icon-footer .v-icon {
+  color: white !important;
+}
+
+.stat-item-footer-success .stat-icon-footer {
+  background: rgba(87, 242, 135, 0.1);
+  border-color: rgba(87, 242, 135, 0.3);
+}
+
+.stat-item-footer-success:hover .stat-icon-footer {
+  background: #57f287;
+  border-color: #57f287;
+  transform: scale(1.1);
+}
+
+.stat-item-footer-success:hover .stat-icon-footer .v-icon {
+  color: white !important;
+}
+
+.stat-item-footer-secondary .stat-icon-footer {
+  background: rgba(250, 166, 26, 0.1);
+  border-color: rgba(250, 166, 26, 0.3);
+}
+
+.stat-item-footer-secondary:hover .stat-icon-footer {
+  background: #faa61a;
+  border-color: #faa61a;
+  transform: scale(1.1);
+}
+
+.stat-item-footer-secondary:hover .stat-icon-footer .v-icon {
+  color: white !important;
+}
+
+.stat-content-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.stat-value-footer {
+  font-size: 14px;
+  font-weight: 700;
+  color: #1a1a1a;
+  letter-spacing: -0.2px;
+  line-height: 1.2;
+}
+
+.stat-label-footer {
+  font-size: 8px;
+  color: #6b7280;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  line-height: 1.2;
+  text-align: center;
+}
+
+@media (max-width: 960px) {
+  .stat-icon-footer {
+    width: 36px;
+    height: 36px;
+  }
+  
+  .stat-icon-footer .v-icon {
+    font-size: 18px !important;
+  }
+  
+  .stat-value-footer {
+    font-size: 13px;
+  }
+  
+  .stat-label-footer {
+    font-size: 7px;
+  }
+}
+
+@media (min-width: 1264px) {
+  .stats-footer-horizontal {
+    display: none !important;
+  }
 }
 
 /* Mobile Landscape */