feat: add table variable input

src/common/breadcrumb.ts

@@ -0,0 +1,33 @@
+import { parsingRoute } from "@/helpers/route";
+import { Routes } from "@/routes/routes";
+
+export const Breadcrumbs = {
+    Dashboard: () => [{ label: "Dashboard", href: Routes.Dashboard }],
+    VariableInput: {
+        Index: () => [
+            { label: "Variable Input", href: Routes.VariableInputIndex },
+        ],
+        Create: () => [
+            { label: "Variable Input", href: Routes.VariableInputIndex },
+            {
+                label: "Create Variable Input",
+                href: Routes.VariableInputCreate,
+            },
+        ],
+        Edit: (id: string) => [
+            { label: "Variable Input", href: Routes.VariableInputIndex },
+            {
+                label: "Edit Variable Input",
+                href: parsingRoute(Routes.VariableInputEdit, { id }),
+            },
+        ],
+    },
+    VariableOutput: {
+        Index: () => [
+            { label: "Variable Output", href: Routes.VariableOutputIndex },
+        ],
+    },
+    Result: {
+        Index: () => [{ label: "Result Predict", href: Routes.ResultIndex }],
+    },
+};

src/components/shared/Button/Button.tsx

@@ -0,0 +1,12 @@
+import { ButtonProps, Button as ButtonAntd } from "antd";
+import React from "react";
+import { Link } from "react-router-dom";
+
+interface IProps extends ButtonProps {}
+
+const Button: React.FC<IProps> = (props) => {
+    const btn = <ButtonAntd {...props}>{props.children}</ButtonAntd>;
+    return props.href ? <Link to={props.href}>{btn}</Link> : btn;
+};
+
+export default Button;

src/components/shared/Loader/LoaderCenter.tsx

@@ -0,0 +1,12 @@
+import { Row, Spin } from "antd";
+import React from "react";
+
+const LoaderCenter: React.FC = () => {
+    return (
+        <Row justify="center">
+            <Spin size="large"></Spin>
+        </Row>
+    );
+};
+
+export default LoaderCenter;

src/components/shared/Table/RowActionButtons.tsx

@@ -0,0 +1,56 @@
+import { Space } from "antd";
+import React from "react";
+import Button from "../Button/Button";
+import { DeleteOutlined, EditOutlined, EyeOutlined } from "@ant-design/icons";
+
+interface IButtonAction {
+    type: "detail" | "edit" | "delete" | "custom";
+    href?: string;
+    button?: React.ReactNode;
+    onClick?: () => void;
+}
+
+interface IProps {
+    actions: IButtonAction[];
+}
+
+const RowActionButtons: React.FC<IProps> = ({ actions }) => {
+    const renderButtonAction = (action: IButtonAction) => {
+        switch (action.type) {
+            case "detail":
+                return (
+                    action.button ?? (
+                        <Button
+                            icon={<EyeOutlined />}
+                            href={action.href}
+                        ></Button>
+                    )
+                );
+            case "edit":
+                return (
+                    action.button ?? (
+                        <Button
+                            icon={<EditOutlined />}
+                            href={action.href}
+                        ></Button>
+                    )
+                );
+            case "delete":
+                return (
+                    action.button ?? (
+                        <Button
+                            icon={<DeleteOutlined />}
+                            onClick={action.onClick}
+                        ></Button>
+                    )
+                );
+            case "custom":
+                return action.button;
+            default:
+                return <React.Fragment></React.Fragment>;
+        }
+    };
+    return <Space>{actions.map((action) => renderButtonAction(action))}</Space>;
+};
+
+export default RowActionButtons;

src/helpers/table.ts

@@ -0,0 +1,8 @@
+import { ColumnGroupType, ColumnType } from "antd/es/table";
+
+export const numberColumns = <T>(): ColumnGroupType<T> | ColumnType<T> => {
+    return {
+        title: "No",
+        render: (_, __, index) => index + 1,
+    };
+};

src/interfaces/entities/VariableInput/index.ts

@@ -0,0 +1,6 @@
+import { IBaseEntity } from "../base";
+
+export interface IVariableInput extends IBaseEntity {
+    id: number;
+    name: string;
+}

src/interfaces/responses/VariableInput/index.ts

@@ -0,0 +1,8 @@
+import { IVariableInput } from "@/interfaces/entities/VariableInput";
+import { IBaseResponse } from "../base";
+
+export interface IVariableInputIndexResponse
+    extends IBaseResponse<IVariableInput[]> {}
+
+export interface IVariableInputDetailResponse
+    extends IBaseResponse<IVariableInput> {}

src/layouts/MainLayout.tsx

@@ -1,4 +1,13 @@
-import { Button, Grid, Layout, Menu, Row } from "antd";
+import {
+    Breadcrumb,
+    Button,
+    Grid,
+    Layout,
+    Menu,
+    Row,
+    Space,
+    Typography,
+} from "antd";
 import Sider from "antd/es/layout/Sider";
 import { Content, Header } from "antd/es/layout/layout";
 import React from "react";
@@ -12,11 +21,13 @@ import {
 import { ItemType, MenuItemType } from "antd/es/menu/hooks/useItems";
 import { colorConfig } from "@/themes/config";
 import Avatar from "@/components/layout/Avatar";
-import { useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Routes } from "@/routes/routes";
 
 interface IProps {
     children: React.ReactNode;
+    title: string;
+    breadcrumbs?: { label: string; href: string }[];
 }
 
 const iconSidebarStyle = {
@@ -31,7 +42,7 @@ const menuKey = {
     Result: Routes.ResultIndex,
 };
 
-const MainLayout: React.FC<IProps> = ({ children }) => {
+const MainLayout: React.FC<IProps> = ({ children, ...props }) => {
     const [isSiderCollapsed, setIsSiderCollapsed] = React.useState(false);
     const { md } = Grid.useBreakpoint();
     const navigate = useNavigate();
@@ -89,6 +100,7 @@ const MainLayout: React.FC<IProps> = ({ children }) => {
                     top: 0,
                     bottom: 0,
                     padding: "1rem 0",
+                    zIndex: 50,
                 }}
                 trigger={null}
                 collapsible
@@ -111,6 +123,10 @@ const MainLayout: React.FC<IProps> = ({ children }) => {
                         background: colorConfig.neutral.white,
                         display: "flex",
                         alignItems: "center",
+                        position: "sticky",
+                        top: 0,
+                        zIndex: 5,
+                        boxShadow: "15px -3px 21px -5px rgba(0,0,0,0.75)",
                     }}
                 >
                     <Row
@@ -141,11 +157,29 @@ const MainLayout: React.FC<IProps> = ({ children }) => {
                     style={{
                         backgroundColor: colorConfig.neutral.lightGray,
                         padding: isSiderCollapsed
-                            ? "2rem 2rem 2rem 5rem"
-                            : "2rem 2rem 2rem 14.5rem",
+                            ? "1rem 2rem 2rem 5rem"
+                            : "1rem 2rem 2rem 14.5rem",
                     }}
                 >
-                    {children}
+                    <Space
+                        direction="vertical"
+                        style={{ width: "100%" }}
+                        size={24}
+                    >
+                        <Space direction="vertical" size={0}>
+                            <Typography.Title level={4}>
+                                {props.title}
+                            </Typography.Title>
+                            <Breadcrumb
+                                items={props.breadcrumbs?.map(
+                                    ({ href, label }) => ({
+                                        title: <Link to={href}>{label}</Link>,
+                                    })
+                                )}
+                            />
+                        </Space>
+                        {children}
+                    </Space>
                 </Content>
             </Layout>
         </Layout>

src/pages/Dashboard/index.tsx

@@ -1,11 +1,12 @@
+import { Breadcrumbs } from "@/common/breadcrumb";
 import MainLayout from "@/layouts/MainLayout";
 import { Card } from "antd";
 import React from "react";
 
 const Dashboard: React.FC = () => {
     return (
-        <MainLayout>
-            <Card title="Dashboard"></Card>
+        <MainLayout title="Dashboard" breadcrumbs={Breadcrumbs.Dashboard()}>
+            <Card></Card>
         </MainLayout>
     );
 };

src/pages/Result/index.tsx

@@ -1,11 +1,12 @@
+import { Breadcrumbs } from "@/common/breadcrumb";
 import MainLayout from "@/layouts/MainLayout";
 import { Card } from "antd";
 import React from "react";
 
 const ResultIndex: React.FC = () => {
     return (
-        <MainLayout>
-            <Card title="Result"></Card>
+        <MainLayout title="Result" breadcrumbs={Breadcrumbs.Result.Index()}>
+            <Card></Card>
         </MainLayout>
     );
 };

src/pages/VariableInput/Form.tsx

@@ -0,0 +1,27 @@
+import { Breadcrumbs } from "@/common/breadcrumb";
+import MainLayout from "@/layouts/MainLayout";
+import { Card } from "antd";
+import React from "react";
+import { useParams } from "react-router-dom";
+
+interface IProps {
+    editPage?: boolean;
+}
+
+const VariableInputForm: React.FC<IProps> = ({ editPage = false }) => {
+    const { id } = useParams();
+    return (
+        <MainLayout
+            title="Variable Input"
+            breadcrumbs={
+                editPage
+                    ? Breadcrumbs.VariableInput.Edit(id)
+                    : Breadcrumbs.VariableInput.Create()
+            }
+        >
+            <Card></Card>
+        </MainLayout>
+    );
+};
+
+export default VariableInputForm;

src/pages/VariableInput/index.tsx

@@ -1,11 +1,71 @@
+import { Breadcrumbs } from "@/common/breadcrumb";
+import Button from "@/components/shared/Button/Button";
+import LoaderCenter from "@/components/shared/Loader/LoaderCenter";
+import RowActionButtons from "@/components/shared/Table/RowActionButtons";
+import { parsingRoute } from "@/helpers/route";
+import { numberColumns } from "@/helpers/table";
+import { IVariableInput } from "@/interfaces/entities/VariableInput";
 import MainLayout from "@/layouts/MainLayout";
-import { Card } from "antd";
+import { Routes } from "@/routes/routes";
+import { useVariableInputQueryIndex } from "@/services/query/VariableInput";
+import { Card, Table } from "antd";
+import { ColumnsType } from "antd/es/table";
 import React from "react";
 
 const VariableInputIndex: React.FC = () => {
+    const query = useVariableInputQueryIndex();
+    const columns: ColumnsType<IVariableInput> = [
+        numberColumns(),
+        {
+            title: "Name",
+            dataIndex: "name",
+        },
+        {
+            title: "Actions",
+            dataIndex: "id",
+            render: (id) => (
+                <RowActionButtons
+                    actions={[
+                        {
+                            type: "detail",
+                            href: parsingRoute(Routes.VariableInputDetail, {
+                                id,
+                            }),
+                        },
+                        {
+                            type: "edit",
+                            href: parsingRoute(Routes.VariableInputEdit, {
+                                id,
+                            }),
+                        },
+                    ]}
+                />
+            ),
+        },
+    ];
+
     return (
-        <MainLayout>
-            <Card title="Variable Input"></Card>
+        <MainLayout
+            title="Variable Input"
+            breadcrumbs={Breadcrumbs.VariableInput.Index()}
+        >
+            <Card
+                extra={[
+                    <Button href={Routes.VariableInputCreate} type="primary">
+                        Create
+                    </Button>,
+                ]}
+            >
+                {query.isLoading ? (
+                    <LoaderCenter />
+                ) : (
+                    <Table
+                        dataSource={query.data.data}
+                        columns={columns}
+                        pagination={false}
+                    />
+                )}
+            </Card>
         </MainLayout>
     );
 };

src/pages/VariableOutput/index.tsx

@@ -1,11 +1,15 @@
+import { Breadcrumbs } from "@/common/breadcrumb";
 import MainLayout from "@/layouts/MainLayout";
 import { Card } from "antd";
 import React from "react";
 
 const VariableOutputIndex: React.FC = () => {
     return (
-        <MainLayout>
-            <Card title="Variable Output"></Card>
+        <MainLayout
+            title="Variable Output"
+            breadcrumbs={Breadcrumbs.VariableOutput.Index()}
+        >
+            <Card></Card>
         </MainLayout>
     );
 };