josh/BarangaySystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial: bootstrap from BukidBountyApp base

Browse Source
This commit is contained in:
Jonathan Sykes
2026-06-06 18:43:00 +08:00
commit eb4a5731fb
5674 changed files with 160857 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
resources/js/Components/Market/PosHistoryCard.vue Normal file
View File

@@ -0,0 +1,259 @@
<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
session: {
type: Object,
required: true
}
});
const isExpanded = ref(false);
const toggleExpand = () => {
isExpanded.value = !isExpanded.value;
};
const transactions = computed(() => {
return props.session.transactions || [];
});
const formattedDate = computed(() => {
if (!props.session.created_at) return 'N/A';
const date = new Date(props.session.created_at);
return date.toLocaleString('en-PH', {
month: 'short',
day: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12: true
}).replace(',', ' •');
});
const statusClass = computed(() => {
switch (props.session.status) {
case 'completed': return 'badge-soft-success';
case 'active': return 'badge-soft-primary';
case 'voided': return 'badge-soft-danger';
default: return 'badge-soft-secondary';
}
});
const paymentIcon = computed(() => {
switch (props.session.payment_method?.toLowerCase()) {
case 'cash': return 'fas fa-money-bill-wave';
case 'credit': return 'fas fa-credit-card';
case 'online': return 'fas fa-mobile-alt';
default: return 'fas fa-receipt';
}
});
const formatCurrency = (amount) => {
return new Intl.NumberFormat('en-PH', {
style: 'currency',
currency: 'PHP'
}).format(amount);
};
const getProductInfo = (transaction) => {
return {
name: transaction.product?.name || 'Unknown Product',
quantity: transaction.quantity || 0,
unitPrice: transaction.price_at_sale || 0,
totalPrice: transaction.total_price || 0
};
};
</script>
<template>
<div class="card mb-3 border-0 shadow-sm rounded-4 overflow-hidden pos-history-card">
<div class="card-body p-3">
<div class="d-flex justify-content-between align-items-start mb-2">
<div>
<span :class="['badge rounded-pill px-3 py-2 text-uppercase fw-bold', statusClass]">
{{ session.status }}
</span>
<h6 class="mb-0 mt-2 text-primary fw-bold">
{{ session.customer_name || 'Walk-in Customer' }}
</h6>
<small class="text-muted d-block mt-1">
<i class="far fa-clock me-1"></i> {{ formattedDate }}
</small>
</div>
<div class="text-end">
<h5 class="mb-0 fw-black text-dark">
{{ formatCurrency(session.total_amount) }}
</h5>
<small class="text-muted">
{{ session.items_count }} {{ session.items_count === 1 ? 'item' : 'items' }}
</small>
</div>
</div>
<div class="d-flex align-items-center justify-content-between mt-3 pt-3 border-top border-light">
<div class="d-flex align-items-center">
<div class="payment-icon-wrapper bg-light rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 32px; height: 32px;">
<i :class="[paymentIcon, 'text-muted sm']"></i>
</div>
<span class="text-muted small text-capitalize">{{ session.payment_method || 'N/A' }}</span>
</div>
<div v-if="session.hashkey" class="text-muted small">
<span class="badge bg-light text-muted fw-normal rounded-pill">#{{ session.hashkey.substring(0, 8) }}</span>
</div>
</div>
<!-- Expandable Items Section -->
<div v-if="isExpanded && transactions.length > 0" class="items-section mt-3 pt-3 border-top border-light">
<div class="items-header d-flex align-items-center mb-2">
<i class="fas fa-box-open text-muted me-2"></i>
<span class="text-muted small fw-bold">Transaction Items</span>
</div>
<div class="items-list">
<div v-for="item in transactions" :key="item.id" class="item-row d-flex align-items-center justify-content-between py-2 border-bottom border-light">
<div class="item-info flex-grow-1">
<div class="item-name text-dark fw-semibold small">
{{ getProductInfo(item).name }}
</div>
<div class="item-qty text-muted small">
{{ getProductInfo(item).quantity }} × {{ formatCurrency(getProductInfo(item).unitPrice) }}
</div>
</div>
<div class="item-total text-end">
<span class="fw-bold text-dark small">
{{ formatCurrency(getProductInfo(item).totalPrice) }}
</span>
</div>
</div>
</div>
</div>
<!-- Footer with Toggle Button -->
<div
v-if="transactions.length > 0"
class="card-footer-toggle d-flex align-items-center justify-content-center mt-3 pt-3 border-top border-light cursor-pointer"
@click="toggleExpand"
>
<span class="text-muted small fw-bold me-2">
{{ isExpanded ? 'Hide Items' : 'View Items' }}
</span>
<i :class="['fas text-muted small', isExpanded ? 'fa-chevron-up' : 'fa-chevron-down']"></i>
</div>
</div>
</div>
</template>
<style scoped>
.pos-history-card {
transition: transform 0.2s, box-shadow 0.2s;
background: var(--bg-card);
}
.pos-history-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}
:global(.dark-mode) .pos-history-card {
background: rgba(var(--bg-card-rgb), 0.7);
backdrop-filter: blur(15px);
}
.badge-soft-success {
background-color: rgba(40, 167, 69, 0.1);
color: #28a745;
}
.badge-soft-primary {
background-color: rgba(0, 123, 255, 0.1);
color: #007bff;
}
.badge-soft-danger {
background-color: rgba(220, 53, 69, 0.1);
color: #dc3545;
}
.badge-soft-secondary {
background-color: rgba(108, 117, 125, 0.1);
color: #6c757d;
}
:global(.dark-mode) .badge-soft-success { background-color: rgba(40, 167, 69, 0.2); }
:global(.dark-mode) .badge-soft-primary { background-color: rgba(0, 123, 255, 0.2); }
:global(.dark-mode) .badge-soft-danger { background-color: rgba(220, 53, 69, 0.2); }
:global(.dark-mode) .border-light { border-color: rgba(255,255,255,0.05) !important; }
/* Font Awesome standard sizes for visual hierarchy as per dictionary */
.sm { font-size: 0.875rem; }
/* Items section styling */
.items-section {
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
}
to {
opacity: 1;
max-height: 500px;
}
}
.item-row:last-child {
border-bottom: none !important;
}
.item-row {
transition: background-color 0.2s;
}
.item-row:hover {
background-color: rgba(0, 0, 0, 0.02);
}
:global(.dark-mode) .item-row:hover {
background-color: rgba(255, 255, 255, 0.02);
}
:global(.dark-mode) .item-name,
:global(.dark-mode) .item-total span {
color: var(--text-primary) !important;
}
/* Toggle button styling */
.card-footer-toggle {
transition: background-color 0.2s;
}
.cursor-pointer {
cursor: pointer;
}
.card-footer-toggle:hover {
background-color: rgba(0, 0, 0, 0.02);
}
:global(.dark-mode) .card-footer-toggle:hover {
background-color: rgba(255, 255, 255, 0.02);
}
/* Mobile responsiveness */
@media (max-width: 576px) {
.item-name {
font-size: 0.75rem;
}
.item-qty {
font-size: 0.7rem;
}
.item-total span {
font-size: 0.75rem;
}
}
</style>