Timeline

WidgetsReactTailwind

Vertical timeline graph with version nodes, status badges, and change items.

1.2.0

Dashboard OverhaulMar 2026latest

newDashboardRedesigned analytics dashboard with real-time charts

improvedSidebarCollapsible sidebar with icon-only mode

fixAuthFixed session expiry redirect loop

1.1.0

User ManagementFeb 2026

newUsersUser table with search, sort, and bulk actions

newRolesRole-based access control with permission matrix

improvedThemeDark mode support across all pages

1.0.0

Initial ReleaseJan 2026

newLayoutHeader, footer, and responsive sidebar

newBlogMarkdown blog with featured posts and tags

1 // app/changelog/page.tsx — plain TSX page (no MDX)
2 import { Timeline } from "@/shared/ui/timeline";
3 import type { TimelineRelease } from "@/shared/ui/timeline";
4 
5 const releases: TimelineRelease[] = [
6   {
7     version: "v1.2.0",
8     date: "Mar 2026",
9     label: "Dashboard Overhaul",
10     status: "latest", // "latest" | "stable"
11     items: [
12       // type: "feat" | "improve" | "fix"
13       { component: "Dashboard", type: "feat", text: "Redesigned analytics dashboard with real-time charts" },
14       { component: "Sidebar", type: "improve", text: "Collapsible sidebar with icon-only mode" },
15       { component: "Auth", type: "fix", text: "Fixed session expiry redirect loop" },
16     ],
17   },
18   {
19     version: "v1.1.0",
20     date: "Feb 2026",
21     label: "User Management",
22     status: "stable",
23     items: [
24       { component: "Users", type: "feat", text: "User table with search, sort, and bulk actions" },
25       { component: "Roles", type: "feat", text: "Role-based access control with permission matrix" },
26       { component: "Theme", type: "improve", text: "Dark mode support across all pages" },
27     ],
28   },
29   {
30     version: "v1.0.0",
31     date: "Jan 2026",
32     label: "Initial Release",
33     status: "stable",
34     items: [
35       { component: "Layout", type: "feat", text: "Header, footer, and responsive sidebar" },
36       { component: "Blog", type: "feat", text: "Markdown blog with featured posts and tags" },
37     ],
38   },
39 ];
40 
41 export default function ChangeLogPage() {
42   return <Timeline releases={releases} />;
43 }

1	// app/changelog/page.tsx — plain TSX page (no MDX)
2	import { Timeline } from "@/shared/ui/timeline";
3	import type { TimelineRelease } from "@/shared/ui/timeline";
4
5	const releases: TimelineRelease[] = [
6	{
7	version: "v1.2.0",
8	date: "Mar 2026",
9	label: "Dashboard Overhaul",
10	status: "latest", // "latest" \| "stable"
11	items: [
12	// type: "feat" \| "improve" \| "fix"
13	{ component: "Dashboard", type: "feat", text: "Redesigned analytics dashboard with real-time charts" },
14	{ component: "Sidebar", type: "improve", text: "Collapsible sidebar with icon-only mode" },
15	{ component: "Auth", type: "fix", text: "Fixed session expiry redirect loop" },
16	],
17	},
18	{
19	version: "v1.1.0",
20	date: "Feb 2026",
21	label: "User Management",
22	status: "stable",
23	items: [
24	{ component: "Users", type: "feat", text: "User table with search, sort, and bulk actions" },
25	{ component: "Roles", type: "feat", text: "Role-based access control with permission matrix" },
26	{ component: "Theme", type: "improve", text: "Dark mode support across all pages" },
27	],
28	},
29	{
30	version: "v1.0.0",
31	date: "Jan 2026",
32	label: "Initial Release",
33	status: "stable",
34	items: [
35	{ component: "Layout", type: "feat", text: "Header, footer, and responsive sidebar" },
36	{ component: "Blog", type: "feat", text: "Markdown blog with featured posts and tags" },
37	],
38	},
39	];
40
41	export default function ChangeLogPage() {
42	return <Timeline releases={releases} />;
43	}