[rewrite] Updated frontend structure and played with custom routes

frontend/src/pages/users/index.tsx

@@ -0,0 +1,46 @@
+import { Header } from "@/components/layout/header";
+import { Main } from "@/components/layout/main";
+import { ProfileDropdown } from "@/components/profile-dropdown";
+import { Search } from "@/components/search";
+import { ThemeSwitch } from "@/components/theme-switch";
+import { columns } from "./components/users-columns";
+import { UsersDialogs } from "./components/users-dialogs";
+import { UsersPrimaryButtons } from "./components/users-primary-buttons";
+import { UsersTable } from "./components/users-table";
+import UsersProvider from "./context/users-context";
+import { userListSchema } from "./data/schema";
+import { users } from "./data/users";
+
+export default function Users() {
+	// Parse user list
+	const userList = userListSchema.parse(users);
+
+	return (
+		<UsersProvider>
+			<Header fixed>
+				<Search />
+				<div className="ml-auto flex items-center space-x-4">
+					<ThemeSwitch />
+					<ProfileDropdown />
+				</div>
+			</Header>
+
+			<Main>
+				<div className="mb-2 flex flex-wrap items-center justify-between space-y-2">
+					<div>
+						<h2 className="text-2xl font-bold tracking-tight">User List</h2>
+						<p className="text-muted-foreground">
+							Manage your users and their roles here.
+						</p>
+					</div>
+					<UsersPrimaryButtons />
+				</div>
+				<div className="-mx-4 flex-1 overflow-auto px-4 py-1 lg:flex-row lg:space-x-12 lg:space-y-0">
+					<UsersTable data={userList} columns={columns} />
+				</div>
+			</Main>
+
+			<UsersDialogs />
+		</UsersProvider>
+	);
+}