initial: bootstrap from BukidBountyApp base

resources/js/Components/Market/PosTodayStats.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="pos-today-stats mb-4">
+    <div class="d-flex align-items-center justify-content-between mb-3 mt-1">
+      <div class="d-flex align-items-center">
+        <div class="icon-avatar me-3 shadow-sm">
+          <i class="fas fa-chart-line text-primary"></i>
+        </div>
+        <div>
+          <h5 class="fw_7 mb-0">Today's Performance</h5>
+          <span class="text-muted small">Daily sales summary</span>
+        </div>
+      </div>
+      <div v-if="!loading" class="date-badge px-3 py-1 text-primary small fw_6 rounded-pill border">
+        Today
+      </div>
+    </div>
+
+    <div v-if="loading" class="text-center py-4 glass-card p-3 p-md-4 rounded-xl">
+      <div class="spinner-border text-primary spinner-border-sm" role="status">
+        <span class="sr-only">Loading...</span>
+      </div>
+      <p class="small text-muted mt-2 mb-0">Fetching stats...</p>
+    </div>
+
+    <div v-else class="glass-card p-3 p-md-4 rounded-xl">
+        <div class="row text-center mt-2">
+            <div class="col-6 border-right">
+                <p class="small text-muted mb-1 text-uppercase ls_1">Transactions</p>
+                <h3 class="mb-0 fw_7">{{ todayStats.count || 0 }}</h3>
+            </div>
+            <div class="col-6">
+                <p class="small text-muted mb-1 text-uppercase ls_1">Total Sales</p>
+                <h3 class="mb-0 fw_7">₱{{ formatAmount(todayStats.total) }}</h3>
+            </div>
+        </div>
+        
+        <div v-if="!loading && todayStats.store_name" class="mt-3 text-center border-top-dashed pt-3">
+            <p class="small text-muted italic mb-0">
+                Terminal: <span class="fw_6 text-primary">{{ todayStats.store_name }}</span>
+            </p>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { usePosStore } from '../../stores/pos'
+
+const props = defineProps({
+  loading: { type: Boolean, default: false }
+})
+
+const posStore = usePosStore()
+const todayStats = computed(() => posStore.todayStats)
+
+const formatAmount = (val) => {
+  if (!val) return '0.00'
+  return parseFloat(val).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+}
+</script>
+
+<style scoped>
+.pos-today-stats {
+  transition: all 0.3s ease;
+}
+.ls_1 {
+  letter-spacing: 1px;
+}
+.border-right {
+    border-right: 1px solid var(--border-color);
+}
+.border-top-dashed {
+    border-top: 1px dashed var(--border-color);
+}
+.icon-avatar {
+    width: 44px;
+    height: 44px;
+    background: white;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+}
+.date-badge {
+    background: rgba(var(--primary-rgb), 0.05) !important;
+}
+
+.rounded-xl {
+    border-radius: 20px !important;
+}
+
+:global(.dark-mode) .icon-avatar {
+    background: #2d3138;
+}
+
+:global(.dark-mode) .icon-avatar i {
+    color: #10b981 !important;
+}
+:global(.dark-mode) .date-badge {
+    background: rgba(16, 185, 129, 0.1) !important;
+    color: #10b981 !important;
+}
+:global(.dark-mode) .text-primary {
+    color: #10b981 !important;
+}
+</style>