-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
commit b4ade32 Author: Santhita Krajangwongpaisan <74261236+santhitak@users.noreply.github.com> Date: Thu Mar 28 19:14:29 2024 +0700 feat: Implement dashboard tab section (#52) * feat: margin props * feat: text variant small * feat: badge button * feat: add margin prop to Box * feat: add margin prop to Box * feat: add logo to brand name * feat: plan badge * feat: dashboard tab * feat: add current plan * feat: test github workflow * feat: test github workflow * fix: pipeline * fix: remove context declaration * feat: make use of deploy_link.sh * fix: remove github declaration * fix: shell script path * fix: have deployment log out of workflow folder * fix: pipeline * fix: pipeline * fix: have deployment log out of workflow folder * fix: remove github declaration * fix: change typo link to dep_link * fix: change replace to update github outputs * fix: change typo link to dep_link * fix: change deplink to link * fix: link value * feat: use deploymentlink.txt * feat: test txt path * test: test txt path * feat: temp remove comment * build(deps): tanstack table * feat: status badge * feat: table * fix: table layout * feat: project routes * feat: main table dashboard * feat: credit box * feat: fix colors * bug: revert workflows * fix: remove credit unused props commit aeefbaa Author: Santhita Krajangwongpaisan <74261236+santhitak@users.noreply.github.com> Date: Wed Mar 27 00:06:25 2024 +0700 feat: Initialize dashboard page (#51) * feat: add nav and footer to layout * feat: init tabs * feat: add components to dashboard page commit f2d265e Author: Santhita Krajangwongpaisan <74261236+santhitak@users.noreply.github.com> Date: Mon Mar 25 18:16:46 2024 +0700 feat!: UI refinement (#49) * feat: change action button size * feat: amend surface to be lighter * feat: redesign nav layout * feat: lottie files animation * feat: add size prop * feat: add box alignments * feat: amend color hue * feat: re-align layout * feat: quickest/icon * feat: refactor components * feat: feature section * feat: add icons to each features * feat: redesign cta * feat: fix hero layout * feat: edit color * Squashed commit of the following: commit dfed145 Author: Supachai Kheawjuy <supachai@spicyz.io> Date: Sun Mar 17 15:36:06 2024 +0700 feat: Hono implementation (#48) * feat: create user script * fix: set database name as singular * feat: change from nest to hono * feat: remove nest * feat: remove nest fastify commit e536b18 Author: Santhita Krajangwongpaisan <74261236+santhitak@users.noreply.github.com> Date: Sun Mar 17 15:16:26 2024 +0700 feat(api-service): Add user service (#46) * feat: create user script * fix: set database name as singular * build(dep): add class-transformer * feat: domain persistence and usecase * feat: remove profile image * feat: user usecases * feat: user port * feat: user di token * feat: remove T prefix * feat: remove constructure and getter/setter * feat: export functions * fix: add new User function * feat: add User service * chore: add service path * fix: resolve issues * refactor: domain and service --------- Co-authored-by: spicyzboss <supachai@spicyz.io> * build(deps): update pnpm-lock * fix: remove unusable variant * feat: cta section * feat: text-inherit * feat: add theme color for hero quote * feat: add route * feat: edit sign-in and sign-up page * feat: change content color for features
- Loading branch information
Showing
21 changed files
with
745 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }); |
126 changes: 123 additions & 3 deletions
126
apps/web/src/routes/dashboard/components/dashboard-tab.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }); |
95 changes: 95 additions & 0 deletions
95
apps/web/src/routes/dashboard/components/dashboard-table.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.