+
+ 
+ Lama Dev
+
+
+
+ );
+};
+
+export default CardList;
diff --git a/converted-react-app/admin/src/components/Layout.tsx b/converted-react-app/admin/src/components/Layout.tsx
new file mode 100644
index 00000000..ba8bee07
--- /dev/null
+++ b/converted-react-app/admin/src/components/Layout.tsx
@@ -0,0 +1,22 @@
+import { Outlet } from "react-router-dom";
+import AppSidebar from "./AppSidebar";
+import Navbar from "./Navbar";
+import { SidebarProvider } from "./ui/sidebar";
+
+const Layout = () => {
+ return (
+ {title}
+
+ {title === "Popular Products" && products
+ ? products.map((item) => (
+
+
+
+ {item.name}
+
+
+ ${item.price}
+
+ ))
+ : orders?.map((item) => (
+
+
+
+ {item.email}
+
+ {item.status}
+
+ ${item.amount / 100}
+
+ ))}
+
+
+ [0])
+
+
+
+
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/converted-react-app/admin/src/components/Navbar.tsx b/converted-react-app/admin/src/components/Navbar.tsx
new file mode 100644
index 00000000..4be577d6
--- /dev/null
+++ b/converted-react-app/admin/src/components/Navbar.tsx
@@ -0,0 +1,80 @@
+import { LogOut, Moon, Settings, Sun, User } from "lucide-react";
+import { Link } from "react-router-dom";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { Button } from "./ui/button";
+import { useTheme } from "next-themes";
+import { SidebarTrigger } from "./ui/sidebar";
+
+const Navbar = () => {
+ const { theme, setTheme } = useTheme();
+
+ return (
+
+ );
+};
+
+export default Navbar;
diff --git a/converted-react-app/admin/src/components/TodoList.tsx b/converted-react-app/admin/src/components/TodoList.tsx
new file mode 100644
index 00000000..21b0bc0d
--- /dev/null
+++ b/converted-react-app/admin/src/components/TodoList.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { Checkbox } from "./ui/checkbox";
+
+interface Todo {
+ id: number;
+ text: string;
+ completed: boolean;
+}
+
+const initialTodos: Todo[] = [
+ { id: 1, text: "Review new product submissions", completed: false },
+ { id: 2, text: "Update inventory counts", completed: true },
+ { id: 3, text: "Respond to customer inquiries", completed: false },
+ { id: 4, text: "Process pending orders", completed: false },
+ { id: 5, text: "Generate monthly report", completed: true },
+];
+
+const TodoList = () => {
+ const [todos, setTodos] = useState
+
+ );
+};
+
+export default TodoList;
diff --git a/converted-react-app/admin/src/components/charts/AppAreaChart.tsx b/converted-react-app/admin/src/components/charts/AppAreaChart.tsx
new file mode 100644
index 00000000..b06de83a
--- /dev/null
+++ b/converted-react-app/admin/src/components/charts/AppAreaChart.tsx
@@ -0,0 +1,60 @@
+import {
+ Area,
+ AreaChart,
+ CartesianGrid,
+ XAxis,
+ YAxis,
+} from "recharts";
+import {
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+ type ChartConfig,
+} from "../ui/chart";
+
+const data = [
+ { month: "Jan", revenue: 4000 },
+ { month: "Feb", revenue: 3000 },
+ { month: "Mar", revenue: 5000 },
+ { month: "Apr", revenue: 4500 },
+ { month: "May", revenue: 6000 },
+ { month: "Jun", revenue: 5500 },
+];
+
+const chartConfig = {
+ revenue: {
+ label: "Revenue",
+ color: "hsl(var(--chart-1))",
+ },
+} satisfies ChartConfig;
+
+const AppAreaChart = () => {
+ return (
+ Tasks
+
+ {todos.map((todo) => (
+
+
+ toggleTodo(todo.id)}
+ />
+
+ {todo.text}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AppAreaChart;
diff --git a/converted-react-app/admin/src/components/charts/AppBarChart.tsx b/converted-react-app/admin/src/components/charts/AppBarChart.tsx
new file mode 100644
index 00000000..c06e1e24
--- /dev/null
+++ b/converted-react-app/admin/src/components/charts/AppBarChart.tsx
@@ -0,0 +1,52 @@
+import {
+ ChartContainer,
+ ChartLegend,
+ ChartLegendContent,
+ ChartTooltip,
+ ChartTooltipContent,
+ type ChartConfig,
+} from "../ui/chart";
+import { OrderChartType } from "../../types";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+const chartConfig = {
+ total: {
+ label: "Total",
+ color: "hsl(var(--chart-1))",
+ },
+ successful: {
+ label: "Successful",
+ color: "hsl(var(--chart-4))",
+ },
+} satisfies ChartConfig;
+
+interface AppBarChartProps {
+ data: OrderChartType[];
+}
+
+const AppBarChart = ({ data }: AppBarChartProps) => {
+ return (
+ Revenue Trend
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+ );
+};
+
+export default AppBarChart;
diff --git a/converted-react-app/admin/src/components/charts/AppLineChart.tsx b/converted-react-app/admin/src/components/charts/AppLineChart.tsx
new file mode 100644
index 00000000..880aa8c4
--- /dev/null
+++ b/converted-react-app/admin/src/components/charts/AppLineChart.tsx
@@ -0,0 +1,44 @@
+import { Line, LineChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import {
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+ type ChartConfig,
+} from "../ui/chart";
+
+const data = [
+ { month: "Jan", activity: 65 },
+ { month: "Feb", activity: 59 },
+ { month: "Mar", activity: 80 },
+ { month: "Apr", activity: 81 },
+ { month: "May", activity: 56 },
+ { month: "Jun", activity: 55 },
+];
+
+const chartConfig = {
+ activity: {
+ label: "Activity",
+ color: "hsl(var(--chart-2))",
+ },
+} satisfies ChartConfig;
+
+const AppLineChart = () => {
+ return (
+ Total Revenue
+
+
+
+
+ {data.map((entry, index) => (
+ |
+ ))}
+
+
+
+
+ );
+};
+
+export default AppPieChart;
diff --git a/converted-react-app/admin/src/components/forms/EditUser.tsx b/converted-react-app/admin/src/components/forms/EditUser.tsx
new file mode 100644
index 00000000..e0be5476
--- /dev/null
+++ b/converted-react-app/admin/src/components/forms/EditUser.tsx
@@ -0,0 +1,154 @@
+import {
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+} from "../ui/sheet";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "../ui/form";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+
+const formSchema = z.object({
+ fullName: z
+ .string()
+ .min(2, { message: "Full name must be at least 2 characters!" })
+ .max(50),
+ email: z.string().email({ message: "Invalid email address!" }),
+ phone: z.string().min(10).max(15),
+ address: z.string().min(2),
+ city: z.string().min(2),
+});
+
+interface EditUserProps {
+ defaultValues?: {
+ fullName: string;
+ email: string;
+ phone?: string;
+ address?: string;
+ city?: string;
+ };
+}
+
+const EditUser = ({ defaultValues }: EditUserProps) => {
+ const form = useFormOrder Status
+
+
+ );
+}
diff --git a/converted-react-app/admin/src/components/tables/ProductColumns.tsx b/converted-react-app/admin/src/components/tables/ProductColumns.tsx
new file mode 100644
index 00000000..8c2d7a8e
--- /dev/null
+++ b/converted-react-app/admin/src/components/tables/ProductColumns.tsx
@@ -0,0 +1,105 @@
+import { Button } from "../ui/button";
+import { Checkbox } from "../ui/checkbox";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { ProductType } from "../../types";
+import { ColumnDef } from "@tanstack/react-table";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import { Link } from "react-router-dom";
+
+export const productColumns: ColumnDef
+
+
+
+
+
+
+
+
+ 
+
+ );
+ },
+ },
+ {
+ accessorKey: "name",
+ header: "Name",
+ },
+ {
+ accessorKey: "price",
+ header: ({ column }) => {
+ return (
+
+ );
+ },
+ cell: ({ row }) => `$${row.getValue("price")}`,
+ },
+ {
+ accessorKey: "shortDescription",
+ header: "Description",
+ },
+ {
+ id: "actions",
+ cell: ({ row }) => {
+ const product = row.original;
+
+ return (
+
+ {user.firstName?.[0] || "U"}
+
+ );
+ },
+ },
+ {
+ accessorKey: "firstName",
+ header: "Name",
+ cell: ({ row }) => {
+ const user = row.original;
+ return `${user.firstName} ${user.lastName}`;
+ },
+ },
+ {
+ accessorKey: "email",
+ header: ({ column }) => {
+ return (
+
+ );
+ },
+ },
+ {
+ accessorKey: "role",
+ header: "Role",
+ cell: ({ row }) => {
+ const role = row.getValue("role") as string;
+ return (
+
+ {role}
+
+ );
+ },
+ },
+ {
+ accessorKey: "status",
+ header: "Status",
+ cell: ({ row }) => {
+ const status = row.getValue("status") as string;
+ return (
+
+ {status}
+
+ );
+ },
+ },
+ {
+ id: "actions",
+ cell: ({ row }) => {
+ const user = row.original;
+
+ return (
+
+
+ {children}
+
+
+