Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop prateek pareek #43

Merged
merged 6 commits into from
Jul 5, 2024
Merged

Develop prateek pareek #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
401065a
campaign page added
prateek-pareek Jul 3, 2024
97f787e
fix
prateek-pareek Jul 3, 2024
9fcf1f9
fix
prateek-pareek Jul 5, 2024
72a785b
Delete text.tsx
prateek-pareek Jul 5, 2024
d2f12a8
Update create.tsx
prateek-pareek Jul 5, 2024
32f2c65
Delete yarn.lock
keyskull Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions app/campaigns/create_campaigns/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
"use client";

import React from "react";
import Layout from "@/components/ui/layout/index";
import CampaignForm from "@/components/ui/campaigns/create"
export default function Page() {
return (
<Layout>
<CampaignForm />
</Layout>
);
};
13 changes: 13 additions & 0 deletions app/campaigns/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
"use client";

import React from "react";
import Layout from "@/components/ui/layout/index";
import Campaigns from "@/components/ui/campaigns/campaigns";

export default function Page() {
return (
<Layout>
<Campaigns />
</Layout>
);
};
4 changes: 2 additions & 2 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ export default function RootLayout({
}) {
return (

<html lang="en" >
<html lang="en">
<body className="static h-full bg-gray-50">
<SessionProvider>
<NextUIProvider>
<NextThemesProvider attribute="class" defaultTheme='light'>
<main className="text-foreground bg-background">
<main className="text-foreground bg-background h-screen">
<NotificationProvider>
{children}
</NotificationProvider>
Expand Down
16 changes: 7 additions & 9 deletions app/reports/automation/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,11 @@ import React from "react";
import Layout from "@/components/ui/layout/index";

const Page: React.FC<any> = () => {
return (
<Layout>
<ScheduleAutomationPage/>
</Layout>
);
};



return (
<Layout>
<ScheduleAutomationPage />
</Layout>
);
};

export default Page
210 changes: 210 additions & 0 deletions components/ui/campaigns/campaigns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
"use client"
import { useState } from "react";
import BarListChart from "../charts/barList";
import BarChartComponent from "../charts/barChart";
import LineCharts from "../charts/lineChart";
import { data, pages, keyWords, campaignsData, BarData } from "../dummyData";
import CampaignTable from '../dashboard/table'
import { format } from 'date-fns';
import { Slider } from "@nextui-org/react";
import Link from "next/link";
const Campaigns = () => {
const [value, setValue] = useState(0);
const [startDate, setStartDate] = useState(new Date('2023-01-01').getTime());
const [endDate, setEndDate] = useState(new Date('2023-12-31').getTime());
const [filteredData, setFilteredData] = useState([]);

const handleChange = (event: React.ChangeEvent<HTMLInputElement>, isStart: boolean) => {
const newValue = +event;
if (isStart) {
setValue(newValue);
} else {
setValue(newValue);
}
filterData(newValue)
};


const formatDate = (timestamp: number) => {
return format(new Date(timestamp), 'MM/dd/yyyy');
};
const monthMilliseconds = 30.44 * 24 * 60 * 60 * 1000;

const filterData = (selectedDate: number) => {
const filtered: any = data.filter(entry => {
const entryDate = new Date(entry.filterDate.replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3')).getTime();
return entryDate >= selectedDate && entryDate <= endDate;
});
setFilteredData(filtered);
};

const NavigateToCreate = () => {

}

return (
<div>
<div>
<div>
<div className="h-px bg-gray-300 justify-between" />
<div className="flex justify-between items-center mt-4 mb-4">
<h1 className="text-3xl font-bold">Campaigns</h1>
<Link
className="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
href="/campaigns/create_campaigns"
>
Create New Campaign
</Link>
</div>
<div className="h-px bg-gray-200 mb-4" />
<p className="text-xl mb-8">Welcome, Xue!</p>
</div>
</div>
<div>
<div className="mb-4 w-1/3 flex items-center mx-auto">
<label htmlFor="startDateLabel" className="mr-2">{formatDate(value)}</label>
<Slider
id="startDateLabel"
minValue={startDate}
maxValue={endDate}
step={monthMilliseconds}
value={value}
defaultValue={[startDate, endDate]}
onChange={(event: any) => handleChange(event, true)}
aria-label={formatDate(value)}
classNames={{
base: "max-w-md",
filler: "bg-orange-500"
}}

/>
<label htmlFor="startDateLabel" className="ml-2">{formatDate(new Date().getTime())}</label>
</div>
<div className="grid grid-cols-4 gap-2">
<LineCharts
title="View Through Rates"
subTitle="$231"
data={filteredData.length ? filteredData : data}
categories={['Google']}
colors={['blue']}
showLegend={true}
showYAxis={true}
startEndOnly={false}
/>
<LineCharts
title="Avg CPC"
subTitle="$231"
data={filteredData.length ? filteredData : data}
categories={['Google']}
colors={['blue']}

showLegend={true}
showYAxis={true}
startEndOnly={false}
/>
<LineCharts
title="Clicks"
subTitle="231"
data={filteredData.length ? filteredData : data}
categories={['Google']}
colors={['blue']}
showLegend={true}
showYAxis={true}
startEndOnly={false}
/>
<LineCharts
title="Conversion Rate"
subTitle="99%"
data={filteredData.length ? filteredData : data}
categories={['Google']}
colors={['blue']}
showLegend={true}
showYAxis={true}
startEndOnly={false}
/>
</div>
<div className="grid grid-cols-4 gap-2 mt-4">
<LineCharts
title="Connection"
subTitle="1,231"
data={filteredData.length ? filteredData : data}
categories={['Google']}
colors={['blue']}
showLegend={true}
showYAxis={true}
startEndOnly={false}
/>
<LineCharts
title="Cost"
subTitle="$300.15"
data={filteredData.length ? filteredData : data}
categories={['Google']}
colors={['blue']}

showLegend={true}
showYAxis={true}
startEndOnly={false}
/>
<LineCharts
title="Cost/Conversion"
subTitle="$231"
data={filteredData.length ? filteredData : data}
categories={['Google']}
colors={['blue']}
showLegend={true}
showYAxis={true}
startEndOnly={false}
/>
<LineCharts
title="Impression"
subTitle="923"
data={filteredData.length ? filteredData : data}
categories={['Google']}
colors={['blue']}
showLegend={true}
showYAxis={true}
startEndOnly={false}
/>
</div>
<div className="grid grid-cols-2 gap-4 mt-8">
<div className="bg-white shadow-md rounded-lg p-4">
<h2 className="text-xl font-bold text-gray-800 mb-2">
Top Channels
</h2>
<h5 className="mb-4">
By Connections ,Revenue ,Speed
</h5>
<CampaignTable campaigns={campaignsData} />
</div>
<BarListChart
title="Top KeyWords"
data={keyWords}
cardClassName="w-full"
initialExtended={false}
maxCollapsedHeight="max-h-[300px]"
/>

</div>
<div className="grid grid-cols-2 gap-4 mt-8">
<BarListChart
title="Top Pages"
data={pages}
cardClassName="w-full"
initialExtended={false}
maxCollapsedHeight="max-h-[300px]"
/>
<BarChartComponent
data={BarData}
index="age"
categories={['This Year']}
colors={['blue']}
yAxisWidth={49}
className="my-custom-chart"
/>
</div>
</div>
</div>
);
};

export default Campaigns;
Loading
Loading