feat: add base workflows views

apps/client/src/core/components/headers/BreadcrumbItem.vue

@@ -12,7 +12,7 @@ const route = useRoute()
 
 const linkClasses = computed(() =>
   route.name !== props.breadcrumb.name
-    ? 'text-neutral-800 dark:!text-neutral-500'
+    ? 'text-neutral-500 !fw400 dark:!text-neutral-500'
     : 'dark:text-neutral-100',
 )
 
@@ -38,14 +38,14 @@ const iconClasses = computed(() =>
       />
       <p
         v-if="breadcrumb.tKey"
-        class="text-lg mt-1.5px !fw-500"
+        class="text-lg fw500 mt-1.5px"
         :class="linkClasses"
       >
         {{ $t(`sidebar.${breadcrumb.tKey}`) }}
       </p>
       <p
         v-else
-        class="text-lg mt-1.5px !fw-500"
+        class="text-lg mt-1.5px"
         :class="linkClasses"
       >
         {{ breadcrumb.value }}

apps/client/src/core/components/headers/HeaderMain.vue

@@ -43,13 +43,13 @@ const { breadcrumbs } = useBreadcrumbs()
     class="sticky top-0 left-0 right-0 z-999 w-full flex items-center justify-between px-15px py-8px min-h-52px max-h-52px
     border-b border-b-solid border-layout"
   >
-    <div class="inline-flex items-center gap-2">
-      <div v-for="(breadcrumb, idx) in breadcrumbs" :key="idx" class="inline-flex items-center gap-1.5">
+    <div class="inline-flex items-center gap-1">
+      <div v-for="(breadcrumb, idx) in breadcrumbs" :key="idx" class="inline-flex items-center gap-1">
         <BreadcrumbItem :breadcrumb="breadcrumb" />
         <Icon
           v-if="idx < breadcrumbs.length - 1"
-          icon="lucide:chevron-right"
-          class="text-16px text-neutral-600 dark:text-neutral-500"
+          icon="heroicons:slash-20-solid"
+          class="text-18px mt-0.5 text-neutral-400 dark:text-neutral-600"
         />
       </div>
     </div>

apps/client/src/modules/boards/components/BoardsActionsPanel.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import { useBoardsStore } from '../stores/board'
 import CreateNewBoard from './features/CreateNewBoard.vue'
 import RemoveBoard from './features/handlers/RemoveBoard.vue'
 import BoardsAdvancedFilter from './filters/BoardsAdvancedFilter.vue'
 import BoardsSort from './filters/BoardsSort.vue'
 import SearchBoards from './filters/SearchBoards.vue'
+import type { Board } from '../types'
 import { UiTabsList, UiTabsTrigger } from '@/shared/ui'
 
 defineProps<{
   isSelected: boolean
   idxs: string[]
+  boards: Board[]
 }>()
 
 const boardsStore = useBoardsStore()
-const { boards } = storeToRefs(boardsStore)
 </script>
 
 <template>

apps/client/src/modules/boards/components/BoardsDataTable.vue

@@ -2,6 +2,8 @@
 import { computed, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useDark } from '@vueuse/core'
+import dayjs from 'dayjs'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
 import type { Table } from '@tanstack/vue-table'
 import type { BoardRow } from '../types'
 import { DataTable, UiBadge } from '@/shared/ui'
@@ -20,13 +22,6 @@ const _columns = [
       _tableCell: 'max-w-220px',
     },
   },
-  {
-    accessorKey: 'status',
-    meta: {
-      icon: 'hugeicons:energy',
-      _tableCell: 'text-left',
-    },
-  },
   {
     accessorKey: 'labels',
     meta: {
@@ -89,6 +84,14 @@ function userPosition(idx: number) {
   return idx * 20
 }
 
+dayjs.extend(localizedFormat)
+// mocks -> after from store
+
+const timesAgo = computed(() =>
+  (board: BoardRow) => {
+    return dayjs(board.createdAt).format('ll')
+  })
+
 const isDark = useDark()
 
 defineExpose({
@@ -128,13 +131,6 @@ defineExpose({
         </template>
       </div>
     </template>
-    <template #status-cell="{ cell }">
-      <span
-        :class="cell.row.original.status === 'archived' ? 'text-neutral-600 dark:text-neutral-400' : 'text-green-600'"
-      >
-        {{ t(`kanban.${cell.row.original.status}`) }}
-      </span>
-    </template>
     <template #users-cell="{ cell }">
       <div v-if="visibleUsers(cell).length > 0" class="flex items-center relative h-full w-full justify-between">
         <div class="relative flex items-center relative h-full">
@@ -162,5 +158,8 @@ defineExpose({
       </div>
       <span v-else class="text-neutral-500">-</span>
     </template>
+    <template #date-cell="{ cell }">
+      {{ timesAgo(cell.row.original) }}
+    </template>
   </DataTable>
 </template>

apps/client/src/modules/boards/components/features/handlers/AddBoard.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
 import { type ButtonVariants, UiButton } from '@/shared/ui'
 
 defineProps<{
@@ -17,7 +18,7 @@ const emit = defineEmits<{
     size="default"
     @click="emit('add')"
   >
-    <span i-hugeicons-add-01 class="w-4 h-4" />
+    <Icon icon="solar:widget-add-bold-duotone" class="min-w-4 min-h-4" />
     <span class="text-default">{{ $t('boards.create', plural) }}</span>
   </UiButton>
 </template>

apps/client/src/modules/boards/components/filters/SearchBoards.vue

@@ -3,5 +3,11 @@ import { UiInput } from '@/shared/ui'
 </script>
 
 <template>
-  <UiInput :placeholder="$t('boards.filters.search')" class="w-200px h-default focus:ring-0" />
+  <div class="relative">
+    <UiInput
+      :placeholder="$t('boards.filters.search')"
+      class="w-200px focus:ring-0 shadow-none pl-8"
+    />
+    <span i-lucide-search class="absolute left-2 top-1/2 translate-y--1/2 w-4 h-4 text-neutral-500" />
+  </div>
 </template>

apps/client/src/modules/boards/components/forms/CreateBoardForm.vue

@@ -67,9 +67,15 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
           </ReuseTemplate>
           <UiAlert
             variant="warning"
-            :content="$t('boards.forms.creating.labels.alert')"
-            class="mt-3 mb-1"
-          />
+            class="mt-2 mb-1 border-none flex flex-col items-start gap-1"
+          >
+            <span class="text-default fw500">
+              {{ $t('boards.forms.creating.labels.alert', 1) }}
+            </span>
+            <span class="text-default text-neutral-500 dark:text-neutral-400">
+              {{ $t('boards.forms.creating.labels.alert', 2) }}
+            </span>
+          </UiAlert>
           <ReuseTemplate field="labels">
             <TagsChooser id="labels" v-model="labels" />
             <span class="text-small text-neutral-500">

apps/client/src/modules/boards/pages/boards.vue

@@ -58,7 +58,7 @@ useHead({
 <template>
   <div v-if="$route.name !== 'boards-id'" class="w-full h-full flex flex-col">
     <ViewControl>
-      <BoardsActionsPanel :is-selected :idxs />
+      <BoardsActionsPanel :boards="filteredBoards" :is-selected :idxs />
       <template #table>
         <div
           class="relative w-full h-full flex flex-col"

apps/client/src/modules/common/components/controls/ViewTabs.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { UiTabsList, UiTabsTrigger } from '@/shared/ui'
+</script>
+
+<template>
+  <UiTabsList>
+    <UiTabsTrigger value="table">
+      <span i-hugeicons-layout-table-02 />
+    </UiTabsTrigger>
+    <UiTabsTrigger value="cards">
+      <span i-hugeicons-dashboard-square-01 />
+    </UiTabsTrigger>
+  </UiTabsList>
+</template>

apps/client/src/modules/notes/components/features/handlers/AddNote.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
 import { type ButtonVariants, UiButton } from '@/shared/ui'
 
 defineProps<{
@@ -17,7 +18,7 @@ const emit = defineEmits<{
     size="default"
     @click="emit('add')"
   >
-    <span i-hugeicons-add-01 class="w-4 h-4" />
+    <Icon icon="qlementine-icons:add-file-16" class="min-w-4 min-h-4" />
     <span class="text-default">{{ $t('notes.create', plural) }}</span>
   </UiButton>
 </template>

apps/client/src/modules/notes/components/filters/SearchNotes.vue

@@ -3,5 +3,11 @@ import { UiInput } from '@/shared/ui'
 </script>
 
 <template>
-  <UiInput :placeholder="$t('notes.filters.search')" class="w-200px !h-default focus:ring-0" />
+  <div class="relative">
+    <UiInput
+      :placeholder="$t('notes.filters.search')"
+      class="w-200px focus:ring-0 shadow-none pl-8"
+    />
+    <span i-lucide-search class="absolute left-2 top-1/2 translate-y--1/2 w-4 h-4 text-neutral-500" />
+  </div>
 </template>

apps/client/src/modules/notes/composables/filtered.ts

@@ -7,12 +7,13 @@ interface FilteredNotesContext {
 }
 
 export function useFilteredNotes<U extends Note[]>(notes: Ref<U>, sortModel: Ref<string>) {
-  const filteredNotes = computed(() => [...notes.value].sort((a, b): number => {
-    if (sortModel.value === 'date') {
-      return (b.date ? +new Date(b.date) : 0) - (a.date ? +new Date(a.date) : 0)
-    }
-    return 0
-  }))
+  const filteredNotes = computed(() =>
+    [...notes.value].sort((a, b): number => {
+      if (sortModel.value === 'date') {
+        return (b.date ? +new Date(b.date) : 0) - (a.date ? +new Date(a.date) : 0)
+      }
+      return 0
+    }))
 
   return {
     filteredNotes,

apps/client/src/modules/workflows/components/CardItem.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts" generic="T extends WorkflowCard">
+import { computed } from 'vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import type { WorkflowCard } from '../types'
+import { UiBadge } from '@/shared/ui'
+
+defineProps<{
+  card: T
+}>()
+
+dayjs.extend(relativeTime)
+
+const timesAgo = computed(() =>
+  (workflow: T) => {
+    return dayjs().to(dayjs(workflow.updatedAt))
+  })
+</script>
+
+<template>
+  <div
+    class="relative p-3 cursor-pointer w-full flex flex-col justify-between h-full border border-solid border-neutral-200 rounded-8px dark:border-neutral-700/60"
+    @click="$router.push({ name: 'workflows-id', params: { id: card._id } })"
+  >
+    <div class="absolute inset-0 bg-dotted-pattern opacity-30 pointer-events-none" />
+
+    <div class="w-full flex items-start justify-between">
+      <div class="flex flex-col gap-0.5 w-full">
+        <p class="text-default hyphens-auto">
+          {{ card.name }}
+        </p>
+        <p class="text-small text-neutral-500 hyphens-auto overflow-hidden text-ellipsis line-clamp-1">
+          {{ card.description }}
+        </p>
+      </div>
+      <UiBadge variant="soft" class="px-1 py-px mt-px" :class="card.state === 'production' ? 'badge-soft-green' : 'badge-soft'">
+        {{ $t(`workflows.status.${card.state}`) }}
+      </UiBadge>
+    </div>
+    <span class="text-small mt-3 text-neutral-500 overflow-hidden text-ellipsis line-clamp-1 dark:text-neutral-400">
+      {{ timesAgo(card) }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.bg-dotted-pattern {
+  background-image: radial-gradient(circle, #ccc 1px, transparent 1px);
+  background-size: 12px 12px;
+  background-color: inherit;
+}
+
+:global(html.dark) {
+  .bg-dotted-pattern {
+    background-image: radial-gradient(circle, #424242 1px, transparent 1px);
+  }
+}
+</style>

apps/client/src/modules/workflows/components/EmptyWorkflows.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import EmptyContainer from '@/modules/common/components/EmptyContainer.vue'
+</script>
+
+<template>
+  <EmptyContainer icon="hugeicons:workflow-square-03" t-prefix="workflows" />
+</template>

apps/client/src/modules/workflows/components/GeneralActionsPanel.vue

@@ -2,14 +2,29 @@
 import CreateNewWorkflow from './features/CreateNewWorkflow.vue'
 import SearchWorkflows from './filters/SearchWorkflows.vue'
 import WorkflowsSort from './filters/WorkflowsSort.vue'
+import RemoveWorkflow from './features/handlers/RemoveWorkflow.vue'
+import type { Workflow } from '../types'
+import ViewTabs from '@/modules/common/components/controls/ViewTabs.vue'
+
+defineProps<{
+  workflows: Workflow[]
+  isSelected: boolean
+  idxs: string[]
+}>()
 </script>
 
 <template>
   <div class="flex items-center justify-between">
+    <div class="flex items-center gap-2 w-full">
+      <ViewTabs />
+      <WorkflowsSort />
+      <RemoveWorkflow
+        v-if="isSelected && workflows.length > 0"
+      />
+    </div>
     <div class="flex items-center gap-2">
       <SearchWorkflows />
-      <WorkflowsSort />
+      <CreateNewWorkflow />
     </div>
-    <CreateNewWorkflow />
   </div>
 </template>

apps/client/src/modules/workflows/components/SectionSign.vue

@@ -8,7 +8,7 @@ defineProps<{
   <div class="flex items-center gap-1.5 text-neutral-500 dark:text-neutral-400">
     <div i-lucide:chevron-down class="w-4 h-4" />
     <p class="text-small">
-      {{ section }}
+      {{ $t(`workflows.section.${section}`) }}
     </p>
   </div>
 </template>

apps/client/src/modules/workflows/components/WorkflowsCards.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import CardItem from './CardItem.vue'
+import type { WorkflowCard } from '../types'
+
+defineProps<{
+  cards: WorkflowCard[]
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col space-y-3 mt-1">
+    <div class="grid grid-cols-4 gap-4 items-stretch">
+      <CardItem
+        v-for="card in cards"
+        :key="card._id"
+        :card="card"
+      />
+    </div>
+  </div>
+</template>