Adopt logistics visual system across webapp

app/components/manager/ManagerListLoadMore.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  shown: number
+  total?: number | null
+  canLoadMore?: boolean
+  loading?: boolean
+  pageSize?: number
+  itemLabel?: string
+}>(), {
+  total: null,
+  canLoadMore: false,
+  loading: false,
+  pageSize: 12,
+  itemLabel: 'элементов',
+})
+
+const emit = defineEmits<{
+  loadMore: []
+}>()
+
+const summaryText = computed(() => {
+  if (typeof props.total === 'number') {
+    return `Показано ${props.shown} из ${props.total} ${props.itemLabel}`
+  }
+
+  return `Загружено ${props.shown} ${props.itemLabel}`
+})
+
+const buttonText = computed(() => props.loading ? 'Загружаем...' : `Загрузить ещё ${props.pageSize}`)
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3 rounded-[28px] bg-white/82 px-5 py-5 text-center text-sm text-[#6f6353] shadow-none">
+    <p>{{ summaryText }}</p>
+    <button
+      v-if="canLoadMore"
+      type="button"
+      class="btn rounded-full border-0 bg-[#2f2418] px-6 text-white hover:bg-[#493824]"
+      :disabled="loading"
+      @click="emit('loadMore')"
+    >
+      <span v-if="loading" class="loading loading-spinner loading-sm" />
+      {{ buttonText }}
+    </button>
+  </div>
+</template>