diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx index af9fc47..7c91dc3 100644 --- a/ui/src/components/Sidebar.tsx +++ b/ui/src/components/Sidebar.tsx @@ -2,7 +2,8 @@ import clsx from 'clsx'; import {ComponentProps} from 'react'; import { - ArrowLeftStartOnRectangleIcon, // ArrowTrendingUpIcon, + ArrowLeftStartOnRectangleIcon, + ArrowTrendingUpIcon, PlusIcon, UserIcon, UsersIcon, @@ -81,17 +82,17 @@ export default function Sidebar(props: ComponentProps<'div'>) {
Friends
- {/**/} - {/* */} - {/*
Activity
*/} - {/**/} + + +
Activity
+
diff --git a/ui/src/components/common/Button.tsx b/ui/src/components/common/Button.tsx index 2d141e9..07c16fc 100644 --- a/ui/src/components/common/Button.tsx +++ b/ui/src/components/common/Button.tsx @@ -89,6 +89,17 @@ const button = tv({ // Base 'border-red-400 data-[hovered]:border-red-500 data-[hovered]:bg-red-50', + // Icon + '[--btn-icon:theme(colors.red.500)] data-[hovered]:[--btn-icon:theme(colors.red.600)]', + ], + }, + { + color: 'danger', + variant: 'plain', + class: [ + // Base + 'data-[hovered]:bg-red-50 data-[pressed]:bg-red-100', + // Icon '[--btn-icon:theme(colors.red.500)] data-[hovered]:[--btn-icon:theme(colors.red.600)]', ], diff --git a/ui/src/routeTree.gen.ts b/ui/src/routeTree.gen.ts index bc7c87e..55192fe 100644 --- a/ui/src/routeTree.gen.ts +++ b/ui/src/routeTree.gen.ts @@ -17,7 +17,7 @@ import { Route as AuthLoginImport } from './routes/auth/login' import { Route as AuthForgetPassImport } from './routes/auth/forget-pass' import { Route as DashboardGroupsImport } from './routes/_dashboard/groups' import { Route as DashboardFriendsImport } from './routes/_dashboard/friends' -import { Route as DashboardActivityIndexImport } from './routes/_dashboard/activity/index' +import { Route as DashboardActivityImport } from './routes/_dashboard/activity' import { Route as DashboardProfileMeImport } from './routes/_dashboard/profile/me' import { Route as DashboardGroupsGroupImport } from './routes/_dashboard/groups/$group' import { Route as DashboardFriendsFriendImport } from './routes/_dashboard/friends/$friend' @@ -55,8 +55,8 @@ const DashboardFriendsRoute = DashboardFriendsImport.update({ getParentRoute: () => DashboardRoute, } as any) -const DashboardActivityIndexRoute = DashboardActivityIndexImport.update({ - path: '/activity/', +const DashboardActivityRoute = DashboardActivityImport.update({ + path: '/activity', getParentRoute: () => DashboardRoute, } as any) @@ -76,8 +76,8 @@ const DashboardFriendsFriendRoute = DashboardFriendsFriendImport.update({ } as any) const DashboardActivityActivityRoute = DashboardActivityActivityImport.update({ - path: '/activity/$activity', - getParentRoute: () => DashboardRoute, + path: '/$activity', + getParentRoute: () => DashboardActivityRoute, } as any) // Populate the FileRoutesByPath interface @@ -92,6 +92,10 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof DashboardImport parentRoute: typeof rootRoute } + '/_dashboard/activity': { + preLoaderRoute: typeof DashboardActivityImport + parentRoute: typeof DashboardImport + } '/_dashboard/friends': { preLoaderRoute: typeof DashboardFriendsImport parentRoute: typeof DashboardImport @@ -110,7 +114,7 @@ declare module '@tanstack/react-router' { } '/_dashboard/activity/$activity': { preLoaderRoute: typeof DashboardActivityActivityImport - parentRoute: typeof DashboardImport + parentRoute: typeof DashboardActivityImport } '/_dashboard/friends/$friend': { preLoaderRoute: typeof DashboardFriendsFriendImport @@ -124,10 +128,6 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof DashboardProfileMeImport parentRoute: typeof DashboardImport } - '/_dashboard/activity/': { - preLoaderRoute: typeof DashboardActivityIndexImport - parentRoute: typeof DashboardImport - } } } @@ -136,11 +136,10 @@ declare module '@tanstack/react-router' { export const routeTree = rootRoute.addChildren([ IndexRoute, DashboardRoute.addChildren([ + DashboardActivityRoute.addChildren([DashboardActivityActivityRoute]), DashboardFriendsRoute.addChildren([DashboardFriendsFriendRoute]), DashboardGroupsRoute.addChildren([DashboardGroupsGroupRoute]), - DashboardActivityActivityRoute, DashboardProfileMeRoute, - DashboardActivityIndexRoute, ]), AuthForgetPassRoute, AuthLoginRoute, diff --git a/ui/src/routes/_dashboard/activity.tsx b/ui/src/routes/_dashboard/activity.tsx new file mode 100644 index 0000000..b9e198d --- /dev/null +++ b/ui/src/routes/_dashboard/activity.tsx @@ -0,0 +1,178 @@ +import clsx from 'clsx'; +import {DialogTrigger} from 'react-aria-components'; + +import {MagnifyingGlassIcon} from '@heroicons/react/24/outline'; +import {Outlet, ScrollRestoration, createFileRoute, useMatchRoute} from '@tanstack/react-router'; +import groupBy from 'just-group-by'; + +import {Button} from '@/components/common'; +import ActivityListItem from '@/routes/_dashboard/activity/-components/ActivityListItem.tsx'; + +export const Route = createFileRoute('/_dashboard/activity')({ + component: ActivityLayout, +}); + +function ActivityLayout() { + const matchRoute = useMatchRoute(); + const isRootLayout = matchRoute({to: '/activity'}); + + // const {data} = useApiQuery(ApiRoutes.ACTIVITY_LIST); + const data = { + results: [ + { + uid: 'activity-1', + urn: 'urn:activity:1', + user: { + uid: 'user-1', + urn: 'urn:user:1', + fullName: 'John Doe', + isActive: true, + }, + group: { + uid: 'group-1', + urn: 'urn:group:1', + name: 'Apartment Buddies', + }, + template: 'Dinner', + description: 'Dinner at Pizza Palace', + target: { + uid: 'target-1', + urn: 'urn:target:1', + value: '35.75', + }, + createdAt: '2024-03-23T18:00:00Z', + }, + { + uid: 'activity-2', + urn: 'urn:activity:2', + user: { + uid: 'user-2', + urn: 'urn:user:2', + fullName: 'Jane Smith', + isActive: true, + }, + group: { + uid: 'group-2', + urn: 'urn:group:2', + name: 'Weekend Getaway', + members: ['user-1', 'user-2', 'user-3'], + }, + template: 'Groceries', + description: 'Shared groceries for the trip', + target: { + uid: 'target-2', + urn: 'urn:target:2', + value: '82.40', + }, + createdAt: '2024-03-22T15:30:00Z', + }, + { + uid: 'activity-3', + urn: 'urn:activity:3', + user: { + uid: 'user-1', + urn: 'urn:user:1', + fullName: 'John Doe', + isActive: true, + }, + group: { + uid: 'group-1', + urn: 'urn:group:1', + name: 'Apartment Buddies', + }, + template: 'Utilities', + description: 'Electricity bill for March', + target: { + uid: 'target-3', + urn: 'urn:target:3', + value: '120.00', + }, + createdAt: '2024-03-20T10:00:00Z', + }, + ], + }; + const formatDate = (dateString: string) => { + const [month, year] = dateString.split('/'); + + const months = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', + ]; + const monthName = months[parseInt(month, 10) - 1]; + + return `${monthName} ${year}`; + }; + + return ( + <> +