Merge pull request #4 from design-sparx/ft/default-dashboard

feat:

src/components/NotificationsCard/NotificationsCard.tsx

@@ -0,0 +1,40 @@
+import {Button, Card, CardProps, List} from "antd";
+import {NotificationsItem} from "../index.ts";
+import {Notifications} from "../../types";
+
+import "./styles.css";
+
+type Props = {
+    data: Notifications[]
+} & CardProps
+
+const NotificationsCard = ({data, ...others}: Props) => {
+    return (
+        <Card
+            title="Notifications"
+            extra={<Button>View all</Button>}
+            className="notifications-list-card"
+            {...others}
+        >
+            <List
+                itemLayout="vertical"
+                size="large"
+                pagination={{
+                    onChange: (page) => {
+                        console.log(page);
+                    },
+                    pageSize: 5,
+                    align: "center"
+                }}
+                dataSource={data}
+                renderItem={(item) => (
+                    <List.Item key={item.notification_id}>
+                        <NotificationsItem data={item}/>
+                    </List.Item>
+                )}
+            />
+        </Card>
+    );
+};
+
+export default NotificationsCard;

src/components/NotificationsCard/styles.css

@@ -0,0 +1,7 @@
+.notifications-list-card .ant-card-body {
+    padding: 0 0 1rem 0;
+}
+
+.available-tucks-card .ant-list-item {
+    /*padding: 0;*/
+}

src/components/NotificationsItem/NotificationsItem.tsx

@@ -0,0 +1,53 @@
+import {Notifications} from "../../types";
+import {Avatar, Space, Tag, Typography} from "antd";
+import {ContainerOutlined, MailOutlined, PhoneOutlined} from "@ant-design/icons";
+
+type Props = {
+    data: Notifications
+}
+
+const NotificationsItem = ({data}: Props) => {
+    const {
+        notification_type,
+        notification_category,
+        notification_image,
+        notification_date,
+        notification_message,
+        color
+    } = data
+
+    return (
+        <div style={{display: "flex"}}>
+            <Avatar src={notification_image}/>
+            <div style={{display: "flex", flexDirection: "column", alignSelf: "center"}}>
+                <div style={{display: "flex", alignItems: "center"}}>
+                    <Typography.Text
+                        strong
+                        style={{flexGrow: 1}}
+                    >
+                        {notification_message.slice(0, 30)}...
+                    </Typography.Text>
+                    <Tag
+                        bordered={true}
+                        icon={
+                            notification_type === "voice" ?
+                                <PhoneOutlined/> :
+                                notification_type === "email" ?
+                                    <MailOutlined/> :
+                                    <ContainerOutlined/>
+                        }
+                        style={{textTransform: "capitalize"}}
+                    >
+                        {notification_type}
+                    </Tag>
+                </div>
+                <Space>
+                    <Tag bordered={true} color={color}>{notification_category}</Tag>
+                    <Typography.Text>{notification_date}</Typography.Text>
+                </Space>
+            </div>
+        </div>
+    );
+};
+
+export default NotificationsItem;

src/components/UserAvatar/UserAvatar.tsx

@@ -1,4 +1,4 @@
-import {Avatar, Space, theme, Typography} from "antd";
+import {Avatar, AvatarProps, Space, theme, Typography} from "antd";
 import {getNameInitials} from "../../utils";
 import {UserOutlined} from "@ant-design/icons";
 
@@ -8,16 +8,30 @@ import {UserOutlined} from "@ant-design/icons";
 type Props = {
     fullName: string
     mark?: boolean
+    size?: "small" | "medium" | "large"
 }
 
-const UserAvatar = ({fullName, mark}: Props) => {
+const UserAvatar = ({fullName, mark, size}: Props) => {
     const {token} = theme.useToken()
 
+    const avatarProps: AvatarProps = {
+        size: size === "large" ? 36 : size === "small" ? 16 : 24
+    }
+
     return (
         <Space>
             {mark ?
-                <Avatar style={{backgroundColor: token.colorPrimary}} icon={<UserOutlined />}/> :
-                <Avatar style={{backgroundColor: token.colorPrimary}}>{getNameInitials(fullName)}</Avatar>
+                <Avatar
+                    style={{backgroundColor: token.colorPrimary}}
+                    icon={<UserOutlined/>}
+                    {...avatarProps}
+                /> :
+                <Avatar
+                    style={{backgroundColor: token.colorPrimary}}
+                    {...avatarProps}
+                >
+                    {getNameInitials(fullName)}
+                </Avatar>
             }
             <Typography.Text>{fullName}</Typography.Text>
         </Space>

src/components/dashboard/default/GetStartedCard/GetStartedCard.tsx

@@ -1,16 +1,20 @@
 import {Button, Card, CardProps, Image, Space, Typography} from "antd";
+import {RightOutlined} from "@ant-design/icons";
 
 type Props = CardProps
 
 const GetStartedCard = ({...others}: Props) => {
     return (
         <Card {...others}>
             <Space align="center">
-                <Image src="/get-started.png" height={200} preview={false} style={{objectFit: 'cover'}}/>
-                <Space direction="vertical">
-                    <Typography.Title level={4}>Get started</Typography.Title>
-                    <Button type="primary">Go to guided setup</Button>
+                <Space direction="vertical" size="large">
+                    <Typography.Title level={4} style={{margin: 0}}>You have 2 projects to finish this
+                        week</Typography.Title>
+                    <Typography.Text>You have already completed 68% of your monthly target. Keep going to achieve your
+                        goal.</Typography.Text>
+                    <Button type="primary">More{' '}<RightOutlined/></Button>
                 </Space>
+                <Image src="/get-started.png" height={200} preview={false} style={{objectFit: 'cover'}}/>
             </Space>
         </Card>
     );

src/components/dashboard/default/TasksChartCard/TasksChartCard.tsx

@@ -0,0 +1,64 @@
+import {Column} from "@ant-design/plots";
+import {Button, Card, CardProps} from "antd";
+
+type Tasks = {
+    day: string,
+    value: number
+    status: string
+}
+
+type ChartProps = {
+    data: Tasks[]
+}
+
+const ColumnChart = ({data}: ChartProps) => {
+    const config = {
+        data,
+        isStack: true,
+        xField: 'day',
+        yField: 'value',
+        seriesField: 'status',
+        label: {
+            position: 'top', // 'top', 'bottom', 'middle'
+            offset: 10,
+            style: {
+                fill: 'transparent'
+            }
+        },
+        interactions: [
+            {
+                type: 'active-region',
+                enable: false,
+            },
+        ],
+        columnBackground: {
+            style: {
+                fill: 'rgba(0,0,0,0.1)',
+            },
+        },
+        legend: {
+            position: "bottom"
+        }
+    };
+
+    // @ts-ignore
+    return <Column {...config} />;
+};
+
+type Props = {
+    data: Tasks[]
+} & CardProps
+
+const TasksChartCard = ({data, ...others}: Props) => {
+    return (
+        <Card
+            title="Tasks stats"
+            extra={<Button>See all</Button>}
+            {...others}
+        >
+            <ColumnChart data={data}/>
+        </Card>
+    );
+};
+
+export default TasksChartCard;

src/components/dashboard/default/TasksListCard/TasksListCard.tsx

@@ -0,0 +1,92 @@
+import {Badge, Button, Card, CardProps, List, Space, Tag, Typography} from "antd";
+import {Tasks} from "../../../../types";
+import {CalendarOutlined, FlagOutlined} from "@ant-design/icons";
+import {UserAvatar} from "../../../index.ts";
+
+import "./styles.css";
+
+
+type Props = {
+    data: Tasks[]
+} & CardProps
+
+const TasksListCard = ({data, ...others}: Props) => {
+    return (
+        <Card
+            title="Tasks"
+            extra={<Button>View all</Button>}
+            className="tasks-list-card"
+            {...others}
+        >
+            <List
+                grid={{
+                    gutter: 16,
+                    xs: 1,
+                    sm: 1,
+                    md: 2,
+                    lg: 3,
+                    xl: 3,
+                    xxl: 4,
+                }}
+                pagination={{
+                    onChange: (page) => {
+                        console.log(page);
+                    },
+                    pageSize: 10,
+                    align: "center"
+                }}
+                dataSource={data}
+                renderItem={(item) => (
+                    <List.Item
+                        key={item.title}
+                    >
+                        <Card title={item.title}>
+                            <Space direction="vertical">
+                                <Space style={{justifyContent: "space-between", width: "100%"}}>
+                                    <Typography.Title
+                                        level={5}
+                                        style={{margin: 0, textTransform: "capitalize"}}
+                                    >
+                                        {item.name.slice(0, 20)}...
+                                    </Typography.Title>
+                                    <Tag bordered={false} style={{textTransform: "capitalize"}}>{item.category}</Tag>
+                                </Space>
+                                <Typography.Paragraph
+                                    ellipsis={{rows: 2}}
+                                    style={{marginBottom: 0}}
+                                >
+                                    {item.description}
+                                </Typography.Paragraph>
+                                <Space style={{justifyContent: "space-between", width: "100%"}}>
+                                    <Tag
+                                        icon={<FlagOutlined/>}
+                                        color={item.color}
+                                        style={{textTransform: "capitalize"}}
+                                    >
+                                        {item.priority}
+                                    </Tag>
+                                    <Badge
+                                        status={
+                                            item.status.toLowerCase() === "completed"
+                                                ? "success"
+                                                : item.status.toLowerCase() === "in progress"
+                                                    ? "processing"
+                                                    : "warning"
+                                        }
+                                        text={<span style={{textTransform: "capitalize"}}>{item.status}</span>}
+                                    />
+                                </Space>
+                                <Space style={{justifyContent: "space-between", width: "100%"}}>
+                                    <Typography.Text><CalendarOutlined/>{' '}{item.due_date}</Typography.Text>
+                                    <UserAvatar fullName={item.assigned_to} size="medium"/>
+                                </Space>
+                            </Space>
+                        </Card>
+                    </List.Item>
+                )}
+            />
+        </Card>
+    );
+};
+
+export default TasksListCard;

src/components/dashboard/default/TasksListCard/styles.css

@@ -0,0 +1,7 @@
+.tasks-list-card .ant-card-body {
+    /*padding: 0 0 1rem 0;*/
+}
+
+.tasks-list-card .ant-list-item {
+    /*padding: 0;*/
+}

src/components/dashboard/default/WeeklyActivityCard/WeeklyActivityCard.tsx

@@ -0,0 +1,42 @@
+import {Area} from "@ant-design/charts";
+import {Card, CardProps} from "antd";
+
+type Activity = {
+    day: string
+    value: number
+}
+
+type ChartProps = {
+    data: Activity[]
+}
+
+const AreaChart = ({data}: ChartProps) => {
+    const config = {
+        data,
+        xField: 'day',
+        yField: 'value',
+        xAxis: {
+            range: [0, 1],
+        },
+        smooth: true
+    };
+
+    return <Area {...config} />;
+}
+
+type Props = {
+    data: Activity[]
+} & CardProps
+
+const WeeklyActivityCard = ({data, ...others}: Props) => {
+    return (
+        <Card
+            title="Weekly activity"
+            {...others}
+        >
+            <AreaChart data={data}/>
+        </Card>
+    );
+};
+
+export default WeeklyActivityCard;