From fbfadcfca943d017f5bea2c28caea689f4a0b0e3 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 17:38:45 +0700
Subject: [PATCH 01/40] feat: margin props

---
 libs/web/shared/ui/src/lib/props/index.ts     |   4 +
 .../shared/ui/src/lib/props/margin.props.ts   | 142 ++++++++++++++++++
 libs/web/shared/ui/src/lib/props/props.ts     |   7 +
 3 files changed, 153 insertions(+)
 create mode 100644 libs/web/shared/ui/src/lib/props/margin.props.ts

diff --git a/libs/web/shared/ui/src/lib/props/index.ts b/libs/web/shared/ui/src/lib/props/index.ts
index 3b821de..6c2583d 100644
--- a/libs/web/shared/ui/src/lib/props/index.ts
+++ b/libs/web/shared/ui/src/lib/props/index.ts
@@ -1,3 +1,7 @@
 export * from './padding.props';
+export * from './margin.props';
+export * from './grid.props';
+export * from './gap.props';
 export * from './rounded.props';
+export * from './shadow.props';
 export * from './size.props';
diff --git a/libs/web/shared/ui/src/lib/props/margin.props.ts b/libs/web/shared/ui/src/lib/props/margin.props.ts
new file mode 100644
index 0000000..fc705f3
--- /dev/null
+++ b/libs/web/shared/ui/src/lib/props/margin.props.ts
@@ -0,0 +1,142 @@
+import type { Props } from './props';
+
+export const MarginSizes = ['none', '0.5', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] as const;
+export type MarginSize = (typeof MarginSizes)[number];
+
+export interface MarginProps extends Props {
+  marginLeft?: MarginSize;
+  marginRight?: MarginSize;
+  marginTop?: MarginSize;
+  marginBottom?: MarginSize;
+  marginX?: MarginSize;
+  marginY?: MarginSize;
+  margin?: MarginSize;
+}
+
+export const MarginTops = {
+  none: 'mt-0',
+  '0.5': 'mt-2',
+  '1': 'mt-4',
+  '2': 'mt-8',
+  '3': 'mt-12',
+  '4': 'mt-16',
+  '5': 'mt-20',
+  '6': 'mt-24',
+  '7': 'mt-28',
+  '8': 'mt-32',
+  '9': 'mt-36',
+  '10': 'mt-40',
+} satisfies { [K in MarginSize]: string };
+
+export const MarginBottoms = {
+  none: 'mb-0',
+  '0.5': 'mb-2',
+  '1': 'mb-4',
+  '2': 'mb-8',
+  '3': 'mb-12',
+  '4': 'mb-16',
+  '5': 'mb-20',
+  '6': 'mb-24',
+  '7': 'mb-28',
+  '8': 'mb-32',
+  '9': 'mb-36',
+  '10': 'mb-40',
+} satisfies { [K in MarginSize]: string };
+
+export const MarginLefts = {
+  none: 'ml-0',
+  '0.5': 'ml-2',
+  '1': 'ml-4',
+  '2': 'ml-8',
+  '3': 'ml-12',
+  '4': 'ml-16',
+  '5': 'ml-20',
+  '6': 'ml-24',
+  '7': 'ml-28',
+  '8': 'ml-32',
+  '9': 'ml-36',
+  '10': 'ml-40',
+} satisfies { [K in MarginSize]: string };
+
+export const MarginRights = {
+  none: 'mr-0',
+  '0.5': 'mr-2',
+  '1': 'mr-4',
+  '2': 'mr-8',
+  '3': 'mr-12',
+  '4': 'mr-16',
+  '5': 'mr-20',
+  '6': 'mr-24',
+  '7': 'mr-28',
+  '8': 'mr-32',
+  '9': 'mr-36',
+  '10': 'mr-40',
+} satisfies { [K in MarginSize]: string };
+
+export const MarginHorizontals = {
+  none: 'mx-0',
+  '0.5': 'mx-2',
+  '1': 'mx-4',
+  '2': 'mx-8',
+  '3': 'mx-12',
+  '4': 'mx-16',
+  '5': 'mx-20',
+  '6': 'mx-24',
+  '7': 'mx-28',
+  '8': 'mx-32',
+  '9': 'mx-36',
+  '10': 'mx-40',
+} satisfies { [K in MarginSize]: string };
+
+export const MarginVerticals = {
+  none: 'my-0',
+  '0.5': 'my-2',
+  '1': 'my-4',
+  '2': 'my-8',
+  '3': 'my-12',
+  '4': 'my-16',
+  '5': 'my-20',
+  '6': 'my-24',
+  '7': 'my-28',
+  '8': 'my-32',
+  '9': 'my-36',
+  '10': 'my-40',
+} satisfies { [K in MarginSize]: string };
+
+export const Margins = {
+  none: 'm-0',
+  '0.5': 'm-2',
+  '1': 'm-4',
+  '2': 'm-8',
+  '3': 'm-12',
+  '4': 'm-16',
+  '5': 'm-20',
+  '6': 'm-24',
+  '7': 'm-28',
+  '8': 'm-32',
+  '9': 'm-36',
+  '10': 'm-40',
+} satisfies { [K in MarginSize]: string };
+
+// TODO: clean this function
+export function getMargin(props: MarginProps) {
+  const { margin, marginX, marginY, marginLeft, marginRight, marginTop, marginBottom } = props;
+
+  const results = [];
+
+  if (margin) results.push(Margins[margin]);
+  else {
+    if (marginX) results.push(MarginHorizontals[marginX]);
+    else {
+      if (marginLeft) results.push(MarginLefts[marginLeft]);
+      if (marginRight) results.push(MarginRights[marginRight]);
+    }
+    if (marginY) results.push(MarginVerticals[marginY]);
+    else {
+      if (marginTop) results.push(MarginTops[marginTop]);
+      if (marginBottom) results.push(MarginBottoms[marginBottom]);
+    }
+  }
+
+  return results;
+}
diff --git a/libs/web/shared/ui/src/lib/props/props.ts b/libs/web/shared/ui/src/lib/props/props.ts
index 4e0278e..c1305ed 100644
--- a/libs/web/shared/ui/src/lib/props/props.ts
+++ b/libs/web/shared/ui/src/lib/props/props.ts
@@ -1,5 +1,6 @@
 import { getGap } from './gap.props';
 import { getGrid } from './grid.props';
+import { getMargin } from './margin.props';
 import { getPadding } from './padding.props';
 import { getBorderRadius } from './rounded.props';
 import { getShadow } from './shadow.props';
@@ -28,6 +29,12 @@ export class PropsBuilder {
     return this;
   }
 
+  withMargin(): PropsBuilder {
+    this.functions.push(getMargin);
+
+    return this;
+  }
+
   withBorderRadius(): PropsBuilder {
     this.functions.push(getBorderRadius);
 

From 81fef0110b8df3211cb15732ce335a100e16097d Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 17:39:19 +0700
Subject: [PATCH 02/40] feat: text variant small

---
 libs/web/shared/ui/src/lib/text/text.props.ts | 2 +-
 libs/web/shared/ui/src/lib/text/text.tsx      | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/web/shared/ui/src/lib/text/text.props.ts b/libs/web/shared/ui/src/lib/text/text.props.ts
index da770a9..ab8af70 100644
--- a/libs/web/shared/ui/src/lib/text/text.props.ts
+++ b/libs/web/shared/ui/src/lib/text/text.props.ts
@@ -1,7 +1,7 @@
 import type { QwikIntrinsicElements } from '@builder.io/qwik';
 import type { PaddingProps } from '../props';
 
-export const TextVariants = ['hero', 'title', 'h1', 'h2', 'h3', 'h4', 'base'] as const;
+export const TextVariants = ['hero', 'title', 'h1', 'h2', 'h3', 'h4', 'base', 'small'] as const;
 export type TextVariant = (typeof TextVariants)[number];
 
 export const ThemeVariants = ['inherit', 'primary', 'secondary', 'tertiary', 'error', 'surface', 'gradient'] as const;
diff --git a/libs/web/shared/ui/src/lib/text/text.tsx b/libs/web/shared/ui/src/lib/text/text.tsx
index b2ae9af..881779b 100644
--- a/libs/web/shared/ui/src/lib/text/text.tsx
+++ b/libs/web/shared/ui/src/lib/text/text.tsx
@@ -13,6 +13,7 @@ export const Text = component$<TextProps>((props) => {
     h3: 'text-xl',
     h4: 'text-lg',
     base: 'text-base',
+    small: 'text-sm',
   } satisfies { [K in TextVariant]: string };
 
   const ThemeVariants = {

From 70e1fe01da8c8727281cbb84196daf778bf82969 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 17:40:22 +0700
Subject: [PATCH 03/40] feat: badge button

---
 libs/web/shared/ui/src/lib/button/button.props.ts |  2 +-
 libs/web/shared/ui/src/lib/button/button.tsx      | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/libs/web/shared/ui/src/lib/button/button.props.ts b/libs/web/shared/ui/src/lib/button/button.props.ts
index 85d9ef4..fa1a33f 100644
--- a/libs/web/shared/ui/src/lib/button/button.props.ts
+++ b/libs/web/shared/ui/src/lib/button/button.props.ts
@@ -5,7 +5,7 @@ import type { BorderSizeProps } from '../props';
 export const ButtonSizes = ['small', 'base', 'large'] as const;
 export type ButtonSize = (typeof ButtonSizes)[number];
 
-export const ButtonVariants = ['primary', 'secondary', 'tertiary', 'gradient', 'error', 'surface'] as const;
+export const ButtonVariants = ['primary', 'secondary', 'tertiary', 'gradient', 'error', 'surface', 'badge-primary', 'badge-secondary', 'badge-tertiary'] as const;
 export type ButtonVariant = (typeof ButtonVariants)[number];
 
 type NativeButton = QwikIntrinsicElements['button'] & LinkProps;
diff --git a/libs/web/shared/ui/src/lib/button/button.tsx b/libs/web/shared/ui/src/lib/button/button.tsx
index ad43846..026569b 100644
--- a/libs/web/shared/ui/src/lib/button/button.tsx
+++ b/libs/web/shared/ui/src/lib/button/button.tsx
@@ -23,16 +23,22 @@ export const Button = component$<ButtonProps>((props) => {
     gradient: 'bg-gradient-to-br from-primary to-tertiary',
     surface: 'bg-surface',
     disabled: 'bg-surface-on/[.12]',
+    'badge-primary': 'bg-primary/[.15] px-2 py-1 border border-primary',
+    'badge-secondary': 'bg-secondary/[.15] px-2 py-1 border border-secondary',
+    'badge-tertiary': 'bg-tertiary/[.15] px-2 py-1 border border-tertiary',
   } satisfies { [K in ButtonVariant | 'disabled']: string };
 
   const LabelVariants = {
     primary: 'text-primary-on',
-    secondary: 'text-primary',
-    tertiary: 'text-primary',
+    secondary: 'text-secondary-on',
+    tertiary: 'text-tertiary-on',
     error: 'text-error-on',
     gradient: 'text-primary-on',
     surface: 'text-surface-on',
     disabled: 'text-surface-on/[.38]',
+    'badge-primary': 'text-primary font-medium text-sm',
+    'badge-secondary': 'text-secondary font-medium text-sm',
+    'badge-tertiary': 'text-tertiary font-medium text-sm',
   } satisfies { [K in ButtonVariant | 'disabled']: string };
 
   const StateLayerVariants = {
@@ -43,6 +49,9 @@ export const Button = component$<ButtonProps>((props) => {
     gradient: '',
     error: 'bg-error-on/[.08]',
     disabled: 'bg-surface-on/[.12]',
+    'badge-primary': '',
+    'badge-secondary': '',
+    'badge-tertiary': '',
   } satisfies { [K in ButtonVariant | 'disabled']: string };
 
   const Tag = rest.href ? Link : 'button';

From cea60395fe7a87c02d625d41728869ad8426eed7 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 17:40:41 +0700
Subject: [PATCH 04/40] feat: add margin prop to Box

---
 libs/web/shared/ui/src/lib/box/box.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/web/shared/ui/src/lib/box/box.tsx b/libs/web/shared/ui/src/lib/box/box.tsx
index 7cbb669..f9508cd 100644
--- a/libs/web/shared/ui/src/lib/box/box.tsx
+++ b/libs/web/shared/ui/src/lib/box/box.tsx
@@ -35,7 +35,7 @@ export const Box = component$<BoxProps>((props) => {
     vertical: 'flex-col',
   } satisfies { [K in BoxDirection]: string };
 
-  const additionalProps = new PropsBuilder(props).withSize().withPadding().withBorderRadius().withGrid().withGap().withShadow().build();
+  const additionalProps = new PropsBuilder(props).withSize().withPadding().withMargin().withBorderRadius().withGrid().withGap().withShadow().build();
 
   return (
     <div {...rest} class={['flex', Directions[direction], Variants[variant], Alignments[align], additionalProps]}>

From de3f840d935b3d4b9741cf47d1fc9440dc139d94 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 17:54:01 +0700
Subject: [PATCH 05/40] feat: add margin prop to Box

---
 libs/web/shared/ui/src/lib/box/box.props.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/web/shared/ui/src/lib/box/box.props.ts b/libs/web/shared/ui/src/lib/box/box.props.ts
index e02b822..be03c76 100644
--- a/libs/web/shared/ui/src/lib/box/box.props.ts
+++ b/libs/web/shared/ui/src/lib/box/box.props.ts
@@ -1,5 +1,5 @@
 import type { QwikIntrinsicElements } from '@builder.io/qwik';
-import type { BorderSizeProps, PaddingProps, SizeProps } from '../props';
+import type { BorderSizeProps, MarginProps, PaddingProps, SizeProps } from '../props';
 import type { GapProps } from '../props/gap.props';
 import type { GridProps } from '../props/grid.props';
 import type { ShadowProps } from '../props/shadow.props';
@@ -15,7 +15,7 @@ export type BoxDirection = (typeof BoxDirections)[number];
 
 type NativeDiv = QwikIntrinsicElements['div'];
 
-export interface BoxProps extends NativeDiv, PaddingProps, SizeProps, BorderSizeProps, ShadowProps, GapProps, GridProps {
+export interface BoxProps extends NativeDiv, PaddingProps, MarginProps, SizeProps, BorderSizeProps, ShadowProps, GapProps, GridProps {
   variant?: BoxVariant;
   align?: BoxAlignment;
   direction?: BoxDirection;

From f2f8e87348473bb666e56be1c6ad2277c80c8f7d Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 17:54:43 +0700
Subject: [PATCH 06/40] feat: add logo to brand name

---
 .../landing/navigation/src/lib/navigation.tsx | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/libs/web/landing/navigation/src/lib/navigation.tsx b/libs/web/landing/navigation/src/lib/navigation.tsx
index fa5a2c8..74524d4 100644
--- a/libs/web/landing/navigation/src/lib/navigation.tsx
+++ b/libs/web/landing/navigation/src/lib/navigation.tsx
@@ -1,6 +1,7 @@
 import { Fragment, component$, useComputed$ } from '@builder.io/qwik';
 import { useLocation } from '@builder.io/qwik-city';
 import { Box, Navigation, Text } from '@producktivity/ui';
+import { LuWorkflow } from '@qwikest/icons/lucide';
 
 interface NavItemProps {
   id: number;
@@ -43,15 +44,32 @@ export default component$(() => {
     <Navigation.Bar>
       <Box>
         <Navigation.Item prefetch href="/">
-          <Text weight="semibold" variant="h3">
-            Certifine
-          </Text>
+          <Box direction="horizontal" gap="0.5">
+            <Text variant="h2" theme="primary">
+              <LuWorkflow />
+            </Text>
+            <Text weight="semibold" variant="h3" theme="primary">
+              Certifine
+            </Text>
+          </Box>
         </Navigation.Item>
       </Box>
       <Box direction="horizontal" gap="1">
         {NavItems.map((item: NavItemProps) => (
           <Navigation.Item prefetch key={item.id} href={item.link}>
-            {session.username !== '' ? <Text weight={currentActivePath.value === item.link ? 'semibold' : 'normal'}>{item.label}</Text> : <Fragment>{!item.isRequireAuth && <Text weight={currentActivePath.value === item.link ? 'semibold' : 'normal'}>{item.label}</Text>}</Fragment>}
+            {session.username !== '' ? (
+              <Text theme="primary" weight={currentActivePath.value === item.link ? 'semibold' : 'normal'}>
+                {item.label}
+              </Text>
+            ) : (
+              <Fragment>
+                {!item.isRequireAuth && (
+                  <Text weight={currentActivePath.value === item.link ? 'semibold' : 'normal'} theme="primary">
+                    {item.label}
+                  </Text>
+                )}
+              </Fragment>
+            )}
           </Navigation.Item>
         ))}
       </Box>

From 0cf195adad2d703ce60456112f046bef7c9c2269 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 18:10:59 +0700
Subject: [PATCH 07/40] feat: plan badge

---
 .../routes/dashboard/components/plan-badge.tsx   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 apps/web/src/routes/dashboard/components/plan-badge.tsx

diff --git a/apps/web/src/routes/dashboard/components/plan-badge.tsx b/apps/web/src/routes/dashboard/components/plan-badge.tsx
new file mode 100644
index 0000000..39cacc2
--- /dev/null
+++ b/apps/web/src/routes/dashboard/components/plan-badge.tsx
@@ -0,0 +1,16 @@
+import { component$ } from '@builder.io/qwik';
+import { Button } from '@producktivity/ui';
+
+type PlanType = 'Professional' | 'Enterprise' | 'Hobby';
+
+interface PlanBadgeProps {
+  planType: PlanType;
+}
+
+export const PlanBadge = component$((badge: PlanBadgeProps) => {
+  return (
+    <Button rounded="full" variant={badge.planType === 'Professional' ? 'badge-primary' : badge.planType === 'Enterprise' ? 'badge-tertiary' : 'badge-secondary'}>
+      {badge.planType}
+    </Button>
+  );
+});

From 7768d581ee8edcdd4da2c8a36916f719a90ba37b Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 18:11:57 +0700
Subject: [PATCH 08/40] feat: dashboard tab

---
 .../routes/dashboard/components/credit.tsx    | 10 +++
 .../dashboard/components/dashboard-tab.tsx    | 76 ++++++++++++++++++-
 2 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/routes/dashboard/components/credit.tsx

diff --git a/apps/web/src/routes/dashboard/components/credit.tsx b/apps/web/src/routes/dashboard/components/credit.tsx
new file mode 100644
index 0000000..f12bb7f
--- /dev/null
+++ b/apps/web/src/routes/dashboard/components/credit.tsx
@@ -0,0 +1,10 @@
+import { component$ } from '@builder.io/qwik';
+import { Box } from '@producktivity/ui';
+
+export const Credit = component$(() => {
+  return (
+    <Box width="full" variant="surface">
+      <Box padding="2">Credit</Box>
+    </Box>
+  );
+});
diff --git a/apps/web/src/routes/dashboard/components/dashboard-tab.tsx b/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
index 6062c9c..bad1aea 100644
--- a/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
+++ b/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
@@ -1,10 +1,80 @@
 import { component$ } from '@builder.io/qwik';
-import { Box } from '@producktivity/ui';
+import { Box, Text } from '@producktivity/ui';
+import { Credit } from './credit';
+
+interface TaskMemberProps {
+  name: string;
+}
+
+type TaskStatus = 'in progress' | 'failed' | 'success';
+
+interface TaskProps {
+  title: string;
+  status: TaskStatus;
+  member: TaskMemberProps[];
+  createdWhen: Date;
+  finishedWhen?: Date;
+}
+
+const MockDashboardTasks: TaskProps[] = [
+  {
+    title: 'KMITL Volunteering',
+    status: 'success',
+    createdWhen: new Date('11-02-2024'),
+    member: [
+      {
+        name: 'Boonpongkrong Narongrich',
+      },
+    ],
+  },
+  {
+    title: 'IT Open house participate',
+    status: 'in progress',
+    createdWhen: new Date(),
+    member: [
+      {
+        name: 'Rafah Pipatpong',
+      },
+      {
+        name: 'Sainan Anannarongdech',
+      },
+      {
+        name: 'Boonpradab Narongrich',
+      },
+    ],
+  },
+];
 
 export const DashboardTab = component$(() => {
   return (
-    <Box width="full">
-      <Box padding="2">dashboard tab</Box>
+    <Box paddingX="4" direction="horizontal" width="full" align="top">
+      <Box paddingX="4" paddingY="2" width="3/4" variant="surface">
+        <Box direction="horizontal" width="full" align="between-center">
+          <Box>
+            <Text variant="title" weight="bold">
+              Last Tasks
+            </Text>
+            <Text theme="secondary">{MockDashboardTasks ? MockDashboardTasks.length : 0} Total</Text>
+          </Box>
+          <Box direction="horizontal" gap="1">
+            <Box align="center">
+              <Text variant="title" weight="medium">
+                {MockDashboardTasks.filter((task) => task.status === 'success').length}
+              </Text>
+              <Text theme="secondary">Done</Text>
+            </Box>
+            <Box align="center">
+              <Text variant="title" weight="medium">
+                {MockDashboardTasks.filter((task) => task.status === 'success').length}
+              </Text>
+              <Text theme="secondary">In Progress</Text>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+      <Box paddingX="4" width="quarter">
+        <Credit />
+      </Box>
     </Box>
   );
 });

From f5caa38495f6b3ae498155b34833059f456f4b57 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 18:13:08 +0700
Subject: [PATCH 09/40] feat: add current plan

---
 apps/web/src/routes/dashboard/index.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/routes/dashboard/index.tsx b/apps/web/src/routes/dashboard/index.tsx
index 93b504d..ff3082c 100644
--- a/apps/web/src/routes/dashboard/index.tsx
+++ b/apps/web/src/routes/dashboard/index.tsx
@@ -2,10 +2,11 @@ import { component$, useSignal } from '@builder.io/qwik';
 import { DocumentHead } from '@builder.io/qwik-city';
 import { Box, Button, Text } from '@producktivity/ui';
 import { generateSeoConfig } from '../../configs/seo';
-import { LuPlusCircle } from '@qwikest/icons/lucide';
+import { LuArrowUpCircle, LuPlusCircle } from '@qwikest/icons/lucide';
 import { DashboardTab } from './components/dashboard-tab';
 import { TemplateTab } from './components/template-tab';
 import { ProjectTab } from './components/project-tab';
+import { PlanBadge } from './components/plan-badge';
 
 interface DashboardTabsProps {
   id: number;
@@ -23,7 +24,7 @@ export default component$(() => {
 
   return (
     <Box height="full-screen" width="full-screen" align="top-left">
-      <Box padding="4" width="full" direction="horizontal" align="between-center">
+      <Box paddingY="2" paddingX="4" width="full" direction="horizontal" align="between-center">
         <Box direction="horizontal" gap="1">
           {dashboardTabs.map((item: DashboardTabsProps) => (
             <Button rounded="full" variant={item.id === currentActiveTabId.value ? 'primary' : 'secondary'} key={item.id} onClick$={() => (currentActiveTabId.value = item.id)}>
@@ -40,7 +41,21 @@ export default component$(() => {
           </Box>
         </Button>
       </Box>
-      <Box paddingX="4">
+      <Box direction="horizontal" gap="0.5" paddingX="4">
+        <Text>Current Plan</Text>
+        <PlanBadge planType="Professional" />
+        <Button rounded="full" href="/pricing">
+          <Box direction="horizontal" align="center" gap="0.5">
+            <Text theme="surface">
+              <LuArrowUpCircle />
+            </Text>
+            <Text theme="surface" variant="small">
+              Upgrade
+            </Text>
+          </Box>
+        </Button>
+      </Box>
+      <Box marginY="2" width="full">
         {currentActiveTabId.value === 0 && <DashboardTab />}
         {currentActiveTabId.value === 1 && <ProjectTab />}
         {currentActiveTabId.value === 2 && <TemplateTab />}

From c447a7ab52837d183db18e26fc4f417ce46b55cb Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:14:34 +0700
Subject: [PATCH 10/40] feat: test github workflow

---
 .github/deploy_link.sh     |  6 ++++++
 .github/workflows/main.yml | 23 ++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 .github/deploy_link.sh

diff --git a/.github/deploy_link.sh b/.github/deploy_link.sh
new file mode 100644
index 0000000..dc22ca2
--- /dev/null
+++ b/.github/deploy_link.sh
@@ -0,0 +1,6 @@
+#!/bin/bash
+
+pattern='https?://\S+\.produck\.pages\.dev'
+link=$(grep -oE "$pattern" deployment.log | head -n 1)
+
+echo "$link" > deployment_link.txt
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index a29d0e4..2f4ee3b 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -56,4 +56,25 @@ jobs:
         run: pnpm nx affected -t build
 
       - name: Run deploy task
-        run: pnpm nx affected -t deploy
+        run: |
+          pnpm nx affected -t deploy > deployment.log
+
+      - name: Get deployment link
+        id: dep_link
+        run: echo "::set-output name=link::$(cat deployment_link.log)"
+
+      - name: Publish deployment link
+        uses: actions/github-script@v4
+        with:
+          script: |
+            const { context, GitHub } = require('@actions/github');
+            const github = new GitHub(${{ secrets.GITHUB_TOKEN }});
+            const issueNumber = '${{ github.event.number }}'
+            const link = '${{ steps.read_link.outputs.link }}';
+            github.issues.createComment({
+              owner: ${{ github.event.workflow_run.head_repository.owner.login }},
+              repo: context.repo.repo,
+              issue_number: issueNumber,
+              body: `### QA Deployment
+              result: ${link}`
+            });

From fe9d21b2df4ebd95f66b53776038dcf54520aff0 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:16:41 +0700
Subject: [PATCH 11/40] feat: test github workflow

---
 .github/deployment_link.txt | 0
 .github/workflows/main.yml  | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 .github/deployment_link.txt

diff --git a/.github/deployment_link.txt b/.github/deployment_link.txt
new file mode 100644
index 0000000..e69de29
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 2f4ee3b..f97a84d 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -61,7 +61,7 @@ jobs:
 
       - name: Get deployment link
         id: dep_link
-        run: echo "::set-output name=link::$(cat deployment_link.log)"
+        run: echo "::set-output name=link::$(cat deployment_link.txt)"
 
       - name: Publish deployment link
         uses: actions/github-script@v4

From 4ae0f5acf3be05c355f27b1ebe20d1eb57d1e77e Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:23:38 +0700
Subject: [PATCH 12/40] fix: pipeline

---
 .github/deployment_link.txt | 0
 .github/workflows/main.yml  | 6 +++---
 2 files changed, 3 insertions(+), 3 deletions(-)
 delete mode 100644 .github/deployment_link.txt

diff --git a/.github/deployment_link.txt b/.github/deployment_link.txt
deleted file mode 100644
index e69de29..0000000
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index f97a84d..31f17bd 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -61,7 +61,7 @@ jobs:
 
       - name: Get deployment link
         id: dep_link
-        run: echo "::set-output name=link::$(cat deployment_link.txt)"
+        run: echo "link=$(cat /.github/deployment_link.txt)" > $GITHUB_OUTPUT
 
       - name: Publish deployment link
         uses: actions/github-script@v4
@@ -70,9 +70,9 @@ jobs:
             const { context, GitHub } = require('@actions/github');
             const github = new GitHub(${{ secrets.GITHUB_TOKEN }});
             const issueNumber = '${{ github.event.number }}'
-            const link = '${{ steps.read_link.outputs.link }}';
+            const link = '${{ steps.dep_link.outputs.link }}';
             github.issues.createComment({
-              owner: ${{ github.event.workflow_run.head_repository.owner.login }},
+              owner: context.repo.owner,
               repo: context.repo.repo,
               issue_number: issueNumber,
               body: `### QA Deployment

From 92af4f8ed262cbec2e2332cc98e9cb69e37f8b9e Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:25:30 +0700
Subject: [PATCH 13/40] fix: remove context declaration

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 31f17bd..cc5066b 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -67,7 +67,7 @@ jobs:
         uses: actions/github-script@v4
         with:
           script: |
-            const { context, GitHub } = require('@actions/github');
+            const { GitHub } = require('@actions/github');
             const github = new GitHub(${{ secrets.GITHUB_TOKEN }});
             const issueNumber = '${{ github.event.number }}'
             const link = '${{ steps.dep_link.outputs.link }}';

From c8627979bd66869cadd4c8c86c7e994a207ed525 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:30:01 +0700
Subject: [PATCH 14/40] feat: make use of  deploy_link.sh

---
 .github/workflows/main.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index cc5066b..920f185 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -58,6 +58,8 @@ jobs:
       - name: Run deploy task
         run: |
           pnpm nx affected -t deploy > deployment.log
+          chmod +x deploy_link.sh
+          deploy_link.sh
 
       - name: Get deployment link
         id: dep_link

From 5eef35a80e3f4dca65a36dab867e62ae78ac2a1d Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:30:13 +0700
Subject: [PATCH 15/40] fix: remove github declaration

---
 .github/workflows/main.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 920f185..05211df 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -69,7 +69,6 @@ jobs:
         uses: actions/github-script@v4
         with:
           script: |
-            const { GitHub } = require('@actions/github');
             const github = new GitHub(${{ secrets.GITHUB_TOKEN }});
             const issueNumber = '${{ github.event.number }}'
             const link = '${{ steps.dep_link.outputs.link }}';

From a6f6a1d7737cba1de6d208225c8c5cfc1364f8d3 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:31:50 +0700
Subject: [PATCH 16/40] fix: shell script path

---
 .github/workflows/main.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 05211df..da982ca 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -58,8 +58,8 @@ jobs:
       - name: Run deploy task
         run: |
           pnpm nx affected -t deploy > deployment.log
-          chmod +x deploy_link.sh
-          deploy_link.sh
+          chmod +x ./deploy_link.sh
+          ./deploy_link.sh
 
       - name: Get deployment link
         id: dep_link

From 776ad12052a384f0e099d0e73da0493212990d06 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:32:22 +0700
Subject: [PATCH 17/40] fix: have deployment log out of workflow folder

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index da982ca..a83fbcf 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -57,7 +57,7 @@ jobs:
 
       - name: Run deploy task
         run: |
-          pnpm nx affected -t deploy > deployment.log
+          pnpm nx affected -t deploy > ./deployment.log
           chmod +x ./deploy_link.sh
           ./deploy_link.sh
 

From e382a0de9ea0299029849d8df26ec738de0f02cb Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:37:24 +0700
Subject: [PATCH 18/40] fix: pipeline

---
 .github/workflows/main.yml | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index a83fbcf..b4dfb18 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -58,12 +58,11 @@ jobs:
       - name: Run deploy task
         run: |
           pnpm nx affected -t deploy > ./deployment.log
-          chmod +x ./deploy_link.sh
           ./deploy_link.sh
 
       - name: Get deployment link
-        id: dep_link
-        run: echo "link=$(cat /.github/deployment_link.txt)" > $GITHUB_OUTPUT
+        id: deploy_link
+        run: echo "dep_link=$(cat /.github/deployment_link.txt)" > $GITHUB_OUTPUT
 
       - name: Publish deployment link
         uses: actions/github-script@v4
@@ -71,11 +70,11 @@ jobs:
           script: |
             const github = new GitHub(${{ secrets.GITHUB_TOKEN }});
             const issueNumber = '${{ github.event.number }}'
-            const link = '${{ steps.dep_link.outputs.link }}';
+            const link = '${{ steps.deploy_link.outputs.link }}';
             github.issues.createComment({
               owner: context.repo.owner,
               repo: context.repo.repo,
               issue_number: issueNumber,
               body: `### QA Deployment
-              result: ${link}`
+              result: ${dep_link}`
             });

From 410b6ad16fb372dcedffb401d1644f9f56463b62 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:42:17 +0700
Subject: [PATCH 19/40] fix: pipeline

---
 .github/workflows/main.yml                     | 9 ++++++---
 .github/{ => workflows/scripts}/deploy_link.sh | 0
 2 files changed, 6 insertions(+), 3 deletions(-)
 rename .github/{ => workflows/scripts}/deploy_link.sh (100%)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index b4dfb18..4c23a09 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -18,6 +18,9 @@ jobs:
   main:
     name: Main
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./scripts
     steps:
       - uses: actions/checkout@v4
         name: Checkout [Pull Request]
@@ -57,12 +60,12 @@ jobs:
 
       - name: Run deploy task
         run: |
-          pnpm nx affected -t deploy > ./deployment.log
-          ./deploy_link.sh
+          pnpm nx affected -t deploy > deployment.log
+          deploy_link.sh
 
       - name: Get deployment link
         id: deploy_link
-        run: echo "dep_link=$(cat /.github/deployment_link.txt)" > $GITHUB_OUTPUT
+        run: echo "dep_link=$(cat deployment_link.txt)" > $GITHUB_OUTPUT
 
       - name: Publish deployment link
         uses: actions/github-script@v4
diff --git a/.github/deploy_link.sh b/.github/workflows/scripts/deploy_link.sh
similarity index 100%
rename from .github/deploy_link.sh
rename to .github/workflows/scripts/deploy_link.sh

From 47ad54da02b4e67a0b7da00841308ca9fdaab142 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:47:04 +0700
Subject: [PATCH 20/40] fix: have deployment log out of workflow folder

---
 .github/workflows/main.yml                            | 10 ++++------
 {.github/workflows/scripts => scripts}/deploy_link.sh |  0
 2 files changed, 4 insertions(+), 6 deletions(-)
 rename {.github/workflows/scripts => scripts}/deploy_link.sh (100%)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 4c23a09..220833a 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -18,9 +18,6 @@ jobs:
   main:
     name: Main
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./scripts
     steps:
       - uses: actions/checkout@v4
         name: Checkout [Pull Request]
@@ -60,12 +57,13 @@ jobs:
 
       - name: Run deploy task
         run: |
-          pnpm nx affected -t deploy > deployment.log
-          deploy_link.sh
+          pnpm nx affected -t deploy > ./scripts/deployment.log
+          chmod +x ./scripts/deploy_link.sh
+          ./scripts/deploy_link.sh
 
       - name: Get deployment link
         id: deploy_link
-        run: echo "dep_link=$(cat deployment_link.txt)" > $GITHUB_OUTPUT
+        run: echo "dep_link=$(cat ./scripts/deployment_link.txt)" > $GITHUB_OUTPUT
 
       - name: Publish deployment link
         uses: actions/github-script@v4
diff --git a/.github/workflows/scripts/deploy_link.sh b/scripts/deploy_link.sh
similarity index 100%
rename from .github/workflows/scripts/deploy_link.sh
rename to scripts/deploy_link.sh

From 7afa813fa492168961f538762f81d30c3b627111 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:48:22 +0700
Subject: [PATCH 21/40] fix: remove github declaration

---
 .github/workflows/main.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 220833a..7aadaf8 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -69,7 +69,6 @@ jobs:
         uses: actions/github-script@v4
         with:
           script: |
-            const github = new GitHub(${{ secrets.GITHUB_TOKEN }});
             const issueNumber = '${{ github.event.number }}'
             const link = '${{ steps.deploy_link.outputs.link }}';
             github.issues.createComment({

From 89d6d980b0991c3075e95581d543c96c539a6afb Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:52:36 +0700
Subject: [PATCH 22/40] fix: change typo link to dep_link

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 7aadaf8..8607c5c 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -70,7 +70,7 @@ jobs:
         with:
           script: |
             const issueNumber = '${{ github.event.number }}'
-            const link = '${{ steps.deploy_link.outputs.link }}';
+            const link = '${{ steps.deploy_link.outputs.dep_link }}';
             github.issues.createComment({
               owner: context.repo.owner,
               repo: context.repo.repo,

From 1af1c112c7b5ca89db1d50c272331f9126acc061 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 20:55:00 +0700
Subject: [PATCH 23/40] fix:  change replace to update github outputs

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 8607c5c..147f513 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -63,7 +63,7 @@ jobs:
 
       - name: Get deployment link
         id: deploy_link
-        run: echo "dep_link=$(cat ./scripts/deployment_link.txt)" > $GITHUB_OUTPUT
+        run: echo "dep_link=$(cat ./scripts/deployment_link.txt)" >> "$GITHUB_OUTPUT"
 
       - name: Publish deployment link
         uses: actions/github-script@v4

From c40369d0892b2808590dfba9c1f7f7a34087cab6 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 21:20:34 +0700
Subject: [PATCH 24/40] fix: change typo link to dep_link

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 147f513..9e30dd4 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -63,7 +63,7 @@ jobs:
 
       - name: Get deployment link
         id: deploy_link
-        run: echo "dep_link=$(cat ./scripts/deployment_link.txt)" >> "$GITHUB_OUTPUT"
+        run: echo "dep_link='Hello Brother'" >> "$GITHUB_OUTPUT"
 
       - name: Publish deployment link
         uses: actions/github-script@v4

From 78fce6edf4ce9b9b1855b1fd9e61aa8c1f426dfa Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 21:23:43 +0700
Subject: [PATCH 25/40] fix: change deplink to link

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 9e30dd4..a3e991b 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -76,5 +76,5 @@ jobs:
               repo: context.repo.repo,
               issue_number: issueNumber,
               body: `### QA Deployment
-              result: ${dep_link}`
+              result: ${link}`
             });

From 623ab9e2cb2d38ccba2d80ba2bbfdff5b1bc8a1e Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 21:27:29 +0700
Subject: [PATCH 26/40] fix: link value

---
 .github/workflows/main.yml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index a3e991b..bdcd02a 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -70,11 +70,10 @@ jobs:
         with:
           script: |
             const issueNumber = '${{ github.event.number }}'
-            const link = '${{ steps.deploy_link.outputs.dep_link }}';
             github.issues.createComment({
               owner: context.repo.owner,
               repo: context.repo.repo,
               issue_number: issueNumber,
               body: `### QA Deployment
-              result: ${link}`
+              result: ${{ steps.deploy_link.outputs.dep_link }}`
             });

From 02499c2b208ebc0d87fc0c9608ca99358788749d Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 21:29:46 +0700
Subject: [PATCH 27/40] feat: use deploymentlink.txt

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index bdcd02a..7dd8d6c 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -63,7 +63,7 @@ jobs:
 
       - name: Get deployment link
         id: deploy_link
-        run: echo "dep_link='Hello Brother'" >> "$GITHUB_OUTPUT"
+        run: echo "dep_link=$(cat ./scripts/deployment_link.txt)" >> "$GITHUB_OUTPUT"
 
       - name: Publish deployment link
         uses: actions/github-script@v4

From a612872c90a977cd4015dedaea6cfc914cdc690a Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 21:32:02 +0700
Subject: [PATCH 28/40] feat: test txt path

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 7dd8d6c..94ae2f7 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -63,7 +63,7 @@ jobs:
 
       - name: Get deployment link
         id: deploy_link
-        run: echo "dep_link=$(cat ./scripts/deployment_link.txt)" >> "$GITHUB_OUTPUT"
+        run: echo "dep_link=$(cat deployment_link.txt)" >> "$GITHUB_OUTPUT"
 
       - name: Publish deployment link
         uses: actions/github-script@v4

From 7e107a881bc651b598f98462ae874aaaffc54760 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 21:34:59 +0700
Subject: [PATCH 29/40] test: test txt path

---
 .github/workflows/main.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 94ae2f7..7f79eee 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -63,7 +63,8 @@ jobs:
 
       - name: Get deployment link
         id: deploy_link
-        run: echo "dep_link=$(cat deployment_link.txt)" >> "$GITHUB_OUTPUT"
+        # run: echo "dep_link=$(cat deployment_link.txt)" >> "$GITHUB_OUTPUT"
+        run: cat deployment_link.txt
 
       - name: Publish deployment link
         uses: actions/github-script@v4

From 10ae327620e771e2f1a02582a7d360ee477b92c4 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Wed, 27 Mar 2024 21:38:06 +0700
Subject: [PATCH 30/40] feat: temp remove comment

---
 .github/workflows/main.yml | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 7f79eee..9455ac2 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -63,18 +63,17 @@ jobs:
 
       - name: Get deployment link
         id: deploy_link
-        # run: echo "dep_link=$(cat deployment_link.txt)" >> "$GITHUB_OUTPUT"
-        run: cat deployment_link.txt
+        run: echo "dep_link=$(cat deployment_link.txt)" >> "$GITHUB_OUTPUT"
 
       - name: Publish deployment link
         uses: actions/github-script@v4
         with:
-          script: |
-            const issueNumber = '${{ github.event.number }}'
-            github.issues.createComment({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: issueNumber,
-              body: `### QA Deployment
-              result: ${{ steps.deploy_link.outputs.dep_link }}`
-            });
+          # script: |
+          #   const issueNumber = '${{ github.event.number }}'
+          #   github.issues.createComment({
+          #     owner: context.repo.owner,
+          #     repo: context.repo.repo,
+          #     issue_number: issueNumber,
+          #     body: `### QA Deployment
+          #     result: ${{ steps.deploy_link.outputs.dep_link }}`
+          #   });

From a7613ca49ed6a2d119c769af3d3832a9256ba278 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Thu, 28 Mar 2024 15:37:01 +0700
Subject: [PATCH 31/40] build(deps): tanstack table

---
 package.json   |  1 +
 pnpm-lock.yaml | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/package.json b/package.json
index cd4e4a0..0a7e467 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@storybook/addon-links": "^7.6.7",
     "@storybook/addon-themes": "^7.6.7",
     "@storybook/core-server": "^7.6.7",
+    "@tanstack/qwik-table": "^8.15.0",
     "@types/jest": "^29.4.0",
     "@types/node": "^20.11.9",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b33ff1..306cbb0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       '@storybook/core-server':
         specifier: ^7.6.7
         version: 7.6.10
+      '@tanstack/qwik-table':
+        specifier: ^8.15.0
+        version: 8.15.0(@builder.io/qwik@1.4.2)
       '@types/jest':
         specifier: ^29.4.0
         version: 29.5.11
@@ -4860,6 +4863,21 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /@tanstack/qwik-table@8.15.0(@builder.io/qwik@1.4.2):
+    resolution: {integrity: sha512-gkZGjzwfb38CwJKJkyZy+kF6Iihwgul574/J3rZUcoHsphd/AyZRjjsPiA4E9NDi2XU9UtOyC9YDIPE/O0agxQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      '@builder.io/qwik': '>=1.5'
+    dependencies:
+      '@builder.io/qwik': 1.4.2(@types/node@20.11.9)(lightningcss@1.23.0)(undici@5.28.2)
+      '@tanstack/table-core': 8.14.0
+    dev: true
+
+  /@tanstack/table-core@8.14.0:
+    resolution: {integrity: sha512-wDhpKJahGHWhmRt4RxtV3pES63CoeadljGWS/xeS9OJr1HBl2NB+OO44ht3sxDH5j5TRDAbQzC0NvSlsUfn7lQ==}
+    engines: {node: '>=12'}
+    dev: true
+
   /@tootallnate/once@2.0.0:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}

From b65e0af44891576ae328618b2d330fed4b1eb6c5 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Thu, 28 Mar 2024 15:37:22 +0700
Subject: [PATCH 32/40] feat: status badge

---
 libs/web/shared/ui/src/lib/button/button.props.ts | 2 +-
 libs/web/shared/ui/src/lib/button/button.tsx      | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/libs/web/shared/ui/src/lib/button/button.props.ts b/libs/web/shared/ui/src/lib/button/button.props.ts
index fa1a33f..a295ac3 100644
--- a/libs/web/shared/ui/src/lib/button/button.props.ts
+++ b/libs/web/shared/ui/src/lib/button/button.props.ts
@@ -5,7 +5,7 @@ import type { BorderSizeProps } from '../props';
 export const ButtonSizes = ['small', 'base', 'large'] as const;
 export type ButtonSize = (typeof ButtonSizes)[number];
 
-export const ButtonVariants = ['primary', 'secondary', 'tertiary', 'gradient', 'error', 'surface', 'badge-primary', 'badge-secondary', 'badge-tertiary'] as const;
+export const ButtonVariants = ['primary', 'secondary', 'tertiary', 'gradient', 'error', 'surface', 'badge-primary', 'badge-secondary', 'badge-tertiary', 'badge-success', 'badge-error', 'badge-info'] as const;
 export type ButtonVariant = (typeof ButtonVariants)[number];
 
 type NativeButton = QwikIntrinsicElements['button'] & LinkProps;
diff --git a/libs/web/shared/ui/src/lib/button/button.tsx b/libs/web/shared/ui/src/lib/button/button.tsx
index 026569b..8e500c8 100644
--- a/libs/web/shared/ui/src/lib/button/button.tsx
+++ b/libs/web/shared/ui/src/lib/button/button.tsx
@@ -26,6 +26,9 @@ export const Button = component$<ButtonProps>((props) => {
     'badge-primary': 'bg-primary/[.15] px-2 py-1 border border-primary',
     'badge-secondary': 'bg-secondary/[.15] px-2 py-1 border border-secondary',
     'badge-tertiary': 'bg-tertiary/[.15] px-2 py-1 border border-tertiary',
+    'badge-success': 'bg-green-200/[0.4] p-0.5',
+    'badge-error': 'bg-red-200/[0.4] p-0.5',
+    'badge-info': 'bg-blue-200/[0.4] p-0.5',
   } satisfies { [K in ButtonVariant | 'disabled']: string };
 
   const LabelVariants = {
@@ -39,6 +42,9 @@ export const Button = component$<ButtonProps>((props) => {
     'badge-primary': 'text-primary font-medium text-sm',
     'badge-secondary': 'text-secondary font-medium text-sm',
     'badge-tertiary': 'text-tertiary font-medium text-sm',
+    'badge-success': 'text-green-600 font-medium text-sm',
+    'badge-error': 'text-red-600 font-medium text-sm',
+    'badge-info': 'text-blue-600 font-medium text-sm',
   } satisfies { [K in ButtonVariant | 'disabled']: string };
 
   const StateLayerVariants = {
@@ -52,6 +58,9 @@ export const Button = component$<ButtonProps>((props) => {
     'badge-primary': '',
     'badge-secondary': '',
     'badge-tertiary': '',
+    'badge-success': '',
+    'badge-error': '',
+    'badge-info': '',
   } satisfies { [K in ButtonVariant | 'disabled']: string };
 
   const Tag = rest.href ? Link : 'button';

From 87882d1410d45d585f5c420c4ef92c4553fb36b4 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Thu, 28 Mar 2024 15:37:35 +0700
Subject: [PATCH 33/40] feat: table

---
 .../dashboard/components/dashboard-tab.tsx    | 12 +--
 .../dashboard/components/dashboard-table.tsx  | 85 +++++++++++++++++++
 2 files changed, 92 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/routes/dashboard/components/dashboard-table.tsx

diff --git a/apps/web/src/routes/dashboard/components/dashboard-tab.tsx b/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
index bad1aea..85dcfc5 100644
--- a/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
+++ b/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
@@ -1,14 +1,15 @@
 import { component$ } from '@builder.io/qwik';
 import { Box, Text } from '@producktivity/ui';
 import { Credit } from './credit';
+import { DashboardTable } from './dashboard-table';
 
-interface TaskMemberProps {
+export interface TaskMemberProps {
   name: string;
 }
 
-type TaskStatus = 'in progress' | 'failed' | 'success';
+export type TaskStatus = 'in progress' | 'failed' | 'success';
 
-interface TaskProps {
+export interface TaskProps {
   title: string;
   status: TaskStatus;
   member: TaskMemberProps[];
@@ -19,7 +20,7 @@ interface TaskProps {
 const MockDashboardTasks: TaskProps[] = [
   {
     title: 'KMITL Volunteering',
-    status: 'success',
+    status: 'failed',
     createdWhen: new Date('11-02-2024'),
     member: [
       {
@@ -29,7 +30,7 @@ const MockDashboardTasks: TaskProps[] = [
   },
   {
     title: 'IT Open house participate',
-    status: 'in progress',
+    status: 'success',
     createdWhen: new Date(),
     member: [
       {
@@ -71,6 +72,7 @@ export const DashboardTab = component$(() => {
             </Box>
           </Box>
         </Box>
+        <DashboardTable data={MockDashboardTasks} />
       </Box>
       <Box paddingX="4" width="quarter">
         <Credit />
diff --git a/apps/web/src/routes/dashboard/components/dashboard-table.tsx b/apps/web/src/routes/dashboard/components/dashboard-table.tsx
new file mode 100644
index 0000000..5084da2
--- /dev/null
+++ b/apps/web/src/routes/dashboard/components/dashboard-table.tsx
@@ -0,0 +1,85 @@
+import { component$ } from '@builder.io/qwik';
+import { createColumnHelper, getCoreRowModel, flexRender, useQwikTable } from '@tanstack/qwik-table';
+import { TaskMemberProps, TaskProps, TaskStatus } from './dashboard-tab';
+import { Box, Button } from '@producktivity/ui';
+
+const columnHelper = createColumnHelper<TaskProps>();
+
+function getTaskMember(row: TaskMemberProps[]) {
+  return <p>{row.length}</p>;
+}
+
+function getTaskStatus(row: TaskStatus) {
+  return (
+    <Button rounded="md" variant={row === 'success' ? 'badge-success' : row === 'failed' ? 'badge-error' : 'badge-info'}>
+      {row}
+    </Button>
+  );
+}
+
+const columns = [
+  columnHelper.accessor('title', {
+    header: () => 'Project',
+    cell: (info) => info.renderValue(),
+  }),
+  columnHelper.accessor('member', {
+    header: () => 'Member',
+    cell: (info) => getTaskMember(info.getValue()),
+  }),
+  columnHelper.accessor('status', {
+    header: () => 'Status',
+    cell: (info) => getTaskStatus(info.getValue()),
+  }),
+  columnHelper.accessor('createdWhen', {
+    header: () => 'Task Created',
+    cell: (info) => info.getValue().toISOString().split('T')[0],
+  }),
+  columnHelper.accessor('finishedWhen', {
+    header: () => 'Task Finished',
+    cell: (info) => (info !== null ? 'finished' : ''),
+  }),
+];
+
+interface DashboardTableProps {
+  data: TaskProps[];
+}
+
+export const DashboardTable = component$(({ data }: DashboardTableProps) => {
+  const table = useQwikTable({
+    columns,
+    data: data,
+    getCoreRowModel: getCoreRowModel(),
+    enableSorting: true,
+  });
+
+  return (
+    <Box width="full" padding="2">
+      <table>
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          <Box width="full" paddingY="1">
+            {table.getRowModel().rows.map((row) => (
+              <tr key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id}>
+                    <Box width="full" align="between-center" paddingY="1">
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </Box>
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </Box>
+        </tbody>
+      </table>
+    </Box>
+  );
+});

From 52915177955978543e643882902157ee06bcd30b Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Thu, 28 Mar 2024 15:53:18 +0700
Subject: [PATCH 34/40] fix: table layout

---
 .../dashboard/components/dashboard-table.tsx  | 41 +++++++++++--------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/routes/dashboard/components/dashboard-table.tsx b/apps/web/src/routes/dashboard/components/dashboard-table.tsx
index 5084da2..9758b39 100644
--- a/apps/web/src/routes/dashboard/components/dashboard-table.tsx
+++ b/apps/web/src/routes/dashboard/components/dashboard-table.tsx
@@ -2,6 +2,7 @@ import { component$ } from '@builder.io/qwik';
 import { createColumnHelper, getCoreRowModel, flexRender, useQwikTable } from '@tanstack/qwik-table';
 import { TaskMemberProps, TaskProps, TaskStatus } from './dashboard-tab';
 import { Box, Button } from '@producktivity/ui';
+import { LuArrowDownAZ, LuArrowUpAZ } from '@qwikest/icons/lucide';
 
 const columnHelper = createColumnHelper<TaskProps>();
 
@@ -21,10 +22,12 @@ const columns = [
   columnHelper.accessor('title', {
     header: () => 'Project',
     cell: (info) => info.renderValue(),
+    sortingFn: 'text',
   }),
   columnHelper.accessor('member', {
     header: () => 'Member',
     cell: (info) => getTaskMember(info.getValue()),
+    sortingFn: 'alphanumeric',
   }),
   columnHelper.accessor('status', {
     header: () => 'Status',
@@ -33,10 +36,12 @@ const columns = [
   columnHelper.accessor('createdWhen', {
     header: () => 'Task Created',
     cell: (info) => info.getValue().toISOString().split('T')[0],
+    sortingFn: 'datetime',
   }),
   columnHelper.accessor('finishedWhen', {
     header: () => 'Task Finished',
     cell: (info) => (info !== null ? 'finished' : ''),
+    sortingFn: 'datetime',
   }),
 ];
 
@@ -54,30 +59,34 @@ export const DashboardTable = component$(({ data }: DashboardTableProps) => {
 
   return (
     <Box width="full" padding="2">
-      <table>
-        <thead>
+      <table class="w-full table-fixed text-sm text-left text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
-                <th key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</th>
+                <th key={header.id} scope="col">
+                  <Box align="between-start">
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                    {{
+                      asc: <LuArrowUpAZ />,
+                      desc: <LuArrowDownAZ />,
+                    }[header.column.getIsSorted() as string] ?? null}
+                  </Box>
+                </th>
               ))}
             </tr>
           ))}
         </thead>
         <tbody>
-          <Box width="full" paddingY="1">
-            {table.getRowModel().rows.map((row) => (
-              <tr key={row.id}>
-                {row.getVisibleCells().map((cell) => (
-                  <td key={cell.id}>
-                    <Box width="full" align="between-center" paddingY="1">
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </Box>
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </Box>
+          {table.getRowModel().rows.map((row) => (
+            <tr key={row.id} class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+              {row.getVisibleCells().map((cell) => (
+                <td key={cell.id} class="py-2">
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
         </tbody>
       </table>
     </Box>

From 7aee48ef65bf9068731bd78ffdeb619dbf997414 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Thu, 28 Mar 2024 16:18:10 +0700
Subject: [PATCH 35/40] feat: project routes

---
 .../routes/dashboard/project/[id]/index.tsx    | 18 ++++++++++++++++++
 .../web/src/routes/dashboard/project/index.tsx | 16 ++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 apps/web/src/routes/dashboard/project/[id]/index.tsx
 create mode 100644 apps/web/src/routes/dashboard/project/index.tsx

diff --git a/apps/web/src/routes/dashboard/project/[id]/index.tsx b/apps/web/src/routes/dashboard/project/[id]/index.tsx
new file mode 100644
index 0000000..6aaffc1
--- /dev/null
+++ b/apps/web/src/routes/dashboard/project/[id]/index.tsx
@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik';
+import { DocumentHead, useLocation } from '@builder.io/qwik-city';
+import { Box, Text } from '@producktivity/ui';
+import { generateSeoConfig } from '../../../../configs/seo';
+
+export default component$(() => {
+  const location = useLocation();
+
+  return (
+    <Box id={location.params.id}>
+      <Text variant="title" weight="bold">
+        Projects
+      </Text>
+    </Box>
+  );
+});
+
+export const head: DocumentHead = generateSeoConfig({ title: 'Projects' });
diff --git a/apps/web/src/routes/dashboard/project/index.tsx b/apps/web/src/routes/dashboard/project/index.tsx
new file mode 100644
index 0000000..807fe05
--- /dev/null
+++ b/apps/web/src/routes/dashboard/project/index.tsx
@@ -0,0 +1,16 @@
+import { component$ } from '@builder.io/qwik';
+import { DocumentHead } from '@builder.io/qwik-city';
+import { Text } from '@producktivity/ui';
+import { generateSeoConfig } from '../../../configs/seo';
+
+export default component$(() => {
+  return (
+    <>
+      <Text variant="title" weight="bold">
+        Projects
+      </Text>
+    </>
+  );
+});
+
+export const head: DocumentHead = generateSeoConfig({ title: 'Projects' });

From dbca7016f64298c659ff08eb539a100391656635 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Thu, 28 Mar 2024 16:26:40 +0700
Subject: [PATCH 36/40] feat: main table dashboard

---
 .../dashboard/components/dashboard-tab.tsx    | 50 +++++++++++++++++--
 .../dashboard/components/dashboard-table.tsx  | 18 +++++--
 2 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/routes/dashboard/components/dashboard-tab.tsx b/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
index 85dcfc5..c8b92c4 100644
--- a/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
+++ b/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
@@ -10,6 +10,7 @@ export interface TaskMemberProps {
 export type TaskStatus = 'in progress' | 'failed' | 'success';
 
 export interface TaskProps {
+  id: number;
   title: string;
   status: TaskStatus;
   member: TaskMemberProps[];
@@ -19,19 +20,34 @@ export interface TaskProps {
 
 const MockDashboardTasks: TaskProps[] = [
   {
+    id: 0,
     title: 'KMITL Volunteering',
     status: 'failed',
-    createdWhen: new Date('11-02-2024'),
+    createdWhen: new Date('02-11-2024'),
     member: [
       {
         name: 'Boonpongkrong Narongrich',
       },
     ],
+    finishedWhen: new Date('02-11-2024'),
   },
   {
-    title: 'IT Open house participate',
+    id: 0,
+    title: 'KMITL Adhoc Staff',
+    status: 'failed',
+    createdWhen: new Date('02-17-2024'),
+    member: [
+      {
+        name: 'Sainan Anannarongdech',
+      },
+    ],
+    finishedWhen: new Date('11-02-2024'),
+  },
+  {
+    id: 2,
+    title: 'IT Open house participants',
     status: 'success',
-    createdWhen: new Date(),
+    createdWhen: new Date('03-21-2024'),
     member: [
       {
         name: 'Rafah Pipatpong',
@@ -43,6 +59,32 @@ const MockDashboardTasks: TaskProps[] = [
         name: 'Boonpradab Narongrich',
       },
     ],
+    finishedWhen: new Date('03-21-2024'),
+  },
+  {
+    id: 3,
+    title: 'Tobe IT Bootcamp',
+    status: 'in progress',
+    createdWhen: new Date(),
+    member: [
+      {
+        name: 'Thitipat Pipatpong',
+      },
+      {
+        name: 'Boonnarong Kiatnakin',
+      },
+    ],
+  },
+  {
+    id: 4,
+    title: 'Tobe IT Staff',
+    status: 'in progress',
+    createdWhen: new Date(),
+    member: [
+      {
+        name: 'Boonnarong Kiatnakin',
+      },
+    ],
   },
 ];
 
@@ -66,7 +108,7 @@ export const DashboardTab = component$(() => {
             </Box>
             <Box align="center">
               <Text variant="title" weight="medium">
-                {MockDashboardTasks.filter((task) => task.status === 'success').length}
+                {MockDashboardTasks.filter((task) => task.status === 'in progress').length}
               </Text>
               <Text theme="secondary">In Progress</Text>
             </Box>
diff --git a/apps/web/src/routes/dashboard/components/dashboard-table.tsx b/apps/web/src/routes/dashboard/components/dashboard-table.tsx
index 9758b39..43fd55f 100644
--- a/apps/web/src/routes/dashboard/components/dashboard-table.tsx
+++ b/apps/web/src/routes/dashboard/components/dashboard-table.tsx
@@ -3,9 +3,18 @@ import { createColumnHelper, getCoreRowModel, flexRender, useQwikTable } from '@
 import { TaskMemberProps, TaskProps, TaskStatus } from './dashboard-tab';
 import { Box, Button } from '@producktivity/ui';
 import { LuArrowDownAZ, LuArrowUpAZ } from '@qwikest/icons/lucide';
+import { Link } from '@builder.io/qwik-city';
 
 const columnHelper = createColumnHelper<TaskProps>();
 
+function getTaskDetail(row: string) {
+  return (
+    <Link style={{ color: '#3040c9', textDecoration: 'underline' }} href={`/dashboard/project/${row.split(' ').join('-').toLowerCase()}`}>
+      {row}
+    </Link>
+  );
+}
+
 function getTaskMember(row: TaskMemberProps[]) {
   return <p>{row.length}</p>;
 }
@@ -21,8 +30,7 @@ function getTaskStatus(row: TaskStatus) {
 const columns = [
   columnHelper.accessor('title', {
     header: () => 'Project',
-    cell: (info) => info.renderValue(),
-    sortingFn: 'text',
+    cell: (info) => getTaskDetail(info.getValue()),
   }),
   columnHelper.accessor('member', {
     header: () => 'Member',
@@ -35,12 +43,12 @@ const columns = [
   }),
   columnHelper.accessor('createdWhen', {
     header: () => 'Task Created',
-    cell: (info) => info.getValue().toISOString().split('T')[0],
+    cell: (info) => info.getValue().toLocaleString(),
     sortingFn: 'datetime',
   }),
   columnHelper.accessor('finishedWhen', {
     header: () => 'Task Finished',
-    cell: (info) => (info !== null ? 'finished' : ''),
+    cell: (info) => (info.getValue() ? info.getValue()?.toLocaleString() : 'not finished'),
     sortingFn: 'datetime',
   }),
 ];
@@ -58,7 +66,7 @@ export const DashboardTable = component$(({ data }: DashboardTableProps) => {
   });
 
   return (
-    <Box width="full" padding="2">
+    <Box width="full" paddingTop="2" paddingLeft="3">
       <table class="w-full table-fixed text-sm text-left text-gray-500 dark:text-gray-400">
         <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           {table.getHeaderGroups().map((headerGroup) => (

From 84aab8fb6d53a44a4d9cff2444aa62cb6f626bbe Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Thu, 28 Mar 2024 16:50:31 +0700
Subject: [PATCH 37/40] feat: credit box

---
 .../routes/dashboard/components/credit.tsx    | 42 ++++++++++++++++---
 .../dashboard/components/dashboard-tab.tsx    | 14 +++++--
 .../dashboard/components/dashboard-table.tsx  | 13 ++----
 3 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/routes/dashboard/components/credit.tsx b/apps/web/src/routes/dashboard/components/credit.tsx
index f12bb7f..7a304bc 100644
--- a/apps/web/src/routes/dashboard/components/credit.tsx
+++ b/apps/web/src/routes/dashboard/components/credit.tsx
@@ -1,10 +1,42 @@
-import { component$ } from '@builder.io/qwik';
-import { Box } from '@producktivity/ui';
+import { Component, component$ } from '@builder.io/qwik';
+import { Box, Button, Text } from '@producktivity/ui';
+import { LuCar } from '@qwikest/icons/lucide';
 
-export const Credit = component$(() => {
+const MockCredit: CreditProps = {
+  totalCredit: 20,
+  latestUpdate: new Date('03-14-2024'),
+};
+
+export interface CreditProps {
+  totalCredit: number;
+  latestUpdate: Date;
+}
+export const Credit: Component<CreditProps> = component$(() => {
   return (
-    <Box width="full" variant="surface">
-      <Box padding="2">Credit</Box>
+    <Box width="full" variant="surface" rounded="md">
+      <Box width="full" padding="2" gap="2" align="between-center">
+        <Text variant="h2" weight="bold">
+          Available Credit(s)
+        </Text>
+        <Text variant="title" weight="semibold">
+          {MockCredit.totalCredit}
+        </Text>
+        <Box width="full" direction="horizontal" align="between-center">
+          <Text theme="secondary" variant="small">
+            Last Topup: {MockCredit.latestUpdate.toLocaleDateString()}
+          </Text>
+          <Button rounded="full" variant="badge-tertiary">
+            <Box width="full" direction="horizontal" gap="0.5">
+              <Text variant="small" theme="tertiary">
+                <LuCar />
+              </Text>
+              <Text variant="small" theme="tertiary">
+                Top Up
+              </Text>
+            </Box>
+          </Button>
+        </Box>
+      </Box>
     </Box>
   );
 });
diff --git a/apps/web/src/routes/dashboard/components/dashboard-tab.tsx b/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
index c8b92c4..084d1d6 100644
--- a/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
+++ b/apps/web/src/routes/dashboard/components/dashboard-tab.tsx
@@ -91,7 +91,7 @@ const MockDashboardTasks: TaskProps[] = [
 export const DashboardTab = component$(() => {
   return (
     <Box paddingX="4" direction="horizontal" width="full" align="top">
-      <Box paddingX="4" paddingY="2" width="3/4" variant="surface">
+      <Box paddingX="4" paddingY="2" width="3/4" variant="surface" rounded="md">
         <Box direction="horizontal" width="full" align="between-center">
           <Box>
             <Text variant="title" weight="bold">
@@ -101,17 +101,23 @@ export const DashboardTab = component$(() => {
           </Box>
           <Box direction="horizontal" gap="1">
             <Box align="center">
-              <Text variant="title" weight="medium">
+              <Text variant="title" weight="medium" theme="primary">
                 {MockDashboardTasks.filter((task) => task.status === 'success').length}
               </Text>
-              <Text theme="secondary">Done</Text>
+              <Text theme="primary">Done</Text>
             </Box>
             <Box align="center">
-              <Text variant="title" weight="medium">
+              <Text variant="title" weight="medium" theme="secondary">
                 {MockDashboardTasks.filter((task) => task.status === 'in progress').length}
               </Text>
               <Text theme="secondary">In Progress</Text>
             </Box>
+            <Box align="center">
+              <Text variant="title" weight="medium" theme="error">
+                {MockDashboardTasks.filter((task) => task.status === 'failed').length}
+              </Text>
+              <Text theme="error">Failed</Text>
+            </Box>
           </Box>
         </Box>
         <DashboardTable data={MockDashboardTasks} />
diff --git a/apps/web/src/routes/dashboard/components/dashboard-table.tsx b/apps/web/src/routes/dashboard/components/dashboard-table.tsx
index 43fd55f..5eeee02 100644
--- a/apps/web/src/routes/dashboard/components/dashboard-table.tsx
+++ b/apps/web/src/routes/dashboard/components/dashboard-table.tsx
@@ -1,8 +1,7 @@
-import { component$ } from '@builder.io/qwik';
+import { Component, component$ } from '@builder.io/qwik';
 import { createColumnHelper, getCoreRowModel, flexRender, useQwikTable } from '@tanstack/qwik-table';
 import { TaskMemberProps, TaskProps, TaskStatus } from './dashboard-tab';
 import { Box, Button } from '@producktivity/ui';
-import { LuArrowDownAZ, LuArrowUpAZ } from '@qwikest/icons/lucide';
 import { Link } from '@builder.io/qwik-city';
 
 const columnHelper = createColumnHelper<TaskProps>();
@@ -57,7 +56,7 @@ interface DashboardTableProps {
   data: TaskProps[];
 }
 
-export const DashboardTable = component$(({ data }: DashboardTableProps) => {
+export const DashboardTable: Component<DashboardTableProps> = component$(({ data }: DashboardTableProps) => {
   const table = useQwikTable({
     columns,
     data: data,
@@ -73,13 +72,7 @@ export const DashboardTable = component$(({ data }: DashboardTableProps) => {
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
                 <th key={header.id} scope="col">
-                  <Box align="between-start">
-                    {flexRender(header.column.columnDef.header, header.getContext())}
-                    {{
-                      asc: <LuArrowUpAZ />,
-                      desc: <LuArrowDownAZ />,
-                    }[header.column.getIsSorted() as string] ?? null}
-                  </Box>
+                  <Box align="between-start">{flexRender(header.column.columnDef.header, header.getContext())}</Box>
                 </th>
               ))}
             </tr>

From 54082731902d49ab3bb8019ed549bcfab6b00303 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Thu, 28 Mar 2024 19:05:35 +0700
Subject: [PATCH 38/40] feat: fix colors

---
 .../routes/dashboard/components/dashboard-table.tsx  |  2 +-
 libs/web/landing/footer/src/lib/footer.tsx           |  8 ++++----
 libs/web/shared/ui/src/lib/button/button.tsx         | 12 ++++++------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/routes/dashboard/components/dashboard-table.tsx b/apps/web/src/routes/dashboard/components/dashboard-table.tsx
index 5eeee02..baba62a 100644
--- a/apps/web/src/routes/dashboard/components/dashboard-table.tsx
+++ b/apps/web/src/routes/dashboard/components/dashboard-table.tsx
@@ -8,7 +8,7 @@ const columnHelper = createColumnHelper<TaskProps>();
 
 function getTaskDetail(row: string) {
   return (
-    <Link style={{ color: '#3040c9', textDecoration: 'underline' }} href={`/dashboard/project/${row.split(' ').join('-').toLowerCase()}`}>
+    <Link style={{ textDecoration: 'underline' }} href={`/dashboard/project/${row.split(' ').join('-').toLowerCase()}`}>
       {row}
     </Link>
   );
diff --git a/libs/web/landing/footer/src/lib/footer.tsx b/libs/web/landing/footer/src/lib/footer.tsx
index 6716669..15f20d6 100644
--- a/libs/web/landing/footer/src/lib/footer.tsx
+++ b/libs/web/landing/footer/src/lib/footer.tsx
@@ -11,11 +11,11 @@ export default component$(() => {
     <Box width="full" align="between-center" direction="horizontal" paddingX="2" paddingY="0.5">
       <Text theme="secondary">&copy; 2023-2024 Produckians</Text>
       <Box direction="horizontal" gap="2">
-        <Button onClick$={toDarkMode} variant="tertiary" shape="rounded">
-          Dark
+        <Button onClick$={toDarkMode} variant="tertiary">
+          <Text theme="tertiary">Dark</Text>
         </Button>
-        <Button onClick$={toLightMode} variant="tertiary" shape="rounded">
-          Light
+        <Button onClick$={toLightMode} variant="tertiary">
+          <Text theme="tertiary">Light</Text>
         </Button>
       </Box>
     </Box>
diff --git a/libs/web/shared/ui/src/lib/button/button.tsx b/libs/web/shared/ui/src/lib/button/button.tsx
index 8e500c8..488f269 100644
--- a/libs/web/shared/ui/src/lib/button/button.tsx
+++ b/libs/web/shared/ui/src/lib/button/button.tsx
@@ -26,9 +26,9 @@ export const Button = component$<ButtonProps>((props) => {
     'badge-primary': 'bg-primary/[.15] px-2 py-1 border border-primary',
     'badge-secondary': 'bg-secondary/[.15] px-2 py-1 border border-secondary',
     'badge-tertiary': 'bg-tertiary/[.15] px-2 py-1 border border-tertiary',
-    'badge-success': 'bg-green-200/[0.4] p-0.5',
-    'badge-error': 'bg-red-200/[0.4] p-0.5',
-    'badge-info': 'bg-blue-200/[0.4] p-0.5',
+    'badge-success': 'bg-green-200/[0.4] dark:bg-green-500',
+    'badge-error': 'bg-error/[0.2]',
+    'badge-info': 'bg-blue-200/[0.4] dark:bg-blue-500',
   } satisfies { [K in ButtonVariant | 'disabled']: string };
 
   const LabelVariants = {
@@ -42,9 +42,9 @@ export const Button = component$<ButtonProps>((props) => {
     'badge-primary': 'text-primary font-medium text-sm',
     'badge-secondary': 'text-secondary font-medium text-sm',
     'badge-tertiary': 'text-tertiary font-medium text-sm',
-    'badge-success': 'text-green-600 font-medium text-sm',
-    'badge-error': 'text-red-600 font-medium text-sm',
-    'badge-info': 'text-blue-600 font-medium text-sm',
+    'badge-success': 'text-green-600 dark:text-green-200 font-medium text-sm',
+    'badge-error': 'text-error font-medium text-sm',
+    'badge-info': 'text-blue-600 dark:text-blue-200 font-medium text-sm',
   } satisfies { [K in ButtonVariant | 'disabled']: string };
 
   const StateLayerVariants = {

From 81ce463cbf486d11d068bd5c60614a275b5823db Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Thu, 28 Mar 2024 19:06:45 +0700
Subject: [PATCH 39/40] bug: revert workflows

---
 .github/workflows/main.yml | 22 +---------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 9455ac2..a29d0e4 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -56,24 +56,4 @@ jobs:
         run: pnpm nx affected -t build
 
       - name: Run deploy task
-        run: |
-          pnpm nx affected -t deploy > ./scripts/deployment.log
-          chmod +x ./scripts/deploy_link.sh
-          ./scripts/deploy_link.sh
-
-      - name: Get deployment link
-        id: deploy_link
-        run: echo "dep_link=$(cat deployment_link.txt)" >> "$GITHUB_OUTPUT"
-
-      - name: Publish deployment link
-        uses: actions/github-script@v4
-        with:
-          # script: |
-          #   const issueNumber = '${{ github.event.number }}'
-          #   github.issues.createComment({
-          #     owner: context.repo.owner,
-          #     repo: context.repo.repo,
-          #     issue_number: issueNumber,
-          #     body: `### QA Deployment
-          #     result: ${{ steps.deploy_link.outputs.dep_link }}`
-          #   });
+        run: pnpm nx affected -t deploy

From ebf4e7c68e0b43ec628e2e72a33222896997bba0 Mon Sep 17 00:00:00 2001
From: santhitak <santhita.sk@gmail.com>
Date: Thu, 28 Mar 2024 19:10:27 +0700
Subject: [PATCH 40/40] fix: remove credit unused props

---
 apps/web/src/routes/dashboard/components/credit.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/routes/dashboard/components/credit.tsx b/apps/web/src/routes/dashboard/components/credit.tsx
index 7a304bc..47506b9 100644
--- a/apps/web/src/routes/dashboard/components/credit.tsx
+++ b/apps/web/src/routes/dashboard/components/credit.tsx
@@ -1,4 +1,4 @@
-import { Component, component$ } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 import { Box, Button, Text } from '@producktivity/ui';
 import { LuCar } from '@qwikest/icons/lucide';
 
@@ -11,7 +11,7 @@ export interface CreditProps {
   totalCredit: number;
   latestUpdate: Date;
 }
-export const Credit: Component<CreditProps> = component$(() => {
+export const Credit = component$(() => {
   return (
     <Box width="full" variant="surface" rounded="md">
       <Box width="full" padding="2" gap="2" align="between-center">