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

refactor: improve layout and styling in cutting forms for better user experience and responsiveness

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-07 10:03:42 +07:00
parent d2ddc5e6b7
commit da4467b500
5 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/layouts/AdminLayout.vue
View File

@ -31,7 +31,7 @@ const page = usePage();
<UserNav /> <UserNav />
</div> </div>
</header> </header>
<div class="flex min-w-0 flex-1 flex-col gap-4 overflow-y-auto p-4 pb-24 lg:pb-4"> <div class="flex min-w-0 flex-1 flex-col gap-4 overflow-y-auto overflow-x-hidden p-4 pb-24 lg:pb-4">
<slot /> <slot />
</div> </div>
</SidebarInset> </SidebarInset>

2
resources/js/pages/admin/manage/cuttings/form/CuttingPosForm.vue
View File

@ -265,7 +265,7 @@ function onProductCreated(product: CuttingProductCatalogItem) {
<template> <template>
<div class="grid min-w-0 gap-4 xl:grid-cols-[1fr_400px]"> <div class="grid min-w-0 gap-4 xl:grid-cols-[1fr_400px]">
<div class="space-y-4"> <div class="min-w-0 space-y-4">
<CuttingPosMaterialCatalogPanel v-model:material-search="materialSearch" <CuttingPosMaterialCatalogPanel v-model:material-search="materialSearch"
:filtered-raw-materials="filteredRawMaterials" :raw-material-catalog="rawMaterialCatalogState" :filtered-raw-materials="filteredRawMaterials" :raw-material-catalog="rawMaterialCatalogState"
:material-cart="materialCart" :get-material-cart-item="getMaterialCartItem" :units="units" :material-cart="materialCart" :get-material-cart-item="getMaterialCartItem" :units="units"

2
resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialCatalogPanel.vue
View File

@ -77,7 +77,7 @@ function openCombination(rawMaterial: CuttingRawMaterialCatalogItem, price: Cutt
</Empty> </Empty>
</div> </div>
<div v-else class="columns-1 gap-4 sm:columns-2 xl:columns-3"> <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2">
<template v-for="rawMaterial in filteredRawMaterials" :key="rawMaterial.id"> <template v-for="rawMaterial in filteredRawMaterials" :key="rawMaterial.id">
<PosCatalogCard v-if="rawMaterial.prices.length > 0" <PosCatalogCard v-if="rawMaterial.prices.length > 0"
:title="rawMaterial.name" :cover-image="getFirstCoverImage(rawMaterial.prices)"> :title="rawMaterial.name" :cover-image="getFirstCoverImage(rawMaterial.prices)">

2
resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialSummaryItems.vue
View File

@ -98,7 +98,7 @@ function setCombinationResult(combinationId: number | undefined, value: string)
Belum ada bahan baku dipilih. Belum ada bahan baku dipilih.
</div> </div>
<div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overscroll-y-contain"> <div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overflow-x-hidden overscroll-y-contain">
<template v-for="group in materialGroups" :key="group.combinationId ?? `single-${group.items[0]?.index}`"> <template v-for="group in materialGroups" :key="group.combinationId ?? `single-${group.items[0]?.index}`">
<div v-if="group.type === 'combination'" <div v-if="group.type === 'combination'"
class="rounded-lg border-2 border-dashed border-primary/30 p-3"> class="rounded-lg border-2 border-dashed border-primary/30 p-3">

2
resources/js/pages/admin/manage/cuttings/form/CuttingPosResultSummaryItems.vue
View File

@ -41,7 +41,7 @@ const emit = defineEmits<{
Belum ada produk hasil dipilih. Belum ada produk hasil dipilih.
</div> </div>
<div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overscroll-y-contain"> <div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overflow-x-hidden overscroll-y-contain">
<div v-for="(item, index) in resultCart" :key="item.product_variant_id" class="rounded-lg border p-3"> <div v-for="(item, index) in resultCart" :key="item.product_variant_id" class="rounded-lg border p-3">
<div class="mb-2 flex items-start justify-between gap-2"> <div class="mb-2 flex items-start justify-between gap-2">
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">