Merge branch 'develop-prateek-pareek' of https://github.com/prateek-p…

…areek/frontend-web-ad into prateek-pareek-develop-prateek-pareek
Mi-Tech-Consulting · Jul 3, 2024 · e062744 · e062744
2 parents d29f3de + 8e9b885
commit e062744
Show file tree

Hide file tree

Showing 23 changed files with 2,620 additions and 429 deletions.
diff --git a/app/(root)/dashboard/page.tsx b/app/(root)/dashboard/page.tsx
@@ -1,16 +1,14 @@
 "use client";
 
 import React from "react";
-import DashBoard from "@/components/ui/dashboard/index";
-import DashboardChart from "@/components/ui/dashboard/charts";
+import Layout from "@/components/ui/layout/index";
+import Dashboard from "@/components/ui/dashboard/dashboard";
 
 export default function Page() {
   return (
-    <React.Fragment>
-      <DashBoard>
-        <DashboardChart />
-      </DashBoard>
-    </React.Fragment>
+        <Layout>
+          <Dashboard />
+        </Layout>
   );
 };
 
diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -1,16 +1,14 @@
 "use client";
 
 import React from "react";
-import DashBoard from "@/components/ui/dashboard/index";
-import DashboardChart from "@/components/ui/dashboard/charts";
+import Layout from "@/components/ui/layout/index";
+import Dashboard from "@/components/ui/dashboard/dashboard";
 
 export default function Page() {
   return (
-    <React.Fragment>
-      <DashBoard>
-        <DashboardChart />
-      </DashBoard>
-    </React.Fragment>
+        <Layout>
+          <Dashboard />
+        </Layout>
   );
 };
 
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
@@ -0,0 +1,38 @@
+import '../(root)/globals.css';
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+import { Analytics } from '@vercel/analytics/react';
+import { SessionProvider } from 'next-auth/react';
+import { SpeedInsights } from "@vercel/speed-insights/next"
+import { NextUIProvider } from '@nextui-org/react';
+// import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { NotificationProvider } from '@/components/ui/NotificationContext';
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+
+    <html lang="en" >
+      <body className="static h-full bg-gray-50">
+        <SessionProvider>
+          <NextUIProvider>
+            {/* <NextThemesProvider attribute="class" defaultTheme='light'> */}
+              <main className="text-foreground bg-background">
+                <NotificationProvider>
+                    {children}
+                  </NotificationProvider>
+              </main>
+              <Analytics />
+              <SpeedInsights />
+            {/* </NextThemesProvider> */}
+          </NextUIProvider>
+        </SessionProvider>
+      </body>
+    </html>
+
+  )
+}
diff --git a/app/reports/automation/page.tsx b/app/reports/automation/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+import ScheduleAutomationPage from "@/components/ui/report/automation/automation"
+import React from "react";
+import Layout from "@/components/ui/layout/index";
+
+const Page: React.FC<any> = () => {
+    return (
+          <Layout>
+            <ScheduleAutomationPage/>
+          </Layout>
+    );
+  };
+
+
+
+  export default Page
diff --git a/app/reports/import/page.tsx b/app/reports/import/page.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import React from "react";
+import Layout from "@/components/ui/layout/index";
+import ImportPage from "@/components/ui/report/import/import";
+
+const Page: React.FC<any> = () => {
+  return (
+        <Layout>
+          <ImportPage/>
+        </Layout>
+  );
+};
+
+
+
+export default Page
diff --git a/app/reports/layout.tsx b/app/reports/layout.tsx
@@ -0,0 +1,38 @@
+import '../globals.css';
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+import { Analytics } from '@vercel/analytics/react';
+import { SessionProvider } from 'next-auth/react';
+import { SpeedInsights } from "@vercel/speed-insights/next"
+import { NextUIProvider } from '@nextui-org/react';
+// import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { NotificationProvider } from '@/components/ui/NotificationContext';
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+
+    <html lang="en" >
+      <body className="static h-full bg-gray-50">
+        <SessionProvider>
+          <NextUIProvider>
+            {/* <NextThemesProvider attribute="class" defaultTheme='light'> */}
+              <main className="text-foreground bg-background">
+                <NotificationProvider>
+                    {children}
+                  </NotificationProvider>
+              </main>
+              <Analytics />
+              <SpeedInsights />
+            {/* </NextThemesProvider> */}
+          </NextUIProvider>
+        </SessionProvider>
+      </body>
+    </html>
+
+  )
+}
diff --git a/app/reports/page.tsx b/app/reports/page.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import React from "react";
+import Layout from "@/components/ui/layout/index";
+import Report from "@/components/ui/report/report";
+
+const Page: React.FC<any> = () => {
+  return (
+        <Layout>
+          <Report/>
+        </Layout>
+  );
+};
+
+
+
+export default Page
diff --git a/components/ui/NotificationContext.tsx b/components/ui/NotificationContext.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import React, { createContext, useContext, useState, ReactNode, useEffect } from 'react';
+import { toast, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import Cookies from 'js-cookie';
+
+interface NotificationContextProps {
+  notify: (message: string) => void;
+}
+
+const NotificationContext = createContext<NotificationContextProps | undefined>(undefined);
+
+export const useNotification = () => {
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error('useNotification must be used within a NotificationProvider');
+  }
+  return context;
+};
+
+export function NotificationProvider({ children }: { children: ReactNode }) {
+  const [message, setMessage] = useState<string | null>(null);
+
+  const notify = (message: string) => {
+    setMessage(message);
+    Cookies.set('notification', message);
+  };
+
+  useEffect(() => {
+    const message = Cookies.get('notification');
+    if (message) {
+      toast.success(message);
+      Cookies.remove('notification');
+    }
+  }, []);
+
+  return (
+    <NotificationContext.Provider value={{ notify }}>
+      {children}
+      <ToastContainer />
+    </NotificationContext.Provider>
+  );
+};
diff --git a/components/ui/dashboard/barChart.tsx → components/ui/charts/barChart.tsx b/components/ui/dashboard/barChart.tsx → components/ui/charts/barChart.tsx
@@ -3,29 +3,36 @@ import { BarChart, Card, Divider } from '@tremor/react';
 
 interface BarChartProps {
     data: { [key: string]: any }[];
-    indexKey?: string;
-    categoryKeys?: string[];
+    index?: string;
+    title?: string;
+    categories?: string[];
     colors?: string[];
     valueFormatter?: (number: number) => string;
     yAxisWidth?: number;
     className?: string;
 }
 
 const BarChartComponent: React.FC<BarChartProps> = ({
+    title = "",
     data,
-    indexKey = 'age',
-    categoryKeys = ['This Year'],
+    index = 'age',
+    categories = ['This Year'],
     colors = ['blue'],
     valueFormatter,
     yAxisWidth = 45,
     className = '',
 }) => {
     return (
         <Card className={`sm:mx-auto sm:max-w-2xl ${className}`}>
+            <div className="flex items-center justify-between border-b border-tremor-border p-6 dark:border-dark-tremor-border">
+                <p className="font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">
+                    {title}
+                </p>
+            </div>
             <BarChart
                 data={data}
-                index={indexKey}
-                categories={categoryKeys}
+                index={index}
+                categories={categories}
                 colors={colors}
                 valueFormatter={valueFormatter}
                 yAxisWidth={yAxisWidth}

diff --git a/components/ui/dashboard/barList.tsx → components/ui/charts/barList.tsx b/components/ui/dashboard/barList.tsx → components/ui/charts/barList.tsx
@@ -17,8 +17,7 @@ interface BarListChartProps {
     buttonClassName?: string;
 }
 
-const defaultFormatter = (number: number | bigint) =>
-    `${Intl.NumberFormat('us').format(number).toString()}`;
+const defaultFormatter = (number: number | bigint) => { return number };
 
 const BarListChart: React.FC<BarListChartProps> = ({
     title = 'Top Destination Url',

diff --git a/components/ui/charts/donutChart.tsx b/components/ui/charts/donutChart.tsx
@@ -0,0 +1,55 @@
+
+import { Card, DonutChart, List, ListItem } from '@tremor/react';
+
+const currencyFormatter = (number: any) => {
+    return number
+};
+function classNames(...classes: any) { return classes.filter(Boolean).join(' '); }
+
+export default function Example(props: any) {
+    return (
+        <>
+            <Card className="sm:mx-auto sm:max-w-lg">
+                <h3 className="text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">
+                    {props.title}
+                </h3>
+                <DonutChart
+                    className="mt-8"
+                    data={props?.data}
+                    category="total"
+                    index="name"
+                    variant="pie"
+                    valueFormatter={currencyFormatter}
+                    showTooltip={true}
+                    showLabel={true}
+                />
+                <p className="mt-8 flex items-center justify-between text-tremor-label text-tremor-content dark:text-dark-tremor-content">
+                    <span>Category</span>
+                    <span>Total/Share</span>
+                </p>
+                <List className="mt-2">
+                    {props.data.map((item: any) => (
+                        <ListItem key={item.name} className="space-x-6">
+                            <div className="flex items-center space-x-2.5 truncate">
+                                <span
+                                    className={classNames(item.color, 'h-2.5 w-2.5 shrink-0 rounded-sm',)}
+                                    aria-hidden={true}
+                                />
+                                <span className="truncate dark:text-dark-tremor-content-emphasis">
+                                    {item.name}
+                                    {(item?.amount)?.toFixed(2)}
+                                </span>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                                <span className="rounded-tremor-small bg-tremor-background-subtle px-1.5 py-0.5 text-tremor-label font-medium tabular-nums text-tremor-content-emphasis dark:bg-dark-tremor-background-subtle dark:text-dark-tremor-content-emphasis">
+                                    {(item?.total)?.toFixed(2)}/{item.share}
+                                </span>
+                            </div>
+                        </ListItem>
+                    ))}
+                </List>
+            </Card>
+        </>
+    );
+}
+
diff --git a/components/ui/dashboard/lineChart.tsx → components/ui/charts/lineChart.tsx b/components/ui/dashboard/lineChart.tsx → components/ui/charts/lineChart.tsx
@@ -9,7 +9,7 @@ interface DataPoint {
 interface LineChartsProps {
     title?: string;
     subTitle?: string;
-    data: DataPoint[];
+    data: any;
     categories?: string[];
     colors?: string[];
     valueFormatter?: (number: number | bigint) => string;
@@ -19,14 +19,15 @@ interface LineChartsProps {
     cardClassName?: string;
     chartClassName?: string;
     index?: string;
+    props?: any
 }
 
-const defaultFormatter = (number: number | bigint) => 
+const defaultFormatter = (number: number | bigint) =>
     `${Intl.NumberFormat('us').format(number).toString()}`;
 
 const LineCharts: React.FC<LineChartsProps> = ({
     title = '',
-    subTitle="",
+    subTitle = "",
     data,
     categories = ['Organic'],
     colors = ['blue'],
@@ -36,7 +37,8 @@ const LineCharts: React.FC<LineChartsProps> = ({
     startEndOnly = true,
     cardClassName = 'sm:mx-auto sm:max-w-md text-center',
     chartClassName = 'mt-6 h-32',
-    index="date"
+    index = "date",
+    props
 }) => {
     return (
         <Card className={cardClassName}>
@@ -47,6 +49,7 @@ const LineCharts: React.FC<LineChartsProps> = ({
                 {subTitle}
             </h3>
             <LineChart
+                {...props}
                 data={data}
                 index={index}
                 categories={categories}