Scaffold-ETH
diff --git a/packages/nextjs/components/dash-wind/app/auth.ts b/packages/nextjs/components/dash-wind/app/auth.ts
new file mode 100644
index 0000000..a8e4e33
--- /dev/null
+++ b/packages/nextjs/components/dash-wind/app/auth.ts
@@ -0,0 +1,43 @@
+import axios, { AxiosError, AxiosResponse } from "axios";
+
+const checkAuth = () => {
+ /* Getting token value stored in localstorage, if token is not present we will open login page
+ for all internal dashboard routes */
+ const TOKEN = localStorage.getItem("token");
+ const PUBLIC_ROUTES = ["login", "forgot-password", "register", "documentation"];
+
+ const isPublicPage = PUBLIC_ROUTES.some(r => window.location.href.includes(r));
+
+ if (!TOKEN && !isPublicPage) {
+ window.location.href = "/login";
+ return;
+ } else {
+ axios.defaults.headers.common["Authorization"] = `Bearer ${TOKEN}`;
+
+ axios.interceptors.request.use(
+ function (config) {
+ // UPDATE: Add this code to show global loading indicator
+ document.body.classList.add("loading-indicator");
+ return config;
+ },
+ function (error: AxiosError) {
+ return Promise.reject(error);
+ },
+ );
+
+ axios.interceptors.response.use(
+ function (response: AxiosResponse) {
+ // UPDATE: Add this code to hide global loading indicator
+ document.body.classList.remove("loading-indicator");
+ return response;
+ },
+ function (error: AxiosError) {
+ document.body.classList.remove("loading-indicator");
+ return Promise.reject(error);
+ },
+ );
+ return TOKEN;
+ }
+};
+
+export default checkAuth;
diff --git a/packages/nextjs/components/dash-wind/app/init.ts b/packages/nextjs/components/dash-wind/app/init.ts
new file mode 100644
index 0000000..f713b85
--- /dev/null
+++ b/packages/nextjs/components/dash-wind/app/init.ts
@@ -0,0 +1,20 @@
+import axios from "axios";
+
+const initializeApp = () => {
+ // Setting base URL for all API request via axios
+ axios.defaults.baseURL = process.env.REACT_APP_BASE_URL;
+
+ if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
+ // dev code
+ } else {
+ // Prod build code
+
+ // Removing console.log from prod
+ // console.log = () => {};
+ console.log = () => null;
+
+ // init analytics here
+ }
+};
+
+export default initializeApp;
diff --git a/packages/nextjs/components/dash-wind/app/store.ts b/packages/nextjs/components/dash-wind/app/store.ts
new file mode 100644
index 0000000..c5b1657
--- /dev/null
+++ b/packages/nextjs/components/dash-wind/app/store.ts
@@ -0,0 +1,62 @@
+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 { Reducer, ThunkAction, configureStore } from "@reduxjs/toolkit";
+import { createWrapper } from "next-redux-wrapper";
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import { Action } from "redux";
+
+interface CombinedReducer {
+ header: Reducer<{
+ pageTitle: string;
+ noOfNotifications: number;
+ newNotificationMessage: string;
+ newNotificationStatus: number;
+ }>;
+ rightDrawer: Reducer<{
+ header: string;
+ isOpen: boolean;
+ bodyType: string;
+ extraObject: Record
;
+ }>;
+ modal: Reducer<{
+ title: string;
+ isOpen: boolean;
+ bodyType: string;
+ size: string;
+ extraObject: Record;
+ }>;
+ lead: Reducer<{
+ isLoading: boolean;
+ leads: never[];
+ }>;
+}
+
+const combinedReducer: CombinedReducer = {
+ header: headerSlice,
+ rightDrawer: rightDrawerSlice,
+ modal: modalSlice,
+ lead: leadsSlice,
+};
+
+// export default configureStore({
+// reducer: combinedReducer,
+// });
+const store = configureStore({
+ reducer: combinedReducer,
+});
+
+// const makeStore = context => store;
+const makeStore = () => store;
+
+export type MyStore = ReturnType;
+export type MyState = ReturnType;
+export type MyDispatch = MyStore["dispatch"];
+// export type MyDispatch = typeof store.dispatch;
+export type MyThunk = ThunkAction;
+
+export const useMyDispatch = () => useDispatch();
+export const useMySelector: TypedUseSelectorHook = useSelector;
+
+export const wrapper = createWrapper(makeStore);
diff --git a/packages/nextjs/components/dash-wind/components/CalendarView/index.tsx b/packages/nextjs/components/dash-wind/components/CalendarView/index.tsx
new file mode 100644
index 0000000..e52bef1
--- /dev/null
+++ b/packages/nextjs/components/dash-wind/components/CalendarView/index.tsx
@@ -0,0 +1,178 @@
+import { useEffect, useState } from "react";
+import { CalendarDetails, CalendarEvents } from "../../types/CalendarTypes";
+import { getTheme } from "./util";
+import moment from "moment";
+import ChevronLeftIcon from "@heroicons/react/24/solid/ChevronLeftIcon";
+import ChevronRightIcon from "@heroicons/react/24/solid/ChevronRightIcon";
+
+interface props {
+ calendarEvents: CalendarEvents;
+ addNewEvent: (date: moment.Moment) => void;
+ openDayDetail: (detail: CalendarDetails) => void;
+}
+
+const CalendarView: React.FC = ({ calendarEvents, addNewEvent, openDayDetail }) => {
+ const today = moment().startOf("day");
+ const weekdays = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
+ const colStartClasses = [
+ "",
+ "col-start-2",
+ "col-start-3",
+ "col-start-4",
+ "col-start-5",
+ "col-start-6",
+ "col-start-7",
+ ];
+
+ const [firstDayOfMonth, setFirstDayOfMonth] = useState(moment().startOf("month"));
+ const [events, setEvents] = useState<[] | CalendarEvents>([]);
+ const [, setCurrMonth] = useState(() => moment(today).format("MMM-yyyy"));
+
+ useEffect(() => {
+ setEvents(calendarEvents);
+ }, [calendarEvents]);
+
+ const allDaysInMonth = () => {
+ const start: moment.Moment = moment(firstDayOfMonth).startOf("week");
+ const end: moment.Moment = moment(moment(firstDayOfMonth).endOf("month")).endOf("week");
+ const days: moment.Moment[] = [];
+ let day: moment.Moment = start;
+ while (day <= end) {
+ days.push(day);
+ day = day.clone().add(1, "d");
+ }
+ return days;
+ };
+
+ const getEventsForCurrentDate = (date: moment.Moment): CalendarEvents => {
+ let filteredEvents = events.filter(e => {
+ if ("startTime" in e) {
+ return moment(date).isSame(moment(e.startTime), "day");
+ }
+ return false;
+ });
+ if (filteredEvents.length > 2) {
+ const originalLength = filteredEvents.length;
+ filteredEvents = filteredEvents.slice(0, 2);
+ filteredEvents.push({ title: `${originalLength - 2} more`, theme: "MORE" });
+ }
+ return filteredEvents;
+ };
+
+ const openAllEventsDetail = (date: moment.Moment, theme: string) => {
+ if (theme != "MORE") return 1;
+ const filteredEvents = events
+ .filter(e => {
+ if ("startTime" in e) {
+ return moment(date).isSame(moment(e.startTime), "day");
+ }
+ return false;
+ })
+ .map(e => {
+ return { title: e.title, theme: e.theme };
+ });
+ openDayDetail({ filteredEvents, title: moment(date).format("D MMM YYYY") });
+ };
+
+ const isToday = (date: moment.Moment) => {
+ return moment(date).isSame(moment(), "day");
+ };
+
+ const isDifferentMonth = (date: moment.Moment) => {
+ return moment(date).month() != moment(firstDayOfMonth).month();
+ };
+
+ // const getPrevMonth = (event) => {
+ const getPrevMonth = () => {
+ const firstDayOfPrevMonth = moment(firstDayOfMonth).add(-1, "M").startOf("month");
+ setFirstDayOfMonth(firstDayOfPrevMonth);
+ setCurrMonth(moment(firstDayOfPrevMonth).format("MMM-yyyy"));
+ };
+
+ // const getCurrentMonth = (event) => {
+ const getCurrentMonth = () => {
+ const firstDayOfCurrMonth = moment().startOf("month");
+ setFirstDayOfMonth(firstDayOfCurrMonth);
+ setCurrMonth(moment(firstDayOfCurrMonth).format("MMM-yyyy"));
+ };
+
+ // const getNextMonth = (event: any) => {
+ const getNextMonth = () => {
+ const firstDayOfNextMonth = moment(firstDayOfMonth).add(1, "M").startOf("month");
+ setFirstDayOfMonth(firstDayOfNextMonth);
+ setCurrMonth(moment(firstDayOfNextMonth).format("MMM-yyyy"));
+ };
+
+ return (
+ <>
+
+
+
+
+ {moment(firstDayOfMonth).format("MMMM yyyy").toString()}
+ Beta
+
+
+
+
+
+ Current Month
+
+
+
+
+
+ addNewEvent}>
+ Add New Event
+
+
+
+
+
+ {weekdays.map((day, key) => {
+ return (
+
+ {day}
+
+ );
+ })}
+
+
+
+ {allDaysInMonth().map((day, idx) => {
+ return (
+
+
addNewEvent(day)}
+ >
+ {" "}
+ {moment(day).format("D")}
+
+ {getEventsForCurrentDate(day).map((e, k) => {
+ return (
+
openAllEventsDetail(day, e.theme)}
+ className={`text-xs px-2 mt-1 truncate ${getTheme(e.theme) || ""}`}
+ // className={`text-xs px-2 mt-1 truncate ${THEME_BG[e.theme] || ""}`}
+ >
+ {e.title}
+
+ );
+ })}
+
+ );
+ })}
+
+
+ {/* Title for Card */}
+
+ {title}
+
+ {/* Top side button, show only if present */}
+ {TopSideButtons && {TopSideButtons}
}
+
+
+
+
+ {/** Card Body */}
+
{children}
+
+
+ {labelTitle}
+
+
+ );
+}
+
+export default InputText;
diff --git a/packages/nextjs/components/dash-wind/components/Input/SearchBar.tsx b/packages/nextjs/components/dash-wind/components/Input/SearchBar.tsx
new file mode 100644
index 0000000..4b3d463
--- /dev/null
+++ b/packages/nextjs/components/dash-wind/components/Input/SearchBar.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+interface props {
+ searchText?: string;
+ styleClass?: string;
+ placeholderText?: string;
+ setSearchText: React.Dispatch>;
+}
+
+function SearchBar({ searchText, styleClass, placeholderText, setSearchText }: props) {
+ function updateSearchInput(value: string) {
+ setSearchText(value);
+ }
+
+ return (
+
+
+
+
+
+
+ {labelTitle}
+ {labelDescription && (
+
+
+ )}
+
+
+
updateValue(e.target.value)}>
+
+ {placeholder}
+
+ {options.map((o, k) => {
+ return (
+
+ {o.name}
+
+ );
+ })}
+
+
+
+ {labelTitle}
+
+
+
+ );
+}
+
+export default TextAreaInput;
diff --git a/packages/nextjs/components/dash-wind/components/Input/ToggleInput.tsx b/packages/nextjs/components/dash-wind/components/Input/ToggleInput.tsx
new file mode 100644
index 0000000..c23b0ec
--- /dev/null
+++ b/packages/nextjs/components/dash-wind/components/Input/ToggleInput.tsx
@@ -0,0 +1,44 @@
+// NOTE: Original file was names "ToogleInput"
+import { useState } from "react";
+
+interface props {
+ labelTitle?: string;
+ labelStyle?: string;
+ // type: ;
+ containerStyle?: string;
+ defaultValue?: boolean;
+ // placeholder: ;
+ placeholder?: string;
+ updateFormValue: ({ updateType, value }: { updateType: any; value: any }) => void;
+ updateType?: string;
+}
+
+function ToggleInput({
+ labelTitle,
+ labelStyle,
+ // type,
+ containerStyle,
+ defaultValue,
+ // placeholder,
+ updateFormValue,
+ updateType,
+}: props) {
+ const [value, setValue] = useState(defaultValue);
+
+ const updateToggleValue = () => {
+ setValue(!value);
+ updateFormValue({ updateType, value: !value });
+ };
+
+ return (
+
+
+ {labelTitle}
+
+
+ );
+}
+
+export default ToggleInput;
diff --git a/packages/nextjs/components/dash-wind/components/Typography/ErrorText.tsx b/packages/nextjs/components/dash-wind/components/Typography/ErrorText.tsx
new file mode 100644
index 0000000..eb233e9
--- /dev/null
+++ b/packages/nextjs/components/dash-wind/components/Typography/ErrorText.tsx
@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+interface props {
+ styleClass: string;
+ children: ReactNode;
+}
+
+function ErrorText({ styleClass, children }: props) {
+ return {children}
;
+}
+
+export default ErrorText;
diff --git a/packages/nextjs/components/dash-wind/components/Typography/HelperText.tsx b/packages/nextjs/components/dash-wind/components/Typography/HelperText.tsx
new file mode 100644
index 0000000..dd36725
--- /dev/null
+++ b/packages/nextjs/components/dash-wind/components/Typography/HelperText.tsx
@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+interface props {
+ className: string;
+ children: ReactNode;
+}
+
+function HelperText({ className, children }: props) {
+ return {children}
;
+}
+
+export default HelperText;
diff --git a/packages/nextjs/components/dash-wind/components/Typography/Subtitle.tsx b/packages/nextjs/components/dash-wind/components/Typography/Subtitle.tsx
new file mode 100644
index 0000000..251beec
--- /dev/null
+++ b/packages/nextjs/components/dash-wind/components/Typography/Subtitle.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+interface props {
+ styleClass: string;
+ children: ReactNode;
+}
+function Subtitle({ styleClass, children }: props) {
+ return {children}
;
+}
+
+export default Subtitle;
diff --git a/packages/nextjs/components/dash-wind/components/Typography/Title.tsx b/packages/nextjs/components/dash-wind/components/Typography/Title.tsx
new file mode 100644
index 0000000..ca691ca
--- /dev/null
+++ b/packages/nextjs/components/dash-wind/components/Typography/Title.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { ReactNode } from "react";
+
+interface props {
+ className: string;
+ children: ReactNode;
+}
+
+function Title({ className, children }: props) {
+ return {children}
;
+}
+
+export default Title;
diff --git a/packages/nextjs/components/dash-wind/containers/Header.tsx b/packages/nextjs/components/dash-wind/containers/Header.tsx
new file mode 100644
index 0000000..221d2f3
--- /dev/null
+++ b/packages/nextjs/components/dash-wind/containers/Header.tsx
@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from "react";
+// import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { openRightDrawer } from "../features/common/rightDrawerSlice";
+import { RIGHT_DRAWER_TYPES } from "../utils/globalConstantUtil";
+import { themeChange } from "theme-change";
+import Bars3Icon from "@heroicons/react/24/outline/Bars3Icon";
+import BellIcon from "@heroicons/react/24/outline/BellIcon";
+import MoonIcon from "@heroicons/react/24/outline/MoonIcon";
+import SunIcon from "@heroicons/react/24/outline/SunIcon";
+import UserIcon from "@heroicons/react/24/outline/UserIcon";
+import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store";
+
+function Header() {
+ const dispatch = useMyDispatch();
+ const { noOfNotifications, pageTitle } = useMySelector((state: MyState) => state.header);
+ const [currentTheme, setCurrentTheme] = useState(
+ typeof window !== "undefined" ? localStorage.getItem("theme") : null,
+ );
+ const router = useRouter();
+
+ useEffect(() => {
+ themeChange(false);
+ if (currentTheme === null) {
+ if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+ setCurrentTheme("dark");
+ } else {
+ setCurrentTheme("light");
+ }
+ }
+ // 👆 false parameter is required for react project
+ }, [currentTheme]);
+
+ // Opening right sidebar for notification
+ const openNotification = () => {
+ dispatch(openRightDrawer({ header: "Notifications", bodyType: RIGHT_DRAWER_TYPES.NOTIFICATION }));
+ };
+
+ function logoutUser() {
+ if (typeof window !== "undefined") {
+ localStorage.clear();
+ }
+ router.push("/");
+ }
+
+ return (
+ <>
+
+ {/* Menu toogle for mobile view or small screen */}
+
+
+
+
{pageTitle}
+
+
+
+ {/* Multiple theme selection, uncomment this if you want to enable multiple themes selection,
+ also includes corporate and retro themes in tailwind.config file */}
+
+ {/*
+ Theme
+ Default
+ Dark
+ Corporate
+ Retro
+ */}
+
+ {/* Light and dark theme selection toggle **/}
+
+
+
+ {/* Notification icon */}
+
openNotification()}>
+
+ {noOfNotifications}
+ ) : null}
+
+
+
+ {/* Profile icon, opening menu on click */}
+
+
+
+
+
+
+
+ New
+
+
+
+
+
+
+ Logout
+
+
+
+
+
+ DashWind
+ {" "}
+