From 857892c5dcd64dab5a41b427d2dc93019b3149ae Mon Sep 17 00:00:00 2001 From: Spencer Schoeneman Date: Wed, 6 Dec 2023 14:06:59 -0600 Subject: [PATCH 1/8] make styleClass prop optional --- .../components/dash-wind/components/Typography/Subtitle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nextjs/components/dash-wind/components/Typography/Subtitle.tsx b/packages/nextjs/components/dash-wind/components/Typography/Subtitle.tsx index 251beec..a60ceac 100644 --- a/packages/nextjs/components/dash-wind/components/Typography/Subtitle.tsx +++ b/packages/nextjs/components/dash-wind/components/Typography/Subtitle.tsx @@ -1,7 +1,7 @@ import { ReactNode } from "react"; interface props { - styleClass: string; + styleClass?: string; children: ReactNode; } function Subtitle({ styleClass, children }: props) { From 526ec8ac25ec8d3bd3f4212deb71e45665431c86 Mon Sep 17 00:00:00 2001 From: Spencer Schoeneman Date: Wed, 6 Dec 2023 14:09:08 -0600 Subject: [PATCH 2/8] add employees dummy data --- .../components/dash-wind/utils/dummyData.ts | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/packages/nextjs/components/dash-wind/utils/dummyData.ts b/packages/nextjs/components/dash-wind/utils/dummyData.ts index 3235cb3..98a6559 100644 --- a/packages/nextjs/components/dash-wind/utils/dummyData.ts +++ b/packages/nextjs/components/dash-wind/utils/dummyData.ts @@ -225,3 +225,77 @@ export const RECENT_TRANSACTIONS = [ date: moment().add(-3, "d").endOf("day"), }, ]; +export const EMPLOYEES = [ + { + name: "Alex", + avatar: "https://reqres.in/img/faces/1-image.jpg", + email: "alex@dashwind.com", + id: "1", + wallet: "0xB9555E2f3e34aDfDB5d033C5af73de6e2385A770", + role: "Owner", + joinedOn: moment(new Date()) + .add(-5 * 1, "days") + .format("DD MMM YYYY"), + lastActive: "5 hr ago", + }, + { + name: "Ereena", + avatar: "https://reqres.in/img/faces/2-image.jpg", + email: "ereena@dashwind.com", + id: "2", + wallet: "0xB9555E2f3e34aDfDB5d033C5af73de6e2385A770", + role: "Designer", + joinedOn: moment(new Date()) + .add(-5 * 2, "days") + .format("DD MMM YYYY"), + lastActive: "15 min ago", + }, + { + name: "John", + avatar: "https://reqres.in/img/faces/3-image.jpg", + email: "jhon@dashwind.com", + id: "3", + wallet: "0xB9555E2f3e34aDfDB5d033C5af73de6e2385A770", + role: "Designer", + joinedOn: moment(new Date()) + .add(-5 * 3, "days") + .format("DD MMM YYYY"), + lastActive: "20 hr ago", + }, + { + name: "Matrix", + avatar: "https://reqres.in/img/faces/4-image.jpg", + email: "matrix@dashwind.com", + id: "4", + wallet: "0xB9555E2f3e34aDfDB5d033C5af73de6e2385A770", + role: "Manager", + joinedOn: moment(new Date()) + .add(-5 * 4, "days") + .format("DD MMM YYYY"), + lastActive: "1 hr ago", + }, + { + name: "Virat", + avatar: "https://reqres.in/img/faces/5-image.jpg", + email: "virat@dashwind.com", + id: "5", + wallet: "0xB9555E2f3e34aDfDB5d033C5af73de6e2385A770", + role: "Developer", + joinedOn: moment(new Date()) + .add(-5 * 5, "days") + .format("DD MMM YYYY"), + lastActive: "40 min ago", + }, + { + name: "Miya", + avatar: "https://reqres.in/img/faces/6-image.jpg", + email: "miya@dashwind.com", + id: "6", + wallet: "0xB9555E2f3e34aDfDB5d033C5af73de6e2385A770", + role: "Developer", + joinedOn: moment(new Date()) + .add(-5 * 7, "days") + .format("DD MMM YYYY"), + lastActive: "5 hr ago", + }, +]; From 930fb6777912586953d22ad9ee7167c5d2847e6e Mon Sep 17 00:00:00 2001 From: Spencer Schoeneman Date: Wed, 6 Dec 2023 14:44:50 -0600 Subject: [PATCH 3/8] swap out leadsSlice for employeesSlice and all references --- .../nextjs/components/dash-wind/app/store.ts | 16 +- .../dash-wind/containers/ModalLayout.tsx | 6 +- .../components/AddEmployeeModalBody.tsx | 102 +++++++++ .../features/employees/employeesSlice.ts | 78 +++++++ .../dash-wind/features/leads/index.tsx | 215 +++++++++--------- .../dash-wind/pages/protected/Leads.tsx | 16 -- .../components/dash-wind/routes/index.ts | 10 +- .../components/dash-wind/routes/sidebar.ts | 175 +++++++------- .../dash-wind/utils/globalConstantUtil.ts | 1 + .../components/web-3-crew/types/Employee.ts | 13 ++ packages/nextjs/pages/dapp/leads.tsx | 19 -- 11 files changed, 408 insertions(+), 243 deletions(-) create mode 100644 packages/nextjs/components/dash-wind/features/employees/components/AddEmployeeModalBody.tsx create mode 100644 packages/nextjs/components/dash-wind/features/employees/employeesSlice.ts delete mode 100644 packages/nextjs/components/dash-wind/pages/protected/Leads.tsx create mode 100644 packages/nextjs/components/web-3-crew/types/Employee.ts delete mode 100644 packages/nextjs/pages/dapp/leads.tsx diff --git a/packages/nextjs/components/dash-wind/app/store.ts b/packages/nextjs/components/dash-wind/app/store.ts index f4a9a68..b6ea562 100644 --- a/packages/nextjs/components/dash-wind/app/store.ts +++ b/packages/nextjs/components/dash-wind/app/store.ts @@ -1,12 +1,15 @@ import headerSlice from "../features/common/headerSlice"; import modalSlice from "../features/common/modalSlice"; import rightDrawerSlice from "../features/common/rightDrawerSlice"; -import leadsSlice from "../features/leads/leadSlice"; +// import leadsSlice from "../features/leads/leadSlice"; +import employeesSlice, { Employee } from "../features/employees/employeesSlice"; import { Reducer, ThunkAction, configureStore } from "@reduxjs/toolkit"; import { createWrapper } from "next-redux-wrapper"; import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"; import { Action } from "redux"; -import authSlice, { AuthProvider } from "~~/auth/authSlice"; +import authSlice from "~~/auth/authSlice"; + +// import authSlice, { AuthProvider } from "~~/auth/authSlice"; interface CombinedReducer { header: Reducer<{ @@ -28,13 +31,14 @@ interface CombinedReducer { size: string; extraObject: Record; }>; - lead: Reducer<{ + employees: Reducer<{ isLoading: boolean; - leads: never[]; + employees: Employee[]; }>; auth: Reducer<{ isConnected: boolean; - provider: AuthProvider; + isAdmin: boolean; + // provider: AuthProvider; }>; } @@ -42,7 +46,7 @@ const combinedReducer: CombinedReducer = { header: headerSlice, rightDrawer: rightDrawerSlice, modal: modalSlice, - lead: leadsSlice, + employees: employeesSlice, auth: authSlice, }; diff --git a/packages/nextjs/components/dash-wind/containers/ModalLayout.tsx b/packages/nextjs/components/dash-wind/containers/ModalLayout.tsx index 3bd53ac..1429dd0 100644 --- a/packages/nextjs/components/dash-wind/containers/ModalLayout.tsx +++ b/packages/nextjs/components/dash-wind/containers/ModalLayout.tsx @@ -1,7 +1,8 @@ // import { useEffect } from "react"; import ConfirmationModalBody from "../features/common/components/ConfirmationModalBody"; import { ModalRootState, closeModal } from "../features/common/modalSlice"; -import AddLeadModalBody from "../features/leads/components/AddLeadModalBody"; +import AddEmployeeModalBody from "../features/employees/components/AddEmployeeModalBody"; +// import AddLeadModalBody from "../features/leads/components/AddLeadModalBody"; import { MODAL_BODY_TYPES } from "../utils/globalConstantUtil"; import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store"; @@ -31,7 +32,8 @@ function ModalLayout() { { { // [MODAL_BODY_TYPES.LEAD_ADD_NEW]: , - [MODAL_BODY_TYPES.LEAD_ADD_NEW]: , + // [MODAL_BODY_TYPES.LEAD_ADD_NEW]: , + [MODAL_BODY_TYPES.EMPLOYEE_ADD_NEW]: , [MODAL_BODY_TYPES.CONFIRMATION]: , [MODAL_BODY_TYPES.DEFAULT]:
, }[bodyType] diff --git a/packages/nextjs/components/dash-wind/features/employees/components/AddEmployeeModalBody.tsx b/packages/nextjs/components/dash-wind/features/employees/components/AddEmployeeModalBody.tsx new file mode 100644 index 0000000..a5c497e --- /dev/null +++ b/packages/nextjs/components/dash-wind/features/employees/components/AddEmployeeModalBody.tsx @@ -0,0 +1,102 @@ +import { useState } from "react"; +import InputText from "../../../components/Input/InputText"; +import ErrorText from "../../../components/Typography/ErrorText"; +import { showNotification } from "../../common/headerSlice"; +import { addNewEmployee } from "../employeesSlice"; +import { useMyDispatch } from "~~/components/dash-wind/app/store"; +import { UpdateFormValues } from "~~/components/dash-wind/types/FormTypes"; + +interface props { + closeModal: () => void; +} + +const INITIAL_EMPLOYEE_OBJ = { + first_name: "", + last_name: "", + email: "", + wallet: "", +}; + +// function AddLeadModalBody({ closeModal, extraObject }) { +function AddEmployeeModalBody({ closeModal }: props) { + const dispatch = useMyDispatch(); + // const [loading, setLoading] = useState(false); + const [errorMessage, setErrorMessage] = useState(""); + const [employeeObj, setEmployeeObj] = useState(INITIAL_EMPLOYEE_OBJ); + + const saveNewLead = () => { + if (employeeObj.first_name.trim() === "") return setErrorMessage("First Name is required!"); + else if (employeeObj.email.trim() === "") return setErrorMessage("Email id is required!"); + else if (employeeObj.wallet.trim() === "") return setErrorMessage("Wallet Address is required!"); + else { + const newEmployeeObj = { + id: 7, + email: employeeObj.email, + wallet: employeeObj.wallet, + first_name: employeeObj.first_name, + last_name: employeeObj.last_name, + avatar: "https://reqres.in/img/faces/1-image.jpg", + }; + dispatch(addNewEmployee({ newEmployeeObj })); + dispatch(showNotification({ message: "New Employee Added!", status: 1 })); + closeModal(); + } + }; + + const updateFormValue = ({ updateType, value }: UpdateFormValues) => { + setErrorMessage(""); + setEmployeeObj({ ...employeeObj, [updateType]: value }); + }; + + return ( + <> + + + + + + + + + {errorMessage} +
+ + +
+ + ); +} + +export default AddEmployeeModalBody; diff --git a/packages/nextjs/components/dash-wind/features/employees/employeesSlice.ts b/packages/nextjs/components/dash-wind/features/employees/employeesSlice.ts new file mode 100644 index 0000000..1118282 --- /dev/null +++ b/packages/nextjs/components/dash-wind/features/employees/employeesSlice.ts @@ -0,0 +1,78 @@ +import { PayloadAction, createSlice } from "@reduxjs/toolkit"; +import { Address } from "viem"; + +// import axios from "axios"; + +export type Employee = { + id: number; + email: string; + wallet: Address; + first_name: string; + last_name: string; + avatar: string; +}; + +export interface EmployeeRootState { + leads: { + isLoading: boolean; + employees: Employee[]; + }; +} + +interface EmployeeState { + isLoading: boolean; + employees: Employee[]; +} + +// export const getLeadsContent = createAsyncThunk("/leads/content", async () => { +// const response = await axios.get("/api/users?page=2", {}); +// return response.data; +// }); + +export const employeesSlice = createSlice({ + name: "employees", + initialState: { + isLoading: false, + employees: [] as Employee[], + }, + reducers: { + addNewEmployee: ( + state: EmployeeState, + action: PayloadAction<{ + newEmployeeObj: { + id: number; + email: string; + wallet: Address; + first_name: string; + last_name: string; + avatar: string; + }; + }>, + ) => { + const { newEmployeeObj } = action.payload; + state.employees = [...state.employees, newEmployeeObj]; + }, + + deleteEmployee: (state: EmployeeState, action: PayloadAction<{ index: number }>) => { + const { index } = action.payload; + state.employees.splice(index, 1); + }, + }, + + // extraReducers: (builder: ActionReducerMapBuilder) => { + // builder.addCase(getLeadsContent.pending, (state: LeadState) => { + // state.isLoading = true; + // }); + // builder.addCase(getLeadsContent.fulfilled, (state: LeadState, action: PayloadAction) => { + // state.leads = action.payload; + // state.isLoading = false; + // }); + // builder.addCase(getLeadsContent.rejected, (state: LeadState) => { + // state.isLoading = false; + // }); + // }, +}); + +export const { addNewEmployee, deleteEmployee } = employeesSlice.actions; + +export default employeesSlice.reducer; diff --git a/packages/nextjs/components/dash-wind/features/leads/index.tsx b/packages/nextjs/components/dash-wind/features/leads/index.tsx index 18d15f1..7f21ad5 100644 --- a/packages/nextjs/components/dash-wind/features/leads/index.tsx +++ b/packages/nextjs/components/dash-wind/features/leads/index.tsx @@ -1,116 +1,117 @@ -/* eslint-disable @next/next/no-img-element */ -import { useEffect } from "react"; -// import Image from "next/image"; -import TitleCard from "../../components/Cards/TitleCard"; -import { CONFIRMATION_MODAL_CLOSE_TYPES, MODAL_BODY_TYPES } from "../../utils/globalConstantUtil"; -// import { showNotification } from "../common/headerSlice"; -import { openModal } from "../common/modalSlice"; -import { Lead, getLeadsContent } from "./leadSlice"; -import moment from "moment"; -import TrashIcon from "@heroicons/react/24/outline/TrashIcon"; -import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store"; +// /* eslint-disable @next/next/no-img-element */ +// import { useEffect } from "react"; +// // import Image from "next/image"; +// import TitleCard from "../../components/Cards/TitleCard"; +// import { CONFIRMATION_MODAL_CLOSE_TYPES, MODAL_BODY_TYPES } from "../../utils/globalConstantUtil"; +// // import { showNotification } from "../common/headerSlice"; +// import { openModal } from "../common/modalSlice"; +// import { Lead, getLeadsContent } from "./leadSlice"; +// import moment from "moment"; +// import TrashIcon from "@heroicons/react/24/outline/TrashIcon"; -const TopSideButtons = () => { - const dispatch = useMyDispatch(); +// import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store"; - const openAddNewLeadModal = () => { - dispatch(openModal({ title: "Add New Lead", bodyType: MODAL_BODY_TYPES.LEAD_ADD_NEW })); - }; +// const TopSideButtons = () => { +// const dispatch = useMyDispatch(); - return ( -
- -
- ); -}; +// const openAddNewLeadModal = () => { +// dispatch(openModal({ title: "Add New Lead", bodyType: MODAL_BODY_TYPES.LEAD_ADD_NEW })); +// }; -function Leads() { - const { leads } = useMySelector((state: MyState) => state.lead); - const dispatch = useMyDispatch(); +// return ( +//
+// +//
+// ); +// }; - useEffect(() => { - dispatch(getLeadsContent()); - }, [dispatch]); +// function Leads() { +// const { leads } = useMySelector((state: MyState) => state.lead); +// const dispatch = useMyDispatch(); - const getDummyStatus = (index: number) => { - if (index % 5 === 0) return
Not Interested
; - else if (index % 5 === 1) return
In Progress
; - else if (index % 5 === 2) return
Sold
; - else if (index % 5 === 3) return
Need Followup
; - else return
Open
; - }; +// useEffect(() => { +// dispatch(getLeadsContent()); +// }, [dispatch]); - const deleteCurrentLead = (index: number) => { - dispatch( - openModal({ - title: "Confirmation", - bodyType: MODAL_BODY_TYPES.CONFIRMATION, - extraObject: { - message: `Are you sure you want to delete this lead?`, - type: CONFIRMATION_MODAL_CLOSE_TYPES.LEAD_DELETE, - index, - }, - }), - ); - }; +// const getDummyStatus = (index: number) => { +// if (index % 5 === 0) return
Not Interested
; +// else if (index % 5 === 1) return
In Progress
; +// else if (index % 5 === 2) return
Sold
; +// else if (index % 5 === 3) return
Need Followup
; +// else return
Open
; +// }; - return ( - <> - }> - {/* Leads List in table format loaded from slice after api call */} -
- - - - - - - - - - - - - {leads.map((l: Lead, k: number) => { - return ( - - - - - - - - - ); - })} - -
NameEmail IdCreated AtStatusAssigned To
-
-
-
- Avatar -
-
-
-
{l.first_name}
-
{l.last_name}
-
-
- 		{l.email} - {moment(new Date()) - .add(-5 * (k + 2), "days") - .format("DD MMM YY")} - {getDummyStatus(k)}{l.last_name} - -
-
- - - ); -} +// const deleteCurrentLead = (index: number) => { +// dispatch( +// openModal({ +// title: "Confirmation", +// bodyType: MODAL_BODY_TYPES.CONFIRMATION, +// extraObject: { +// message: `Are you sure you want to delete this lead?`, +// type: CONFIRMATION_MODAL_CLOSE_TYPES.LEAD_DELETE, +// index, +// }, +// }), +// ); +// }; -export default Leads; +// return ( +// <> +// }> +// {/* Leads List in table format loaded from slice after api call */} +//
+// +// +// +// +// +// +// +// +// +// +// +// +// {leads.map((l: Lead, k: number) => { +// return ( +// +// +// +// +// +// +// +// +// ); +// })} +// +//
NameEmail IdCreated AtStatusAssigned To
+//
+//
+//
+// Avatar +//
+//
+//
+//
{l.first_name}
+//
{l.last_name}
+//
+//
+// 		{l.email} +// {moment(new Date()) +// .add(-5 * (k + 2), "days") +// .format("DD MMM YY")} +// {getDummyStatus(k)}{l.last_name} +// +//
+//
+// +// +// ); +// } + +// export default Leads; diff --git a/packages/nextjs/components/dash-wind/pages/protected/Leads.tsx b/packages/nextjs/components/dash-wind/pages/protected/Leads.tsx deleted file mode 100644 index 97c8723..0000000 --- a/packages/nextjs/components/dash-wind/pages/protected/Leads.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { useEffect } from "react"; -import { setPageTitle } from "../../features/common/headerSlice"; -import Leads from "../../features/leads"; -import { useMyDispatch } from "~~/components/dash-wind/app/store"; - -function InternalPage() { - const dispatch = useMyDispatch(); - - useEffect(() => { - dispatch(setPageTitle({ title: "Leads" })); - }, [dispatch]); - - return ; -} - -export default InternalPage; diff --git a/packages/nextjs/components/dash-wind/routes/index.ts b/packages/nextjs/components/dash-wind/routes/index.ts index b050328..2cd295f 100644 --- a/packages/nextjs/components/dash-wind/routes/index.ts +++ b/packages/nextjs/components/dash-wind/routes/index.ts @@ -6,7 +6,7 @@ const Welcome = lazy(() => import("../pages/protected/Welcome")); const Page404 = lazy(() => import("../pages/protected/_404")); const Blank = lazy(() => import("../pages/protected/Blank")); const Charts = lazy(() => import("../pages/protected/Charts")); -const Leads = lazy(() => import("../pages/protected/Leads")); +// const Leads = lazy(() => import("../pages/protected/Leads")); const Integration = lazy(() => import("../pages/protected/Integration")); const Calendar = lazy(() => import("../pages/protected/Calendar")); const Team = lazy(() => import("../pages/protected/Team")); @@ -26,10 +26,10 @@ const routes = [ path: "/welcome", // the url component: Welcome, // view rendered }, - { - path: "/leads", - component: Leads, - }, + // { + // path: "/leads", + // component: Leads, + // }, { path: "/settings-team", component: Team, diff --git a/packages/nextjs/components/dash-wind/routes/sidebar.ts b/packages/nextjs/components/dash-wind/routes/sidebar.ts index 026e758..82d638e 100644 --- a/packages/nextjs/components/dash-wind/routes/sidebar.ts +++ b/packages/nextjs/components/dash-wind/routes/sidebar.ts @@ -1,9 +1,9 @@ /** Icons are imported separatly to reduce build time */ // import ArrowRightOnRectangleIcon from "@heroicons/react/24/outline/ArrowRightOnRectangleIcon"; // import BellIcon from "@heroicons/react/24/outline/BellIcon"; -import BoltIcon from "@heroicons/react/24/outline/BoltIcon"; -import CalendarDaysIcon from "@heroicons/react/24/outline/CalendarDaysIcon"; -import ChartBarIcon from "@heroicons/react/24/outline/ChartBarIcon"; +// import BoltIcon from "@heroicons/react/24/outline/BoltIcon"; +// import CalendarDaysIcon from "@heroicons/react/24/outline/CalendarDaysIcon"; +// import ChartBarIcon from "@heroicons/react/24/outline/ChartBarIcon"; // import CodeBracketSquareIcon from "@heroicons/react/24/outline/CodeBracketSquareIcon"; import Cog6ToothIcon from "@heroicons/react/24/outline/Cog6ToothIcon"; import CurrencyDollarIcon from "@heroicons/react/24/outline/CurrencyDollarIcon"; @@ -11,7 +11,7 @@ import CurrencyDollarIcon from "@heroicons/react/24/outline/CurrencyDollarIcon"; // import DocumentIcon from "@heroicons/react/24/outline/DocumentIcon"; // import DocumentTextIcon from "@heroicons/react/24/outline/DocumentTextIcon"; // import ExclamationTriangleIcon from "@heroicons/react/24/outline/ExclamationTriangleIcon"; -import InboxArrowDownIcon from "@heroicons/react/24/outline/InboxArrowDownIcon"; +// import InboxArrowDownIcon from "@heroicons/react/24/outline/InboxArrowDownIcon"; // import KeyIcon from "@heroicons/react/24/outline/KeyIcon"; import Squares2X2Icon from "@heroicons/react/24/outline/Squares2X2Icon"; // import TableCellsIcon from "@heroicons/react/24/outline/TableCellsIcon"; @@ -22,7 +22,7 @@ import WalletIcon from "@heroicons/react/24/outline/WalletIcon"; const iconClasses = `h-6 w-6`; const submenuIconClasses = `h-5 w-5`; -const routes = [ +export const adminRoutes = [ { path: "/dapp/dashboard", icon: Squares2X2Icon, @@ -30,10 +30,10 @@ const routes = [ name: "Dashboard", }, { - path: "/dapp/leads", // url - icon: InboxArrowDownIcon, // icon component + path: "/dapp/employees", // url + icon: UsersIcon, // icon component className: iconClasses, - name: "Leads", // name that appear in Sidebar + name: "Employees", // name that appear in Sidebar }, { path: "/dapp/transactions", // url @@ -41,62 +41,87 @@ const routes = [ className: iconClasses, name: "Transactions", // name that appear in Sidebar }, + // { + // path: "/dapp/charts", // url + // icon: ChartBarIcon, // icon component + // className: iconClasses, + // name: "Analytics", // name that appear in Sidebar + // }, + // { + // path: "/dapp/integration", // url + // icon: BoltIcon, // icon component + // className: iconClasses, + // name: "Integration", // name that appear in Sidebar + // }, + // { + // path: "/dapp/calendar", // url + // icon: CalendarDaysIcon, // icon component + // className: iconClasses, + // name: "Calendar", // name that appear in Sidebar + // }, { - path: "/dapp/charts", // url - icon: ChartBarIcon, // icon component - className: iconClasses, - name: "Analytics", // name that appear in Sidebar + path: "", //no url needed as this has submenu + icon: Cog6ToothIcon, // icon component + className: `${iconClasses} inline`, + name: "Settings", // name that appear in Sidebar + submenu: [ + // { + // path: "/dapp/settings-profile", //url + // icon: UserIcon, // icon component + // className: submenuIconClasses, + // name: "Profile", // name that appear in Sidebar + // }, + { + path: "/dapp/settings-billing", + icon: WalletIcon, + className: submenuIconClasses, + name: "Billing", + }, + // { + // path: "/dapp/settings-team", // url + // icon: UsersIcon, // icon component + // className: submenuIconClasses, + // name: "Team Members", // name that appear in Sidebar + // }, + ], }, +]; +export const userRoutes = [ { - path: "/dapp/integration", // url - icon: BoltIcon, // icon component + path: "/dapp/dashboard", + icon: Squares2X2Icon, className: iconClasses, - name: "Integration", // name that appear in Sidebar + name: "Dashboard", }, + // { + // path: "/dapp/leads", // url + // icon: InboxArrowDownIcon, // icon component + // className: iconClasses, + // name: "Leads", // name that appear in Sidebar + // }, { - path: "/dapp/calendar", // url - icon: CalendarDaysIcon, // icon component + path: "/dapp/transactions", // url + icon: CurrencyDollarIcon, // icon component className: iconClasses, - name: "Calendar", // name that appear in Sidebar + name: "Transactions", // name that appear in Sidebar }, - // { - // path: "", //no url needed as this has submenu - // icon: DocumentDuplicateIcon, // icon component - // className: `${iconClasses} inline`, - // name: "Pages", // name that appear in Sidebar - // submenu: [ - // { - // path: "/login", - // icon: ArrowRightOnRectangleIcon, - // className: submenuIconClasses, - // name: "Login", - // }, - // { - // path: "/register", //url - // icon: UserIcon, // icon component - // className: submenuIconClasses, - // name: "Register", // name that appear in Sidebar - // }, - // { - // path: "/forgot-password", - // icon: KeyIcon, - // className: submenuIconClasses, - // name: "Forgot Password", - // }, - // { - // path: "/dapp/blank", - // icon: DocumentIcon, - // className: submenuIconClasses, - // name: "Blank Page", - // }, - // { - // path: "/dapp/404", - // icon: ExclamationTriangleIcon, - // className: submenuIconClasses, - // name: "404", - // }, - // ], + // path: "/dapp/charts", // url + // icon: ChartBarIcon, // icon component + // className: iconClasses, + // name: "Analytics", // name that appear in Sidebar + // }, + // { + // path: "/dapp/integration", // url + // icon: BoltIcon, // icon component + // className: iconClasses, + // name: "Integration", // name that appear in Sidebar + // }, + // { + // path: "/dapp/calendar", // url + // icon: CalendarDaysIcon, // icon component + // className: iconClasses, + // name: "Calendar", // name that appear in Sidebar // }, { path: "", //no url needed as this has submenu @@ -116,40 +141,14 @@ const routes = [ className: submenuIconClasses, name: "Billing", }, - { - path: "/dapp/settings-team", // url - icon: UsersIcon, // icon component - className: submenuIconClasses, - name: "Team Members", // name that appear in Sidebar - }, + // { + // path: "/dapp/settings-team", // url + // icon: UsersIcon, // icon component + // className: submenuIconClasses, + // name: "Team Members", // name that appear in Sidebar + // }, ], }, - // { - // path: "", //no url needed as this has submenu - // icon: DocumentTextIcon, // icon component - // className: `${iconClasses} inline`, - // name: "Documentation", // name that appear in Sidebar - // submenu: [ - // { - // path: "/dapp/getting-started", // url - // icon: DocumentTextIcon, // icon component - // className: submenuIconClasses, - // name: "Getting Started", // name that appear in Sidebar - // }, - // { - // path: "/dapp/features", - // icon: TableCellsIcon, - // className: submenuIconClasses, - // name: "Features", - // }, - // { - // path: "/dapp/components", - // icon: CodeBracketSquareIcon, - // className: submenuIconClasses, - // name: "Components", - // }, - // ], - // }, ]; -export default routes; +// export default routes; diff --git a/packages/nextjs/components/dash-wind/utils/globalConstantUtil.ts b/packages/nextjs/components/dash-wind/utils/globalConstantUtil.ts index c35c340..e647342 100644 --- a/packages/nextjs/components/dash-wind/utils/globalConstantUtil.ts +++ b/packages/nextjs/components/dash-wind/utils/globalConstantUtil.ts @@ -1,6 +1,7 @@ export const MODAL_BODY_TYPES = Object.freeze({ USER_DETAIL: "USER_DETAIL", LEAD_ADD_NEW: "LEAD_ADD_NEW", + EMPLOYEE_ADD_NEW: "EMPLOYEE_ADD_NEW", CONFIRMATION: "CONFIRMATION", DEFAULT: "", }); diff --git a/packages/nextjs/components/web-3-crew/types/Employee.ts b/packages/nextjs/components/web-3-crew/types/Employee.ts new file mode 100644 index 0000000..f1aff1c --- /dev/null +++ b/packages/nextjs/components/web-3-crew/types/Employee.ts @@ -0,0 +1,13 @@ +// import moment from "moment"; +import { Address } from "viem"; + +export interface Employee { + name: string; + avatar: string; + email: string; + id: string; + wallet: Address; + role: string; + joinedOn: string; + lastActive: string; +} diff --git a/packages/nextjs/pages/dapp/leads.tsx b/packages/nextjs/pages/dapp/leads.tsx deleted file mode 100644 index 8cfdebc..0000000 --- a/packages/nextjs/pages/dapp/leads.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { ReactElement } from "react"; -import type { NextPageWithLayout } from "../_app"; -import Leads from "~~/components/dash-wind/pages/protected/Leads"; -// import { MetaHeader } from "~~/components/MetaHeader"; -import DashLayout from "~~/components/layouts/DashLayout"; - -{ - /* Look into MetaHeader - should it be moved to _app.tsx ??? */ -} - -const DappDashboard: NextPageWithLayout = () => { - return ; -}; - -DappDashboard.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default DappDashboard; From b1c27f20965b68408eafad0d355a3d7e6fdb7c20 Mon Sep 17 00:00:00 2001 From: Spencer Schoeneman Date: Wed, 6 Dec 2023 14:46:34 -0600 Subject: [PATCH 4/8] edit component to allow for left/right controle of topSideButtons --- .../components/dash-wind/components/Cards/TitleCard.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/nextjs/components/dash-wind/components/Cards/TitleCard.tsx b/packages/nextjs/components/dash-wind/components/Cards/TitleCard.tsx index 58f0e38..8209aad 100644 --- a/packages/nextjs/components/dash-wind/components/Cards/TitleCard.tsx +++ b/packages/nextjs/components/dash-wind/components/Cards/TitleCard.tsx @@ -6,9 +6,10 @@ interface props { children: ReactNode; topMargin?: string; TopSideButtons?: JSX.Element; + topSideButtonsLeft?: boolean; } -function TitleCard({ title, children, topMargin, TopSideButtons }: props) { +function TitleCard({ title, children, topMargin, TopSideButtons, topSideButtonsLeft }: props) { return (
{/* Title for Card */} @@ -16,7 +17,11 @@ function TitleCard({ title, children, topMargin, TopSideButtons }: props) { {title} {/* Top side button, show only if present */} - {TopSideButtons &&
{TopSideButtons}
} + {TopSideButtons && ( +
+ {TopSideButtons} +
+ )}
From 78c8bbafceb31d5036b33c0da4b64811a2d8e819 Mon Sep 17 00:00:00 2001 From: Spencer Schoeneman Date: Wed, 6 Dec 2023 14:51:21 -0600 Subject: [PATCH 5/8] edit sidebar/routes, add sidebar routes for admin vs employee, add employees page, add employee profile page/view/edit --- .../dash-wind/containers/LeftSidebar.tsx | 22 ++- .../dash-wind/features/employees/index.tsx | 127 ++++++++++++++++++ .../dash-wind/pages/protected/Employees.tsx | 16 +++ .../protected/employee/EmployeeProfile.tsx | 16 +++ .../employeeProfile/EmployeeProfile.tsx | 68 ++++++++++ .../components/EditProfile.tsx | 71 ++++++++++ .../components/ProfileAttribute.tsx | 16 +++ .../components/ViewProfile.tsx | 45 +++++++ packages/nextjs/pages/dapp/employee/[id].tsx | 23 ++++ packages/nextjs/pages/dapp/employees.tsx | 19 +++ 10 files changed, 420 insertions(+), 3 deletions(-) create mode 100644 packages/nextjs/components/dash-wind/features/employees/index.tsx create mode 100644 packages/nextjs/components/dash-wind/pages/protected/Employees.tsx create mode 100644 packages/nextjs/components/dash-wind/pages/protected/employee/EmployeeProfile.tsx create mode 100644 packages/nextjs/components/web-3-crew/employeeProfile/EmployeeProfile.tsx create mode 100644 packages/nextjs/components/web-3-crew/employeeProfile/components/EditProfile.tsx create mode 100644 packages/nextjs/components/web-3-crew/employeeProfile/components/ProfileAttribute.tsx create mode 100644 packages/nextjs/components/web-3-crew/employeeProfile/components/ViewProfile.tsx create mode 100644 packages/nextjs/pages/dapp/employee/[id].tsx create mode 100644 packages/nextjs/pages/dapp/employees.tsx diff --git a/packages/nextjs/components/dash-wind/containers/LeftSidebar.tsx b/packages/nextjs/components/dash-wind/containers/LeftSidebar.tsx index 3cd8106..14212be 100644 --- a/packages/nextjs/components/dash-wind/containers/LeftSidebar.tsx +++ b/packages/nextjs/components/dash-wind/containers/LeftSidebar.tsx @@ -1,14 +1,22 @@ /* eslint-disable @next/next/no-img-element */ // import Image from "next/image"; +// import { useEffect } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; -import routes from "../routes/sidebar"; +import { adminRoutes, userRoutes } from "../routes/sidebar"; import SidebarSubmenu from "./SidebarSubmenu"; +import { MyState, useMySelector } from "~~/components/dash-wind/app/store"; // import XMarkIcon from "@heroicons/react/24/outline/XMarkIcon"; function LeftSidebar() { const router = useRouter(); + const { isAdmin } = useMySelector((state: MyState) => state.auth); + + const routes = isAdmin ? adminRoutes : userRoutes; + // useEffect(() => { + + // }, [isAdmin]) // const close = () => { // document.getElementById("left-sidebar-drawer")?.click(); @@ -39,9 +47,17 @@ function LeftSidebar() { ) : ( - + {} {route.name} - {router.pathname === route.path ? ( + {router.pathname === route.path || + (route.path === "/dapp/employees" && /\/employee\/./i.test(router.pathname)) ? (