feat: Implement dashboard tab section

apps/web/src/routes/dashboard/components/credit.tsx

@@ -0,0 +1,42 @@
+import { component$ } from '@builder.io/qwik';
+import { Box, Button, Text } from '@producktivity/ui';
+import { LuCar } from '@qwikest/icons/lucide';
+
+const MockCredit: CreditProps = {
+  totalCredit: 20,
+  latestUpdate: new Date('03-14-2024'),
+};
+
+export interface CreditProps {
+  totalCredit: number;
+  latestUpdate: Date;
+}
+export const Credit = component$(() => {
+  return (
+    <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>
+  );
+});

apps/web/src/routes/dashboard/components/dashboard-tab.tsx

@@ -1,10 +1,130 @@
 import { component$ } from '@builder.io/qwik';
-import { Box } from '@producktivity/ui';
+import { Box, Text } from '@producktivity/ui';
+import { Credit } from './credit';
+import { DashboardTable } from './dashboard-table';
+
+export interface TaskMemberProps {
+  name: string;
+}
+
+export type TaskStatus = 'in progress' | 'failed' | 'success';
+
+export interface TaskProps {
+  id: number;
+  title: string;
+  status: TaskStatus;
+  member: TaskMemberProps[];
+  createdWhen: Date;
+  finishedWhen?: Date;
+}
+
+const MockDashboardTasks: TaskProps[] = [
+  {
+    id: 0,
+    title: 'KMITL Volunteering',
+    status: 'failed',
+    createdWhen: new Date('02-11-2024'),
+    member: [
+      {
+        name: 'Boonpongkrong Narongrich',
+      },
+    ],
+    finishedWhen: new Date('02-11-2024'),
+  },
+  {
+    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('03-21-2024'),
+    member: [
+      {
+        name: 'Rafah Pipatpong',
+      },
+      {
+        name: 'Sainan Anannarongdech',
+      },
+      {
+        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',
+      },
+    ],
+  },
+];
 
 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" rounded="md">
+        <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" theme="primary">
+                {MockDashboardTasks.filter((task) => task.status === 'success').length}
+              </Text>
+              <Text theme="primary">Done</Text>
+            </Box>
+            <Box align="center">
+              <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} />
+      </Box>
+      <Box paddingX="4" width="quarter">
+        <Credit />
+      </Box>
     </Box>
   );
 });

apps/web/src/routes/dashboard/components/dashboard-table.tsx

@@ -0,0 +1,95 @@
+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 { Link } from '@builder.io/qwik-city';
+
+const columnHelper = createColumnHelper<TaskProps>();
+
+function getTaskDetail(row: string) {
+  return (
+    <Link style={{ textDecoration: 'underline' }} href={`/dashboard/project/${row.split(' ').join('-').toLowerCase()}`}>
+      {row}
+    </Link>
+  );
+}
+
+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) => getTaskDetail(info.getValue()),
+  }),
+  columnHelper.accessor('member', {
+    header: () => 'Member',
+    cell: (info) => getTaskMember(info.getValue()),
+    sortingFn: 'alphanumeric',
+  }),
+  columnHelper.accessor('status', {
+    header: () => 'Status',
+    cell: (info) => getTaskStatus(info.getValue()),
+  }),
+  columnHelper.accessor('createdWhen', {
+    header: () => 'Task Created',
+    cell: (info) => info.getValue().toLocaleString(),
+    sortingFn: 'datetime',
+  }),
+  columnHelper.accessor('finishedWhen', {
+    header: () => 'Task Finished',
+    cell: (info) => (info.getValue() ? info.getValue()?.toLocaleString() : 'not finished'),
+    sortingFn: 'datetime',
+  }),
+];
+
+interface DashboardTableProps {
+  data: TaskProps[];
+}
+
+export const DashboardTable: Component<DashboardTableProps> = component$(({ data }: DashboardTableProps) => {
+  const table = useQwikTable({
+    columns,
+    data: data,
+    getCoreRowModel: getCoreRowModel(),
+    enableSorting: true,
+  });
+
+  return (
+    <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) => (
+            <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())}</Box>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {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>
+  );
+});

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>
+  );
+});

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 />}

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' });

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' });

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>