@finema/finework-layer 0.2.75 → 0.2.76

package/.playground/app/pages/layout-user.vue

@@ -0,0 +1,284 @@
+<template>
+  <LayoutUser
+    :sidebar-items="sidebarItems"
+    is-sidebar-group
+    root-app-path="/layout-user"
+  >
+    <NuxtLayout>
+      <div class="mb-4 flex gap-4">
+        <FormFields
+          :form="form"
+          :options="formSearchFields"
+          class="w-full max-w-[600px] gap-3"
+        />
+        <Button
+          icon="material-symbols:filter-list-rounded"
+          variant="outline"
+          color="neutral"
+          class="w-fit"
+          @click="showFilter = !showFilter"
+        >
+          Filters
+          <Badge
+            v-if="countForm"
+            class="size-6 items-center justify-center rounded-full"
+            :label="countForm"
+          />
+        </Button>
+      </div>
+      <Card> asdasdasdasdasdasd </Card>
+      <div class="bg-white p-4">
+        <Tabs
+          variant="link"
+          :items="items"
+          class="w-full"
+        />
+        <Tabs
+          orientation="vertical"
+          :items="items"
+          class="w-full"
+        />
+      </div>
+      <Button
+        variant="outline"
+        color="error"
+        icon="ph:trash"
+      />
+      <Button
+        variant="outline"
+        color="neutral"
+        icon="ph:trash"
+      />
+      <InfoItemList
+        :items="[
+          {
+            label: 'Status:',
+            value: 'Active',
+          },
+          {
+            label: '',
+            value: '42',
+          },
+        ]"
+      />
+    </NuxtLayout>
+  </LayoutUser>
+</template>
+
+<script lang="ts" setup>
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const auth = useAuth()
+const showFilter = useState('pageFilterOpen')
+const items = ref([
+  {
+    label: 'Account',
+    icon: 'i-lucide-user',
+    content: 'This is the account content.',
+  },
+  {
+    label: 'Password',
+    icon: 'i-lucide-lock',
+    content: 'This is the password content.',
+  },
+])
+
+useApp().definePage({
+  title: 'Test Layout',
+  breadcrumbs: [
+    {
+      label: 'Home',
+      to: '/',
+    },
+    {
+      label: 'Test Layout',
+      to: '/test-layout',
+    },
+  ],
+})
+
+const form = useForm({
+  validationSchema: toTypedSchema(
+    v.object({
+      q: v.optional(v.pipe(v.string()), ''),
+      status: v.optional(v.pipe(v.string()), ''),
+      user_id: v.optional(v.pipe(v.string()), ''),
+      date_range: v.nullish(
+        v.object({
+          start: v.union([v.date(), v.string()]),
+          end: v.union([v.date(), v.string()]),
+        }),
+      ),
+    }),
+  ),
+})
+
+const countForm = computed(
+  () =>
+    [
+      form.values.q,
+      form.values.status,
+      form.values.user_id,
+      form.values.date_range?.start || form.values.date_range?.end,
+    ].filter(Boolean).length,
+)
+
+auth.me.set({
+  id: 'edab2396-2b6f-4855-b04e-a7c9ae9b70ae',
+  created_at: '2025-09-02T10:16:37.195Z',
+  updated_at: '2025-10-11T10:14:10.296Z',
+  email: 'long@finema.co',
+  full_name: 'Passakon Puttasuwan',
+  display_name: 'Long',
+  position: 'Technical Specialist',
+  team_code: 'DEV',
+  company: 'finema',
+  avatar_url:
+    'https://avatars.slack-edge.com/2023-09-25/5968557597936_c750902e3ffc4f690d80_512.jpg',
+  slack_id: 'U0147KLKKH8',
+  azure_id: 'fd7fbb55-a249-4b79-b439-2270981bd3ae',
+  is_active: true,
+  joined_date: '2025-09-02T00:00:00Z',
+  access_level: {
+    user_id: 'edab2396-2b6f-4855-b04e-a7c9ae9b70ae',
+    clockin: 'ADMIN',
+    timesheet: 'ADMIN',
+    pmo: 'SUPER',
+    setting: 'SUPER',
+    created_at: '2025-08-15T16:40:29.319Z',
+    updated_at: '2025-09-30T10:14:59.228Z',
+  },
+  team: {
+    id: 'ef2abb00-d57f-4a38-a5d1-660ee63d2e1f',
+    created_at: '2025-08-26T10:36:53.598Z',
+    updated_at: '2025-10-01T06:00:29.941Z',
+    name: 'Developer Team',
+    code: 'DEV',
+    color: 'violet',
+    description: '',
+    working_start_at: '12:02:00',
+    working_end_at: '20:00:00',
+    created_by_id: null,
+    updated_by_id: '96d3ec63-be14-41c6-9268-ea8095d2a73b',
+    deleted_by_id: null,
+  },
+})
+
+const sidebarItems: NavigationMenuItem[] = [
+  {
+    children: [
+      {
+        label: 'Submenu 1',
+        to: '/layout-admin',
+        icon: 'i-heroicons-outline:home',
+      },
+      {
+        label: 'Submenu 2',
+        to: '/layout-admin/test/1',
+        icon: 'i-heroicons-outline:home',
+      },
+    ],
+  },
+  {
+    label: 'DASHBOARD',
+    children: [
+      {
+        label: 'Submenu 1',
+        to: '/submenu',
+        icon: 'i-heroicons-outline:home',
+      },
+      {
+        label: 'Submenu 2',
+        to: '/submenu/layout-admin',
+        icon: 'i-heroicons-outline:home',
+      },
+    ],
+  },
+  {
+    label: 'Users',
+    children: [
+      {
+        label: 'Submenu 1',
+        to: '/submenu1',
+        icon: 'i-heroicons-outline:home',
+      },
+      {
+        label: 'Submenu 2',
+        to: '/layout-admin',
+        icon: 'i-heroicons-outline:home',
+        children: [
+          {
+            label: 'Submenu 2-1',
+            to: '/layout-admin/1',
+            icon: 'i-heroicons-outline:home',
+          },
+          {
+            label: 'Submenu 2-2',
+            to: '/layout-admin/2',
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const formSearchFields = createFormFields(() => [
+  {
+    type: INPUT_TYPES.SEARCH,
+    props: {
+      name: 'q',
+      placeholder: 'ค้นหา',
+    },
+  },
+])
+
+const formFields = createFormFields(() => [
+  {
+    type: INPUT_TYPES.SEARCH,
+    props: {
+      name: 'q',
+      placeholder: 'ค้นหา',
+    },
+  },
+  {
+    type: INPUT_TYPES.DATE_RANGE,
+    props: {
+      label: 'Tender Date',
+      name: 'date_range',
+      placeholder: 'ระบุช่วงเวลา Tender Date',
+      clearable: true,
+    },
+  },
+  {
+    type: INPUT_TYPES.SELECT,
+    props: {
+      name: 'user_id',
+      label: 'Main Responsibility',
+      placeholder: 'Main Responsibility',
+      options: [
+        {
+          value: 'test',
+          label: 'test',
+        },
+      ],
+      searchable: true,
+      clearable: true,
+    },
+  },
+  {
+    type: INPUT_TYPES.SELECT,
+    props: {
+      name: 'status',
+      label: 'status',
+      placeholder: 'All Status',
+      clearable: true,
+      options: [
+        {
+          value: 'test',
+          label: 'test',
+        },
+      ],
+    },
+  },
+])
+</script>