Feature/arnav710/add delete admin flow

AdminPortal/package.json

@@ -14,11 +14,15 @@
  "@types/node": "18.11.18",
  "@types/react": "18.0.27",
  "@types/react-dom": "18.0.10",
+ "bootstrap": "^5.2.3",
  "eslint": "8.32.0",
  "eslint-config-next": "13.1.4",
- "next": "13.1.4",
+ "next": "^13.1.4",
  "react": "18.2.0",
+ "react-bootstrap": "^2.7.1",
  "react-dom": "18.2.0",
+ "react-router-dom": "^6.11.1",
+ "react-select": "^5.7.0",
  "typescript": "4.9.4"
  },
  "devDependencies": {

AdminPortal/src/components/popup.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import styles from '@/styles/popup.module.css';
+
+type PopupProps = {
+ name: string;
+ description: string;
+ buttonText: string;
+ twoButtonStyle: boolean;
+ onClose: () => void;
+};
+
+export function Popup({ name, description, buttonText, twoButtonStyle, onClose }: PopupProps) {
+ return (
+ <div className={styles.container}>
+ <div className={styles.popup}>
+ <div className={styles.container}>
+ <div className={styles.close_button}>
+ <button onClick={onClose} className={styles.close_button}>
+ X
+ </button>
+ </div>
+ <div className={styles.inner_div}>
+ <h2 className={styles.header}>{name}</h2>
+ </div>
+ <div className={styles.inner_div}>{description}</div>
+ {twoButtonStyle ? (
+ <div className={styles.twoButtonContainer}>
+ <button onClick={onClose} className={styles.secondary_button}>
+ Back
+ </button>
+ <button onClick={onClose} className={styles.primary_button}>
+ Delete
+ </button>
+ </div>
+ ) : (
+ <div>
+ <button onClick={onClose} className={styles.okay_button}>
+ {buttonText}
+ </button>
+ </div>
+ )}
+ </div>
+ </div>
+ </div>
+ );
+};
+
+

AdminPortal/src/components/sidebar.tsx

@@ -26,9 +26,9 @@ export function Sidebar({ currentPage }: SidebarProps) {
  <div className={styles.menu}>
  <button type="button" className={styles.sidebarButton}>
  <a
- href="./settings"
+ href="./dashboard"
  className={
- currentPage === '/settings'
+ currentPage === '/dashboard'
  ? styles.active
  : styles.buttonText
  }

AdminPortal/src/pages/add-admin.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styles from '@/styles/add-admin.module.css';
+import { Sidebar } from '../components/sidebar';
+import Link from 'next/link';
+import { Popup } from '@/components/popup';
+import { useState } from 'react';
+
+function AddAdminPage() {
+ const [showPopup, setShowPopup] = useState(false);
+
+ const handleAddClick = () =>{
+ setShowPopup(true);
+ }
+
+ const handlePopupClose = () => {
+ setShowPopup(false);
+ };
+ return (
+ <>
+ <main className={styles.main}>
+ <Sidebar currentPage={'/add-admin'} />
+ <div>
+ <Link href="/admin">
+ <button className={styles.button}>{'Back'}</button>
+ </Link>
+ </div>
+ <div className={styles.header}>{'Add Admin'}</div>
+ <div>
+ <div className={styles.title}>{'Name'}</div>
+ <input className={styles.input} type="text"/>
+ </div>
+ <div>
+ <div className={styles.title}>{'Mobile number'}</div>
+ <input className={styles.input} type="text"/>
+ </div>
+
+ <button className={styles.button2} onClick={handleAddClick}>{'Add'}</button>
+
+ {showPopup && <Popup
+ name="Admin Added"
+ description="Admin will appear in the system once they successfully login."
+ buttonText="Okay"
+ twoButtonStyle={false}
+ onClose={handlePopupClose}
+ />
+ }
+ </main>
+ </>
+ );
+}
+
+export default AddAdminPage;

AdminPortal/src/pages/admin.tsx

@@ -6,6 +6,9 @@ import styles from '@/styles/Admin.module.css';
 import { Sidebar } from '../components/sidebar';
 import Image from 'next/image';
 import React from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
 
 interface AdminUser {
  id: number;
@@ -15,6 +18,7 @@ interface AdminUser {
 }
 
 export default function Admin() {
+ const router = useRouter();
  let data = [
  {
  id: 1,
@@ -41,13 +45,23 @@ export default function Admin() {
  role: 'Secondary Admin',
  },
  ];
+
+ function handleRowClick(item: AdminUser) {
+ router.push({
+ pathname: '/delete-admin',
+ query: { id: item.id, name: item.name, phone: item.phone, role: item.role }
+ });
+ }
+
  return (
  <>
  <main className={styles.main}>
  <Sidebar currentPage={'/admin'} />
  <div className={styles.header}>{'Manage Admin'}</div>
  <div className={styles.rightalign}>
- <button className={styles.button}>{'Add Admin'}</button>
+ <Link href="/add-admin">
+ <button className={styles.button}>{'Add Admin'}</button>
+ </Link>
  <Image src={'/sort.svg'} alt="Sort" width={39} height={30} priority />
  </div>
  <div>
@@ -60,12 +74,13 @@ export default function Admin() {
  </tr>
  </thead>
  <tbody className={styles.tablebody}>
+
  {data.map((item) => (
- <tr key={JSON.stringify(item)}>
- <td>{item.name}</td>
- <td>{item.phone}</td>
- <td>{item.role}</td>
- </tr>
+  <tr key={JSON.stringify(item)} onClick={() => handleRowClick(item)}>
+  <td>{item.name}</td>
+  <td>{item.phone}</td>
+  <td>{item.role}</td>
+  </tr>
  ))}
  </tbody>
  </table>