Skip to content

S
sweepstake
Commit d87de86c by Arjun Jhukal
Options

udpated the new page activity log and wrapped the verify opt

parent 5f71d5ca
Showing with 168 additions and 29 deletions
src/app/(auth)/verify-email/page.tsx
......@@ -54,7 +54,7 @@ function VerifyEmailContent() {
variant="contained"
color="primary"
className="!mb-6"
onClick={() => router.replace(PATH.DASHBOARD.ROOT)}
onClick={() => router.replace(PATH.AUTH.LOGIN.ROOT)}
>
Verify now
</Button>
......
src/app/(auth)/verify-otp/page.tsx
// import VerifyOTPPage from '@/components/pages/auth/VerifyOtp'
import GlobalLoading from '@/components/organism/GlobalLoading'
import VerifyOTPPage from '@/components/pages/auth/VerifyOtp'
import React from 'react'
import React, { Suspense } from 'react'
export default function VerifyOTP() {
return (
<VerifyOTPPage />
<Suspense fallback={<GlobalLoading />}>
<VerifyOTPPage />
</Suspense>
)
}
src/app/(dashboard)/(admin)/activity-log/page.tsx 0 → 100644
import ActivityLogPage from '@/components/pages/dashboard/adminDashboard/activityLog'
import React from 'react'
export default function ActivityLog() {
return (
<ActivityLogPage />
)
}
src/components/molecules/TableHeader.tsx
// import { Button, IconButton, InputAdornment, OutlinedInput, useMediaQuery } from "@mui/material";
// import SelectField from "../atom/SelectField";
// import { DocumentDownload, SearchNormal } from "@wandersonalwes/iconsax-react";
// interface TableHeaderProps {
// search: string;
// setSearch?: (value: string) => void;
// filterMethod?: string;
// setFilterMethod?: (value: string) => void;
// onDownloadCSV: () => void;
// }
// export default function TableHeader({
// search,
// setSearch,
// filterMethod,
// setFilterMethod,
// onDownloadCSV,
// }: TableHeaderProps) {
// const downMD = useMediaQuery((theme) => theme.breakpoints.down('md'));
// return (
// <div className="table__header p-4 mb-4 flex justify-between">
// <div className="inpute__field relative">
// <OutlinedInput
// placeholder="Search keywords..."
// name="search"
// id="search"
// value={search}
// onChange={(e) => setSearch && setSearch(e.target.value)}
// startAdornment={
// <InputAdornment position="start">
// <IconButton edge="start">
// <SearchNormal size={20} />
// </IconButton>
// </InputAdornment>
// }
// />
// </div>
// {filterMethod ? <div className="header-right flex justify-end items-center gap-2">
// <SelectField
// name="search"
// value={filterMethod}
// onChange={(e) => setFilterMethod && setFilterMethod(e.target.value)}
// options={[
// { value: "all", name: "All Method" },
// { value: "crypto", name: "Crypto" },
// { value: "paypal", name: "USD/Paypal" },
// ]}
// />
// </div> : ""}
// <Button
// startIcon={
// !downMD && <DocumentDownload size={16} />
// }
// onClick={onDownloadCSV} sx={{
// borderRadius: "8px",
// border: "1px solid var(--Gray, #E0E0E3)",
// padding: "8px 16px",
// color: "#0E0E11",
// maxWidth: "fit-content",
// }}>{downMD ? <DocumentDownload size={16} /> : "Download CSV"}</Button>
// </div>
// );
// }
import { Button, IconButton, InputAdornment, OutlinedInput, useMediaQuery } from "@mui/material";
import SelectField from "../atom/SelectField";
import { DocumentDownload, SearchNormal } from "@wandersonalwes/iconsax-react";
interface FilterOption {
value: string;
label: string;
}
interface TableHeaderProps {
search: string;
setSearch?: (value: string) => void;
filterMethod?: string;
setFilterMethod?: (value: string) => void;
filterOptions?: FilterOption[];
onDownloadCSV: () => void;
}
......@@ -15,11 +86,13 @@ export default function TableHeader({
setSearch,
filterMethod,
setFilterMethod,
filterOptions,
onDownloadCSV,
}: TableHeaderProps) {
const downMD = useMediaQuery((theme) => theme.breakpoints.down('md'));
const downMD = useMediaQuery((theme: any) => theme.breakpoints.down('md'));
return (
<div className="table__header p-4 mb-4 flex justify-between">
<div className="table__header p-4 mb-4 flex justify-between items-center gap-4">
<div className="inpute__field relative">
<OutlinedInput
placeholder="Search keywords..."
......@@ -36,29 +109,34 @@ export default function TableHeader({
}
/>
</div>
{filterMethod ? <div className="header-right flex justify-end items-center gap-2">
<SelectField
name="search"
value={filterMethod}
onChange={(e) => setFilterMethod && setFilterMethod(e.target.value)}
options={[
{ value: "all", name: "All Method" },
{ value: "crypto", name: "Crypto" },
{ value: "paypal", name: "USD/Paypal" },
]}
/>
</div> : ""}
<Button
startIcon={
!downMD && <DocumentDownload size={16} />
}
onClick={onDownloadCSV} sx={{
borderRadius: "8px",
border: "1px solid var(--Gray, #E0E0E3)",
padding: "8px 16px",
color: "#0E0E11",
maxWidth: "fit-content",
}}>{downMD ? <DocumentDownload size={16} /> : "Download CSV"}</Button>
<div className="header-right flex justify-end items-center gap-2">
{filterMethod && filterOptions && (
<SelectField
name="filter"
value={filterMethod}
onChange={(e) => setFilterMethod && setFilterMethod(e.target.value)}
options={filterOptions.map(option => ({
value: option.value,
name: option.label
}))}
/>
)}
<Button
startIcon={!downMD && <DocumentDownload size={16} />}
onClick={onDownloadCSV}
sx={{
borderRadius: "8px",
border: "1px solid var(--Gray, #E0E0E3)",
padding: "8px 16px",
color: "#0E0E11",
maxWidth: "fit-content",
}}
>
{downMD ? <DocumentDownload size={16} /> : "Download CSV"}
</Button>
</div>
</div>
);
}
}
\ No newline at end of file
src/components/organism/Sidebar/AdminSidebar/index.tsx
......@@ -9,6 +9,7 @@ import {
ListItemText,
} from "@mui/material";
import {
Activity,
ArrangeHorizontalCircle,
Game,
HambergerMenu,
......@@ -81,6 +82,12 @@ export default function AdminMenu({ open }: { open: boolean }) {
href: PATH.ADMIN.SETTINGS.ROOT,
active: pathname.startsWith(PATH.ADMIN.SETTINGS.ROOT),
},
{
label: "Activity",
icon: <Activity size={18} />,
href: PATH.ADMIN.ACTIVITY.ROOT,
active: pathname.startsWith(PATH.ADMIN.ACTIVITY.ROOT),
},
];
const [glassStyle, setGlassStyle] = React.useState({ top: 0, height: 0, opacity: 0 });
......
src/components/pages/dashboard/adminDashboard/activityLog/ActivityAnalyticCard.tsx 0 → 100644
import { Dash } from '@wandersonalwes/iconsax-react'
import React from 'react'
export default function ActivityAnalyticCard() {
return (
<div className="bg-white rounded-lg shadow-sm p-4 border-l-4 border-blue-500">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-gray-600">Total Activities</p>
<p className="text-2xl font-bold text-gray-900">{12}</p>
</div>
<Dash className="w-8 h-8 text-blue-500" />
</div>
</div>
)
}
src/components/pages/dashboard/adminDashboard/activityLog/index.tsx 0 → 100644
import React from 'react'
import ActivityAnalyticCard from './ActivityAnalyticCard'
import Activities from './Activities'
import PageHeader from '@/components/molecules/PageHeader'
export default function ActivityLogPage() {
return (
<section className="activity__log__root">
<PageHeader title='Activity Log' />
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mb-8">
{Array.from({ length: 4 }).map((_, index) => (
<ActivityAnalyticCard key={index.toString()} />
))}
</div>
<div className="section-title mb-4">
<h2 className="text-[20px] leading-[140%] font-[600]">
All Activities
</h2>
</div>
<Activities />
</section>
)
}
src/routes/PATH.ts
......@@ -47,6 +47,9 @@ export const PATH = {
SETTINGS: {
ROOT: "/settings"
},
ACTIVITY: {
ROOT: "/activity-log"
},
PAGES: {
ROOT: "/pages",
ADD_PAGE: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment