Refactor user profile interface and update user type field

src/components/OrderView.tsx

@@ -1,14 +1,50 @@
 import { iOrder, iOrderItem } from "@/lib/Type";
 import Image from "next/image";
-import React from "react";
+import React, { useState } from "react";
 
 interface OrderViewProps {
 	order: iOrder | undefined;
 	orderStyles: { readonly [key: string]: string };
 	setShowViewOrder: (show: boolean) => void;
+	changeOrderStatus?: boolean;
 }
 
-const OrderView: React.FC<OrderViewProps> = ({ order, orderStyles, setShowViewOrder }) => {
+const OrderView: React.FC<OrderViewProps> = ({
+	order,
+	orderStyles,
+	setShowViewOrder,
+	changeOrderStatus,
+}) => {
+	const [status, setStatus] = useState(order?.status || "");
+	const [loading, setLoading] = useState(false);
+	const [message, setMessage] = useState("");
+
+	const handleStatusChange = async () => {
+		if (order) {
+			setLoading(true);
+			setMessage("Updating...");
+			try {
+				const response = await fetch("/api/orders", {
+					method: "PUT",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify({ id: order.id, status }),
+				});
+
+				if (response.ok) {
+					setMessage("Order status updated successfully");
+				} else {
+					setMessage("Failed to update order status");
+				}
+			} catch (error) {
+				setMessage((error as Error).message);
+			} finally {
+				setLoading(false);
+			}
+		}
+	};
+
 	return (
 		<div className={orderStyles.orderView}>
 			{order ? (
@@ -19,7 +55,8 @@ const OrderView: React.FC<OrderViewProps> = ({ order, orderStyles, setShowViewOr
 						id="order-view-close-btn"
 						onClick={() => {
 							setShowViewOrder(false);
-						}}>
+						}}
+						disabled={loading}>
 						<i className="fas fa-times-circle" />
 					</button>
 					<div className={orderStyles.orderViewGrid}>
@@ -29,6 +66,23 @@ const OrderView: React.FC<OrderViewProps> = ({ order, orderStyles, setShowViewOr
 							<p>Order Total: {order.total}</p>
 							<p>Order Date: {order.date}</p>
 							<p>Order Status: {order.status}</p>
+							{changeOrderStatus && (
+								<div>
+									<select
+										value={status}
+										onChange={(e) => setStatus(e.target.value)}
+										disabled={loading}>
+										<option value="Pending">Pending</option>
+										<option value="In-Progress">In-Progress</option>
+										<option value="Completed">Completed</option>
+										<option value="In-Error">In-Error</option>
+									</select>
+									<button onClick={handleStatusChange} disabled={loading}>
+										{loading ? "Updating..." : "Update Status"}
+									</button>
+								</div>
+							)}
+							{message && <p>{message}</p>}
 						</div>
 						<div className={orderStyles.orderViewItems}>
 							{order.items?.map((item: iOrderItem, index: number) => (

src/lib/Type.ts

@@ -105,6 +105,7 @@ export interface iUserProfile {
 	avatar_url: string;
 	phone_number: string;
 	email: string;
+	user_type?: string;
 }
 
 export interface iUserUpdateData {

src/pages/api/user/users.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import pool from "@/lib/db";
-import { iUserProfile } from "@/lib/Type";
+import { iUserProfile, iUserUpdateData } from "@/lib/Type";
 
 // Define the interface for the returned data
 
@@ -12,27 +12,7 @@ const fetchAllUserProfiles = async (): Promise<iUserProfile[]> => {
 	return result.rows;
 };
 
-const updateUserProfile = async (
-	email: string,
-	data: {
-		username?: string;
-		first_name?: string;
-		last_name?: string;
-		phone_number?: string;
-		address?: string;
-		city?: string;
-		state?: string;
-		zip?: string;
-		country?: string;
-		facebook?: string;
-		twitter?: string;
-		instagram?: string;
-		linkedin?: string;
-		github?: string;
-		login_provider?: string;
-		avatar_url?: string;
-	},
-) => {
+const updateUserProfile = async (email: string, data: iUserUpdateData) => {
 	const {
 		username,
 		first_name,
@@ -50,7 +30,8 @@ const updateUserProfile = async (
 		github,
 		login_provider,
 		avatar_url,
-	} = data;
+		user_type,
+	}: iUserUpdateData = data;
 
 	const query = `
 		UPDATE users
@@ -70,8 +51,9 @@ const updateUserProfile = async (
 			linkedin = COALESCE($13, linkedin),
 			github = COALESCE($14, github),
 			login_provider = COALESCE($15, login_provider),
-			avatar_url = COALESCE($16, avatar_url)
-		WHERE email = $17
+			avatar_url = COALESCE($16, avatar_url),
+			user_type = COALESCE($17, user_type)
+		WHERE email = $18
 		RETURNING *;
 	`;
 
@@ -92,6 +74,7 @@ const updateUserProfile = async (
 		github,
 		login_provider,
 		avatar_url,
+		user_type,
 		email,
 	]);
 
@@ -112,7 +95,7 @@ const deleteUserProfile = async (email: string) => {
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
 	if (req.method === "GET") {
 		try {
-			const userProfiles = await fetchAllUserProfiles();
+			const userProfiles: iUserProfile[] = await fetchAllUserProfiles();
 			res.status(200).json(userProfiles);
 		} catch (error) {
 			console.error("Error fetching user profiles:", error);
@@ -137,7 +120,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 			github,
 			login_provider,
 			avatar_url,
-		} = req.body;
+			user_type,
+		}: iUserUpdateData = req.body;
 
 		console.log("req.body:", req.body);
 
@@ -162,6 +146,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 		if (!github) missingFields.push("github");
 		if (!login_provider) missingFields.push("login_provider");
 		if (!avatar_url) missingFields.push("avatar_url");
+		if (!user_type) missingFields.push("user_type");
 
 		if (missingFields.length > 0) {
 			return res
@@ -170,7 +155,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 		}
 
 		try {
-			const updatedUserProfile = await updateUserProfile(email, {
+			const updatedUserProfile: iUserUpdateData = await updateUserProfile(email, {
 				username,
 				first_name,
 				last_name,
@@ -187,6 +172,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 				github,
 				login_provider,
 				avatar_url,
+				user_type,
 			});
 
 			if (!updatedUserProfile) {

src/pages/endpoints/admin/admin.module.css

@@ -248,3 +248,24 @@
 	flex-direction: column;
 	align-items: flex-start;
 }
+
+.chart {
+	max-width: 600px;
+	max-height: 400px;
+	width: calc(100% - 40px);
+	height: calc(100% - 40px);
+	border-radius: 10px;
+	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+	padding: 20px;
+}
+
+.charts {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 50px;
+	justify-items: center;
+	max-width: 1300px;
+	margin: 30px auto;
+	border-top: 2px solid #ddd;
+	padding-top: 30px;
+}

src/pages/endpoints/admin/items/index.tsx

@@ -124,7 +124,8 @@ const AdminItemsPage: React.FC = () => {
 								data: Object.values(data),
 								backgroundColor,
 								borderColor: "rgb(44, 44, 44)",
-								borderWidth: 1,
+								borderWidth: 2,
+								borderRadius: 10,
 							},
 						],
 					},