From bd68d3f97e2a7ce8a1f5d6f2c2e6e87ab4b13070 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Wed, 15 May 2024 22:18:56 -0500
Subject: [PATCH] created user tabs

---
 .../src/app/api/models/User.js                | 20 +++++++++-------
 .../src/app/categories/page.js                | 13 ++++++++++
 donutshop_ecommerce/src/app/globals.css       | 11 ++++++++-
 donutshop_ecommerce/src/app/login/page.js     |  1 -
 donutshop_ecommerce/src/app/profile/page.js   | 13 ++++++----
 .../src/components/layout/UserTab.js          | 24 +++++++++++++++++++
 6 files changed, 68 insertions(+), 14 deletions(-)
 create mode 100644 donutshop_ecommerce/src/app/categories/page.js
 create mode 100644 donutshop_ecommerce/src/components/layout/UserTab.js

diff --git a/donutshop_ecommerce/src/app/api/models/User.js b/donutshop_ecommerce/src/app/api/models/User.js
index d9d6f7a..6bf0898 100644
--- a/donutshop_ecommerce/src/app/api/models/User.js
+++ b/donutshop_ecommerce/src/app/api/models/User.js
@@ -5,35 +5,39 @@ const UserSchema = new Schema({
     name:{
         type:String
     },
-    email: {
+    email:{
         type: String,
         required: true,
         unique: true
     },
-    password: {
+    password:{
         type: String,   
     },
     image:{
         type: String,
     },
-    phoneNumber: {
+    phoneNumber:{
         type: String,
     },
-    streetAddress: {
+    streetAddress:{
         type: String,
     },
-    city: {
+    city:{
         type: String,
     },
-    stateProvince: {
+    stateProvince:{
         type: String,
     },
-    zipCode: {
+    zipCode:{
         type: String,
     },
-    country: {
+    country:{
         type: String,
     },
+    admin:{
+        type: Boolean,
+        default: false
+    }
 
 
 }, {timestamps: true});
diff --git a/donutshop_ecommerce/src/app/categories/page.js b/donutshop_ecommerce/src/app/categories/page.js
new file mode 100644
index 0000000..93154cf
--- /dev/null
+++ b/donutshop_ecommerce/src/app/categories/page.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import UserTab from '../../components/layout/UserTab'
+
+const CategoriesPage = () => {
+  return (
+    <div className='px-5 mb-10 max-w-lg mx-auto'>
+        <UserTab isAdmin={true}/>
+        This is a category page
+    </div>
+  )
+}
+
+export default CategoriesPage
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/app/globals.css b/donutshop_ecommerce/src/app/globals.css
index 5215dfa..6e22c89 100644
--- a/donutshop_ecommerce/src/app/globals.css
+++ b/donutshop_ecommerce/src/app/globals.css
@@ -13,7 +13,6 @@ body{
 input[type="email"], input[type="password"], input[type="text"], input[type="tel"]{
   @apply border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE]
 }
-
 /*===== strokel =====*/
 .text-stroke-3 {
   text-shadow: -1px -1px 0 #95743D, 2px -1px 0 #95743D, -1px 2px 0 #95743D, 1px 1px 0 #95743D;
@@ -33,7 +32,17 @@ input[type="email"], input[type="password"], input[type="text"], input[type="tel
 .letter {
   transform-origin: 0 50px;
 }
+/*===== profile =====*/
+div.tabs > *{
+  @apply py-2 px-4 bg-gray-200 text-gray-700 rounded-md
+}
+div.tabs > *.active{
+  @apply bg-pink-500 text-white font-semibold
+}
 
+
+
+/*=====Responsive=====*/
 @media (min-width: 765px){
   .letter {
     transform-origin: 0 70px;
diff --git a/donutshop_ecommerce/src/app/login/page.js b/donutshop_ecommerce/src/app/login/page.js
index 47936f4..c1c18bd 100644
--- a/donutshop_ecommerce/src/app/login/page.js
+++ b/donutshop_ecommerce/src/app/login/page.js
@@ -5,7 +5,6 @@ import React, { useState } from 'react'
 import { signIn } from "next-auth/react";
 
 
-
 const LoginPage = () => {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
diff --git a/donutshop_ecommerce/src/app/profile/page.js b/donutshop_ecommerce/src/app/profile/page.js
index 1602ea9..b083a1e 100644
--- a/donutshop_ecommerce/src/app/profile/page.js
+++ b/donutshop_ecommerce/src/app/profile/page.js
@@ -4,6 +4,7 @@ import Image from 'next/image';
 import { redirect } from 'next/navigation';
 import React, { useEffect, useState } from 'react'
 import toast from 'react-hot-toast';
+import UserTabs from "../../components/layout/UserTab"
 
 
 const ProfilePage = () => {
@@ -19,6 +20,8 @@ const ProfilePage = () => {
   const [stateProvince, setStateProvince] = useState('');
   const [zipCode, setZipCode] = useState('');
   const [country, setCountry] = useState('');
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [profileFetchd, setProfileFetched] = useState(false);
 
 
   useEffect(() => {
@@ -33,6 +36,8 @@ const ProfilePage = () => {
           setStateProvince(data.stateProvince);
           setZipCode(data.zipCode);
           setCountry(data.country);
+          setIsAdmin(data.admin);
+          setProfileFetched(true);
         })
       })
     }
@@ -87,8 +92,8 @@ const ProfilePage = () => {
     }
   }
 
-  if(status === 'loading'){
-    return 'Loading...'
+  if(status === 'loading' || !profileFetchd){
+    return <p className='flex justify-center items-center'>Loading...</p>
   }
   if(status === 'unauthenticated'){
     return redirect('/login');
@@ -98,8 +103,8 @@ const ProfilePage = () => {
 
   return (
     <div className='px-5 mb-10'>
-      <p className='text-center text-2xl font-semibold uppercase mb-5 text-[#FF5580]'>Profile</p>
-      <div className='max-w-md mx-auto'>
+      <UserTabs isAdmin={isAdmin}/>
+      <div className='max-w-md mx-auto mt-5'>
         <div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto'>
           {image && (
             <Image src={image} width={100} height={100} alt={'user-image'} className='rounded-full'/>
diff --git a/donutshop_ecommerce/src/components/layout/UserTab.js b/donutshop_ecommerce/src/components/layout/UserTab.js
new file mode 100644
index 0000000..3f3f1ee
--- /dev/null
+++ b/donutshop_ecommerce/src/components/layout/UserTab.js
@@ -0,0 +1,24 @@
+"use client"
+import React from 'react'
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const UserTab = ({isAdmin}) => {
+    const path = usePathname();
+
+
+  return (
+    <div className='tabs flex gap-2 justify-center'>
+        <Link href='/profile' className={path === '/profile' ? 'active' : ''}>Profile</Link>
+        {isAdmin && (
+          <>
+            <Link href='/categories' className={path === '/categories' ? 'active' : ''}>Categories</Link>
+            <Link href='/menu-items' className={path === '/menu-items' ? 'active' : ''}>Items</Link>
+            <Link href='/users' className={path === '/users' ? 'active' : ''}>Users</Link>
+          </>
+        )}
+    </div>
+  )
+}
+
+export default UserTab
\ No newline at end of file