;
20 |
21 | // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
22 | export const Default: Story = {
23 | args: {},
24 | };
25 |
--------------------------------------------------------------------------------
/src/components/ContactForm/ContactForm.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Col, Form, FormProps, Input, Row } from 'antd';
2 | import { SendOutlined } from '@ant-design/icons';
3 | import { useStylesContext } from '../../context';
4 |
5 | const { TextArea } = Input;
6 |
7 | type Props = FormProps;
8 |
9 | export const ContactForm = ({ ...others }: Props) => {
10 | const stylesContext = useStylesContext();
11 |
12 | return (
13 |
14 |
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/components/Container/Container.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | CSSProperties,
3 | HTMLProps,
4 | ReactNode,
5 | useEffect,
6 | useState,
7 | } from 'react';
8 | import { useMediaQuery } from 'react-responsive';
9 |
10 | type ContainerProps = {
11 | children: ReactNode;
12 | style?: CSSProperties;
13 | } & HTMLProps;
14 |
15 | export const Container = ({ children, style, ...others }: ContainerProps) => {
16 | const [containerWidth, setContainerWidth] = useState();
17 | const isMedium = useMediaQuery({ minWidth: 769 }),
18 | isLarge = useMediaQuery({ minWidth: 992 }),
19 | isXLarge = useMediaQuery({ minWidth: 1200 }),
20 | isXXLarge = useMediaQuery({ minWidth: 1400 });
21 |
22 | useEffect(() => {
23 | // sort from large to small devices
24 | if (isXXLarge) {
25 | setContainerWidth('1320px');
26 | } else if (isXLarge) {
27 | setContainerWidth('1140px');
28 | } else if (isLarge) {
29 | setContainerWidth('960px');
30 | } else if (isMedium) {
31 | setContainerWidth('720px');
32 | } else {
33 | setContainerWidth('100%');
34 | }
35 | }, [isLarge, isXLarge, isXXLarge, isMedium]);
36 |
37 | return (
38 |
46 | {children}
47 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/Container/index.ts:
--------------------------------------------------------------------------------
1 | export { Container } from './Container.tsx';
2 |
--------------------------------------------------------------------------------
/src/components/EmployeeCard/EmployeeCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { EmployeeCard } from './EmployeeCard.tsx';
4 |
5 | const DATA = {
6 | employee_id: '24e4e64c-bf09-459f-8cea-f9d2de99d15b',
7 | title: 'Mrs',
8 | first_name: 'Eugen',
9 | middle_name: 'Pål',
10 | last_name: 'Tiltman',
11 | avatar:
12 | 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=400&q=60',
13 | role: 'Operator',
14 | age: 28,
15 | email: 'etiltman0@dailymail.co.uk',
16 | country: 'Indonesia',
17 | favorite_color: 'gray',
18 | hire_date: '4/9/2017',
19 | salary: 92877.67,
20 | };
21 |
22 | const meta = {
23 | title: 'Components/Employee',
24 | component: EmployeeCard,
25 | parameters: {
26 | layout: 'centered',
27 | },
28 | tags: ['autodocs'],
29 | } satisfies Meta;
30 |
31 | export default meta;
32 |
33 | type Story = StoryObj;
34 |
35 | export const Default: Story = {
36 | args: {
37 | data: DATA,
38 | style: { width: 400 },
39 | },
40 | };
41 |
42 | export const Expanded: Story = {
43 | args: {
44 | data: DATA,
45 | showInfo: true,
46 | style: { width: 400 },
47 | },
48 | };
49 |
--------------------------------------------------------------------------------
/src/components/EmployeeCard/EmployeeCard.tsx:
--------------------------------------------------------------------------------
1 | import { Employee } from '../../types';
2 | import { Card as AntdCard, CardProps, Flex, Typography } from 'antd';
3 |
4 | const { Meta } = AntdCard;
5 |
6 | type Props = {
7 | data: Employee;
8 | showInfo?: boolean;
9 | } & CardProps;
10 |
11 | export const EmployeeCard = ({ data, showInfo, ...others }: Props) => {
12 | const {
13 | avatar,
14 | first_name,
15 | middle_name,
16 | last_name,
17 | role,
18 | age,
19 | country,
20 | title,
21 | email,
22 | hire_date,
23 | } = data;
24 |
25 | return (
26 |
40 | {role}
41 | {showInfo && (
42 | <>
43 | Email: {email}
44 | Country: {country}
45 | Age: {age}
46 | Join date: {hire_date}
47 |
48 | )}
49 |
50 |
51 | );
52 | };
53 |
--------------------------------------------------------------------------------
/src/components/FaqCollapse/FaqCollapse.tsx:
--------------------------------------------------------------------------------
1 | import { Collapse, CollapseProps } from 'antd';
2 |
3 | type Props = CollapseProps;
4 |
5 | export const FaqCollapse = ({ ...others }: Props) => {
6 | return
38 | {children}
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/components/Loader/Loader.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Loader } from './Loader.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Loader',
7 | component: Loader,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {},
19 | };
20 |
--------------------------------------------------------------------------------
/src/components/Loader/Loader.tsx:
--------------------------------------------------------------------------------
1 | import { Spin, theme } from 'antd';
2 |
3 | import './styles.css';
4 |
5 | export const Loader = () => {
6 | const {
7 | token: { borderRadius },
8 | } = theme.useToken();
9 |
10 | return (
11 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/src/components/Loader/styles.css:
--------------------------------------------------------------------------------
1 | .loader-container {
2 | text-align: center;
3 | background: rgba(0, 0, 0, 0.05);
4 | }
5 |
6 | .content {
7 | padding: 50px;
8 | }
9 |
--------------------------------------------------------------------------------
/src/components/Logo/Logo.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { withRouter } from 'storybook-addon-react-router-v6';
3 |
4 | import { Logo } from './Logo.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Logo',
8 | component: Logo,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | decorators: [withRouter],
14 | } satisfies Meta;
15 |
16 | export default meta;
17 |
18 | type Story = StoryObj;
19 |
20 | export const Black: Story = {
21 | args: {
22 | color: 'black',
23 | },
24 | };
25 |
26 | export const White: Story = {
27 | args: {
28 | color: 'white',
29 | bgColor: 'black',
30 | },
31 | };
32 |
33 | export const AsLink: Story = {
34 | args: {
35 | color: 'black',
36 | asLink: true,
37 | },
38 | };
39 |
40 | export const CustomImageHeight: Story = {
41 | args: {
42 | color: 'black',
43 | imgSize: {
44 | h: 36,
45 | },
46 | },
47 | };
48 |
--------------------------------------------------------------------------------
/src/components/Logo/Logo.tsx:
--------------------------------------------------------------------------------
1 | import { Flex, FlexProps, theme, Typography } from 'antd';
2 | import { Link } from 'react-router-dom';
3 | import { CSSProperties } from 'react';
4 |
5 | import './styles.css';
6 |
7 | type LogoProps = {
8 | color: CSSProperties['color'];
9 | imgSize?: {
10 | h?: number | string;
11 | w?: number | string;
12 | };
13 | asLink?: boolean;
14 | href?: string;
15 | bgColor?: CSSProperties['backgroundColor'];
16 | } & Partial;
17 |
18 | export const Logo = ({
19 | asLink,
20 | color,
21 | href,
22 | imgSize,
23 | bgColor,
24 | ...others
25 | }: LogoProps) => {
26 | const {
27 | token: { borderRadius },
28 | } = theme.useToken();
29 |
30 | return asLink ? (
31 |
33 |
49 | Antd Admin
50 |
51 |
52 |
53 | ) : (
54 |
55 |
71 | Antd Admin
72 |
73 |
74 | );
75 | };
76 |
--------------------------------------------------------------------------------
/src/components/Logo/styles.css:
--------------------------------------------------------------------------------
1 | .logo-link {
2 | text-decoration: none;
3 | }
4 |
5 | .logo-link:hover,
6 | .logo-link:focus {
7 | text-decoration: underline;
8 | }
9 |
--------------------------------------------------------------------------------
/src/components/MoreMenu/MoreMenu.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { MoreMenu } from './MoreMenu.tsx';
4 |
5 | const meta = {
6 | title: 'Components/More menu',
7 | component: MoreMenu,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {},
19 | };
20 |
--------------------------------------------------------------------------------
/src/components/MoreMenu/MoreMenu.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Dropdown, MenuProps } from 'antd';
2 | import {
3 | DeleteOutlined,
4 | ExpandOutlined,
5 | MinusOutlined,
6 | MoreOutlined,
7 | SyncOutlined,
8 | } from '@ant-design/icons';
9 |
10 | const items: MenuProps['items'] = [
11 | {
12 | label: 'Expand',
13 | key: '1',
14 | icon:
37 |
38 | More
40 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/src/components/NotificationsCard/Notifications.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import NotificationsData from '../../../public/mocks/Notifications.json';
3 |
4 | import { NotificationsCard } from './NotificationsCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Notifications/List',
8 | component: NotificationsCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | } satisfies Meta;
13 |
14 | export default meta;
15 |
16 | type Story = StoryObj;
17 |
18 | export const Default: Story = {
19 | args: {
20 | data: NotificationsData.slice(0, 10),
21 | style: { width: 500 },
22 | },
23 | };
24 |
25 | export const Loading: Story = {
26 | args: {
27 | loading: true,
28 | style: { width: 500 },
29 | },
30 | };
31 |
32 | export const Error: Story = {
33 | args: {
34 | error: 'Error fetching items',
35 | style: { width: 500 },
36 | },
37 | };
38 |
39 | export const Empty: Story = {
40 | args: {
41 | data: [],
42 | style: { width: 500 },
43 | },
44 | };
45 |
--------------------------------------------------------------------------------
/src/components/NotificationsCard/NotificationsCard.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, Button, CardProps, List } from 'antd';
2 | import { Card, Loader, NotificationsItem } from '../index.ts';
3 | import { Notifications } from '../../types';
4 |
5 | import './styles.css';
6 |
7 | type Props = {
8 | data?: Notifications[];
9 | loading?: boolean;
10 | error?: any;
11 | } & CardProps;
12 |
13 | export const NotificationsCard = ({
14 | data,
15 | loading,
16 | error,
17 | ...others
18 | }: Props) => {
19 | return (
20 | View all}
23 | className="card notifications-list-card"
24 | {...others}
25 | >
26 | {error ? (
27 | {
41 | console.log(page);
42 | },
43 | pageSize: 5,
44 | align: 'center',
45 | }}
46 | dataSource={data}
47 | renderItem={(item) => (
48 |
49 |
51 | )}
52 | />
53 | )}
54 |
55 | );
56 | };
57 |
--------------------------------------------------------------------------------
/src/components/NotificationsCard/styles.css:
--------------------------------------------------------------------------------
1 | .notifications-list-card .ant-card-body {
2 | padding: 0 0 1rem 0;
3 | }
4 |
5 | .available-tucks-card .ant-list-item {
6 | /*padding: 0;*/
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/NotificationsItem/NotificationsItem.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { NotificationsItem } from './NotificationsItem.tsx';
4 |
5 | const DATA = {
6 | notification_id: 'dcffd2c4-63d7-4b70-88c2-e079fc7cde6f',
7 | user_id: '8956a7fd-070b-4dea-85fe-e0af167f2200',
8 | user: 'Cheston Crich',
9 | notification_type: 'text',
10 | notification_date: '5/15/2022',
11 | notification_message:
12 | 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
13 | is_read: false,
14 | is_deleted: true,
15 | notification_category: 'Announcements',
16 | notification_image:
17 | 'https://robohash.org/essevelvoluptas.png?size=50x50&set=set1',
18 | color: 'pink',
19 | };
20 |
21 | const meta = {
22 | title: 'Components/Notifications/Item',
23 | component: NotificationsItem,
24 | parameters: {
25 | layout: 'centered',
26 | },
27 | tags: ['autodocs'],
28 | } satisfies Meta;
29 |
30 | export default meta;
31 |
32 | type Story = StoryObj;
33 |
34 | export const Default: Story = {
35 | args: {
36 | data: DATA,
37 | style: { width: 500 },
38 | },
39 | };
40 |
--------------------------------------------------------------------------------
/src/components/NotificationsItem/NotificationsItem.tsx:
--------------------------------------------------------------------------------
1 | import { Notifications } from '../../types';
2 | import { Avatar, Flex, FlexProps, Tag, Typography } from 'antd';
3 | import {
4 | ContainerOutlined,
5 | MailOutlined,
6 | PhoneOutlined,
7 | } from '@ant-design/icons';
8 |
9 | type Props = {
10 | data: Notifications;
11 | } & Omit;
12 |
13 | export const NotificationsItem = ({ data, ...others }: Props) => {
14 | const {
15 | notification_type,
16 | notification_category,
17 | notification_image,
18 | notification_date,
19 | notification_message,
20 | color,
21 | } = data;
22 |
23 | return (
24 |
25 |
27 |
28 |
29 | {notification_message.slice(0, 30)}...
30 |
31 |
47 |
48 |
49 | {notification_category}
50 |
51 | {notification_date}
52 |
53 |
54 |
55 | );
56 | };
57 |
--------------------------------------------------------------------------------
/src/components/Nprogress/Bar.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | animationDuration: number;
3 | progress: number;
4 | };
5 |
6 | export const Bar = ({ animationDuration, progress }: Props) => (
7 |
33 | );
34 |
--------------------------------------------------------------------------------
/src/components/Nprogress/Container.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | type Props = {
4 | animationDuration: number;
5 | isFinished: boolean;
6 | children: ReactNode;
7 | };
8 |
9 | export const NContainer = ({
10 | animationDuration,
11 | children,
12 | isFinished,
13 | }: Props) => (
14 |
21 | {children}
22 |
23 | );
24 |
--------------------------------------------------------------------------------
/src/components/Nprogress/Progress.tsx:
--------------------------------------------------------------------------------
1 | import { useNProgress } from '@tanem/react-nprogress';
2 | import { NContainer } from './Container.tsx';
3 | import { Bar } from './Bar.tsx';
4 | import { NSpinner } from './Spinner.tsx';
5 |
6 | type Props = {
7 | isAnimating?: boolean;
8 | };
9 |
10 | export const NProgress = ({ isAnimating }: Props) => {
11 | const { animationDuration, isFinished, progress } = useNProgress({
12 | isAnimating,
13 | });
14 |
15 | return (
16 |
17 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/components/Nprogress/Spinner.tsx:
--------------------------------------------------------------------------------
1 | import './spinner.css';
2 |
3 | export const NSpinner = () => (
4 |
27 | );
28 |
--------------------------------------------------------------------------------
/src/components/Nprogress/index.ts:
--------------------------------------------------------------------------------
1 | export { Bar } from './Bar.tsx';
2 | export { NContainer } from './Container.tsx';
3 | export { NProgress } from './Progress.tsx';
4 | export { NSpinner } from './Spinner.tsx';
5 |
--------------------------------------------------------------------------------
/src/components/Nprogress/spinner.css:
--------------------------------------------------------------------------------
1 | @keyframes spinner {
2 | 0% {
3 | transform: rotate(0deg);
4 | }
5 | 100% {
6 | transform: rotate(360deg);
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/components/PageHeader/PageHeader.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { HomeOutlined, PieChartOutlined } from '@ant-design/icons';
3 | import { Link } from 'react-router-dom';
4 | import { withRouter } from 'storybook-addon-react-router-v6';
5 | import { DASHBOARD_ITEMS } from '../../constants';
6 |
7 | import { PageHeader } from './PageHeader.tsx';
8 |
9 | const meta = {
10 | title: 'Components/Page header',
11 | component: PageHeader,
12 | parameters: {
13 | layout: 'centered',
14 | },
15 | tags: ['autodocs'],
16 | decorators: [withRouter],
17 | } satisfies Meta;
18 |
19 | export default meta;
20 |
21 | type Story = StoryObj;
22 |
23 | export const Simple: Story = {
24 | args: {
25 | title: 'Dashboard',
26 | breadcrumbs: [
27 | {
28 | title: (
29 | <>
30 | home
32 |
33 | ),
34 | path: '/',
35 | },
36 | {
37 | title: 'default dashboard',
38 | },
39 | ],
40 | style: { width: 800 },
41 | },
42 | };
43 |
44 | export const Complex: Story = {
45 | args: {
46 | title: 'Dashboard',
47 | breadcrumbs: [
48 | {
49 | title: (
50 | <>
51 | home
53 |
54 | ),
55 | path: '/',
56 | },
57 | {
58 | title: (
59 | <>
60 | dashboards
62 |
63 | ),
64 | menu: {
65 | items: DASHBOARD_ITEMS.map((d) => ({
66 | key: d.title,
67 | title: ;
10 |
11 | export const PageHeader = ({ breadcrumbs, title, ...others }: Props) => {
12 | return (
13 |
14 |
15 |
19 | {title}
20 |
21 |
23 |
24 | {title}
25 |
26 |
;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: PricingData,
22 | style: { width: 1000 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | style: { width: 1000 },
30 | },
31 | };
32 |
33 | export const Error: Story = {
34 | args: {
35 | error: 'Error fetching items',
36 | style: { width: 1000 },
37 | },
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/RefreshBtn/RefreshBtn.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { RefreshBtn } from './RefreshBtn.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Refresh button',
7 | component: RefreshBtn,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | tags: ['autodocs'],
12 | } satisfies Meta;
13 |
14 | export default meta;
15 |
16 | type Story = StoryObj;
17 |
18 | export const Default: Story = {
19 | args: {},
20 | };
21 |
22 | export const WithIcon: Story = {
23 | args: {
24 | icon: true,
25 | },
26 | };
27 |
--------------------------------------------------------------------------------
/src/components/RefreshBtn/RefreshBtn.tsx:
--------------------------------------------------------------------------------
1 | import { Button, ButtonProps } from 'antd';
2 | import { SyncOutlined } from '@ant-design/icons';
3 |
4 | type Props = {
5 | icon?: boolean;
6 | } & ButtonProps;
7 |
8 | export const RefreshBtn = ({ icon, ...others }: Props) => {
9 | return (
10 | ;
15 |
16 | export default meta;
17 |
18 | type Story = StoryObj;
19 |
20 | export const Default: Story = {
21 | args: {
22 | data: {
23 | title: 'dashboard',
24 | links: DASHBOARD_ITEMS.map((d) => ({ title: d.title, path: '#' })),
25 | },
26 | style: { width: 400 },
27 | },
28 | };
29 |
--------------------------------------------------------------------------------
/src/components/SitemapCard/SitemapCard.tsx:
--------------------------------------------------------------------------------
1 | import { CardProps, Flex, Typography } from 'antd';
2 | import { Card } from '../index.ts';
3 |
4 | import './styles.css';
5 | import { Link } from 'react-router-dom';
6 |
7 | type Props = {
8 | data: {
9 | title: string;
10 | links: { title: string; path: string }[];
11 | };
12 | } & CardProps;
13 |
14 | export const SitemapCard = ({ data, ...others }: Props) => {
15 | return (
16 |
17 |
18 |
19 | {data.title}
20 |
21 |
22 | {data.links.map((d) => (
23 |
28 |
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/src/components/SitemapCard/styles.css:
--------------------------------------------------------------------------------
1 | .sitemap-card .ant-card-body {
2 | padding: 0;
3 | }
4 |
5 | .sitemap-card .ant-list-item {
6 | text-transform: capitalize;
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/SocialMediaCard/SocialMediaCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { SocialMediaCard } from './SocialMediaCard.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Social media',
7 | component: SocialMediaCard,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 400 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/SocialMediaCard/SocialMediaCard.tsx:
--------------------------------------------------------------------------------
1 | import { Button, ButtonProps, CardProps, Flex } from 'antd';
2 | import { Card } from '../index.ts';
3 | import {
4 | FacebookFilled,
5 | GithubFilled,
6 | InstagramFilled,
7 | LinkedinFilled,
8 | TwitterCircleFilled,
9 | } from '@ant-design/icons';
10 |
11 | const BUTTON_PROPS: ButtonProps = {
12 | type: 'link',
13 | style: {
14 | textAlign: 'start',
15 | },
16 | };
17 |
18 | type Props = CardProps;
19 |
20 | export const SocialMediaCard = ({ ...others }: Props) => {
21 | return (
22 |
23 |
24 |
40 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/src/components/TimelineCard/TimelineCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import TimelineData from '../../../public/mocks/TimelineActivity.json';
3 |
4 | import { TimelineCard } from './TimelineCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Timeline',
8 | component: TimelineCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: TimelineData.slice(0, 5),
22 | style: { width: 600 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | style: { width: 600 },
30 | },
31 | };
32 |
33 | export const Error: Story = {
34 | args: {
35 | error: 'Error fetching items',
36 | style: { width: 600 },
37 | },
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/TimelineCard/TimelineCard.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, CardProps, Flex, Timeline, Typography } from 'antd';
2 | import {
3 | LaptopOutlined,
4 | MobileOutlined,
5 | TabletOutlined,
6 | } from '@ant-design/icons';
7 | import { ActivityTimeline } from '../../types';
8 | import { Card, Loader } from '../index.ts';
9 | import { ReactNode } from 'react';
10 |
11 | type Props = {
12 | data?: ActivityTimeline[];
13 | loading?: boolean;
14 | error?: ReactNode;
15 | } & CardProps;
16 |
17 | export const TimelineCard = ({ data, error, loading, ...others }: Props) => {
18 | return (
19 |
20 | {error ? (
21 | ({
33 | dot:
34 | _.device_type === 'desktop' ? (
35 |
43 |
50 | {_.post_content}
51 |
52 |
53 | {_.timestamp}
54 |
55 |
56 | ),
57 | }))}
58 | />
59 | )}
60 |
61 | );
62 | };
63 |
--------------------------------------------------------------------------------
/src/components/UserAvatar/UserAvatar.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { UserAvatar } from './UserAvatar.tsx';
4 |
5 | const meta = {
6 | title: 'Components/User avatar',
7 | component: UserAvatar,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | tags: ['autodocs'],
12 | } satisfies Meta;
13 |
14 | export default meta;
15 |
16 | type Story = StoryObj;
17 |
18 | export const Default: Story = {
19 | args: {
20 | fullName: 'Kelvin Kiptum',
21 | },
22 | };
23 |
24 | export const Mark: Story = {
25 | args: {
26 | fullName: 'Kelvin Kiptum',
27 | mark: true,
28 | },
29 | };
30 |
31 | export const Verified: Story = {
32 | args: {
33 | fullName: 'Kelvin Kiptum',
34 | verified: true,
35 | textWidth: 'auto',
36 | },
37 | };
38 |
39 | export const CustomColor: Story = {
40 | args: {
41 | fullName: 'Kelvin Kiptum',
42 | color: 'green',
43 | },
44 | };
45 |
46 | export const Small: Story = {
47 | args: {
48 | fullName: 'Kelvin Kiptum',
49 | size: 'small',
50 | },
51 | };
52 |
53 | export const Large: Story = {
54 | args: {
55 | fullName: 'Kelvin Kiptum',
56 | size: 'large',
57 | },
58 | };
59 |
--------------------------------------------------------------------------------
/src/components/UserAvatar/UserAvatar.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarProps, Flex, FlexProps, theme, Typography } from 'antd';
2 | import { colourNameToHex, getNameInitials, isColorLight } from '../../utils';
3 | import { CheckCircleFilled, UserOutlined } from '@ant-design/icons';
4 | import { blue } from '@ant-design/colors';
5 | import { CSSProperties } from 'react';
6 |
7 | /**
8 | * mark - not a full name user, just a single user name
9 | */
10 | type Props = {
11 | fullName: string;
12 | mark?: boolean;
13 | size?: 'small' | 'middle' | 'large';
14 | verified?: boolean;
15 | color?: CSSProperties['color'];
16 | textWidth?: CSSProperties['width'];
17 | } & Omit;
18 |
19 | export const UserAvatar = ({
20 | fullName,
21 | mark,
22 | size,
23 | verified,
24 | color,
25 | textWidth,
26 | ...others
27 | }: Props) => {
28 | const {
29 | token: { colorPrimary },
30 | } = theme.useToken();
31 |
32 | const avatarProps: AvatarProps = {
33 | size: size === 'large' ? 36 : size === 'small' ? 18 : 24,
34 | };
35 |
36 | return (
37 |
38 | {mark ? (
39 |
59 | {getNameInitials(fullName)}
60 |
61 | )}
62 |
68 | {fullName}
69 |
70 | {verified && (
71 |
74 | );
75 | };
76 |
--------------------------------------------------------------------------------
/src/components/corporate/BlogsListCard/BlogListCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { withRouter } from 'storybook-addon-react-router-v6';
3 |
4 | import { BlogsListCard } from './BlogsListCard.tsx';
5 |
6 | const MOCK_DATA = Array.from({ length: 5 }).map((_, i) => ({
7 | href: 'https://ant.design',
8 | title: `Lorem ipsum ${i}`,
9 | avatar: `https://xsgames.co/randomusers/avatar.php?g=pixel&key=${i}`,
10 | description:
11 | 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
12 | content:
13 | 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
14 | }));
15 |
16 | // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
17 | const meta = {
18 | title: 'Components/Corporate/Blogs list',
19 | component: BlogsListCard,
20 | parameters: {
21 | // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
22 | layout: 'centered',
23 | },
24 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
25 | tags: ['autodocs'],
26 | // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
27 | decorators: [withRouter],
28 | } satisfies Meta;
29 |
30 | export default meta;
31 | type Story = StoryObj;
32 |
33 | // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
34 | export const Default: Story = {
35 | args: {
36 | data: MOCK_DATA,
37 | },
38 | };
39 |
40 | export const Loading: Story = {
41 | args: {
42 | loading: true,
43 | },
44 | };
45 |
46 | export const Error: Story = {
47 | args: {
48 | error: 'Failed to fetch blogs',
49 | },
50 | };
51 |
52 | export const NoData: Story = {
53 | args: {
54 | data: [],
55 | },
56 | };
57 |
--------------------------------------------------------------------------------
/src/components/corporate/BlogsListCard/styles.css:
--------------------------------------------------------------------------------
1 | .blogs-list-card .ant-card-body {
2 | padding: 0 0 1rem 0;
3 | }
4 |
5 | .blogs-list-card .ant-list-item {
6 | /*padding: 0;*/
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/dashboard/bidding/AuctionCarousel/AuctionCarousel.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { CardItem } from './AuctionCarousel.tsx';
4 |
5 | const MOCK_DATA = {
6 | auction_id: 'a9e1b790-35f6-4549-b452-aff1eee3ef87',
7 | nft_name: 'non pretium quis lectus suspendisse potenti in eleifend quam a',
8 | nft_image:
9 | 'https://images.unsplash.com/photo-1644361566696-3d442b5b482a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8bmZ0fGVufDB8fDB8fHwy&auto=format&fit=crop&w=500&q=60',
10 | seller_username: 'rsingleton0',
11 | buyer_username: 'fandretti0',
12 | start_price: 33611.73,
13 | end_price: 95441.53,
14 | start_date: '5/11/2022',
15 | end_date: '10/30/2022',
16 | status: 'active',
17 | is_highest_bid_mine: false,
18 | winning_bid: 140.94,
19 | time_left: '8:20 PM',
20 | };
21 |
22 | // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
23 | const meta = {
24 | title: 'Components/Dashboard/Bidding/Auction card',
25 | component: CardItem,
26 | parameters: {
27 | layout: 'centered',
28 | },
29 | } satisfies Meta;
30 |
31 | export default meta;
32 | type Story = StoryObj;
33 |
34 | // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
35 | export const Default: Story = {
36 | args: {
37 | item: MOCK_DATA,
38 | style: { width: 300 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/bidding/AuctionCarousel/styles.css:
--------------------------------------------------------------------------------
1 | .auction-carousel {
2 | }
3 |
4 | .slick-slide {
5 | }
6 |
7 | .auction-card {
8 | }
9 |
10 | .auction-card .ant-card-body {
11 | padding: 2px;
12 | }
13 |
14 | .auction-card .auction-card-header {
15 | height: 280px;
16 | background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/dashboard/bidding/CategoriesCard/Categories.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { CategoriesCard } from './CategoriesCard.tsx';
4 |
5 | // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
6 | const meta = {
7 | title: 'Components/Dashboard/Bidding/Categories table',
8 | component: CategoriesCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | } satisfies Meta;
13 |
14 | export default meta;
15 | type Story = StoryObj;
16 |
17 | // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
18 | export const Default: Story = {
19 | args: {
20 | style: {
21 | width: 600,
22 | },
23 | },
24 | };
25 |
--------------------------------------------------------------------------------
/src/components/dashboard/bidding/CategoriesCard/styles.css:
--------------------------------------------------------------------------------
1 | .categories-list-card .ant-card-body {
2 | padding: 0 0 1rem 0;
3 | }
4 |
5 | .available-tucks-card .ant-list-item {
6 | /*padding: 0;*/
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/dashboard/bidding/CreatorsCard/CreatorsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import CreatorsData from '../../../../../public/mocks/AuctionCreators.json';
3 |
4 | import { CreatorsCard } from './CreatorsCard.tsx';
5 |
6 | // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
7 | const meta = {
8 | title: 'Components/Dashboard/Bidding/Creators table',
9 | component: CreatorsCard,
10 | parameters: {
11 | // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
12 | layout: 'centered',
13 | },
14 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
15 | tags: ['autodocs'],
16 | // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
17 | } satisfies Meta;
18 |
19 | export default meta;
20 | type Story = StoryObj;
21 |
22 | // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
23 | export const Default: Story = {
24 | args: {
25 | data: CreatorsData,
26 | style: { width: 600 },
27 | },
28 | };
29 |
30 | export const Loading: Story = {
31 | args: {
32 | loading: true,
33 | style: { width: 600 },
34 | },
35 | };
36 |
37 | export const Error: Story = {
38 | args: {
39 | error: 'Error loading creators',
40 | style: { width: 600 },
41 | },
42 | };
43 |
44 | export const Empty: Story = {
45 | args: {
46 | data: [],
47 | style: { width: 600 },
48 | },
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/dashboard/bidding/CreatorsCard/CreatorsCard.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 | import { Alert, Button, CardProps, Table, TableColumnsType } from 'antd';
3 | import { AuctionCreator } from '../../../../types';
4 | import { Card, UserAvatar } from '../../../index';
5 | import { UserAddOutlined } from '@ant-design/icons';
6 | import './styles.css';
7 |
8 | const COLUMNS: TableColumnsType = [
9 | {
10 | key: 'creators_name',
11 | dataIndex: 'first_name',
12 | title: 'Creator',
13 | render: (_, { first_name, last_name, favorite_color }) => (
14 | See all creators}
57 | className="card"
58 | {...others}
59 | >
60 |
67 |
68 | );
69 | };
70 |
--------------------------------------------------------------------------------
/src/components/dashboard/bidding/CreatorsCard/styles.css:
--------------------------------------------------------------------------------
1 | .creators-list-card .ant-card-body {
2 | padding: 0 0 1rem 0;
3 | }
4 |
5 | .available-tucks-card .ant-list-item {
6 | /*padding: 0;*/
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/dashboard/bidding/TopItemsCard/TopItems.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import TopItemsData from '../../../../../public/mocks/BiddingTopSellers.json';
3 |
4 | import { TopItemsCard } from './TopItems.tsx';
5 |
6 | // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
7 | const meta = {
8 | title: 'Components/Dashboard/Bidding/Top items table',
9 | component: TopItemsCard,
10 | parameters: {
11 | // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
12 | layout: 'centered',
13 | },
14 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
15 | tags: ['autodocs'],
16 | // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
17 | } satisfies Meta;
18 |
19 | export default meta;
20 | type Story = StoryObj;
21 |
22 | // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
23 | export const Default: Story = {
24 | args: {
25 | data: TopItemsData,
26 | style: { width: 800 },
27 | },
28 | };
29 |
30 | export const Loading: Story = {
31 | args: {
32 | loading: true,
33 | style: { width: 800 },
34 | },
35 | };
36 |
37 | export const Error: Story = {
38 | args: {
39 | error: 'Error loading items',
40 | style: { width: 800 },
41 | },
42 | };
43 |
44 | export const Empty: Story = {
45 | args: {
46 | data: [],
47 | style: { width: 800 },
48 | },
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/dashboard/bidding/TransactionsCard/TransactionsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import TransactionsData from '../../../../../public/mocks/BiddingTransactions.json';
3 |
4 | import { TransactionsCard } from './TransactionsCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Bidding/Transactions table',
8 | component: TransactionsCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: TransactionsData,
22 | style: { width: 800 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | style: { width: 800 },
30 | },
31 | };
32 |
33 | export const Error: Story = {
34 | args: {
35 | error: 'Error loading items',
36 | style: { width: 800 },
37 | },
38 | };
39 |
40 | export const Empty: Story = {
41 | args: {
42 | data: [],
43 | style: { width: 800 },
44 | },
45 | };
46 |
--------------------------------------------------------------------------------
/src/components/dashboard/bidding/index.ts:
--------------------------------------------------------------------------------
1 | export { AuctionCarousel } from './AuctionCarousel/AuctionCarousel.tsx';
2 | export { CreatorsCard } from './CreatorsCard/CreatorsCard.tsx';
3 | export { TopItemsCard } from './TopItemsCard/TopItems.tsx';
4 | export { TransactionsCard } from './TransactionsCard/TransactionsCard.tsx';
5 | export { CategoriesCard } from './CategoriesCard/CategoriesCard.tsx';
6 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/CampaignsCard/CampaignsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import CampaignsData from '../../../../../public/mocks/Campaigns.json';
3 |
4 | import { CampaignsCard } from './CampaignsCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Default/Campaigns table',
8 | component: CampaignsCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: CampaignsData,
22 | style: { width: 1000 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | data: [],
30 | style: { width: 1000 },
31 | },
32 | };
33 |
34 | export const Error: Story = {
35 | args: {
36 | error: 'Error loading items',
37 | data: [],
38 | style: { width: 1000 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/EarningsCard/EarningsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { EarningsCard } from './EarningsCard.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Default/Earnings card',
7 | component: EarningsCard,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | data: [
20 | {
21 | type: 'Transport',
22 | value: 27,
23 | },
24 | {
25 | type: 'Communication',
26 | value: 25,
27 | },
28 | {
29 | type: 'Rent',
30 | value: 18,
31 | },
32 | {
33 | type: 'Entertainment',
34 | value: 15,
35 | },
36 | {
37 | type: 'Food',
38 | value: 10,
39 | },
40 | {
41 | type: 'Misc.',
42 | value: 5,
43 | },
44 | ],
45 | title: 'Earnings',
46 | diff: 20,
47 | style: { width: 360 },
48 | },
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/GetStartedCard/GetStartedCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { GetStartedCard } from './GetStartedCard.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Default/Get started card',
7 | component: GetStartedCard,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/GetStartedCard/GetStartedCard.tsx:
--------------------------------------------------------------------------------
1 | import { Button, CardProps, Flex, Image, Typography } from 'antd';
2 | import { RightOutlined } from '@ant-design/icons';
3 | import { Card } from '../../../index';
4 | import CountUp from 'react-countup';
5 |
6 | type Props = CardProps;
7 |
8 | export const GetStartedCard = ({ ...others }: Props) => {
9 | return (
10 |
11 |
12 |
13 |
14 | You have
16 |
17 | You have already completed 68% of your monthly target. Keep going to
18 | achieve your goal.
19 |
20 |
21 | Get started
23 |
24 |
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/LatestOrdersCard/LatestOrdersCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import CampaignsData from '../../../../../public/mocks/Campaigns.json';
3 |
4 | import { LatestOrdersCard } from './LatestOrdersCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Default/Orders/Table',
8 | component: LatestOrdersCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: CampaignsData,
22 | style: { width: 1000 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | data: [],
30 | style: { width: 1000 },
31 | },
32 | };
33 |
34 | export const Error: Story = {
35 | args: {
36 | error: 'Error loading items',
37 | data: [],
38 | style: { width: 1000 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/LatestOrdersCard/LatestOrdersCard.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, Card, CardProps, Table } from 'antd';
2 | import { MoreMenu } from '../../../index.ts';
3 | import { ReactNode } from 'react';
4 | import { useFetchData } from '../../../../hooks';
5 |
6 | const COLUMNS = [
7 | {
8 | title: 'Customer name',
9 | dataIndex: 'customer_name',
10 | key: 'customer_name',
11 | },
12 | {
13 | title: 'Product',
14 | dataIndex: 'product_name',
15 | key: 'product_name',
16 | },
17 | {
18 | title: 'Orders',
19 | dataIndex: 'orders',
20 | key: 'orders',
21 | },
22 | {
23 | title: 'Country',
24 | dataIndex: 'country',
25 | key: 'country',
26 | },
27 | {
28 | title: 'Shipping address',
29 | dataIndex: 'shipping_address',
30 | key: 'shipping_address',
31 | },
32 | ];
33 |
34 | type Props = {
35 | data?: any;
36 | loading?: boolean;
37 | error?: ReactNode;
38 | } & CardProps;
39 |
40 | export const LatestOrdersCard = ({
41 | data,
42 | loading,
43 | error,
44 | ...others
45 | }: Props) => {
46 | const {
47 | data: ordersData,
48 | loading: ordersDataLoading,
49 | error: ordersDataError,
50 | } = useFetchData('/mocks/CountryOrders.json');
51 |
52 | return (
53 | ;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 500 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/OrdersChart/OrdersChart.tsx:
--------------------------------------------------------------------------------
1 | import { Card, CardProps } from 'antd';
2 | import { Area } from '@ant-design/charts';
3 | import { MoreMenu } from '../../../index.ts';
4 |
5 | const AreaChart = () => {
6 | const data = [
7 | {
8 | country: 'order',
9 | date: '1 Aug',
10 | value: 100,
11 | },
12 | {
13 | country: 'order',
14 | date: '8 Aug',
15 | value: 300,
16 | },
17 | {
18 | country: 'order',
19 | date: '15 Aug',
20 | value: 200,
21 | },
22 | {
23 | country: 'order',
24 | date: '22 Aug',
25 | value: 250,
26 | },
27 | {
28 | country: 'revenue',
29 | date: '1 Aug',
30 | value: 900.5,
31 | },
32 | {
33 | country: 'revenue',
34 | date: '8 Aug',
35 | value: 1500.5,
36 | },
37 | {
38 | country: 'revenue',
39 | date: '15 Aug',
40 | value: 1200.7,
41 | },
42 | {
43 | country: 'revenue',
44 | date: '22 Aug',
45 | value: 1300.1,
46 | },
47 | ];
48 |
49 | const config = {
50 | data,
51 | xField: 'date',
52 | yField: 'value',
53 | seriesField: 'country',
54 | slider: {
55 | start: 0.1,
56 | end: 0.9,
57 | },
58 | };
59 |
60 | return ;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: CampaignsData,
22 | style: { width: 1000 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | data: [],
30 | style: { width: 1000 },
31 | },
32 | };
33 |
34 | export const Error: Story = {
35 | args: {
36 | error: 'Error loading items',
37 | data: [],
38 | style: { width: 1000 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/RecentUsersCard/RecentUsersCard.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, Card, CardProps, Table, Typography } from 'antd';
2 | import { MoreMenu } from '../../../index.ts';
3 | import { useFetchData } from '../../../../hooks';
4 | import { ReactNode } from 'react';
5 |
6 | const COLUMNS = [
7 | {
8 | title: 'Names',
9 | dataIndex: 'first_name',
10 | key: 'name',
11 | render: (_: any, { first_name, last_name }: any) => (
12 |
13 | {first_name} {last_name}
14 |
15 | ),
16 | },
17 | {
18 | title: 'Gender',
19 | dataIndex: 'gender',
20 | key: 'gender',
21 | },
22 | {
23 | title: 'Country',
24 | dataIndex: 'country',
25 | key: 'country',
26 | },
27 | {
28 | title: 'Birth date',
29 | dataIndex: 'birthdate',
30 | key: 'birthdate',
31 | },
32 | ];
33 |
34 | type Props = { data?: any; loading?: boolean; error?: ReactNode } & CardProps;
35 |
36 | export const RecentUsersCard = ({ data, loading, error, ...others }: Props) => {
37 | const {
38 | data: usersData,
39 | loading: usersDataLoading,
40 | error: usersDataError,
41 | } = useFetchData('/mocks/ChannelUsers.json');
42 |
43 | return (
44 | ;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/SubscribersChart/SubscribersChart.tsx:
--------------------------------------------------------------------------------
1 | import { Card, CardProps, Flex, Typography } from 'antd';
2 | import { Column } from '@ant-design/charts';
3 | import { MoreMenu } from '../../../index.ts';
4 |
5 | type Props = CardProps;
6 |
7 | const ColumnChart = () => {
8 | const data = [
9 | {
10 | type: '1 July',
11 | subscribers: 38,
12 | },
13 | {
14 | type: '8 July',
15 | subscribers: 52,
16 | },
17 | {
18 | type: '15 July',
19 | subscribers: 61,
20 | },
21 | {
22 | type: '22 July',
23 | subscribers: 145,
24 | },
25 | {
26 | type: '29 July',
27 | subscribers: 48,
28 | },
29 | {
30 | type: '5 Aug',
31 | subscribers: 38,
32 | },
33 | {
34 | type: '12 Aug',
35 | subscribers: 38,
36 | },
37 | {
38 | type: '19 Aug',
39 | subscribers: 38,
40 | },
41 | ];
42 | const config = {
43 | data,
44 | xField: 'type',
45 | yField: 'subscribers',
46 | label: {
47 | position: 'middle',
48 |
49 | style: {
50 | fill: '#FFFFFF',
51 | opacity: 0.6,
52 | },
53 | },
54 | xAxis: {
55 | label: {
56 | autoHide: true,
57 | autoRotate: false,
58 | },
59 | },
60 | meta: {
61 | type: {
62 | alias: 'Subscribers',
63 | },
64 | subscribers: {
65 | alias: 'count',
66 | },
67 | },
68 | };
69 | // @ts-ignore
70 | return
77 | 75% activity growth
78 |
80 |
81 | );
82 | };
83 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/TasksChartCard/TasksChart.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { TasksChartCard } from './TasksChartCard.tsx';
4 |
5 | const TASKS_DATA = [
6 | {
7 | day: 'Monday',
8 | value: 33,
9 | status: 'new',
10 | },
11 | {
12 | day: 'Tuesday',
13 | value: 44,
14 | status: 'new',
15 | },
16 | {
17 | day: 'Wednesday',
18 | value: 35,
19 | status: 'new',
20 | },
21 | {
22 | day: 'Thursday',
23 | value: 55,
24 | status: 'new',
25 | },
26 | {
27 | day: 'Friday',
28 | value: 49,
29 | status: 'new',
30 | },
31 | {
32 | day: 'Saturday',
33 | value: 63,
34 | status: 'new',
35 | },
36 | {
37 | day: 'Sunday',
38 | value: 72,
39 | status: 'new',
40 | },
41 | {
42 | day: 'Monday',
43 | value: 69,
44 | status: 'in progress',
45 | },
46 | {
47 | day: 'Tuesday',
48 | value: 81,
49 | status: 'in progress',
50 | },
51 | {
52 | day: 'Wednesday',
53 | value: 34,
54 | status: 'in progress',
55 | },
56 | {
57 | day: 'Thursday',
58 | value: 25,
59 | status: 'in progress',
60 | },
61 | {
62 | day: 'Friday',
63 | value: 39,
64 | status: 'in progress',
65 | },
66 | {
67 | day: 'Saturday',
68 | value: 45,
69 | status: 'in progress',
70 | },
71 | {
72 | day: 'Sunday',
73 | value: 60,
74 | status: 'in progress',
75 | },
76 | ];
77 |
78 | const meta = {
79 | title: 'Components/Dashboard/Default/Tasks/Chart',
80 | component: TasksChartCard,
81 | parameters: {
82 | layout: 'centered',
83 | },
84 | } satisfies Meta;
85 |
86 | export default meta;
87 |
88 | type Story = StoryObj;
89 |
90 | export const Default: Story = {
91 | args: {
92 | data: TASKS_DATA,
93 | style: { width: 600 },
94 | },
95 | };
96 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/TasksChartCard/TasksChartCard.tsx:
--------------------------------------------------------------------------------
1 | import { Column } from '@ant-design/charts';
2 | import { Button, CardProps } from 'antd';
3 | import { Card } from '../../../index.ts';
4 |
5 | type Tasks = {
6 | day: string;
7 | value: number;
8 | status: string;
9 | };
10 |
11 | type ChartProps = {
12 | data: Tasks[];
13 | };
14 |
15 | const ColumnChart = ({ data }: ChartProps) => {
16 | const config = {
17 | data,
18 | isStack: true,
19 | xField: 'day',
20 | yField: 'value',
21 | seriesField: 'status',
22 | label: {
23 | position: 'top', // 'top', 'bottom', 'middle'
24 | offset: 10,
25 | style: {
26 | fill: 'transparent',
27 | },
28 | },
29 | interactions: [
30 | {
31 | type: 'active-region',
32 | enable: false,
33 | },
34 | ],
35 | columnBackground: {
36 | style: {
37 | fill: 'rgba(0,0,0,0.1)',
38 | },
39 | },
40 | legend: {
41 | position: 'bottom',
42 | },
43 | };
44 |
45 | // @ts-ignore
46 | return See all} {...others}>
56 |
58 | );
59 | };
60 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/TasksListCard/TasksList.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import TasksListData from '../../../../../public/mocks/TasksList.json';
3 |
4 | import { TasksListCard } from './TasksListCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Default/Tasks/List',
8 | component: TasksListCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: TasksListData,
22 | style: { width: 800 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | style: { width: 800 },
30 | },
31 | };
32 |
33 | export const Error: Story = {
34 | args: {
35 | error: 'Error fetching items',
36 | style: { width: 800 },
37 | },
38 | };
39 |
40 | export const Empty: Story = {
41 | args: {
42 | data: [],
43 | style: { width: 800 },
44 | },
45 | };
46 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/TasksListCard/styles.css:
--------------------------------------------------------------------------------
1 | .tasks-list-card .ant-card-body {
2 | /*padding: 0 0 1rem 0;*/
3 | }
4 |
5 | .tasks-list-card .ant-list-item {
6 | /*padding: 0;*/
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/WeeklyActivityCard/WeeklyActivityCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { WeeklyActivityCard } from './WeeklyActivityCard.tsx';
4 |
5 | const ACTIVITY_DATA = [
6 | {
7 | day: 'Monday',
8 | value: 10,
9 | },
10 | {
11 | day: 'Tuesday',
12 | value: 22,
13 | },
14 | {
15 | day: 'Wednesday',
16 | value: 25,
17 | },
18 | {
19 | day: 'Thursday',
20 | value: 26,
21 | },
22 | {
23 | day: 'Friday',
24 | value: 15,
25 | },
26 | {
27 | day: 'Saturday',
28 | value: 12,
29 | },
30 | {
31 | day: 'Sunday',
32 | value: 3,
33 | },
34 | ];
35 |
36 | const meta = {
37 | title: 'Components/Dashboard/Default/Activity card',
38 | component: WeeklyActivityCard,
39 | parameters: {
40 | layout: 'centered',
41 | },
42 | } satisfies Meta;
43 |
44 | export default meta;
45 |
46 | type Story = StoryObj;
47 |
48 | export const Default: Story = {
49 | args: {
50 | data: ACTIVITY_DATA,
51 | style: { width: 600 },
52 | },
53 | };
54 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/WeeklyActivityCard/WeeklyActivityCard.tsx:
--------------------------------------------------------------------------------
1 | import { Area } from '@ant-design/charts';
2 | import { CardProps } from 'antd';
3 | import { Card } from '../../../index.ts';
4 |
5 | type Activity = {
6 | day: string;
7 | value: number;
8 | };
9 |
10 | type ChartProps = {
11 | data: Activity[];
12 | };
13 |
14 | const AreaChart = ({ data }: ChartProps) => {
15 | const config = {
16 | data,
17 | xField: 'day',
18 | yField: 'value',
19 | xAxis: {
20 | range: [0, 1],
21 | },
22 | smooth: true,
23 | };
24 |
25 | return
35 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/dashboard/default/index.ts:
--------------------------------------------------------------------------------
1 | export { CampaignsCard } from './CampaignsCard/CampaignsCard.tsx';
2 | export { EarningsCard } from './EarningsCard/EarningsCard.tsx';
3 | export { GetStartedCard } from './GetStartedCard/GetStartedCard.tsx';
4 | export { LatestOrdersCard } from './LatestOrdersCard/LatestOrdersCard.tsx';
5 | export { OrdersChart } from './OrdersChart/OrdersChart.tsx';
6 | export { RecentUsersCard } from './RecentUsersCard/RecentUsersCard.tsx';
7 | export { SubscribersChart } from './SubscribersChart/SubscribersChart.tsx';
8 | export { WeeklyActivityCard } from './WeeklyActivityCard/WeeklyActivityCard.tsx';
9 | export { TasksChartCard } from './TasksChartCard/TasksChartCard.tsx';
10 | export { TasksListCard } from './TasksListCard/TasksListCard.tsx';
11 |
--------------------------------------------------------------------------------
/src/components/dashboard/ecommerce/CustomerReviewsCard/CustomerReviewsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { CustomerReviewsCard } from './CustomerReviewsCard.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Ecommerce/Customer reviews card',
7 | component: CustomerReviewsCard,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/ecommerce/index.ts:
--------------------------------------------------------------------------------
1 | export { CustomerReviewsCard } from './CustomerReviewsCard/CustomerReviewsCard.tsx';
2 |
--------------------------------------------------------------------------------
/src/components/dashboard/index.ts:
--------------------------------------------------------------------------------
1 | export {
2 | CampaignsCard,
3 | RecentUsersCard,
4 | GetStartedCard,
5 | OrdersChart,
6 | LatestOrdersCard,
7 | EarningsCard,
8 | SubscribersChart,
9 | WeeklyActivityCard,
10 | TasksChartCard,
11 | TasksListCard,
12 | } from './default';
13 | export { RevenueCard, PostsCard, ProjectsCard } from './shared';
14 | export { CustomerReviewsCard } from './ecommerce';
15 | export { ProjectsCountCard, ProjectsTable, ClientsTable } from './projects';
16 | export {
17 | StatsCard as MarketingStatsCard,
18 | VisitorsChartCard,
19 | SocialStatsCard as MarketingSocialStatsCard,
20 | CampaignsActivity,
21 | CampaignsAdsCard,
22 | AudienceLocationChart,
23 | } from './marketing';
24 | export {
25 | SocialStatsCard,
26 | FollowersChart,
27 | LikesChart,
28 | DevicesCardChart,
29 | MilestonesCard,
30 | CommentsCard,
31 | } from './social';
32 | export {
33 | AuctionCarousel,
34 | CreatorsCard,
35 | TopItemsCard,
36 | TransactionsCard,
37 | CategoriesCard as BiddingCategoriesCard,
38 | } from './bidding';
39 | export {
40 | StatsCard as LearningStatsCard,
41 | CoursesCard,
42 | CoursesCarousel,
43 | StudyStatisticsCard,
44 | ProgressCard,
45 | ExamsCard,
46 | CommunityGroupCard,
47 | } from './learning';
48 | export {
49 | StatsCard as LogisticsStatsCard,
50 | DeliveryTableCard,
51 | DeliveryAnalyticsCard,
52 | DailyPlanCard,
53 | TruckListCard,
54 | DeliveryRequestCard,
55 | } from './logistics';
56 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/CommunityGroupsCard/CommunityGroupCard.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, Avatar, Button, CardProps, List, Typography } from 'antd';
2 | import { CommunityGroup } from '../../../../types';
3 | import { PlusOutlined } from '@ant-design/icons';
4 | import { Card } from '../../../index.ts';
5 | import { ReactNode } from 'react';
6 |
7 | import './styles.css';
8 |
9 | type Props = {
10 | data?: CommunityGroup[];
11 | loading?: boolean;
12 | error?: ReactNode;
13 | } & CardProps;
14 |
15 | export const CommunityGroupCard = ({
16 | data,
17 | loading,
18 | error,
19 | ...others
20 | }: Props) => {
21 | return (
22 | {
42 | console.log(page);
43 | },
44 | pageSize: 5,
45 | align: 'center',
46 | }}
47 | dataSource={data}
48 | renderItem={(item) => (
49 |
50 | {item.name} }
60 | description={`${item.size} Members`}
61 | />
62 |
63 | )}
64 | loading={loading}
65 | />
66 | )}
67 |
68 | );
69 | };
70 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/CommunityGroupsCard/CommunityGroupsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import CommunityGroupsData from '../../../../../public/mocks/CommunityGroups.json';
3 |
4 | import { CommunityGroupCard } from './CommunityGroupCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Learning/Communities card',
8 | component: CommunityGroupCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: CommunityGroupsData.slice(0, 10),
22 | style: { width: 600 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | data: [],
30 | style: { width: 600 },
31 | },
32 | };
33 |
34 | export const Error: Story = {
35 | args: {
36 | error: 'Error loading items',
37 | data: [],
38 | style: { width: 600 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/CommunityGroupsCard/styles.css:
--------------------------------------------------------------------------------
1 | .community-group-card .ant-card-body {
2 | padding: 0 0 1rem 0;
3 | }
4 |
5 | .community-group-list .ant-list-item {
6 | /*padding: 0;*/
7 | }
8 |
9 | .community-group-list .ant-list-item-meta {
10 | margin-block-end: 0 !important;
11 | align-items: center !important;
12 | }
13 |
14 | .community-group-list .ant-list-item-meta-title {
15 | text-transform: capitalize;
16 | font-weight: 500;
17 | margin-bottom: 0 !important;
18 | }
19 |
20 | .community-group-list .ant-list-item-meta-title a {
21 | font-size: 16px;
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/CoursesCard/CoursesCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import CoursesData from '../../../../../public/mocks/Courses.json';
3 |
4 | import { CoursesCard } from './CoursesCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Learning/Courses/Table',
8 | component: CoursesCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: CoursesData.slice(0, 20),
22 | style: { width: 1000 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | data: [],
30 | style: { width: 1000 },
31 | },
32 | };
33 |
34 | export const Error: Story = {
35 | args: {
36 | error: 'Error loading items',
37 | data: [],
38 | style: { width: 1000 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/CoursesCarousel/CoursesCaroursel.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import CoursesData from '../../../../../public/mocks/RecommendedCourses.json';
3 |
4 | import { CoursesCarousel } from './CoursesCarousel.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Learning/Courses/Carousel',
8 | component: CoursesCarousel,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | } satisfies Meta;
13 |
14 | export default meta;
15 |
16 | type Story = StoryObj;
17 |
18 | export const Default: Story = {
19 | args: {
20 | data: CoursesData.slice(0, 5),
21 | style: { width: 600 },
22 | },
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/CoursesCarousel/styles.css:
--------------------------------------------------------------------------------
1 | .courses-carousel-card .ant-card-body {
2 | /*padding-bottom: 0;*/
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/ExamsCard/ExamsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import ExamsData from '../../../../../public/mocks/Exams.json';
3 |
4 | import { ExamsCard } from './ExamsCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Learning/Exams card',
8 | component: ExamsCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: ExamsData.slice(0, 10),
22 | style: { width: 600 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | data: [],
30 | style: { width: 600 },
31 | },
32 | };
33 |
34 | export const Error: Story = {
35 | args: {
36 | error: 'Error loading items',
37 | data: [],
38 | style: { width: 600 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/ExamsCard/ExamsCard.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, Button, CardProps, Flex, List, Typography } from 'antd';
2 | import { Exam } from '../../../../types';
3 | import { RightOutlined } from '@ant-design/icons';
4 |
5 | import './styles.css';
6 | import { Card } from '../../../index.ts';
7 | import { ReactNode } from 'react';
8 | import { useMediaQuery } from 'react-responsive';
9 |
10 | type Props = {
11 | data?: Exam[];
12 | loading?: boolean;
13 | error?: ReactNode;
14 | } & CardProps;
15 |
16 | export const ExamsCard = ({ data, loading, error, ...others }: Props) => {
17 | const isLarge = useMediaQuery({ maxWidth: 1024 });
18 |
19 | return (
20 | See all upcoming exams]}
24 | {...others}
25 | >
26 | {error ? (
27 | {
39 | console.log(page);
40 | },
41 | pageSize: 5,
42 | align: 'center',
43 | }}
44 | dataSource={data}
45 | renderItem={(item) => (
46 |
47 |
48 |
49 |
50 | {item.course} - {item.course_code}
51 |
52 | Date: {item.exam_date}
53 |
54 | Duration: {item.exam_duration} mins
55 |
56 |
57 |
59 |
60 | )}
61 | loading={loading}
62 | />
63 | )}
64 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/ExamsCard/styles.css:
--------------------------------------------------------------------------------
1 | .exam-card .ant-card-body {
2 | padding: 0 0 1rem 0;
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/ProgressCard/ProgressCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { ProgressCard } from './ProgressCard.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Learning/Progress card',
7 | component: ProgressCard,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/StatsCard/StatsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { FileSyncOutlined } from '@ant-design/icons';
3 |
4 | import { StatsCard } from './StatsCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Learning/Stats card',
8 | component: StatsCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | } satisfies Meta;
13 |
14 | export default meta;
15 |
16 | type Story = StoryObj;
17 |
18 | export const Default: Story = {
19 | args: {
20 | title: 'Courses in Progress',
21 | value: 18,
22 | icon: FileSyncOutlined,
23 | color: 'teal',
24 | progress: 30,
25 | style: { width: 600 },
26 | },
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/StatsCard/StatsCard.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CardProps, Flex, Progress, Typography } from 'antd';
3 | import { Card } from '../../../index.ts';
4 | import CountUp from 'react-countup';
5 |
6 | type Props = {
7 | title: string;
8 | value: number;
9 | icon: any;
10 | color: string;
11 | progress: number;
12 | } & CardProps;
13 |
14 | export const StatsCard = ({
15 | color,
16 | icon,
17 | title,
18 | value,
19 | progress,
20 | ...others
21 | }: Props) => {
22 | return (
23 |
24 |
25 | {React.createElement(icon, { style: { fontSize: 30 } })}
26 |
27 | {title}
28 |
29 |
30 |
32 |
34 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/StudyStatisticsCard/StudyStatisticsCard.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, CardProps } from 'antd';
2 | import { Heatmap } from '@ant-design/charts';
3 | import { ReactNode, useEffect, useState } from 'react';
4 | import * as _ from 'lodash';
5 | import { Card, Loader } from '../../../index.ts';
6 |
7 | type StudyStatistics = {
8 | id: string;
9 | value: number;
10 | category: string;
11 | month: string;
12 | total?: number;
13 | };
14 |
15 | type ColumnChartProps = { data: StudyStatistics[] };
16 |
17 | const ColumnChart = ({ data }: ColumnChartProps) => {
18 | const [refinedData, setRefinedData] = useState([]);
19 |
20 | useEffect(() => {
21 | const formattedData = _.sortBy(data, (item) => {
22 | // Map the month names to their corresponding numerical values for sorting
23 | const monthMap: { [key: string]: number } = {
24 | Jan: 1,
25 | Feb: 2,
26 | Mar: 3,
27 | Apr: 4,
28 | May: 5,
29 | Jun: 6,
30 | Jul: 7,
31 | Aug: 8,
32 | Sept: 9,
33 | Oct: 10,
34 | Nov: 11,
35 | Dec: 12,
36 | };
37 | // Use the numerical value for sorting
38 | return monthMap[item.month];
39 | });
40 | setRefinedData(formattedData);
41 | }, [data]);
42 |
43 | const config = {
44 | // width: 650,
45 | // height: 400,
46 | autoFit: true,
47 | data: refinedData,
48 | xField: 'month',
49 | yField: 'category',
50 | colorField: 'value',
51 | // color: ['#174c83', '#7eb6d4', '#efefeb', '#efa759', '#9b4d16'],
52 | meta: {
53 | 'Month of Year': {
54 | type: 'cat',
55 | },
56 | },
57 | };
58 |
59 | // @ts-ignore
60 | return
77 | {error ? (
78 |
90 | );
91 | };
92 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/StudyStatisticsCard/StudyStatisticssCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import StudyData from '../../../../../public/mocks/StudyStatistics.json';
3 |
4 | import { StudyStatisticsCard } from './StudyStatisticsCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Learning/Study stats card',
8 | component: StudyStatisticsCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: StudyData,
22 | style: { width: 600 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | data: [],
30 | style: { width: 600 },
31 | },
32 | };
33 |
34 | export const Error: Story = {
35 | args: {
36 | error: 'Error loading items',
37 | data: [],
38 | style: { width: 600 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/learning/index.ts:
--------------------------------------------------------------------------------
1 | export { StatsCard } from './StatsCard/StatsCard.tsx';
2 | export { CoursesCard } from './CoursesCard/CoursesCard.tsx';
3 | export { CoursesCarousel } from './CoursesCarousel/CoursesCarousel.tsx';
4 | export { StudyStatisticsCard } from './StudyStatisticsCard/StudyStatisticsCard.tsx';
5 | export { ProgressCard } from './ProgressCard/ProgressCard.tsx';
6 | export { ExamsCard } from './ExamsCard/ExamsCard.tsx';
7 | export { CommunityGroupCard } from './CommunityGroupsCard/CommunityGroupCard.tsx';
8 |
--------------------------------------------------------------------------------
/src/components/dashboard/logistics/DailyPlanCard/DailyPlanCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { DailyPlanCard } from './DailyPlanCard.tsx';
4 |
5 | const PLAN_DATA = [
6 | {
7 | type: 'Shipment processed',
8 | value: 38,
9 | },
10 | {
11 | type: 'Orders processed',
12 | value: 52,
13 | },
14 | {
15 | type: 'Requests queue',
16 | value: 61,
17 | },
18 | ];
19 |
20 | const meta = {
21 | title: 'Components/Dashboard/Logistics/Daily plan',
22 | component: DailyPlanCard,
23 | parameters: {
24 | layout: 'centered',
25 | },
26 | } satisfies Meta;
27 |
28 | export default meta;
29 |
30 | type Story = StoryObj;
31 |
32 | export const Default: Story = {
33 | args: {
34 | data: PLAN_DATA,
35 | style: { width: 600 },
36 | },
37 | };
38 |
--------------------------------------------------------------------------------
/src/components/dashboard/logistics/DailyPlanCard/DailyPlanCard.tsx:
--------------------------------------------------------------------------------
1 | import { Bar } from '@ant-design/charts';
2 | import { CardProps } from 'antd';
3 | import { Card } from '../../../index.ts';
4 |
5 | type Plan = {
6 | type: string;
7 | value: number;
8 | };
9 |
10 | type BarProps = {
11 | data: Plan[];
12 | };
13 |
14 | const BarChart = ({ data }: BarProps) => {
15 | const config = {
16 | data,
17 | xField: 'value',
18 | yField: 'type',
19 | seriesField: 'type',
20 | legend: {
21 | position: 'top-left',
22 | },
23 | };
24 | // @ts-ignore
25 | return
35 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/dashboard/logistics/DeliveryAnalyticsCard/DeliveryAnalyticsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import DeliveryAnalytics from '../../../../../public/mocks/DeliveryAnalytics.json';
3 |
4 | import { DeliveryAnalyticsCard } from './DeliveryAnalyticsCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Logistics/Delivery/Analytics',
8 | component: DeliveryAnalyticsCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: DeliveryAnalytics.slice(0, 10),
22 | style: { width: 600 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | data: [],
30 | style: { width: 600 },
31 | },
32 | };
33 |
34 | export const Error: Story = {
35 | args: {
36 | error: 'Error loading items',
37 | data: [],
38 | style: { width: 600 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/logistics/DeliveryRequestCard/DeliveryRequestCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import TruckDeliveryRequest from '../../../../../public/mocks/TruckDeliveryRequest.json';
3 |
4 | import { DeliveryRequestCard } from './DeliveryRequestCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Logistics/Delivery/Requests',
8 | component: DeliveryRequestCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: TruckDeliveryRequest.slice(0, 10),
22 | style: { width: 600 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | data: [],
30 | style: { width: 600 },
31 | },
32 | };
33 |
34 | export const Error: Story = {
35 | args: {
36 | error: 'Error loading items',
37 | data: [],
38 | style: { width: 600 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/logistics/DeliveryRequestCard/styles.css:
--------------------------------------------------------------------------------
1 | .delivery-request-card .ant-card-body {
2 | padding: 0 0 1rem 0;
3 | }
4 |
5 | .delivery-request-list .ant-card-body {
6 | padding: 1rem;
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/dashboard/logistics/DeliveryTableCard/DeliveryTableCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import TruckDeliveryRequest from '../../../../../public/mocks/TruckDeliveries.json';
3 |
4 | import { DeliveryTableCard } from './DeliveryTableCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Logistics/Delivery/Table',
8 | component: DeliveryTableCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: TruckDeliveryRequest.slice(0, 10),
22 | style: { width: 1000 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | data: [],
30 | style: { width: 1000 },
31 | },
32 | };
33 |
34 | export const Error: Story = {
35 | args: {
36 | error: 'Error loading items',
37 | data: [],
38 | style: { width: 1000 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/logistics/StatsCard/StatsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { BlockOutlined } from '@ant-design/icons';
3 |
4 | import { StatsCard } from './StatsCard.tsx';
5 |
6 | const STATS = {
7 | icon: BlockOutlined,
8 | value: 1245,
9 | title: 'new packages',
10 | diff: 16,
11 | };
12 |
13 | const meta = {
14 | title: 'Components/Dashboard/Logistics/Stats',
15 | component: StatsCard,
16 | parameters: {
17 | layout: 'centered',
18 | },
19 | } satisfies Meta;
20 |
21 | export default meta;
22 |
23 | type Story = StoryObj;
24 |
25 | export const Default: Story = {
26 | args: {
27 | ...STATS,
28 | style: { width: 240 },
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/src/components/dashboard/logistics/StatsCard/StatsCard.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CardProps, Flex, Typography } from 'antd';
3 | import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
4 | import { green, red } from '@ant-design/colors';
5 | import { Card } from '../../../index.ts';
6 | import CountUp from 'react-countup';
7 |
8 | type Props = {
9 | title: string;
10 | value: number;
11 | diff: number;
12 | icon: any;
13 | } & CardProps;
14 |
15 | export const StatsCard = ({ icon, title, value, diff, ...others }: Props) => {
16 | return (
17 |
18 |
19 | {React.createElement(icon, { style: { fontSize: 30 } })}
20 |
21 | {title}
22 |
23 |
24 |
25 |
27 | 0 ? green[5] : red[5] }}
30 | >
31 | {diff}%
32 | {diff > 0 ?
34 |
35 |
36 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/dashboard/logistics/TrucksListCard/TruckListCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import TrucksData from '../../../../../public/mocks/Trucks.json';
3 |
4 | import { TruckListCard } from './TruckListCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Logistics/Trucks list',
8 | component: TruckListCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: TrucksData.slice(0, 10),
22 | style: { width: 600 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | data: [],
30 | style: { width: 600 },
31 | },
32 | };
33 |
34 | export const Error: Story = {
35 | args: {
36 | error: 'Error loading items',
37 | data: [],
38 | style: { width: 600 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/logistics/TrucksListCard/styles.css:
--------------------------------------------------------------------------------
1 | .available-tucks-card .ant-card-body {
2 | padding: 0 0 1rem 0;
3 | }
4 |
5 | .available-tucks-card .ant-list-item {
6 | /*padding: 0;*/
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/dashboard/logistics/index.ts:
--------------------------------------------------------------------------------
1 | export { StatsCard } from './StatsCard/StatsCard.tsx';
2 | export { DeliveryTableCard } from './DeliveryTableCard/DeliveryTableCard.tsx';
3 | export { DeliveryAnalyticsCard } from './DeliveryAnalyticsCard/DeliveryAnalyticsCard.tsx';
4 | export { DailyPlanCard } from './DailyPlanCard/DailyPlanCard.tsx';
5 | export { TruckListCard } from './TrucksListCard/TruckListCard.tsx';
6 | export { DeliveryRequestCard } from './DeliveryRequestCard/DeliveryRequestCard.tsx';
7 |
--------------------------------------------------------------------------------
/src/components/dashboard/marketing/AudienceLocationChart/AudienceLocationChart.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { AudienceLocationChart } from './AudienceLocationChart.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Marketing/Audience chart',
7 | component: AudienceLocationChart,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/marketing/CampaignsActivity/CampaignsActivity.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { CampaignsActivity } from './CampaignsActivity.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Marketing/Campaigns/Calendar',
7 | component: CampaignsActivity,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/marketing/CampaignsActivity/CampaignsActivity.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Calendar, CalendarProps, CardProps, Popover } from 'antd';
2 | import type { Dayjs } from 'dayjs';
3 | import { QuestionOutlined } from '@ant-design/icons';
4 | import { Card } from '../../../index.ts';
5 |
6 | const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => {
7 | console.log(value.format('YYYY-MM-DD'), mode);
8 | };
9 |
10 | type Props = CardProps;
11 |
12 | export const CampaignsActivity = ({ ...others }: Props) => {
13 | return (
14 |
18 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/components/dashboard/marketing/CampaignsAdsCard/CampaignAdsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import CampaignsData from '../../../../../public/mocks/CampaignAds.json';
3 |
4 | import { CampaignsAdsCard } from './CampaignsAdsCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Marketing/Campaigns/Ads stats',
8 | component: CampaignsAdsCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: CampaignsData.slice(0, 10),
22 | style: { width: 1000 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | data: [],
30 | style: { width: 1000 },
31 | },
32 | };
33 |
34 | export const Error: Story = {
35 | args: {
36 | error: 'Error loading items',
37 | data: [],
38 | style: { width: 1000 },
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/dashboard/marketing/SocialStatsCard/SocialStatsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { SocialStatsCard } from './SocialStatsCard.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Marketing/Social stats',
7 | component: SocialStatsCard,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/marketing/StatsCard/StatsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { StatsCard } from './StatsCard.tsx';
4 |
5 | const STATS = {
6 | data: [274, 337, 81, 497],
7 | title: 'impressions',
8 | diff: 12.5,
9 | value: 16826,
10 | };
11 |
12 | const meta = {
13 | title: 'Components/Dashboard/Marketing/Stats',
14 | component: StatsCard,
15 | parameters: {
16 | layout: 'centered',
17 | },
18 | tags: ['autodocs'],
19 | } satisfies Meta;
20 |
21 | export default meta;
22 |
23 | type Story = StoryObj;
24 |
25 | export const Default: Story = {
26 | args: {
27 | ...STATS,
28 | data: [274, 337, 81, 497],
29 | style: { width: 600 },
30 | },
31 | };
32 |
33 | export const AsCurrency: Story = {
34 | args: {
35 | ...STATS,
36 | title: 'Revenue',
37 | data: [274, 337, 81, 497],
38 | asCurrency: true,
39 | diff: -2.5,
40 | style: { width: 600 },
41 | },
42 | };
43 |
--------------------------------------------------------------------------------
/src/components/dashboard/marketing/StatsCard/StatsCard.tsx:
--------------------------------------------------------------------------------
1 | import { CardProps, Col, Flex, Row, Tag, Typography } from 'antd';
2 | import { TinyColumn } from '@ant-design/charts';
3 | import { Card } from '../../../index.ts';
4 | import CountUp from 'react-countup';
5 |
6 | type ChartData = [number, number, number, number];
7 |
8 | type StatsColumnChartProps = {
9 | data: ChartData;
10 | color?: string;
11 | };
12 |
13 | const ColumnChart = ({ data, color }: StatsColumnChartProps) => {
14 | const brandColor = color || '#5B8FF9';
15 | const config = {
16 | height: 64,
17 | autoFit: true,
18 | data,
19 | color: brandColor,
20 | tooltip: {
21 | customContent: function (x: any, data: any) {
22 | return `NO.${x}: ${data[0]?.data?.y.toFixed(2)}`;
23 | },
24 | },
25 | };
26 | return
47 |
48 |
49 | {title}
50 |
51 |
52 |
54 | {typeof value === 'number' ? (
55 | <>
56 | {asCurrency && $ }
57 |
63 |
64 |
68 |
69 | {diff}%
70 | compared to last month.
71 |
72 |
73 |
74 | );
75 | };
76 |
--------------------------------------------------------------------------------
/src/components/dashboard/marketing/VisitorsChartCard/VisitorsChartCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { VisitorsChartCard } from './VisitorsChartCard.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Marketing/Visitors',
7 | component: VisitorsChartCard,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/marketing/VisitorsChartCard/VisitorsChartCard.tsx:
--------------------------------------------------------------------------------
1 | import { Button, CardProps } from 'antd';
2 | import { RightOutlined } from '@ant-design/icons';
3 | import { Area } from '@ant-design/charts';
4 | import { Card } from '../../../index.ts';
5 |
6 | const AreaChart = () => {
7 | const data = [
8 | {
9 | timePeriod: '1 Aug',
10 | value: 6789,
11 | },
12 | {
13 | timePeriod: '2 Aug',
14 | value: 4123,
15 | },
16 | {
17 | timePeriod: '3 Aug',
18 | value: 7142,
19 | },
20 | {
21 | timePeriod: '4 Aug',
22 | value: 8461,
23 | },
24 | {
25 | timePeriod: '5 Aug',
26 | value: 10393,
27 | },
28 | {
29 | timePeriod: '6 Aug',
30 | value: 20381,
31 | },
32 | {
33 | timePeriod: '7 Aug',
34 | value: 19381,
35 | },
36 | {
37 | timePeriod: '8 Aug',
38 | value: 5693,
39 | },
40 | {
41 | timePeriod: '9 Aug',
42 | value: 11283,
43 | },
44 | {
45 | timePeriod: '10 Aug',
46 | value: 17621,
47 | },
48 | ];
49 |
50 | const config = {
51 | data,
52 | xField: 'timePeriod',
53 | yField: 'value',
54 | xAxis: {
55 | range: [0, 1],
56 | },
57 | smooth: true,
58 | };
59 |
60 | return
71 | More details
78 | );
79 | };
80 |
--------------------------------------------------------------------------------
/src/components/dashboard/marketing/index.ts:
--------------------------------------------------------------------------------
1 | export { StatsCard } from './StatsCard/StatsCard.tsx';
2 | export { VisitorsChartCard } from './VisitorsChartCard/VisitorsChartCard.tsx';
3 | export { SocialStatsCard } from './SocialStatsCard/SocialStatsCard.tsx';
4 | export { CampaignsActivity } from './CampaignsActivity/CampaignsActivity.tsx';
5 | export { CampaignsAdsCard } from './CampaignsAdsCard/CampaignsAdsCard.tsx';
6 | export { AudienceLocationChart } from './AudienceLocationChart/AudienceLocationChart.tsx';
7 |
--------------------------------------------------------------------------------
/src/components/dashboard/projects/ClientsTable/ClientsTable.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import ClientsData from '../../../../../public/mocks/Clients.json';
3 |
4 | import { ClientsTable } from './ClientsTable.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Projects/Clients',
8 | component: ClientsTable,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | } satisfies Meta;
13 |
14 | export default meta;
15 |
16 | type Story = StoryObj;
17 |
18 | export const Default: Story = {
19 | args: {
20 | data: ClientsData.slice(0, 10),
21 | style: { width: 600 },
22 | },
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/dashboard/projects/ClientsTable/ClientsTable.tsx:
--------------------------------------------------------------------------------
1 | import { Table, TableProps, Typography } from 'antd';
2 | import { Clients } from '../../../../types';
3 | import { UserAvatar } from '../../../index.ts';
4 |
5 | const COLUMNS = [
6 | {
7 | title: 'Client Name',
8 | dataIndex: 'client_name',
9 | key: 'c_name',
10 | render: (_: any, { first_name, last_name }: Clients) => (
11 | ${_} ,
19 | },
20 | ];
21 |
22 | type Props = {
23 | data: Clients[];
24 | } & TableProps;
25 |
26 | export const ClientsTable = ({ data, ...others }: Props) => (
27 |
35 | );
36 |
--------------------------------------------------------------------------------
/src/components/dashboard/projects/ProjectsCountCard/ProjectsCountCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { ProjectsCountCard } from './ProjectsCountCard.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Projects/Project count',
7 | component: ProjectsCountCard,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/projects/ProjectsCountCard/styles.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/design-sparx/antd-multipurpose-dashboard/005fdbcf2d946b0f74e488e2673fc7c7589e5de3/src/components/dashboard/projects/ProjectsCountCard/styles.scss
--------------------------------------------------------------------------------
/src/components/dashboard/projects/ProjectsTables/ProjectsTable.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import ProjectsData from '../../../../../public/mocks/Projects.json';
3 |
4 | import { ProjectsTable } from './ProjectsTable.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Projects/Projects table',
8 | component: ProjectsTable,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | } satisfies Meta;
13 |
14 | export default meta;
15 |
16 | type Story = StoryObj;
17 |
18 | export const Default: Story = {
19 | args: {
20 | data: ProjectsData.slice(0, 10),
21 | style: { width: 1000 },
22 | },
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/dashboard/projects/index.ts:
--------------------------------------------------------------------------------
1 | export { ClientsTable } from './ClientsTable/ClientsTable.tsx';
2 | export { ProjectsCountCard } from './ProjectsCountCard/ProjectsCountCard.tsx';
3 | export { ProjectsTable } from './ProjectsTables/ProjectsTable.tsx';
4 |
--------------------------------------------------------------------------------
/src/components/dashboard/shared/PostsCard/PostsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import PostsData from '../../../../../public/mocks/ScheduledPosts.json';
3 |
4 | import { PostsCard } from './PostsCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Posts list',
8 | component: PostsCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Active: Story = {
20 | args: {
21 | as: 'active',
22 | data: PostsData.slice(0, 10),
23 | style: { width: 600 },
24 | },
25 | };
26 |
27 | export const Scheduled: Story = {
28 | args: {
29 | as: 'scheduled',
30 | data: PostsData.slice(0, 10),
31 | style: { width: 600 },
32 | },
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/dashboard/shared/PostsCard/styles.css:
--------------------------------------------------------------------------------
1 | .posts-lists-card .ant-card-body {
2 | padding: 0 0 1rem 0;
3 | }
4 |
5 | .available-tucks-card .ant-list-item {
6 | /*padding: 0;*/
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/dashboard/shared/ProjectsCard/ProjectsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { ProjectsCard } from './ProjectsCard.tsx';
4 |
5 | const DATA = {
6 | project_id: 'ea74b32d-6466-4ef7-87cb-a17e0c38c1a8',
7 | project_name:
8 | 'aenean sit amet justo morbi ut odio cras mi pede malesuada in imperdiet et commodo vulputate justo in blandit ultrices',
9 | start_date: '10/2/2022',
10 | end_date: '3/13/2022',
11 | budget: 'Peso',
12 | project_manager: 'Dael Bulward',
13 | client_name: 'Topicblab',
14 | status: 'in progress',
15 | priority: 'medium',
16 | team_size: 17,
17 | project_description:
18 | 'Aliquam quis turpis eget elit sodales scelerisque. Mauris sit amet eros. Suspendisse accumsan tortor quis turpis.\n\nSed ante. Vivamus tortor. Duis mattis egestas metus.\n\nAenean fermentum. Donec ut mauris eget massa tempor convallis. Nulla neque libero, convallis eget, eleifend luctus, ultricies eu, nibh.',
19 | project_location: 'Palermo',
20 | project_type: 'marketing',
21 | project_category: 'government',
22 | project_duration: 6.1,
23 | };
24 |
25 | const meta = {
26 | title: 'Components/Project',
27 | component: ProjectsCard,
28 | parameters: {
29 | layout: 'centered',
30 | },
31 | tags: ['autodocs'],
32 | } satisfies Meta;
33 |
34 | export default meta;
35 |
36 | type Story = StoryObj;
37 |
38 | export const Default: Story = {
39 | args: {
40 | project: DATA,
41 | style: { width: 600 },
42 | },
43 | };
44 |
45 | export const Small: Story = {
46 | args: {
47 | project: DATA,
48 | size: 'small',
49 | style: { width: 400 },
50 | },
51 | };
52 |
--------------------------------------------------------------------------------
/src/components/dashboard/shared/ProjectsCard/styles.css:
--------------------------------------------------------------------------------
1 | .project-small-card .ant-card-body {
2 | }
3 |
--------------------------------------------------------------------------------
/src/components/dashboard/shared/RevenueCard/RevenueCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { RevenueCard } from './RevenueCard.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Revenue',
7 | component: RevenueCard,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | tags: ['autodocs'],
12 | } satisfies Meta;
13 |
14 | export default meta;
15 |
16 | type Story = StoryObj;
17 |
18 | export const Default: Story = {
19 | args: {
20 | title: 'Visitors',
21 | value: 20149,
22 | diff: 5.54,
23 | style: { width: 320 },
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/src/components/dashboard/shared/RevenueCard/RevenueCard.tsx:
--------------------------------------------------------------------------------
1 | import { CardProps, Flex, Space, Typography } from 'antd';
2 | import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
3 | import { green, red } from '@ant-design/colors';
4 | import CountUp from 'react-countup';
5 | import { Card } from '../../../index.ts';
6 | import { CSSProperties } from 'react';
7 |
8 | type Props = {
9 | title: string;
10 | value: string | number;
11 | diff: number;
12 | justify?: CSSProperties['justifyContent'];
13 | height?: number;
14 | } & CardProps;
15 |
16 | export const RevenueCard = (props: Props) => {
17 | const { title, value, diff, justify, height, ...others } = props;
18 |
19 | return (
20 |
21 |
27 | {title}
28 |
29 |
30 | {typeof value === 'number' ? (
31 | <>
32 | $
33 | {value}
37 | )}
38 |
39 | 0 ? green[6] : red[5] }}>
40 | {diff > 0 ? 0 ? green[6] : red[5],
44 | fontWeight: 500,
45 | }}
46 | >
47 |
49 |
50 |
51 |
52 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/src/components/dashboard/shared/index.ts:
--------------------------------------------------------------------------------
1 | export { RevenueCard } from './RevenueCard/RevenueCard.tsx';
2 | export { PostsCard } from './PostsCard/PostsCard.tsx';
3 | export { ProjectsCard } from './ProjectsCard/ProjectsCard.tsx';
4 |
--------------------------------------------------------------------------------
/src/components/dashboard/social/CommentsCard/CommentsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import SocialsCommentsData from '../../../../../public/mocks/SocialComments.json';
3 |
4 | import { CommentsCard } from './CommentsCard.tsx';
5 |
6 | const meta = {
7 | title: 'Components/Dashboard/Social/Comments',
8 | component: CommentsCard,
9 | parameters: {
10 | layout: 'centered',
11 | },
12 | tags: ['autodocs'],
13 | } satisfies Meta;
14 |
15 | export default meta;
16 |
17 | type Story = StoryObj;
18 |
19 | export const Default: Story = {
20 | args: {
21 | data: SocialsCommentsData.slice(0, 5),
22 | style: { width: 600 },
23 | },
24 | };
25 |
26 | export const Loading: Story = {
27 | args: {
28 | loading: true,
29 | style: { width: 600 },
30 | },
31 | };
32 |
33 | export const Error: Story = {
34 | args: {
35 | error: 'Error fetching items',
36 | style: { width: 600 },
37 | },
38 | };
39 |
40 | export const Empty: Story = {
41 | args: {
42 | data: [],
43 | style: { width: 600 },
44 | },
45 | };
46 |
--------------------------------------------------------------------------------
/src/components/dashboard/social/CommentsCard/styles.css:
--------------------------------------------------------------------------------
1 | .comments-lists-card .ant-card-body {
2 | /*padding: 1rem 0 1rem 0;*/
3 | }
4 |
5 | .available-tucks-card .ant-list-item {
6 | /*padding: 0;*/
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/dashboard/social/DevicesCardChart/DevicesCardChart.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { DevicesCardChart } from './DevicesCardChart.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Social/Devices chart',
7 | component: DevicesCardChart,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/social/FollowersChart/FollowersChart.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { FollowersChart } from './FollowersChart.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Social/Followers chart',
7 | component: FollowersChart,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/social/LikesChart/LikesChart.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { LikesChart } from './LikesChart.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Social/Likes',
7 | component: LikesChart,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/social/MilestonesCard/MilestonesCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { MilestonesCard } from './MilestonesCard.tsx';
4 |
5 | const meta = {
6 | title: 'Components/Dashboard/Social/Milestones',
7 | component: MilestonesCard,
8 | parameters: {
9 | layout: 'centered',
10 | },
11 | } satisfies Meta;
12 |
13 | export default meta;
14 |
15 | type Story = StoryObj;
16 |
17 | export const Default: Story = {
18 | args: {
19 | style: { width: 600 },
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/dashboard/social/MilestonesCard/styles.css:
--------------------------------------------------------------------------------
1 | .milestones-lists-card .ant-card-body {
2 | padding: 0 0 1rem 0;
3 | }
4 |
5 | .available-tucks-card .ant-list-item {
6 | /*padding: 0;*/
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/dashboard/social/SocialStatsCard/SocialStatsCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { SocialStatsCard } from './SocialStatsCard.tsx';
4 |
5 | const DATA = {
6 | title: 'followers',
7 | value: 3432,
8 | };
9 |
10 | const meta = {
11 | title: 'Components/Dashboard/Social/Stats',
12 | component: SocialStatsCard,
13 | parameters: {
14 | layout: 'centered',
15 | },
16 | tags: ['autodocs'],
17 | } satisfies Meta;
18 |
19 | export default meta;
20 |
21 | type Story = StoryObj;
22 |
23 | export const Default: Story = {
24 | args: {
25 | ...DATA,
26 | style: { width: 300 },
27 | },
28 | };
29 |
30 | export const Loading: Story = {
31 | args: {
32 | ...DATA,
33 | loading: true,
34 | style: { width: 300 },
35 | },
36 | };
37 |
38 | export const Error: Story = {
39 | args: {
40 | ...DATA,
41 | error: 'Error fetching items',
42 | style: { width: 300 },
43 | },
44 | };
45 |
--------------------------------------------------------------------------------
/src/components/dashboard/social/SocialStatsCard/SocialStatsCard.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, CardProps, Flex, Typography } from 'antd';
2 | import {
3 | CommentOutlined,
4 | LikeOutlined,
5 | UserAddOutlined,
6 | UserOutlined,
7 | UserSwitchOutlined,
8 | } from '@ant-design/icons';
9 | import { ReactElement, ReactNode } from 'react';
10 | import { Card, Loader } from '../../../index';
11 | import CountUp from 'react-countup';
12 |
13 | type Props = {
14 | title: 'followers' | 'following' | 'likes' | 'comments' | string;
15 | value?: number;
16 | error?: ReactNode;
17 | loading?: boolean;
18 | } & CardProps;
19 |
20 | export const SocialStatsCard = ({
21 | value,
22 | title,
23 | loading,
24 | error,
25 | ...others
26 | }: Props) => {
27 | const Icon = (): ReactElement => {
28 | let i;
29 | switch (title) {
30 | case 'following':
31 | i =
52 | {error ? (
53 |
63 | {title}
65 |
66 |
68 |
69 | )}
70 |
71 | );
72 | };
73 |
--------------------------------------------------------------------------------
/src/components/dashboard/social/index.ts:
--------------------------------------------------------------------------------
1 | export { SocialStatsCard } from './SocialStatsCard/SocialStatsCard.tsx';
2 | export { FollowersChart } from './FollowersChart/FollowersChart.tsx';
3 | export { LikesChart } from './LikesChart/LikesChart.tsx';
4 | export { DevicesCardChart } from './DevicesCardChart/DevicesCardChart.tsx';
5 | export { MilestonesCard } from './MilestonesCard/MilestonesCard.tsx';
6 | export { CommentsCard } from './CommentsCard/CommentsCard.tsx';
7 |
--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { BackBtn } from './BackBtn/BackBtn.tsx';
2 | export { BlogsListCard } from './corporate/BlogsListCard/BlogsListCard';
3 | export { Card } from './Card/Card';
4 | export { ContactForm } from './ContactForm/ContactForm';
5 | export { EmployeeCard } from './EmployeeCard/EmployeeCard';
6 | export { FaqCollapse } from './FaqCollapse/FaqCollapse';
7 | export { Flex } from './Flex/Flex';
8 | export { Loader } from './Loader/Loader';
9 | export { Logo } from './Logo/Logo';
10 | export { MoreMenu } from './MoreMenu/MoreMenu';
11 | export { NotificationsCard } from './NotificationsCard/NotificationsCard';
12 | export { NotificationsItem } from './NotificationsItem/NotificationsItem';
13 | export { PageHeader } from './PageHeader/PageHeader';
14 | export { PricingTable } from './PricingTable/PricingTable';
15 | export { RefreshBtn } from './RefreshBtn/RefreshBtn.tsx';
16 | export { SitemapCard } from './SitemapCard/SitemapCard';
17 | export { SocialMediaCard } from './SocialMediaCard/SocialMediaCard';
18 | export { TimelineCard } from './TimelineCard/TimelineCard';
19 | export { UserAvatar } from './UserAvatar/UserAvatar';
20 | export * from './Nprogress';
21 | export * from './dashboard';
22 | export * from './Container';
23 |
--------------------------------------------------------------------------------
/src/context/index.ts:
--------------------------------------------------------------------------------
1 | import { StylesContext, useStylesContext } from './styles';
2 |
3 | export { StylesContext, useStylesContext };
4 |
--------------------------------------------------------------------------------
/src/context/styles.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react';
2 | import { CarouselProps, RowProps } from 'antd';
3 |
4 | export type StylesContentProps = {
5 | rowProps: RowProps;
6 | carouselProps: CarouselProps;
7 | };
8 |
9 | export const StylesContext = createContext(null);
10 |
11 | export const useStylesContext = () => useContext(StylesContext);
12 |
--------------------------------------------------------------------------------
/src/firebase/firebaseConfig.ts:
--------------------------------------------------------------------------------
1 | // Import the functions you need from the SDKs you need
2 | import { initializeApp } from 'firebase/app';
3 | import { getAnalytics } from 'firebase/analytics';
4 | import { getMessaging } from 'firebase/messaging';
5 |
6 | const {
7 | VITE_APP_API_KEY,
8 | VITE_APP_AUTH_DOMAIN,
9 | VITE_APP_PROJECT_ID,
10 | VITE_APP_STORAGE_BUCKET,
11 | VITE_APP_MESSENGER_SENDER_ID,
12 | VITE_APP_APP_ID,
13 | VITE_APP_MEASUREMENT_ID,
14 | } = import.meta.env;
15 |
16 | // TODO: Add SDKs for Firebase products that you want to use
17 | // https://firebase.google.com/docs/web/setup#available-libraries
18 |
19 | // Your web app's Firebase configuration
20 | // For Firebase JS SDK v7.20.0 and later, measurementId is optional
21 | const firebaseConfig = {
22 | apiKey: VITE_APP_API_KEY,
23 | authDomain: VITE_APP_AUTH_DOMAIN,
24 | projectId: VITE_APP_PROJECT_ID,
25 | storageBucket: VITE_APP_STORAGE_BUCKET,
26 | messagingSenderId: VITE_APP_MESSENGER_SENDER_ID,
27 | appId: VITE_APP_APP_ID,
28 | measurementId: VITE_APP_MEASUREMENT_ID,
29 | };
30 |
31 | // Initialize Firebase
32 | const app = initializeApp(firebaseConfig);
33 | const analytics = getAnalytics(app);
34 | const messaging = getMessaging(app);
35 |
36 | export { analytics, messaging };
37 |
--------------------------------------------------------------------------------
/src/hooks/index.ts:
--------------------------------------------------------------------------------
1 | import { usePageContext } from './usePageContext.tsx';
2 | import useFetchData from './useFetchData.tsx';
3 |
4 | export { usePageContext, useFetchData };
5 |
--------------------------------------------------------------------------------
/src/hooks/useFetchData.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useState } from 'react';
2 |
3 | const useFetchData = (url: string) => {
4 | const [data, setData] = useState([]);
5 | const [error, setError] = useState(null);
6 | const [loading, setLoading] = useState(true);
7 |
8 | const fetchData = useCallback(async () => {
9 | try {
10 | const response = await fetch(url);
11 | const json = await response.json();
12 |
13 | setData(json);
14 | } catch (error) {
15 | setError(error);
16 | } finally {
17 | setLoading(false);
18 | }
19 | }, []);
20 |
21 | useEffect(() => {
22 | fetchData();
23 | }, [url]);
24 |
25 | return { data, error, loading };
26 | };
27 |
28 | export default useFetchData;
29 |
--------------------------------------------------------------------------------
/src/hooks/usePageContext.tsx:
--------------------------------------------------------------------------------
1 | import { useOutletContext } from 'react-router-dom';
2 |
3 | export type ContextType = { title: string | null };
4 |
5 | export function usePageContext() {
6 | return useOutletContext();
7 | }
8 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: 'Lato', sans-serif;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | }
8 |
--------------------------------------------------------------------------------
/src/layouts/app/FooterNav.tsx:
--------------------------------------------------------------------------------
1 | import { Layout } from 'antd';
2 |
3 | const { Footer } = Layout;
4 |
5 | type FooterNavProps = React.HTMLAttributes;
6 |
7 | const FooterNav = ({ ...others }: FooterNavProps) => {
8 | return (
9 | AntD Dashboard © 2023 Created by Design Sparx
10 | );
11 | };
12 |
13 | export default FooterNav;
14 |
--------------------------------------------------------------------------------
/src/layouts/app/HeaderNav.tsx:
--------------------------------------------------------------------------------
1 | import { Layout } from 'antd';
2 | import { useRef } from 'react';
3 |
4 | const { Header } = Layout;
5 |
6 | type HeaderNavProps = {
7 | navFill?: boolean;
8 | } & React.HTMLAttributes;
9 |
10 | const HeaderNav = ({ navFill, ...others }: HeaderNavProps) => {
11 | const nodeRef = useRef(null);
12 |
13 | return ;
14 | };
15 |
16 | export default HeaderNav;
17 |
--------------------------------------------------------------------------------
/src/layouts/app/index.ts:
--------------------------------------------------------------------------------
1 | export { AppLayout } from './App.tsx';
2 |
--------------------------------------------------------------------------------
/src/layouts/dashboards/index.tsx:
--------------------------------------------------------------------------------
1 | import { AppLayout } from '../app';
2 | import { Outlet } from 'react-router-dom';
3 |
4 | export const DashboardLayout = () => {
5 | return (
6 |
7 |
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/src/layouts/index.ts:
--------------------------------------------------------------------------------
1 | export { AppLayout } from './app';
2 | export { DashboardLayout } from './dashboards';
3 | export { GuestLayout } from './guest/Guest.tsx';
4 | export { CorporateLayout } from './corporate';
5 | export { UserAccountLayout } from './userAccount';
6 |
--------------------------------------------------------------------------------
/src/layouts/userAccount/styles.css:
--------------------------------------------------------------------------------
1 | .user-profile-card-nav .ant-tabs-nav {
2 | margin: 0 0 0 1rem;
3 | }
4 |
5 | .user-profile-card-nav .ant-card-actions li:first-of-type {
6 | margin: 0;
7 | }
8 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App.tsx';
4 | import './index.css';
5 | import { store, persistor } from './redux/store.ts';
6 | import { Provider } from 'react-redux';
7 | import { PersistGate } from 'redux-persist/integration/react';
8 | ReactDOM.createRoot(document.getElementById('root')!).render(
9 |
10 |
11 |
12 |
14 |
15 | ,
16 |
17 | );
18 |
--------------------------------------------------------------------------------
/src/pages/Sitemap.tsx:
--------------------------------------------------------------------------------
1 | import { SitemapCard } from '../components';
2 | import { Col, Flex, Row, Typography } from 'antd';
3 | import {
4 | AUTHENTICATION_ITEMS,
5 | CORPORATE_ITEMS,
6 | DASHBOARD_ITEMS,
7 | ERROR_ITEMS,
8 | USER_PROFILE_ITEMS,
9 | } from '../constants';
10 | import { useStylesContext } from '../context';
11 | import { BranchesOutlined } from '@ant-design/icons';
12 |
13 | const SITES = [
14 | {
15 | title: 'dashboard',
16 | links: DASHBOARD_ITEMS,
17 | },
18 | {
19 | title: 'corporate',
20 | links: CORPORATE_ITEMS,
21 | },
22 | {
23 | title: 'user profile',
24 | links: USER_PROFILE_ITEMS,
25 | },
26 | {
27 | title: 'authentication',
28 | links: AUTHENTICATION_ITEMS,
29 | },
30 | {
31 | title: 'errors',
32 | links: ERROR_ITEMS,
33 | },
34 | ];
35 |
36 | export const SitemapPage = () => {
37 | const context = useStylesContext();
38 |
39 | return (
40 |
41 |
42 |
43 |
45 |
46 | {SITES.map((s) => (
47 |
52 |
53 |
54 | );
55 | };
56 |
--------------------------------------------------------------------------------
/src/pages/authentication/AccountDeactivate.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Flex, Typography } from 'antd';
2 | import { Logo } from '../../components';
3 | import { Link } from 'react-router-dom';
4 | import { PATH_DASHBOARD } from '../../constants';
5 |
6 | export const AccountDeactivePage = () => {
7 | return (
8 |
15 | Deactivated Account
17 |
18 | Looking for answers? Check the
20 |
22 | Go to Homepage
23 |
24 |
25 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/src/pages/authentication/VerifyEmail.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Flex, Typography } from 'antd';
2 | import { Logo } from '../../components';
3 | import { Link } from 'react-router-dom';
4 | import { PATH_DASHBOARD } from '../../constants';
5 |
6 | export const VerifyEmailPage = () => {
7 | return (
8 |
15 | Verify Your Email
17 |
18 | We have sent an email to{' '}
19 |
24 | Skip
26 |
27 |
28 | Did’t receive an email?
29 | Resend
30 |
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/pages/authentication/Welcome.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Flex, Typography } from 'antd';
2 | import { Logo } from '../../components';
3 | import { Link } from 'react-router-dom';
4 | import { PATH_DASHBOARD } from '../../constants';
5 |
6 | export const WelcomePage = () => {
7 | return (
8 |
15 | Welcome to Antd
17 |
18 | A dynamic and versatile multipurpose dashboard utilizing Ant Design,
19 | React, TypeScript, and Vite.
20 |
21 |
23 | Go to Homepage
24 |
25 |
26 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/src/pages/authentication/index.ts:
--------------------------------------------------------------------------------
1 | export { SignUpPage } from './SignUp.tsx';
2 | export { SignInPage } from './SignIn.tsx';
3 | export { WelcomePage } from './Welcome.tsx';
4 | export { VerifyEmailPage } from './VerifyEmail.tsx';
5 | export { PasswordResetPage } from './PasswordReset.tsx';
6 | export { AccountDeactivePage } from './AccountDeactivate.tsx';
7 |
--------------------------------------------------------------------------------
/src/pages/corporate/Faqs.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, Col, Row, Space, Typography } from 'antd';
2 | import { Card, FaqCollapse, Loader } from '../../components';
3 | import * as _ from 'lodash';
4 | import { useEffect, useState } from 'react';
5 | import { Faq } from '../../types';
6 | import { useStylesContext } from '../../context';
7 | import { useFetchData } from '../../hooks';
8 |
9 | export const CorporateFaqPage = () => {
10 | const {
11 | data: faqsData,
12 | loading: faqsDataLoading,
13 | error: faqsDataError,
14 | } = useFetchData('../mocks/Faqs.json');
15 | const [faqs, setFaqs] = useState<{ category: string; items: Faq[] }[]>([]);
16 | const stylesContext = useStylesContext();
17 |
18 | useEffect(() => {
19 | const data = _.chain(faqsData)
20 | .groupBy('category')
21 | .map((items, category) => {
22 | return {
23 | category,
24 | items: items.slice(0, 4).map((i) => ({
25 | ...i,
26 | label: i.question.slice(0, 50) + '...?',
27 | children: i.answer,
28 | })),
29 | };
30 | })
31 | .orderBy('category')
32 | .value();
33 |
34 | setFaqs(data);
35 | }, [faqsData]);
36 |
37 | return (
38 |
39 |
40 |
42 | {faqsDataError ? (
43 |
57 | {faqs.map((f) => (
58 | <>
59 | {f.category}
60 |
64 | )}
65 |
66 |
67 |
68 |
17 |
18 |
20 | {employeesDataError ? (
21 | {
40 | console.log(page);
41 | },
42 | pageSize: 10,
43 | align: 'center',
44 | }}
45 | loading={employeesDataLoading}
46 | dataSource={employeesData}
47 | renderItem={(item: Employee) => (
48 |
49 |
51 | )}
52 | />
53 | )}
54 |
55 |
56 |
57 |
21 |
22 |
28 | The page you tried to open has the following error:
29 |
30 |
31 |
{error.statusText || error.message}
32 |
17 |
18 |
24 | The content you submitted has the following error:
25 |
26 |
27 |
28 | Forward error >
30 |
31 |
32 | Go to console >
35 |
36 |
= {
18 | key: 'root',
19 | storage,
20 | version: 1,
21 | };
22 |
23 | const persistedReducer = persistReducer(persistConfig, rootReducer);
24 |
25 | // Configure store with persisted reducer
26 | export const store = configureStore({
27 | reducer: persistedReducer,
28 | middleware: (getDefaultMiddleware) =>
29 | getDefaultMiddleware({
30 | serializableCheck: false,
31 | }),
32 | });
33 |
34 | // Persistor
35 | export const persistor = persistStore(store);
36 |
37 | // Type for RootState
38 | export type { RootState };
39 |
--------------------------------------------------------------------------------
/src/redux/theme/themeSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 |
3 | export interface ThemeState {
4 | mytheme: string;
5 | }
6 |
7 | const initialState: ThemeState = {
8 | mytheme: 'light',
9 | };
10 |
11 | const themeSlice = createSlice({
12 | name: 'mytheme',
13 | initialState,
14 | reducers: {
15 | toggleTheme: (state: ThemeState) => {
16 | state.mytheme = state.mytheme === 'light' ? 'dark' : 'light';
17 | },
18 | },
19 | });
20 |
21 | export const { toggleTheme } = themeSlice.actions;
22 |
23 | export default themeSlice.reducer;
24 |
--------------------------------------------------------------------------------
/src/stories/assets/accessibility.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/design-sparx/antd-multipurpose-dashboard/005fdbcf2d946b0f74e488e2673fc7c7589e5de3/src/stories/assets/accessibility.png
--------------------------------------------------------------------------------
/src/stories/assets/accessibility.svg:
--------------------------------------------------------------------------------
1 |
2 | Accessibility
3 |
--------------------------------------------------------------------------------
/src/stories/assets/addon-library.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/design-sparx/antd-multipurpose-dashboard/005fdbcf2d946b0f74e488e2673fc7c7589e5de3/src/stories/assets/addon-library.png
--------------------------------------------------------------------------------
/src/stories/assets/assets.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/design-sparx/antd-multipurpose-dashboard/005fdbcf2d946b0f74e488e2673fc7c7589e5de3/src/stories/assets/assets.png
--------------------------------------------------------------------------------
/src/stories/assets/context.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/design-sparx/antd-multipurpose-dashboard/005fdbcf2d946b0f74e488e2673fc7c7589e5de3/src/stories/assets/context.png
--------------------------------------------------------------------------------
/src/stories/assets/docs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/design-sparx/antd-multipurpose-dashboard/005fdbcf2d946b0f74e488e2673fc7c7589e5de3/src/stories/assets/docs.png
--------------------------------------------------------------------------------
/src/stories/assets/figma-plugin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/design-sparx/antd-multipurpose-dashboard/005fdbcf2d946b0f74e488e2673fc7c7589e5de3/src/stories/assets/figma-plugin.png
--------------------------------------------------------------------------------
/src/stories/assets/share.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/design-sparx/antd-multipurpose-dashboard/005fdbcf2d946b0f74e488e2673fc7c7589e5de3/src/stories/assets/share.png
--------------------------------------------------------------------------------
/src/stories/assets/styling.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/design-sparx/antd-multipurpose-dashboard/005fdbcf2d946b0f74e488e2673fc7c7589e5de3/src/stories/assets/styling.png
--------------------------------------------------------------------------------
/src/stories/assets/testing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/design-sparx/antd-multipurpose-dashboard/005fdbcf2d946b0f74e488e2673fc7c7589e5de3/src/stories/assets/testing.png
--------------------------------------------------------------------------------
/src/stories/assets/theming.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/design-sparx/antd-multipurpose-dashboard/005fdbcf2d946b0f74e488e2673fc7c7589e5de3/src/stories/assets/theming.png
--------------------------------------------------------------------------------
/src/stories/assets/tutorials.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
9 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/stories/assets/youtube.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/src/types/bidding.ts:
--------------------------------------------------------------------------------
1 | export type Bidding = {
2 | auction_id: string;
3 | nft_name: string;
4 | nft_image: string;
5 | seller_username: string;
6 | buyer_username: string;
7 | start_price: number;
8 | end_price: number;
9 | start_date: string;
10 | end_date: string;
11 | status: 'active' | 'ending soon' | string;
12 | is_highest_bid_mine: boolean;
13 | winning_bid: number;
14 | time_left: string;
15 | };
16 |
17 | export type AuctionCreator = {
18 | creator_id: string;
19 | first_name: string;
20 | last_name: string;
21 | age: number;
22 | email: string;
23 | country: string;
24 | postal_code: string | null;
25 | favorite_color: string;
26 | sales_count: number;
27 | total_sales: string;
28 | };
29 |
30 | export type AuctionSales = {
31 | id: string;
32 | title: string;
33 | artist: string;
34 | volume: number;
35 | status: number;
36 | owners_count: number;
37 | description: string;
38 | image_url: string;
39 | creation_date: string;
40 | edition: number;
41 | price: number;
42 | owner: string;
43 | collection: string;
44 | verified: boolean;
45 | };
46 |
47 | export type AuctionTransactions = {
48 | id: string;
49 | image: string;
50 | product_id: string;
51 | transaction_date: string;
52 | seller: string;
53 | buyer: string;
54 | purchase_price: number;
55 | sale_price: number;
56 | profit: number;
57 | quantity: number;
58 | shipping_address: string;
59 | state: string | null;
60 | country: string;
61 | transaction_type: string;
62 | };
63 |
--------------------------------------------------------------------------------
/src/types/campaigns.ts:
--------------------------------------------------------------------------------
1 | export type CampaignAds = {
2 | id: string;
3 | ad_source: string;
4 | ad_campaign: string;
5 | ad_group: string;
6 | ad_type: string;
7 | impressions: number;
8 | clicks: number;
9 | conversions: number;
10 | cost: number;
11 | conversion_rate: number;
12 | revenue: number;
13 | roi: number;
14 | start_date: string;
15 | };
16 |
--------------------------------------------------------------------------------
/src/types/clients.ts:
--------------------------------------------------------------------------------
1 | export type Clients = {
2 | client_id: string;
3 | first_name: string;
4 | last_name: string;
5 | email: string;
6 | phone_number: string;
7 | purchase_date: string;
8 | product_name: string;
9 | quantity: number;
10 | unit_price: number;
11 | total_price: number;
12 | country: string;
13 | };
14 |
--------------------------------------------------------------------------------
/src/types/comments.ts:
--------------------------------------------------------------------------------
1 | export type CommentsType = 'post' | 'like' | 'comment' | string;
2 |
3 | export type CommentsPlatform =
4 | | 'facebook'
5 | | 'twitter'
6 | | 'instagram'
7 | | 'linkedin'
8 | | 'youtube'
9 | | string;
10 |
11 | export type CommentGender = 'Female' | 'Male' | 'Non-binary' | string;
12 |
13 | export type Comments = {
14 | id: string;
15 | author: string;
16 | user_id: string;
17 | activity_type: CommentsType;
18 | timestamp: string;
19 | post_content: string;
20 | platform: CommentsPlatform;
21 | user_location: string;
22 | user_age: number;
23 | user_gender: CommentGender;
24 | user_interests: string;
25 | user_friends_count: number;
26 | };
27 |
--------------------------------------------------------------------------------
/src/types/dashboard.ts:
--------------------------------------------------------------------------------
1 | export type Tasks = {
2 | id: string;
3 | name: string;
4 | description: string;
5 | priority: string;
6 | due_date: string;
7 | assigned_to: string;
8 | status: string;
9 | notes: string;
10 | category: string;
11 | duration: number;
12 | completed_date: string;
13 | color: string;
14 | };
15 |
--------------------------------------------------------------------------------
/src/types/employee.ts:
--------------------------------------------------------------------------------
1 | export type Employee = {
2 | employee_id: string;
3 | title: string;
4 | first_name: string;
5 | middle_name: string;
6 | last_name: string;
7 | avatar: string;
8 | role: string;
9 | age: number;
10 | email: string;
11 | country: string;
12 | favorite_color: string;
13 | hire_date: string;
14 | salary: number;
15 | };
16 |
--------------------------------------------------------------------------------
/src/types/faq.ts:
--------------------------------------------------------------------------------
1 | export type Faq = {
2 | id: string;
3 | question: string;
4 | answer: string;
5 | category: string;
6 | date_created: string;
7 | is_featured: boolean;
8 | views: number;
9 | related_faqs: Array;
10 | tags: string;
11 | rating: number;
12 | author: string;
13 | };
14 |
--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | Projects,
3 | ProjectCategory,
4 | ProjectStatus,
5 | ProjectPriority,
6 | } from './projects';
7 | import type { Clients } from './clients';
8 | import type { CampaignAds } from './campaigns';
9 | import type { PostPlatform, Posts, PostCategory } from './posts';
10 | import type {
11 | CommentsType,
12 | CommentGender,
13 | CommentsPlatform,
14 | Comments,
15 | } from './comments';
16 | import type {
17 | Bidding,
18 | AuctionCreator,
19 | AuctionSales,
20 | AuctionTransactions,
21 | } from './bidding';
22 | import type {
23 | LearningCourses,
24 | RecommendedCourses,
25 | Exam,
26 | CommunityGroup,
27 | } from './learnings.ts';
28 | import type {
29 | TruckDelivery,
30 | DeliveryAnalytics,
31 | Truck,
32 | DeliveryRequest,
33 | } from './logistics.ts';
34 | import type { Tasks } from './dashboard';
35 | import type { Notifications } from './notifications';
36 | import type { Employee } from './employee';
37 | import type { Faq } from './faq';
38 | import type { Pricing } from './pricing';
39 | import type { Session } from './session';
40 | import type { ActivityTimeline } from './timeline';
41 |
42 | export type {
43 | Projects,
44 | ProjectStatus,
45 | ProjectCategory,
46 | ProjectPriority,
47 | Clients,
48 | CampaignAds,
49 | PostCategory,
50 | PostPlatform,
51 | Posts,
52 | Comments,
53 | CommentGender,
54 | CommentsType,
55 | CommentsPlatform,
56 | Bidding,
57 | AuctionCreator,
58 | AuctionSales,
59 | AuctionTransactions,
60 | LearningCourses,
61 | RecommendedCourses,
62 | Exam,
63 | CommunityGroup,
64 | TruckDelivery,
65 | DeliveryAnalytics,
66 | Truck,
67 | DeliveryRequest,
68 | Tasks,
69 | Notifications,
70 | Employee,
71 | Faq,
72 | Pricing,
73 | Session,
74 | ActivityTimeline,
75 | };
76 |
--------------------------------------------------------------------------------
/src/types/learnings.ts:
--------------------------------------------------------------------------------
1 | export type LearningCourses = {
2 | id: string;
3 | name: string;
4 | code: string;
5 | description: string;
6 | instructor_name: string;
7 | start_date: string;
8 | end_date: string;
9 | credit_hours: number;
10 | department: string;
11 | prerequisites: string;
12 | course_location: string;
13 | total_lessons: number;
14 | current_lessons: number;
15 | favorite_color: string;
16 | };
17 |
18 | export type RecommendedCourses = {
19 | id: string;
20 | name: string;
21 | description: string;
22 | duration: number;
23 | level: string;
24 | price: number;
25 | category: string;
26 | instructor: string;
27 | start_date: string;
28 | course_language: string;
29 | favorite_color: string;
30 | lessons: number;
31 | };
32 |
33 | export type Exam = {
34 | student_id: string;
35 | full_name: string;
36 | email: string;
37 | course: string;
38 | course_code: string;
39 | exam_date: string;
40 | exam_time: number;
41 | exam_duration: number;
42 | exam_score: number;
43 | };
44 |
45 | export type CommunityGroup = {
46 | id: string;
47 | name: string;
48 | description: string;
49 | image: string;
50 | category: string;
51 | location: string;
52 | size: number;
53 | leader: string;
54 | start_date: string;
55 | meeting_time: string;
56 | member_age_range: number;
57 | member_interests: string;
58 | favorite_color: string;
59 | };
60 |
--------------------------------------------------------------------------------
/src/types/logistics.ts:
--------------------------------------------------------------------------------
1 | export type TruckDelivery = {
2 | shipment_id: string;
3 | truck_id: string;
4 | customer_id: string;
5 | customer_name: string;
6 | driver_name: string;
7 | origin_city: string;
8 | destination_city: string;
9 | shipment_date: string;
10 | delivery_time: number;
11 | shipment_weight: number;
12 | delivery_status: string;
13 | shipment_cost: number;
14 | favorite_color: string;
15 | };
16 |
17 | export type DeliveryAnalytics = {
18 | id: string;
19 | value: number;
20 | month: string;
21 | status: string;
22 | };
23 |
24 | export type Truck = {
25 | truck_id: string;
26 | make: string;
27 | model: string;
28 | year: number;
29 | mileage: number;
30 | price: number;
31 | color: string;
32 | status: string;
33 | availability: boolean;
34 | origin: string;
35 | destination: string;
36 | progress: number;
37 | };
38 |
39 | export type DeliveryRequest = {
40 | id: string;
41 | name: string;
42 | pickup_location: string;
43 | delivery_location: string;
44 | delivery_date: string;
45 | delivery_time: number;
46 | truck_type: 'small' | 'medium' | 'large' | string;
47 | cargo_weight: number;
48 | delivery_status: 'pending' | 'in transit' | 'delivered' | string;
49 | driver_name: string;
50 | contact_number: string;
51 | };
52 |
--------------------------------------------------------------------------------
/src/types/notifications.ts:
--------------------------------------------------------------------------------
1 | export type Notifications = {
2 | notification_id: string;
3 | user_id: string;
4 | user: string;
5 | notification_type: string;
6 | notification_date: string;
7 | notification_message: string;
8 | is_read: boolean;
9 | is_deleted: boolean;
10 | notification_category: string;
11 | notification_image: string;
12 | color: string;
13 | };
14 |
--------------------------------------------------------------------------------
/src/types/posts.ts:
--------------------------------------------------------------------------------
1 | export type PostPlatform =
2 | | 'Facebook'
3 | | 'Twitter'
4 | | 'Instagram'
5 | | 'LinkedIn'
6 | | 'YouTube'
7 | | string;
8 |
9 | export type PostCategory = 'News' | 'Events' | 'Promotions' | string;
10 |
11 | export type Posts = {
12 | id: string;
13 | title: string;
14 | content: string;
15 | date: string;
16 | time: number;
17 | author: string;
18 | category: PostCategory;
19 | tags: string;
20 | likes_count: number;
21 | comments_count: number;
22 | shares_count: number;
23 | image_url: string;
24 | link: string;
25 | location: string;
26 | hashtags: string;
27 | platform: PostPlatform;
28 | };
29 |
--------------------------------------------------------------------------------
/src/types/pricing.ts:
--------------------------------------------------------------------------------
1 | export type Pricing = {
2 | plan: string;
3 | monthly: number;
4 | annually: number;
5 | savings_caption: string;
6 | features: string[];
7 | color: string;
8 | preferred?: boolean;
9 | };
10 |
--------------------------------------------------------------------------------
/src/types/projects.ts:
--------------------------------------------------------------------------------
1 | export type ProjectStatus = 'in progress' | 'completed' | 'on hold' | string;
2 | export type ProjectCategory = 'technology' | 'marketing' | 'finance' | string;
3 | export type ProjectPriority = 'high' | 'medium' | 'low' | string;
4 | export type ProjectType =
5 | | 'software development'
6 | | 'marketing'
7 | | 'research'
8 | | string;
9 |
10 | export type Projects = {
11 | project_id: string;
12 | project_name: string;
13 | start_date: string;
14 | end_date: string;
15 | budget: string;
16 | project_manager: string;
17 | client_name: string;
18 | status: ProjectStatus;
19 | priority: ProjectPriority;
20 | team_size: number;
21 | project_description: string;
22 | project_location: string;
23 | project_type: ProjectType;
24 | project_category: ProjectCategory;
25 | project_duration: number;
26 | };
27 |
--------------------------------------------------------------------------------
/src/types/session.ts:
--------------------------------------------------------------------------------
1 | export type Session = {
2 | id: string;
3 | login_time: string;
4 | login_location: string;
5 | device_type: 'mobile' | 'desktop' | 'tablet' | string;
6 | browser: string;
7 | ip_address: string;
8 | session_type: string;
9 | status: 'active' | 'suspended' | 'locked' | string;
10 | login_duration: number;
11 | login_attempts: number;
12 | };
13 |
--------------------------------------------------------------------------------
/src/types/timeline.ts:
--------------------------------------------------------------------------------
1 | export type ActivityTimeline = {
2 | user_id: string;
3 | activity_type: string;
4 | timestamp: string;
5 | post_id: string;
6 | post_content: string;
7 | comment_id: number;
8 | comment_content: string;
9 | like_count: number;
10 | location: string;
11 | device_type: string;
12 | };
13 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
38 |