finish timeline
This commit is contained in:
@@ -1,12 +1,27 @@
|
||||
import type { Route } from './+types/route'
|
||||
|
||||
import { EllipsisIcon } from 'lucide-react'
|
||||
import {
|
||||
BanIcon,
|
||||
CalendarIcon,
|
||||
EllipsisIcon,
|
||||
PlusIcon,
|
||||
UserIcon
|
||||
} from 'lucide-react'
|
||||
import { DateTime } from 'luxon'
|
||||
import { Fragment, Suspense } from 'react'
|
||||
import { Await } from 'react-router'
|
||||
|
||||
import { Skeleton } from '@repo/ui/components/skeleton'
|
||||
import { request as req } from '@repo/util/request'
|
||||
import { Button } from '@repo/ui/components/ui/button'
|
||||
import {
|
||||
Empty,
|
||||
EmptyContent,
|
||||
EmptyDescription,
|
||||
EmptyHeader,
|
||||
EmptyMedia,
|
||||
EmptyTitle
|
||||
} from '@repo/ui/components/ui/empty'
|
||||
import { Skeleton } from '@repo/ui/components/skeleton'
|
||||
import { Card, CardContent } from '@repo/ui/components/ui/card'
|
||||
import {
|
||||
Item,
|
||||
@@ -17,7 +32,7 @@ import {
|
||||
ItemSeparator,
|
||||
ItemTitle
|
||||
} from '@repo/ui/components/ui/item'
|
||||
import { Button } from '@repo/ui/components/ui/button'
|
||||
import { Link } from 'react-router'
|
||||
|
||||
export function meta({}: Route.MetaArgs) {
|
||||
return [{ title: 'Matrículas agendadas' }]
|
||||
@@ -52,34 +67,85 @@ export default function Route({
|
||||
|
||||
<Await resolve={scheduled}>
|
||||
{({ items }) => {
|
||||
const scheduled = grouping(items)
|
||||
|
||||
if (scheduled.length === 0) {
|
||||
return (
|
||||
<Empty className="border border-dashed">
|
||||
<EmptyHeader>
|
||||
<EmptyMedia variant="icon">
|
||||
<BanIcon />
|
||||
</EmptyMedia>
|
||||
<EmptyTitle>Nenhum agendamento ainda</EmptyTitle>
|
||||
<EmptyDescription>
|
||||
Agende a matrícula dos seus colaboradores de forma rápida e
|
||||
organizada.
|
||||
</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
<EmptyContent>
|
||||
<Button asChild>
|
||||
<Link to="../enrollments/add">
|
||||
<PlusIcon /> Agendar
|
||||
</Link>
|
||||
</Button>
|
||||
</EmptyContent>
|
||||
</Empty>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-5 lg:max-w-4xl mx-auto">
|
||||
{grouping(items).map(([run_at, items]) => (
|
||||
<div className="grid grid-cols-5 gap-2.5">
|
||||
{scheduled.map(([run_at, items], index) => (
|
||||
<div className="grid lg:grid-cols-5 gap-2.5" key={index}>
|
||||
<div>
|
||||
{DateTime.fromISO(run_at)
|
||||
.setLocale('pt-BR')
|
||||
.toFormat('cccc, dd LLL yyyy')}
|
||||
</div>
|
||||
|
||||
<Card className="col-span-4">
|
||||
<CardContent>
|
||||
<ItemGroup>
|
||||
{items.map(({ user, course, scheduled_at }, index) => (
|
||||
<Fragment key={index}>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>{course.name}</ItemTitle>
|
||||
<ItemDescription>{user.name}</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
{items.map(
|
||||
(
|
||||
{ user, course, created_by, scheduled_at },
|
||||
index
|
||||
) => (
|
||||
<Fragment key={index}>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>{course.name}</ItemTitle>
|
||||
<ItemDescription>{user.name}</ItemDescription>
|
||||
{/*<ItemDescription>*/}
|
||||
<div className="mt-1">
|
||||
<ul
|
||||
className="lg:flex gap-2.5 text-muted-foreground text-sm
|
||||
*:flex *:gap-1 *:items-center"
|
||||
>
|
||||
<li>
|
||||
<CalendarIcon className="size-3.5" />{' '}
|
||||
{datetime.format(
|
||||
new Date(scheduled_at)
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
<UserIcon className="size-3.5" />{' '}
|
||||
{created_by.name}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ItemContent>
|
||||
{/*<ItemActions>
|
||||
<Button variant="ghost" size="icon-sm">
|
||||
<EllipsisIcon />
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
{index !== items.length - 1 && <ItemSeparator />}
|
||||
</Fragment>
|
||||
))}
|
||||
</ItemActions>*/}
|
||||
</Item>
|
||||
|
||||
{index !== items.length - 1 && <ItemSeparator />}
|
||||
</Fragment>
|
||||
)
|
||||
)}
|
||||
</ItemGroup>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user