dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance order display by improving card overflow handling and text wrapping
Some checks are pending
linter / quality (push) Waiting to run
Details
tests / ci (8.3) (push) Waiting to run
Details
tests / ci (8.4) (push) Waiting to run
Details
tests / ci (8.5) (push) Waiting to run
Details

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-17 19:14:03 +07:00
parent 76c24dc909
commit 54b1f8c7f8
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
resources/js/pages/admin/manage/orders/Show.vue
View File

@ -196,9 +196,9 @@ const feeEntries = computed(() => {
<div class="grid gap-6 lg:grid-cols-3">
<!-- Main content -->
<div class="space-y-6 lg:col-span-2">
<div class="min-w-0 space-y-6 lg:col-span-2">
<!-- Order Info -->
<Card>
<Card class="overflow-hidden">
<CardHeader>
<CardTitle class="flex items-center gap-2">
<Package class="size-5" />
@ -260,13 +260,13 @@ const feeEntries = computed(() => {
<div v-if="order.notes" class="mt-4 rounded-md border border-dashed p-3">
<p class="text-muted-foreground mb-1 text-sm">Catatan</p>
<p class="text-sm">{{ order.notes }}</p>
<p class="break-words text-sm">{{ order.notes }}</p>
</div>
</CardContent>
</Card>
<!-- Order Items -->
<Card>
<Card class="overflow-hidden">
<CardHeader>
<CardTitle class="flex items-center gap-2">
<Package class="size-5" />
@ -297,10 +297,10 @@ const feeEntries = computed(() => {
<TableCell class="text-muted-foreground tabular-nums">
{{ index + 1 }}
</TableCell>
<TableCell class="font-medium">
<TableCell class="max-w-[200px] truncate font-medium">
{{ item.product_name || item.product_variant?.product?.name }}
</TableCell>
<TableCell>
<TableCell class="max-w-[160px] truncate">
{{ item.variant_name || item.product_variant?.name }}
</TableCell>
<TableCell>
@ -325,7 +325,7 @@ const feeEntries = computed(() => {
</Card>
<!-- Fee & Profit Breakdown -->
<Card>
<Card class="overflow-hidden">
<CardHeader>
<CardTitle class="flex items-center gap-2">
<Receipt class="size-5" />
@ -392,9 +392,9 @@ const feeEntries = computed(() => {
</div>
<!-- Sidebar -->
<div class="space-y-6">
<div class="min-w-0 space-y-6">
<!-- Customer Info -->
<Card>
<Card class="overflow-hidden">
<CardHeader>
<CardTitle class="flex items-center gap-2">
<User class="size-5" />
@ -405,7 +405,7 @@ const feeEntries = computed(() => {
<div v-if="order.customer" class="space-y-3">
<div>
<p class="text-muted-foreground text-sm">Nama</p>
<p class="font-medium">{{ order.customer.name }}</p>
<p class="break-words font-medium">{{ order.customer.name }}</p>
</div>
<div v-if="order.customer.phone_number" class="flex items-start gap-2">
<Phone class="text-muted-foreground mt-0.5 size-4 shrink-0" />
@ -418,7 +418,7 @@ const feeEntries = computed(() => {
<MapPin class="text-muted-foreground mt-0.5 size-4 shrink-0" />
<div>
<p class="text-muted-foreground text-sm">Alamat</p>
<p class="font-medium whitespace-pre-line">{{ order.customer.address }}</p>
<p class="break-words font-medium whitespace-pre-line">{{ order.customer.address }}</p>
</div>
</div>
</div>
@ -429,7 +429,7 @@ const feeEntries = computed(() => {
</Card>
<!-- Financial Summary -->
<Card>
<Card class="overflow-hidden">
<CardHeader>
<CardTitle class="flex items-center gap-2">
<CreditCard class="size-5" />
@ -456,7 +456,7 @@ const feeEntries = computed(() => {
<div v-if="order.cash_transaction" class="mt-4 rounded-md bg-muted/50 p-3">
<p class="text-muted-foreground mb-1 text-xs">Transaksi Kas</p>
<p class="text-sm font-medium">{{ order.cash_transaction.description }}</p>
<p class="break-words text-sm font-medium">{{ order.cash_transaction.description }}</p>
<p class="text-muted-foreground text-xs">
{{ order.cash_transaction.created_at }}
</p>
@ -465,7 +465,7 @@ const feeEntries = computed(() => {
</Card>
<!-- Bukti Transaksi -->
<Card v-if="order.photos">
<Card v-if="order.photos" class="overflow-hidden">
<CardHeader>
<CardTitle class="flex items-center gap-2">
<Receipt class="size-5" />