erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Viet An
2026-05-22 09:57:12 +07:00
parent 58367a4793
commit 09b8a096d9
27 changed files with 74 additions and 1041 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/styles/overrides-components.scss
View File

@@ -7,7 +7,7 @@
:root {
// somehow this value keeps picking dark mode values despite [data-theme]="light"
--bulma-hr-background-color: var(--bulma-grey-90);
--bulma-hr-background-color: var(--bulma-white-ter);
}
.title,

4
app/components/TopMenu.vue
View File

@@ -56,7 +56,7 @@
v-if="!v.submenu"
:class="[
'navbar-item rounded-lg is-clipped font-medium',
currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-30',
currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-dark',
]"
style="font-size: 13.5px"
@click="changeTab(v)"
@@ -70,7 +70,7 @@
<a
:class="[
'navbar-link rounded-lg is-arrowless font-medium',
currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-30',
currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-dark',
]"
@click="changeTab(v)"
style="font-size: 13.5px"

2
app/components/common/Avatarbox.vue
View File

@@ -11,7 +11,7 @@ const props = defineProps({
@click="$emit('justclick')"
class="rounded-full mx-0 px-0 size-10 font-bold is-flex is-justify-content-center is-align-items-center"
:style="{
border: image ? 'none' : '1px solid var(--bulma-grey-70)',
border: image ? 'none' : '1px solid var(--bulma-grey-light)',
}"
>
<figure

5
app/components/dashboard/AvatarBox.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
class="fs-13 font-semibold mx-0 px-0 is-flex is-justify-content-center is-align-items-center is-flex-shrink-0 rounded-full size-10"
style="border: 1px solid var(--bulma-grey-80)"
style="border: 1px solid var(--bulma-grey-lighter)"
:style="image && 'border: none'"
>
<div>
@@ -21,8 +21,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--grey-100);
border: 1px solid hsl(0, 0%, 85%);
border: var(--bulma-grey-lighter);
border-radius: 50%;
}
</style>

2
app/components/dashboard/DeliveryInteractive.vue
View File

@@ -538,6 +538,6 @@
border-left-width: 1px;
}
.border-gray-300 {
border-color: var(--bulma-grey-85);
border-color: var(--bulma-grey-lighter);
}
</style>

2
app/components/dashboard/Driver.vue
View File

@@ -12,7 +12,7 @@ const props = defineProps({
<div
class="is-flex is-gap-2 fs-14 p-3 rounded-lg"
:style="{
border: '1px solid var(--bulma-grey-80)',
border: '1px solid var(--bulma-grey-lighter)',
}"
>
<AvatarBox :text="name.slice(0, 2)" />

2
app/components/dashboard/TopProduct.vue
View File

@@ -13,7 +13,7 @@ const { $shortenCurrency } = useNuxtApp();
<div class="is-flex is-gap-1 is-justify-content-space-between mb-2">
<div>
<p>{{ name }}</p>
<p class="fs-13 has-text-grey-60">Đã bán {{ sold_count }} sản phẩm</p>
<p class="fs-13 has-text-grey">Đã bán {{ sold_count }} sản phẩm</p>
</div>
<p class="font-semibold">{{ $shortenCurrency(revenue) }}</p>
</div>

4
app/components/datatable/TableSetting.vue
View File

@@ -234,8 +234,8 @@ input[type="color"]::-webkit-color-swatch {
.box {
box-shadow: none;
border: 1px solid var(--bulma-grey-90);
background-color: var(--bulma-grey-95);
border: 1px solid var(--bulma-grey-lighter);
background-color: var(--bulma-white-bis);
height: 100%;
}
</style>

6
app/components/datatable/TimeOption.vue
View File

@@ -2,7 +2,7 @@
<div
v-if="timeRanges || !enableTime"
class="has-text-primary fixed-grid has-12-cols"
style="border-bottom: 2px solid var(--bulma-grey-80)"
style="border-bottom: 2px solid var(--bulma-grey-lighter)"
>
<div class="grid mb-3">
<div
@@ -22,7 +22,7 @@
@click="v.code !== current && changeOption(v)"
>
<span
:class="v.code === current ? 'font-bold has-text-orange' : 'font-medium has-text-grey-50'"
:class="v.code === current ? 'font-bold has-text-orange' : 'font-medium has-text-grey'"
style="text-wrap: nowrap"
>
{{ v.name }}
@@ -32,7 +32,7 @@
'tag rounded-md w-5 h-6 fs-13',
v.code === current
? 'font-bold has-text-orange has-background-orange-90'
: 'font-medium has-text-grey-40 has-background-grey-90',
: 'font-medium has-text-grey has-background-grey-white-ter',
]"
>{{ v.count }}</span
>

4
app/components/datepicker/PickDay.vue
View File

@@ -68,7 +68,7 @@
>
<span
v-if="m.disable"
class="fs-13 has-text-grey-80"
class="fs-13 has-text-grey-lighter"
>
{{ m.dayPrint }}
</span>
@@ -84,7 +84,7 @@
{
'has-background-primary-50 has-text-white': m.date === curdate,
'has-background-success-50 has-text-white': m.date === today,
'has-text-grey-70': m.currentMonth !== m.monthCondition,
'has-text-grey-light': m.currentMonth !== m.monthCondition,
},
]"
>

2
app/components/imports/Color.vue
View File

@@ -7,6 +7,6 @@ const props = defineProps({
<template>
<div
class="w-full h-4"
:style="{ backgroundColor: color, outline: '1px solid var(--bulma-grey-85)' }"
:style="{ backgroundColor: color, outline: '1px solid var(--bulma-grey-lighter)' }"
></div>
</template>

22
app/components/imports/Imports.vue
View File

@@ -1,9 +1,31 @@
<script setup>
import Products from "@/components/imports/Products.vue";
const { $snackbar } = useNuxtApp();
</script>
<template>
<div class="fixed-grid has-12-cols">
<div class="grid">
<div class="cell is-col-span-12">
<button @click="$snackbar('heyo', 'Success')">click</button>
<hr />
<div class="is-flex">
<div class="size-16 has-background-black"></div>
<div class="size-16 has-background-black-bis"></div>
<div class="size-16 has-background-black-ter"></div>
<div class="size-16 has-background-grey-darker"></div>
<div class="size-16 has-background-grey-dark"></div>
<div class="size-16 has-background-grey"></div>
<div class="size-16 has-background-grey-light"></div>
<div class="size-16 has-background-grey-lighter"></div>
<div class="size-16 has-background-grey-lightest"></div>
<div class="size-16 has-background-white-ter"></div>
<div class="size-16 has-background-white-bis"></div>
<div class="size-16 has-background-white"></div>
</div>
<div class="is-flex">
<div class="size-16 has-background-grey"></div>
</div>
</div>
<div class="cell is-col-span-12">
<Products />
</div>

4
app/components/imports/ProductVariantForm.vue
View File

@@ -217,7 +217,7 @@ async function submit() {
<div
v-if="uploadedImage"
class="relative"
style="border: 1px solid var(--bulma-grey-50)"
style="border: 1px solid var(--bulma-grey)"
>
<figure class="image is-128x128">
<img :src="$buildFileUrl(uploadedImage.file)" />
@@ -244,7 +244,7 @@ async function submit() {
<div
v-else
class="w-36 h-36 rounded-md is-flex is-align-items-center is-justify-content-center"
style="border: 1px solid var(--bulma-grey-80)"
style="border: 1px solid var(--bulma-grey-lighter)"
>
<Icon
name="material-symbols:add-photo-alternate-outline-rounded"

4
app/components/imports/ProductVariantFormNew.vue
View File

@@ -194,7 +194,7 @@ async function submit() {
<div
v-if="uploadedImage"
class="relative"
style="border: 1px solid var(--bulma-grey-50)"
style="border: 1px solid var(--bulma-grey)"
>
<figure class="image is-128x128">
<img :src="$buildFileUrl(uploadedImage.file)" />
@@ -221,7 +221,7 @@ async function submit() {
<div
v-else
class="w-36 h-36 rounded-md is-flex is-align-items-center is-justify-content-center"
style="border: 1px solid var(--bulma-grey-80)"
style="border: 1px solid var(--bulma-grey-lighter)"
>
<Icon
name="material-symbols:add-photo-alternate-outline-rounded"

22
app/components/inventory/SelectedInvItem.vue
View File

@@ -45,7 +45,7 @@ const emit = defineEmits("unselect");
</div>
<div>
<p class="font-semibold mb-1">{{ invItem.name }}</p>
<p class="has-text-grey-40">SKU: {{ invItem.sku }}</p>
<p class="has-text-grey-dark">SKU: {{ invItem.sku }}</p>
<p class="fs-12 has-text-grey">{{ invItem.category }}</p>
</div>
</div>
@@ -68,19 +68,19 @@ const emit = defineEmits("unselect");
<p class="fs-15 font-semibold mb-4">Tóm tắt tồn kho</p>
<div class="is-flex is-flex-direction-column">
<div class="py-2 is-flex is-justify-content-space-between">
<p class="has-text-grey-40">Tồn hiện tại</p>
<p class="has-text-grey">Tồn hiện tại</p>
<p class="fs-14 font-semibold">{{ invItem.stock }}</p>
</div>
<hr class="my-1 has-background-grey-95" />
<hr class="my-1" />
<div class="py-2 is-flex is-justify-content-space-between">
<p class="has-text-grey-40">Đặt trước</p>
<p class="has-text-grey">Đặt trước</p>
<p class="fs-14 font-semibold has-text-orange">
{{ invItem.preorder }}
</p>
</div>
<hr class="my-1 has-background-grey-95" />
<hr class="my-1" />
<div class="py-2 is-flex is-justify-content-space-between">
<p class="has-text-grey-40">Khả dụng</p>
<p class="has-text-grey">Khả dụng</p>
<p class="fs-14 font-semibold has-text-green">
{{ invItem.available }}
</p>
@@ -89,7 +89,7 @@ const emit = defineEmits("unselect");
</div>
<div class="mt-6">
<p class="fs-15 font-semibold mb-4">Vị trí lưu kho</p>
<div class="p-4 rounded-md has-background-grey-95">
<div class="p-4 rounded-md has-background-white-bis">
<div class="is-flex is-gap-1">
<Icon
name="material-symbols:location-on-outline-rounded"
@@ -106,16 +106,16 @@ const emit = defineEmits("unselect");
</div>
<div class="mt-6">
<p class="fs-15 font-semibold mb-4">Thông tin lô hàng</p>
<div class="p-4 rounded-md has-background-grey-95">
<div class="p-4 rounded-md has-background-white-bis">
<p class="fs-13 has-text-grey">Mã lô</p>
<p class="mt-1 is-family-monospace">{{ invItem.batch }}</p>
</div>
<div class="p-4 mt-4 rounded-md has-background-grey-95">
<div class="p-4 mt-4 rounded-md has-background-white-bis">
<div class="is-flex is-gap-1 is-align-items-center">
<Icon
name="material-symbols:calendar-today-outline-rounded"
:size="18"
class="has-text-grey-50"
class="has-text-grey"
/>
<p class="fs-13 has-text-grey">Hạn sử dụng</p>
</div>
@@ -127,7 +127,7 @@ const emit = defineEmits("unselect");
<div
v-for="move in invItem.moveHistory"
:key="move.id"
class="p-4 mb-4 rounded-md has-background-grey-95 has-text-grey-40 fs-12"
class="p-4 mb-4 rounded-md has-background-white-bis has-text-grey fs-12"
>
<div class="is-flex is-justify-content-space-between mb-1">
<div class="is-flex is-gap-1 is-align-items-center">

6
app/components/orders/OrderDeliveryTab.vue
View File

@@ -12,10 +12,10 @@ const props = defineProps({
{{ order.delivery_status__name }}
</p>
</div>
<div class="p-4 rounded-md has-background-grey-95">
<div class="p-4 rounded-md has-background-white-bis">
<p class="has-text-grey">Địa chỉ giao hàng</p>
<p class="mt-1 has-text-grey-10">{{ order.customer__name }}</p>
<p class="has-text-grey-10">{{ order.customer__phone }}</p>
<p class="mt-1 has-text-grey-darker">{{ order.customer__name }}</p>
<p class="has-text-grey-darker">{{ order.customer__phone }}</p>
</div>
</div>
</template>

2
app/components/orders/OrderHistoryTab.vue
View File

@@ -79,7 +79,7 @@ const historyItems = [
</p>
</div>
<hr
class="mt-4 mb-0 has-background-grey-95"
class="mt-4 mb-0"
style="height: 2px"
/>
</div>

6
app/components/orders/OrderKanbanCard.vue
View File

@@ -23,7 +23,7 @@ const emit = defineEmits(["selectOrder", "unselect"]);
<div class="is-flex is-flex-direction-column is-gap-2">
<!-- customer info -->
<div>
<p class="has-text-grey-10">{{ order.customer__name }}</p>
<p class="has-text-grey-darker">{{ order.customer__name }}</p>
<div class="has-text-grey fs-13 mt-1 is-flex is-gap-1 is-align-items-center">
<Icon name="material-symbols:call-outline-rounded" />
<p>{{ order.customer__phone }}</p>
@@ -31,12 +31,12 @@ const emit = defineEmits(["selectOrder", "unselect"]);
</div>
<!-- product info -->
<div>
<p class="fs-24 has-text-grey-10 font-bold">
<p class="fs-24 has-text-grey-darker font-bold">
{{ $shortenCurrency(order.total) }}
</p>
<p class="fs-13 has-text-grey">{{ order.order__products.length }} sản phẩm</p>
</div>
<hr class="m-0" />
<hr class="m-0 has-background-grey-lighter" />
<div class="is-flex is-flex-direction-column is-gap-0.5 fs-13 has-text-grey">
<p class="is-flex is-align-items-center is-gap-0.5">
<Icon

2
app/components/orders/OrderPaymentTab.vue
View File

@@ -8,7 +8,7 @@ const { $numtoString } = useNuxtApp();
<template>
<div>
<div class="is-flex is-gap-2">
<div class="is-flex-grow-1 p-3 rounded-md has-background-grey-95">
<div class="is-flex-grow-1 p-3 rounded-md has-background-white-bis">
<p class="fs-13 has-text-grey">Tổng tiền</p>
<p class="font-bold">
{{ $numtoString(order.total, { hasUnit: true }) }}

4
app/components/orders/OrderProductTab.vue
View File

@@ -12,7 +12,7 @@ const { $numtoString } = useNuxtApp();
<div
v-for="product in order.order__products"
:key="product.id"
class="p-3 has-background-grey-95 rounded-md"
class="p-3 has-background-white-ter rounded-md"
>
<div class="fs-15 is-flex is-justify-content-space-between">
<p class="">{{ product.name }}</p>
@@ -20,7 +20,7 @@ const { $numtoString } = useNuxtApp();
{{ $numtoString(product.total, { hasUnit: true }) }}
</p>
</div>
<div class="is-flex is-gap-8 fs-13 has-text-grey-50 mt-1">
<div class="is-flex is-gap-8 fs-13 has-text-grey-dark mt-1">
<p>SL: {{ product.quantity }}</p>
<p>Đơn giá: {{ $numtoString(product.unit_price, { hasUnit: true }) }}</p>
<p>

2
app/components/orders/OrderReceiptTab.vue
View File

@@ -9,7 +9,7 @@ const props = defineProps({
<Icon
name="material-symbols:receipt-long-outline-rounded"
:size="50"
class="has-text-grey-70"
class="has-text-grey-light"
/>
<p>Chưa có hoá đơn</p>
<button class="button is-purple">Tạo hoá đơn</button>

6
app/components/orders/OrdersKanban.vue
View File

@@ -25,7 +25,7 @@ const emit = defineEmits(["selectOrder", "unselect"]);
`has-background-${status.color}-90`,
]"
>
<p class="font-semibold has-text-grey-10">{{ status.name }}</p>
<p class="font-semibold has-text-grey-darker">{{ status.name }}</p>
<p
class="px-2 py-1 font-semibold rounded-lg has-background-white"
:style="{ border: `1px solid var(--bulma-${status.color}-60)` }"
@@ -33,8 +33,8 @@ const emit = defineEmits(["selectOrder", "unselect"]);
{{ orders.filter((o) => o.status === status.id).length }}
</p>
</div>
<hr class="m-0 has-background-grey-80" />
<div class="has-background-grey-95 p-4">
<hr class="m-0 has-background-grey-lighter" />
<div class="has-background-white-bis p-4">
<OrderKanbanCard
v-if="orders.filter((o) => o.status === status.id).length > 0"
v-for="order in orders.filter((o) => o.status === status.id)"

2
app/components/orders/PipelinePhase.vue
View File

@@ -29,7 +29,7 @@ const progressUnfilled = computed(() => `var(--bulma-${props.color}-85)`);
<Icon
name="material-symbols:arrow-forward-rounded"
:size="24"
class="has-text-grey-70"
class="has-text-grey-light"
/>
</div>
</template>

9
app/components/snackbar/SnackBar.vue
View File

@@ -34,13 +34,11 @@ function loadDynamicComponent() {
watchEffect(() => {
loadDynamicComponent();
});
setTimeout(() => store.commit("snackbar", undefined), 3900);
// setTimeout(() => store.commit("snackbar", undefined), 3900);
</script>
<template>
<div
class="snackbar is-flex is-align-items-center is-gap-3 pl-3 pr-1.5 py-2 rounded-md has-background-grey-25 has-text-white"
>
<div class="snackbar is-flex is-align-items-center is-gap-3 pl-3 pr-1.5 py-2 rounded-md has-text-white">
<Info
v-if="component === 'Info'"
v-bind="vbind"
@@ -80,6 +78,7 @@ setTimeout(() => store.commit("snackbar", undefined), 3900);
margin-inline: auto;
width: fit-content;
max-width: 500px;
background-color: hsl(from var(--bulma-grey-darker) h s l / 0.9);
}
.button.is-ghost {
@@ -87,6 +86,6 @@ setTimeout(() => store.commit("snackbar", undefined), 3900);
}
.button.is-ghost:hover,
.button.is-ghost.is-hovered {
color: hsl(0, 0%, 100%, 0.6);
color: hsl(from white h s l / 0.6);
}
</style>

985
my-bulma-project.css
View File

File diff suppressed because it is too large Load Diff

2
my-bulma-project.css.map
View File

File diff suppressed because one or more lines are too long

2
my-bulma-project.scss
View File

@@ -8,7 +8,6 @@ $cyan: #03c2c2;
$blue: #1678ff;
$purple: #833bff;
$pink: #ff2bdd;
$grey: #767676;
@use "bulma/sass" with (
$family-primary: string.unquote("'Inter', 'SF Pro', 'Helvetica', 'Arial', sans-serif"),
@@ -28,7 +27,6 @@ $grey: #767676;
"blue": $blue,
"purple": $purple,
"pink": $pink,
"grey": $grey,
),
$spacing-values: (
"auto": auto,