diff --git a/src/client/dd-hub-react/src/layouts/nav-config-dashboard.tsx b/src/client/dd-hub-react/src/layouts/nav-config-dashboard.tsx index 8ea2cd3..46e2778 100644 --- a/src/client/dd-hub-react/src/layouts/nav-config-dashboard.tsx +++ b/src/client/dd-hub-react/src/layouts/nav-config-dashboard.tsx @@ -39,10 +39,15 @@ export const navData = [ icon: icon('ic-cart'), }, { - title: 'User Manager', + title: 'SignFlow', path: '/user', icon: icon('ic-user'), }, + { + title: 'ChartFlow', + path: '/chart-flow', + icon: icon('ic-user'), + }, { title: 'Sign in', path: '/sign-in', diff --git a/src/client/dd-hub-react/src/pages/charts.tsx b/src/client/dd-hub-react/src/pages/charts.tsx new file mode 100644 index 0000000..4a09e64 --- /dev/null +++ b/src/client/dd-hub-react/src/pages/charts.tsx @@ -0,0 +1,20 @@ +import { CONFIG } from 'src/config-global'; + +import { ChartsView } from 'src/sections/charts/view'; + +// ---------------------------------------------------------------------- + +export default function Page() { + return ( + <> + {`Dashboard - ${CONFIG.appName}`} + + + + < ChartsView/> + + ); +} diff --git a/src/client/dd-hub-react/src/pages/dashboard.tsx b/src/client/dd-hub-react/src/pages/dashboard.tsx index 90516c2..79ecb85 100644 --- a/src/client/dd-hub-react/src/pages/dashboard.tsx +++ b/src/client/dd-hub-react/src/pages/dashboard.tsx @@ -1,6 +1,6 @@ import { CONFIG } from 'src/config-global'; -import { OverviewAnalyticsView as DashboardView, OverviewAnalyticsView } from 'src/sections/overview/view'; +import { OverviewAnalyticsView } from 'src/sections/overview/view'; // ---------------------------------------------------------------------- diff --git a/src/client/dd-hub-react/src/routes/sections.tsx b/src/client/dd-hub-react/src/routes/sections.tsx index ede9fc7..4a38c75 100644 --- a/src/client/dd-hub-react/src/routes/sections.tsx +++ b/src/client/dd-hub-react/src/routes/sections.tsx @@ -19,6 +19,7 @@ export const SignInPage = lazy(() => import('src/pages/sign-in')); export const ProductsPage = lazy(() => import('src/pages/products')); export const Page404 = lazy(() => import('src/pages/page-not-found')); export const DocumentSearch = lazy(() => import('src/pages/doc-search')); +export const ChartFlowPage = lazy(() => import('src/pages/charts')); const renderFallback = () => ( }, { path: 'user', element: }, { path: 'blog', element: }, + { path: 'chart-flow', element: }, ], }, { diff --git a/src/client/dd-hub-react/src/sections/charts/analytics-conversion-rates.tsx b/src/client/dd-hub-react/src/sections/charts/analytics-conversion-rates.tsx new file mode 100644 index 0000000..7b8e737 --- /dev/null +++ b/src/client/dd-hub-react/src/sections/charts/analytics-conversion-rates.tsx @@ -0,0 +1,82 @@ +import type { CardProps } from '@mui/material/Card'; +import type { ChartOptions } from 'src/components/chart'; + +import Card from '@mui/material/Card'; +import CardHeader from '@mui/material/CardHeader'; +import { useTheme, alpha as hexAlpha } from '@mui/material/styles'; + +import { fNumber } from 'src/utils/format-number'; + +import { Chart, useChart } from 'src/components/chart'; + +// ---------------------------------------------------------------------- + +type Props = CardProps & { + title?: string; + subheader?: string; + chart: { + colors?: string[]; + categories?: string[]; + series: { + name: string; + data: number[]; + }[]; + options?: ChartOptions; + }; +}; + +export function AnalyticsConversionRates({ title, subheader, chart, sx, ...other }: Props) { + const theme = useTheme(); + + const chartColors = chart.colors ?? [ + theme.palette.primary.dark, + hexAlpha(theme.palette.primary.dark, 0.24), + ]; + + const chartOptions = useChart({ + colors: chartColors, + stroke: { width: 2, colors: ['transparent'] }, + tooltip: { + shared: true, + intersect: false, + y: { + formatter: (value: number) => fNumber(value), + title: { formatter: (seriesName: string) => `${seriesName}: ` }, + }, + }, + xaxis: { categories: chart.categories }, + dataLabels: { + enabled: true, + offsetX: -6, + style: { fontSize: '10px', colors: ['#FFFFFF', theme.palette.text.primary] }, + }, + plotOptions: { + bar: { + horizontal: true, + borderRadius: 2, + barHeight: '48%', + dataLabels: { position: 'top' }, + }, + }, + ...chart.options, + }); + + return ( + + + + + + ); +} diff --git a/src/client/dd-hub-react/src/sections/charts/analytics-current-subject.tsx b/src/client/dd-hub-react/src/sections/charts/analytics-current-subject.tsx new file mode 100644 index 0000000..87dc344 --- /dev/null +++ b/src/client/dd-hub-react/src/sections/charts/analytics-current-subject.tsx @@ -0,0 +1,73 @@ +import type { CardProps } from '@mui/material/Card'; +import type { ChartOptions } from 'src/components/chart'; + +import Card from '@mui/material/Card'; +import Divider from '@mui/material/Divider'; +import { useTheme } from '@mui/material/styles'; +import CardHeader from '@mui/material/CardHeader'; + +import { Chart, useChart, ChartLegends } from 'src/components/chart'; + +// ---------------------------------------------------------------------- + +type Props = CardProps & { + title?: string; + subheader?: string; + chart: { + colors?: string[]; + categories: string[]; + series: { + name: string; + data: number[]; + }[]; + options?: ChartOptions; + }; +}; + +export function AnalyticsCurrentSubject({ title, subheader, chart, sx, ...other }: Props) { + const theme = useTheme(); + + const chartColors = chart.colors ?? [ + theme.palette.primary.main, + theme.palette.warning.main, + theme.palette.info.main, + ]; + + const chartOptions = useChart({ + colors: chartColors, + stroke: { width: 2 }, + fill: { opacity: 0.48 }, + xaxis: { + categories: chart.categories, + labels: { style: { colors: Array.from({ length: 6 }, () => theme.palette.text.secondary) } }, + }, + ...chart.options, + }); + + return ( + + + + + + + + item.name)} + colors={chartOptions?.colors} + sx={{ p: 3, justifyContent: 'center' }} + /> + + ); +} diff --git a/src/client/dd-hub-react/src/sections/charts/analytics-current-visits.tsx b/src/client/dd-hub-react/src/sections/charts/analytics-current-visits.tsx new file mode 100644 index 0000000..c607796 --- /dev/null +++ b/src/client/dd-hub-react/src/sections/charts/analytics-current-visits.tsx @@ -0,0 +1,81 @@ +import type { CardProps } from '@mui/material/Card'; +import type { ChartOptions } from 'src/components/chart'; + +import Card from '@mui/material/Card'; +import Divider from '@mui/material/Divider'; +import { useTheme } from '@mui/material/styles'; +import CardHeader from '@mui/material/CardHeader'; + +import { fNumber } from 'src/utils/format-number'; + +import { Chart, useChart, ChartLegends } from 'src/components/chart'; + +// ---------------------------------------------------------------------- + +type Props = CardProps & { + title?: string; + subheader?: string; + chart: { + colors?: string[]; + series: { + label: string; + value: number; + }[]; + options?: ChartOptions; + }; +}; + +export function AnalyticsCurrentVisits({ title, subheader, chart, sx, ...other }: Props) { + const theme = useTheme(); + + const chartSeries = chart.series.map((item) => item.value); + + const chartColors = chart.colors ?? [ + theme.palette.primary.main, + theme.palette.warning.light, + theme.palette.info.dark, + theme.palette.error.main, + ]; + + const chartOptions = useChart({ + chart: { sparkline: { enabled: true } }, + colors: chartColors, + labels: chart.series.map((item) => item.label), + stroke: { width: 0 }, + dataLabels: { enabled: true, dropShadow: { enabled: false } }, + tooltip: { + y: { + formatter: (value: number) => fNumber(value), + title: { formatter: (seriesName: string) => `${seriesName}` }, + }, + }, + plotOptions: { pie: { donut: { labels: { show: false } } } }, + ...chart.options, + }); + + return ( + + + + + + + + + + ); +} diff --git a/src/client/dd-hub-react/src/sections/charts/analytics-news.tsx b/src/client/dd-hub-react/src/sections/charts/analytics-news.tsx new file mode 100644 index 0000000..3b377a9 --- /dev/null +++ b/src/client/dd-hub-react/src/sections/charts/analytics-news.tsx @@ -0,0 +1,103 @@ +import type { BoxProps } from '@mui/material/Box'; +import type { CardProps } from '@mui/material/Card'; + +import Box from '@mui/material/Box'; +import Link from '@mui/material/Link'; +import Card from '@mui/material/Card'; +import Button from '@mui/material/Button'; +import Avatar from '@mui/material/Avatar'; +import CardHeader from '@mui/material/CardHeader'; +import ListItemText from '@mui/material/ListItemText'; + +import { fToNow } from 'src/utils/format-time'; + +import { Iconify } from 'src/components/iconify'; +import { Scrollbar } from 'src/components/scrollbar'; + +// ---------------------------------------------------------------------- + +type Props = CardProps & { + title?: string; + subheader?: string; + list: { + id: string; + title: string; + coverUrl: string; + description: string; + postedAt: string | number | null; + }[]; +}; + +export function AnalyticsNews({ title, subheader, list, sx, ...other }: Props) { + return ( + + + + + + {list.map((item) => ( + + ))} + + + + + + + + ); +} + +// ---------------------------------------------------------------------- + +type ItemProps = BoxProps & { + item: Props['list'][number]; +}; + +function Item({ item, sx, ...other }: ItemProps) { + return ( + ({ + py: 2, + px: 3, + gap: 2, + display: 'flex', + alignItems: 'center', + borderBottom: `dashed 1px ${theme.vars.palette.divider}`, + }), + ...(Array.isArray(sx) ? sx : [sx]), + ]} + {...other} + > + + + {item.title}} + secondary={item.description} + slotProps={{ + primary: { noWrap: true }, + secondary: { + noWrap: true, + sx: { mt: 0.5 }, + }, + }} + /> + + + {fToNow(item.postedAt)} + + + ); +} diff --git a/src/client/dd-hub-react/src/sections/charts/analytics-order-timeline.tsx b/src/client/dd-hub-react/src/sections/charts/analytics-order-timeline.tsx new file mode 100644 index 0000000..9abb88a --- /dev/null +++ b/src/client/dd-hub-react/src/sections/charts/analytics-order-timeline.tsx @@ -0,0 +1,77 @@ +import type { CardProps } from '@mui/material/Card'; +import type { TimelineItemProps } from '@mui/lab/TimelineItem'; + +import Card from '@mui/material/Card'; +import Timeline from '@mui/lab/Timeline'; +import TimelineDot from '@mui/lab/TimelineDot'; +import Typography from '@mui/material/Typography'; +import CardHeader from '@mui/material/CardHeader'; +import TimelineContent from '@mui/lab/TimelineContent'; +import TimelineSeparator from '@mui/lab/TimelineSeparator'; +import TimelineConnector from '@mui/lab/TimelineConnector'; +import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem'; + +import { fDateTime } from 'src/utils/format-time'; + +// ---------------------------------------------------------------------- + +type Props = CardProps & { + title?: string; + subheader?: string; + list: { + id: string; + type: string; + title: string; + time: string | number | null; + }[]; +}; + +export function AnalyticsOrderTimeline({ title, subheader, list, sx, ...other }: Props) { + return ( + + + + + {list.map((item, index) => ( + + ))} + + + ); +} + +// ---------------------------------------------------------------------- + +type ItemProps = TimelineItemProps & { + lastItem: boolean; + item: Props['list'][number]; +}; + +function Item({ item, lastItem, ...other }: ItemProps) { + return ( + + + + {lastItem ? null : } + + + + {item.title} + + + {fDateTime(item.time)} + + + + ); +} diff --git a/src/client/dd-hub-react/src/sections/charts/analytics-tasks.tsx b/src/client/dd-hub-react/src/sections/charts/analytics-tasks.tsx new file mode 100644 index 0000000..5accf38 --- /dev/null +++ b/src/client/dd-hub-react/src/sections/charts/analytics-tasks.tsx @@ -0,0 +1,179 @@ +import type { BoxProps } from '@mui/material/Box'; +import type { CardProps } from '@mui/material/Card'; + +import { useState } from 'react'; +import { usePopover } from 'minimal-shared/hooks'; + +import Box from '@mui/material/Box'; +import Card from '@mui/material/Card'; +import Stack from '@mui/material/Stack'; +import Popover from '@mui/material/Popover'; +import Divider from '@mui/material/Divider'; +import MenuList from '@mui/material/MenuList'; +import Checkbox from '@mui/material/Checkbox'; +import IconButton from '@mui/material/IconButton'; +import CardHeader from '@mui/material/CardHeader'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import MenuItem, { menuItemClasses } from '@mui/material/MenuItem'; + +import { Iconify } from 'src/components/iconify'; +import { Scrollbar } from 'src/components/scrollbar'; + +// ---------------------------------------------------------------------- + +type Props = CardProps & { + title?: string; + subheader?: string; + list: { + id: string; + name: string; + }[]; +}; + +export function AnalyticsTasks({ title, subheader, list, sx, ...other }: Props) { + const [selected, setSelected] = useState(['2']); + + const handleClickComplete = (taskId: string) => { + const tasksCompleted = selected.includes(taskId) + ? selected.filter((value) => value !== taskId) + : [...selected, taskId]; + + setSelected(tasksCompleted); + }; + + return ( + + + + + } sx={{ minWidth: 560 }}> + {list.map((item) => ( + handleClickComplete(item.id)} + /> + ))} + + + + ); +} + +// ---------------------------------------------------------------------- + +type TaskItemProps = BoxProps & { + selected: boolean; + item: Props['list'][number]; + onChange: (id: string) => void; +}; + +function TaskItem({ item, selected, onChange, sx, ...other }: TaskItemProps) { + const menuActions = usePopover(); + + const handleMarkComplete = () => { + menuActions.onClose(); + console.info('MARK COMPLETE', item.id); + }; + + const handleShare = () => { + menuActions.onClose(); + console.info('SHARE', item.id); + }; + + const handleEdit = () => { + menuActions.onClose(); + console.info('EDIT', item.id); + }; + + const handleDelete = () => { + menuActions.onClose(); + console.info('DELETE', item.id); + }; + + return ( + <> + ({ + pl: 2, + pr: 1, + py: 1.5, + display: 'flex', + ...(selected && { + color: 'text.disabled', + textDecoration: 'line-through', + }), + }), + ...(Array.isArray(sx) ? sx : [sx]), + ]} + {...other} + > + + } + sx={{ flexGrow: 1, m: 0 }} + /> + + + + + + + + + + + Mark complete + + + + + Edit + + + + + Share + + + + + + + Delete + + + + + ); +} diff --git a/src/client/dd-hub-react/src/sections/charts/analytics-traffic-by-site.tsx b/src/client/dd-hub-react/src/sections/charts/analytics-traffic-by-site.tsx new file mode 100644 index 0000000..607b292 --- /dev/null +++ b/src/client/dd-hub-react/src/sections/charts/analytics-traffic-by-site.tsx @@ -0,0 +1,64 @@ +import type { CardProps } from '@mui/material/Card'; + +import { varAlpha } from 'minimal-shared/utils'; + +import Box from '@mui/material/Box'; +import Card from '@mui/material/Card'; +import CardHeader from '@mui/material/CardHeader'; +import Typography from '@mui/material/Typography'; + +import { fShortenNumber } from 'src/utils/format-number'; + +import { Iconify } from 'src/components/iconify'; + +// ---------------------------------------------------------------------- + +type Props = CardProps & { + title?: string; + subheader?: string; + list: { value: string; label: string; total: number }[]; +}; + +export function AnalyticsTrafficBySite({ title, subheader, list, sx, ...other }: Props) { + return ( + + + + {list.map((site) => ( + ({ + py: 2.5, + display: 'flex', + borderRadius: 1.5, + textAlign: 'center', + alignItems: 'center', + flexDirection: 'column', + border: `solid 1px ${varAlpha(theme.vars.palette.grey['500Channel'], 0.12)}`, + })} + > + {site.value === 'twitter' && } + {site.value === 'facebook' && } + {site.value === 'google' && } + {site.value === 'linkedin' && } + + + {fShortenNumber(site.total)} + + + + {site.label} + + + ))} + + + ); +} diff --git a/src/client/dd-hub-react/src/sections/charts/analytics-website-visits.tsx b/src/client/dd-hub-react/src/sections/charts/analytics-website-visits.tsx new file mode 100644 index 0000000..b6ea5ee --- /dev/null +++ b/src/client/dd-hub-react/src/sections/charts/analytics-website-visits.tsx @@ -0,0 +1,61 @@ +import type { CardProps } from '@mui/material/Card'; +import type { ChartOptions } from 'src/components/chart'; + +import Card from '@mui/material/Card'; +import CardHeader from '@mui/material/CardHeader'; +import { useTheme, alpha as hexAlpha } from '@mui/material/styles'; + +import { Chart, useChart } from 'src/components/chart'; + +// ---------------------------------------------------------------------- + +type Props = CardProps & { + title?: string; + subheader?: string; + chart: { + colors?: string[]; + categories?: string[]; + series: { + name: string; + data: number[]; + }[]; + options?: ChartOptions; + }; +}; + +export function AnalyticsWebsiteVisits({ title, subheader, chart, sx, ...other }: Props) { + const theme = useTheme(); + + const chartColors = chart.colors ?? [ + hexAlpha(theme.palette.primary.dark, 0.8), + hexAlpha(theme.palette.warning.main, 0.8), + ]; + + const chartOptions = useChart({ + colors: chartColors, + stroke: { width: 2, colors: ['transparent'] }, + xaxis: { categories: chart.categories }, + legend: { show: true }, + tooltip: { y: { formatter: (value: number) => `${value} visits` } }, + ...chart.options, + }); + + return ( + + + + + + ); +} diff --git a/src/client/dd-hub-react/src/sections/charts/analytics-widget-summary.tsx b/src/client/dd-hub-react/src/sections/charts/analytics-widget-summary.tsx new file mode 100644 index 0000000..efecd09 --- /dev/null +++ b/src/client/dd-hub-react/src/sections/charts/analytics-widget-summary.tsx @@ -0,0 +1,142 @@ +import type { CardProps } from '@mui/material/Card'; +import type { PaletteColorKey } from 'src/theme/core'; +import type { ChartOptions } from 'src/components/chart'; + +import { varAlpha } from 'minimal-shared/utils'; + +import Box from '@mui/material/Box'; +import Card from '@mui/material/Card'; +import { useTheme } from '@mui/material/styles'; + +import { fNumber, fPercent, fShortenNumber } from 'src/utils/format-number'; + +import { Iconify } from 'src/components/iconify'; +import { SvgColor } from 'src/components/svg-color'; +import { Chart, useChart } from 'src/components/chart'; + +// ---------------------------------------------------------------------- + +type Props = CardProps & { + title: string; + total: number; + percent: number; + color?: PaletteColorKey; + icon: React.ReactNode; + chart: { + series: number[]; + categories: string[]; + options?: ChartOptions; + }; +}; + +export function AnalyticsWidgetSummary({ + sx, + icon, + title, + total, + chart, + percent, + color = 'primary', + ...other +}: Props) { + const theme = useTheme(); + + const chartColors = [theme.palette[color].dark]; + + const chartOptions = useChart({ + chart: { sparkline: { enabled: true } }, + colors: chartColors, + xaxis: { categories: chart.categories }, + grid: { + padding: { + top: 6, + left: 6, + right: 6, + bottom: 6, + }, + }, + tooltip: { + y: { formatter: (value: number) => fNumber(value), title: { formatter: () => '' } }, + }, + markers: { + strokeWidth: 0, + }, + ...chart.options, + }); + + const renderTrending = () => ( + + + + {percent > 0 && '+'} + {fPercent(percent)} + + + ); + + return ( + ({ + p: 3, + boxShadow: 'none', + position: 'relative', + color: `${color}.darker`, + backgroundColor: 'common.white', + backgroundImage: `linear-gradient(135deg, ${varAlpha(theme.vars.palette[color].lighterChannel, 0.48)}, ${varAlpha(theme.vars.palette[color].lightChannel, 0.48)})`, + }), + ...(Array.isArray(sx) ? sx : [sx]), + ]} + {...other} + > + {icon} + + {renderTrending()} + + + + {title} + + {fShortenNumber(total)} + + + + + + + + ); +} diff --git a/src/client/dd-hub-react/src/sections/charts/view/charts-view.tsx b/src/client/dd-hub-react/src/sections/charts/view/charts-view.tsx new file mode 100644 index 0000000..f6b5afd --- /dev/null +++ b/src/client/dd-hub-react/src/sections/charts/view/charts-view.tsx @@ -0,0 +1,156 @@ +import Grid from '@mui/material/Grid'; +import Typography from '@mui/material/Typography'; + +import { DashboardContent } from 'src/layouts/dashboard'; +import { _posts, _tasks, _traffic, _timeline } from 'src/_mock'; + +import { AnalyticsNews } from '../analytics-news'; +import { AnalyticsTasks } from '../analytics-tasks'; +import { AnalyticsCurrentVisits } from '../analytics-current-visits'; +import { AnalyticsOrderTimeline } from '../analytics-order-timeline'; +import { AnalyticsWebsiteVisits } from '../analytics-website-visits'; +import { AnalyticsWidgetSummary } from '../analytics-widget-summary'; +import { AnalyticsTrafficBySite } from '../analytics-traffic-by-site'; +import { AnalyticsCurrentSubject } from '../analytics-current-subject'; +import { AnalyticsConversionRates } from '../analytics-conversion-rates'; + +// ---------------------------------------------------------------------- + +export function ChartsView() { + return ( + + + Hi, Welcome back 👋 + + + + + } + chart={{ + categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], + series: [22, 8, 35, 50, 82, 84, 77, 12], + }} + /> + + + + } + chart={{ + categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], + series: [56, 47, 40, 62, 73, 30, 23, 54], + }} + /> + + + + } + chart={{ + categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], + series: [40, 70, 50, 28, 70, 75, 7, 64], + }} + /> + + + + } + chart={{ + categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], + series: [56, 30, 23, 54, 47, 40, 62, 73], + }} + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/client/dd-hub-react/src/sections/charts/view/index.ts b/src/client/dd-hub-react/src/sections/charts/view/index.ts new file mode 100644 index 0000000..377e886 --- /dev/null +++ b/src/client/dd-hub-react/src/sections/charts/view/index.ts @@ -0,0 +1 @@ +export * from './charts-view';