Added customer list, coupon list and started working on purchase list

frontend/src/pages/users/index.tsx

@@ -8,12 +8,23 @@ 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";
+import { User, userListSchema } from "./data/schema";
+import { useUsers } from "@/hooks/useUsers";
 
 export default function Users() {
-	// Parse user list
-	const userList = userListSchema.parse(users);
+	const { data, error, isLoading } = useUsers();
+
+	let userList: User[] = [];
+	if (data) {
+		try {
+			userList = userListSchema.parse(data);
+		} catch (e) {
+			console.error("Schema validation failed:", e);
+			userList = [];
+		}
+	}
+
+	console.log(userList);
 
 	return (
 		<UsersProvider>
@@ -28,16 +39,28 @@ export default function Users() {
 			<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>
+						<h2 className="text-2xl font-bold tracking-tight">
+							Your customers
+						</h2>
 						<p className="text-muted-foreground">
-							Manage your users and their roles here.
+							Manage your customers user accounts 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>
+
+				{isLoading && <p className="text-muted-foreground">Loading users...</p>}
+				{error && (
+					<p className="text-red-500">
+						Failed to load users: {(error as Error).message}
+					</p>
+				)}
+
+				{!isLoading && !error && (
+					<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 />