Bulk commit: Stand ende 22.01.
This commit is contained in:
@@ -1,9 +1,240 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { format } from 'date-fns'
|
||||
import {
|
||||
BotIcon,
|
||||
CircleUserIcon,
|
||||
ClipboardCheckIcon,
|
||||
ProjectorIcon,
|
||||
ReceiptEuroIcon,
|
||||
SpeakerIcon,
|
||||
} from 'lucide-react'
|
||||
import { ReactNode } from 'react'
|
||||
import { string } from 'zod'
|
||||
|
||||
export const Route = createFileRoute('/_sidebar/projects/view/$id/audit')({
|
||||
component: RouteComponent,
|
||||
beforeLoad: () => {
|
||||
return {
|
||||
breadcrumb: 'Audit',
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/_sidebar/projects/view/$id/audit"!</div>
|
||||
enum TimelineAction {
|
||||
General,
|
||||
Equipment,
|
||||
Personal,
|
||||
Finance,
|
||||
Todo,
|
||||
}
|
||||
|
||||
enum TimelineActionType {
|
||||
Good,
|
||||
Bad,
|
||||
Neutral,
|
||||
}
|
||||
|
||||
type TimelineEntry = {
|
||||
title: string
|
||||
description: string
|
||||
date: Date
|
||||
action: TimelineAction
|
||||
actionType: TimelineActionType
|
||||
}
|
||||
|
||||
const timelineEntries: Array<TimelineEntry> = [
|
||||
{
|
||||
title: 'Payed #5',
|
||||
description: 'Client payed bill number 5.',
|
||||
action: TimelineAction.Finance,
|
||||
date: new Date(2025, 12, 5, 10, 54, 23),
|
||||
actionType: TimelineActionType.Good,
|
||||
},
|
||||
{
|
||||
title: 'Confirmed #1',
|
||||
description: 'Client confirmed project 1.',
|
||||
action: TimelineAction.General,
|
||||
date: new Date(2025, 12, 4, 11),
|
||||
actionType: TimelineActionType.Good,
|
||||
},
|
||||
{
|
||||
title: 'New Task',
|
||||
description: 'Konstantin Hintermayer added task 1.',
|
||||
action: TimelineAction.Todo,
|
||||
date: new Date(),
|
||||
actionType: TimelineActionType.Neutral,
|
||||
},
|
||||
{
|
||||
title: 'Payed #5',
|
||||
description: 'Client payed bill number 5.',
|
||||
action: TimelineAction.Finance,
|
||||
date: new Date(2025, 12, 5, 10, 54, 23),
|
||||
actionType: TimelineActionType.Good,
|
||||
},
|
||||
{
|
||||
title: 'Confirmed #1',
|
||||
description: 'Client confirmed project 1.',
|
||||
action: TimelineAction.General,
|
||||
date: new Date(2025, 12, 4, 11),
|
||||
actionType: TimelineActionType.Good,
|
||||
},
|
||||
{
|
||||
title: 'New Task',
|
||||
description: 'Konstantin Hintermayer added task 1.',
|
||||
action: TimelineAction.Todo,
|
||||
date: new Date(),
|
||||
actionType: TimelineActionType.Neutral,
|
||||
},
|
||||
{
|
||||
title: 'Payed #5',
|
||||
description: 'Client payed bill number 5.',
|
||||
action: TimelineAction.Finance,
|
||||
date: new Date(2025, 12, 5, 10, 54, 23),
|
||||
actionType: TimelineActionType.Good,
|
||||
},
|
||||
{
|
||||
title: 'Confirmed #1',
|
||||
description: 'Client confirmed project 1.',
|
||||
action: TimelineAction.General,
|
||||
date: new Date(2025, 12, 4, 11),
|
||||
actionType: TimelineActionType.Good,
|
||||
},
|
||||
{
|
||||
title: 'New Task',
|
||||
description: 'Konstantin Hintermayer added task 1.',
|
||||
action: TimelineAction.Todo,
|
||||
date: new Date(),
|
||||
actionType: TimelineActionType.Neutral,
|
||||
},
|
||||
{
|
||||
title: 'Payed #5',
|
||||
description: 'Client payed bill number 5.',
|
||||
action: TimelineAction.Finance,
|
||||
date: new Date(2025, 12, 5, 10, 54, 23),
|
||||
actionType: TimelineActionType.Good,
|
||||
},
|
||||
{
|
||||
title: 'Confirmed #1',
|
||||
description: 'Client confirmed project 1.',
|
||||
action: TimelineAction.General,
|
||||
date: new Date(2025, 12, 4, 11),
|
||||
actionType: TimelineActionType.Good,
|
||||
},
|
||||
{
|
||||
title: 'New Task',
|
||||
description: 'Konstantin Hintermayer added task 1.',
|
||||
action: TimelineAction.Todo,
|
||||
date: new Date(),
|
||||
actionType: TimelineActionType.Neutral,
|
||||
},
|
||||
{
|
||||
title: 'Payed #5',
|
||||
description: 'Client payed bill number 5.',
|
||||
action: TimelineAction.Finance,
|
||||
date: new Date(2025, 12, 5, 10, 54, 23),
|
||||
actionType: TimelineActionType.Good,
|
||||
},
|
||||
{
|
||||
title: 'Confirmed #1',
|
||||
description: 'Client confirmed project 1.',
|
||||
action: TimelineAction.General,
|
||||
date: new Date(2025, 12, 4, 11),
|
||||
actionType: TimelineActionType.Good,
|
||||
},
|
||||
{
|
||||
title: 'New Task',
|
||||
description: 'Konstantin Hintermayer added task 1.',
|
||||
action: TimelineAction.Todo,
|
||||
date: new Date(),
|
||||
actionType: TimelineActionType.Neutral,
|
||||
},
|
||||
{
|
||||
title: 'Payed #5',
|
||||
description: 'Client payed bill number 5.',
|
||||
action: TimelineAction.Finance,
|
||||
date: new Date(2025, 12, 5, 10, 54, 23),
|
||||
actionType: TimelineActionType.Good,
|
||||
},
|
||||
{
|
||||
title: 'Confirmed #1',
|
||||
description: 'Client confirmed project 1.',
|
||||
action: TimelineAction.General,
|
||||
date: new Date(2025, 12, 4, 11),
|
||||
actionType: TimelineActionType.Good,
|
||||
},
|
||||
{
|
||||
title: 'New Task',
|
||||
description: 'Konstantin Hintermayer added task 1.',
|
||||
action: TimelineAction.Todo,
|
||||
date: new Date(),
|
||||
actionType: TimelineActionType.Neutral,
|
||||
},
|
||||
]
|
||||
|
||||
function GetIconFromAction(ta: TimelineAction) {
|
||||
switch (ta) {
|
||||
case TimelineAction.Equipment:
|
||||
return <SpeakerIcon className="h-6" />
|
||||
case TimelineAction.Finance:
|
||||
return <ReceiptEuroIcon className="h-6" />
|
||||
case TimelineAction.General:
|
||||
return <BotIcon className="h-6" />
|
||||
case TimelineAction.Personal:
|
||||
return <CircleUserIcon className="h-6" />
|
||||
case TimelineAction.Todo:
|
||||
return <ClipboardCheckIcon className="h-6" />
|
||||
default:
|
||||
return <p>Icon not found</p>
|
||||
}
|
||||
}
|
||||
|
||||
function GetColorFromActionType(at: TimelineActionType) {
|
||||
switch (at) {
|
||||
case TimelineActionType.Bad:
|
||||
return 'bg-red-500'
|
||||
case TimelineActionType.Good:
|
||||
return 'bg-green-500'
|
||||
case TimelineActionType.Neutral:
|
||||
return 'bg-muted'
|
||||
}
|
||||
}
|
||||
|
||||
function Timeline({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="relative">
|
||||
{children}
|
||||
<div className="h-full absolute top-0 left-timeline-line w-[2px] bg-muted"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TimelineEntryComponent({ te }: { te: TimelineEntry }) {
|
||||
return (
|
||||
<div className="flex m-2 gap-3">
|
||||
<div
|
||||
className={cn(
|
||||
`h-8 aspect-square flex items-center justify-center rounded-full border-2 border-background z-10`,
|
||||
GetColorFromActionType(te.actionType),
|
||||
)}
|
||||
>
|
||||
{GetIconFromAction(te.action)}
|
||||
</div>
|
||||
<div>
|
||||
{format(te.date, 'hh:mm dd.MM.yyyy')} {te.title}
|
||||
<br />
|
||||
{te.description}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<Timeline>
|
||||
{timelineEntries.map((te, i) => {
|
||||
return <TimelineEntryComponent te={te} key={i}></TimelineEntryComponent>
|
||||
})}
|
||||
</Timeline>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user