Skip to content

Commit bf09e86

Browse files
Yasir761Yasir761
committed
fix panel library version compatibility issues
1 parent e91e130 commit bf09e86

11 files changed

Lines changed: 1090 additions & 163 deletions

File tree

‎web/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,14 @@
2727
"framer-motion": "^12.33.0",
2828
"geist": "^1.7.0",
2929
"lottie-react": "^2.4.1",
30-
"lucide-react": "^0.563.0",
30+
"lucide-react": "^1.16.0",
3131
"next": "16.1.6",
3232
"next-themes": "^0.4.6",
3333
"radix-ui": "^1.4.3",
3434
"react": "19.2.3",
3535
"react-dom": "19.2.3",
3636
"react-hotkeys-hook": "^5.3.2",
37-
"react-resizable-panels": "^4.11.1",
37+
"react-resizable-panels": "^2.1.7",
3838
"react-syntax-highlighter": "^16.1.1",
3939
"reactflow": "^11.11.4",
4040
"recharts": "^3.7.0",

‎web/src/app/(dashboard)/events/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { redirect } from "next/navigation"
44

55
import { getCurrentUser } from "@/lib/auth"
66

7-
import { EventWorkspace } from "@/components/events/event-workspace"
7+
import { EventsWorkspaceClient } from "@/components/events/events-workspace-client"
88

99
import type { Event } from "@/types/event"
1010

@@ -40,8 +40,8 @@ export default async function EventsPage() {
4040
const events = await getEvents()
4141

4242
return (
43-
<EventWorkspace
44-
events={events}
45-
/>
43+
<EventsWorkspaceClient
44+
initialEvents={events}
45+
/>
4646
)
4747
}

‎web/src/app/stores/events-store.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { create } from "zustand"
2+
3+
import type { Event } from "@/types/event"
4+
5+
type EventsStore = {
6+
events: Event[]
7+
selectedEvent: Event | null
8+
paused: boolean
9+
connected: boolean
10+
11+
setEvents: (events: Event[]) => void
12+
13+
addEvent: (event: Event) => void
14+
15+
selectEvent: (event: Event) => void
16+
17+
togglePause: () => void
18+
19+
setConnected: (state: boolean) => void
20+
}
21+
22+
export const useEventsStore =
23+
create<EventsStore>((set) => ({
24+
events: [],
25+
selectedEvent: null,
26+
paused: false,
27+
connected: false,
28+
29+
setEvents: (events) =>
30+
set({
31+
events,
32+
}),
33+
34+
addEvent: (event) =>
35+
set((state) => {
36+
if (state.paused) {
37+
return state
38+
}
39+
40+
return {
41+
events: [
42+
event,
43+
...state.events,
44+
],
45+
}
46+
}),
47+
48+
selectEvent: (event) =>
49+
set({
50+
selectedEvent: event,
51+
}),
52+
53+
togglePause: () =>
54+
set((state) => ({
55+
paused: !state.paused,
56+
})),
57+
58+
setConnected: (
59+
connected
60+
) =>
61+
set({
62+
connected,
63+
}),
64+
}))

‎web/src/components/events/event-row.tsx‎

Lines changed: 193 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,113 @@
1+
// "use client"
2+
3+
// import { formatDistanceToNow } from "date-fns"
4+
5+
// import {
6+
// AlertTriangle,
7+
// CheckCircle2,
8+
// Clock3,
9+
// } from "lucide-react"
10+
11+
// import { cn } from "@/lib/utils"
12+
13+
// import type { Event } from "@/types/event"
14+
15+
// type Props = {
16+
// event: Event
17+
// selected?: boolean
18+
// onClick?: () => void
19+
// }
20+
21+
// function StatusIcon({
22+
// status,
23+
// }: {
24+
// status: string
25+
// }) {
26+
// if (status === "delivered") {
27+
// return (
28+
// <CheckCircle2 className="h-4 w-4 text-emerald-500" />
29+
// )
30+
// }
31+
32+
// if (status === "failed") {
33+
// return (
34+
// <AlertTriangle className="h-4 w-4 text-rose-500" />
35+
// )
36+
// }
37+
38+
// return (
39+
// <Clock3 className="h-4 w-4 text-amber-500" />
40+
// )
41+
// }
42+
43+
// export function EventRow({
44+
// event,
45+
// selected,
46+
// onClick,
47+
// }: Props) {
48+
// return (
49+
// <button
50+
// onClick={onClick}
51+
// className={cn(
52+
// "grid h-[58px] w-full grid-cols-[120px_1fr_120px_120px_140px] items-center border-b border-border px-4 text-left transition-all",
53+
// selected
54+
// ? "bg-accent"
55+
// : "hover:bg-accent/40"
56+
// )}
57+
// >
58+
// {/* Status */}
59+
// <div className="flex items-center gap-2">
60+
// <StatusIcon
61+
// status={event.status}
62+
// />
63+
64+
// <span className="text-xs capitalize text-muted-foreground">
65+
// {event.status}
66+
// </span>
67+
// </div>
68+
69+
// {/* Route */}
70+
// <div className="min-w-0">
71+
// <p className="truncate text-sm font-medium">
72+
// {event.route}
73+
// </p>
74+
75+
// <p className="truncate text-xs text-muted-foreground">
76+
// {event.event_type ||
77+
// "unknown.event"}
78+
// </p>
79+
// </div>
80+
81+
// {/* Provider */}
82+
// <div className="text-xs text-muted-foreground">
83+
// {event.provider ||
84+
// "generic"}
85+
// </div>
86+
87+
// {/* Attempts */}
88+
// <div className="text-xs text-muted-foreground">
89+
// {event.attempt_count ?? 0}
90+
// </div>
91+
92+
// {/* Time */}
93+
// <div className="text-xs text-muted-foreground">
94+
// {event.created_at
95+
// ? formatDistanceToNow(
96+
// new Date(
97+
// event.created_at
98+
// ),
99+
// {
100+
// addSuffix: true,
101+
// }
102+
// )
103+
// : "-"}
104+
// </div>
105+
// </button>
106+
// )
107+
// }
108+
109+
110+
1111
"use client"
2112

3113
import { formatDistanceToNow } from "date-fns"
@@ -6,6 +116,8 @@ import {
6116
AlertTriangle,
7117
CheckCircle2,
8118
Clock3,
119+
RotateCcw,
120+
Zap,
9121
} from "lucide-react"
10122

11123
import { cn } from "@/lib/utils"
@@ -23,20 +135,62 @@ function StatusIcon({
23135
}: {
24136
status: string
25137
}) {
26-
if (status === "delivered") {
138+
if (
139+
status === "delivered" ||
140+
status === "success"
141+
) {
27142
return (
28-
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
143+
<div className="relative">
144+
<div className="h-2.5 w-2.5 rounded-full bg-emerald-500" />
145+
</div>
29146
)
30147
}
31148

32149
if (status === "failed") {
33150
return (
34-
<AlertTriangle className="h-4 w-4 text-rose-500" />
151+
<div className="h-2.5 w-2.5 rounded-full bg-rose-500" />
35152
)
36153
}
37154

38155
return (
39-
<Clock3 className="h-4 w-4 text-amber-500" />
156+
<div className="h-2.5 w-2.5 animate-pulse rounded-full bg-amber-500" />
157+
)
158+
}
159+
160+
function StatusBadge({
161+
status,
162+
}: {
163+
status: string
164+
}) {
165+
const styles = {
166+
delivered:
167+
"border-emerald-500/20 bg-emerald-500/10 text-emerald-400",
168+
169+
success:
170+
"border-emerald-500/20 bg-emerald-500/10 text-emerald-400",
171+
172+
failed:
173+
"border-rose-500/20 bg-rose-500/10 text-rose-400",
174+
175+
pending:
176+
"border-amber-500/20 bg-amber-500/10 text-amber-400",
177+
178+
retrying:
179+
"border-amber-500/20 bg-amber-500/10 text-amber-400",
180+
}
181+
182+
return (
183+
<div
184+
className={cn(
185+
"inline-flex items-center rounded-md border px-2 py-1 text-[10px] font-medium uppercase tracking-wide",
186+
styles[
187+
status as keyof typeof styles
188+
] ||
189+
styles.pending
190+
)}
191+
>
192+
{status}
193+
</div>
40194
)
41195
}
42196

@@ -49,48 +203,65 @@ export function EventRow({
49203
<button
50204
onClick={onClick}
51205
className={cn(
52-
"grid h-[58px] w-full grid-cols-[120px_1fr_120px_120px_140px] items-center border-b border-border px-4 text-left transition-all",
206+
"group relative grid h-[72px] w-full grid-cols-[120px_1fr_120px_120px_140px] items-center border-b border-border px-4 text-left transition-all duration-200",
53207
selected
54-
? "bg-accent"
55-
: "hover:bg-accent/40"
208+
? "bg-white/[0.04]"
209+
: "hover:bg-white/[0.03]"
56210
)}
57211
>
212+
{/* glow */}
213+
{selected && (
214+
<div className="absolute left-0 top-0 h-full w-[2px] bg-orange-500" />
215+
)}
216+
58217
{/* Status */}
59-
<div className="flex items-center gap-2">
218+
<div className="flex items-center gap-3">
60219
<StatusIcon
61220
status={event.status}
62221
/>
63222

64-
<span className="text-xs capitalize text-muted-foreground">
65-
{event.status}
66-
</span>
223+
<StatusBadge
224+
status={event.status}
225+
/>
67226
</div>
68227

69-
{/* Route */}
228+
{/* Route + Type */}
70229
<div className="min-w-0">
71-
<p className="truncate text-sm font-medium">
72-
{event.route}
73-
</p>
74230

75-
<p className="truncate text-xs text-muted-foreground">
231+
<div className="flex items-center gap-2">
232+
<Zap className="h-3.5 w-3.5 text-orange-400" />
233+
234+
<p className="truncate text-sm font-medium text-white">
235+
{event.route}
236+
</p>
237+
</div>
238+
239+
<p className="mt-1 truncate text-xs text-muted-foreground">
76240
{event.event_type ||
77241
"unknown.event"}
78242
</p>
79243
</div>
80244

81245
{/* Provider */}
82-
<div className="text-xs text-muted-foreground">
83-
{event.provider ||
84-
"generic"}
246+
<div>
247+
<div className="inline-flex rounded-md border border-border bg-white/[0.03] px-2 py-1 text-[11px] uppercase tracking-wide text-muted-foreground">
248+
{event.provider ||
249+
"generic"}
250+
</div>
85251
</div>
86252

87253
{/* Attempts */}
88-
<div className="text-xs text-muted-foreground">
89-
{event.attempt_count ?? 0}
254+
<div className="flex items-center gap-2 text-xs text-muted-foreground">
255+
<RotateCcw className="h-3.5 w-3.5" />
256+
257+
{event.attempt_count ??
258+
0}
90259
</div>
91260

92261
{/* Time */}
93-
<div className="text-xs text-muted-foreground">
262+
<div className="flex items-center gap-2 text-xs text-muted-foreground">
263+
<Clock3 className="h-3.5 w-3.5" />
264+
94265
{event.created_at
95266
? formatDistanceToNow(
96267
new Date(

0 commit comments

Comments
 (0)