Skip to content

Commit

Permalink
feat(dashboard): add workflow creation page
Browse files Browse the repository at this point in the history 
Signed-off-by: Mael-RABOT <[email protected]>
  • Loading branch information
@Mael-RABOT
Mael-RABOT committed Dec 3, 2024
1 parent 3f11605 commit 0059c99
Show file tree
Hide file tree
Showing 16 changed files with 1,110 additions and 96 deletions.
1 change: 1 addition & 0 deletions client_web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,6 @@
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script src="node_modules/particlesjs/dist/particles.min.js"></script>
</body>
</html>
492 changes: 491 additions & 1 deletion client_web/package-lock.json
View file

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion client_web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
"dependencies": {
"@azure/msal-browser": "^3.27.0",
"@react-oauth/google": "^0.12.1",
"@tsparticles/engine": "^3.7.1",
"@tsparticles/react": "^3.0.0",
"@tsparticles/slim": "^3.7.1",
"@types/js-cookie": "^3.0.6",
"antd": "^5.22.1",
"axios": "^1.7.7",
Expand All @@ -24,7 +27,8 @@
"js-cookie": "^3.0.5",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.28.0"
"react-router-dom": "^6.28.0",
"react-toastify": "^10.0.6"
},
"devDependencies": {
"@eslint/js": "^9.13.0",
Expand Down
167 changes: 144 additions & 23 deletions client_web/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { ContextManager } from "./Context/ContextManager.tsx";
import { uri } from './Config/uri.ts';
// @ts-ignore
import { uri } from '@Config/uri';

import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import {
type Container,
type ISourceOptions,
MoveDirection,
OutMode,
} from "@tsparticles/engine";
import { loadSlim } from "@tsparticles/slim";

import Home from './Pages/Home';
import NotFound from './Pages/NotFound';
Expand All @@ -19,30 +30,140 @@ import WorkflowsTable from "./Pages/Workflows/WorkflowsTable";

import Dashboard from './Pages/Dashboard/Dashboard.tsx';

import { ToastContainer } from 'react-toastify';
// @ts-ignore
import 'react-toastify/dist/ReactToastify.css';

const App = () => {
const [init, setInit] = useState(false);

useEffect(() => {
initParticlesEngine(async (engine) => {
await loadSlim(engine);
}).then(() => {
setInit(true);
});
}, []);

const particlesLoaded = async (container?: Container): Promise<void> => {
console.log(container);
};

const options: ISourceOptions = useMemo(
() => ({
background: {
color: {
value: "#0077b6",
},
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
},
modes: {
push: {
quantity: 1,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
move: {
direction: MoveDirection.none,
enable: true,
outModes: {
default: OutMode.out,
},
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 5 },
},
},
detectRetina: true,
}),
[],
);

return (
<ContextManager>
<Router>
<Layout>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/dashboard" element={<Dashboard />} />

<Route path={uri.spotify.auth.redirectUri.replace(window.location.origin, "")} element={<SpotifyCallback />} />
<Route path={uri.microsoft.auth.redirectUri.replace(window.location.origin, "")} element={<MicrosoftCallback />} />
<Route path={uri.linkedin.auth.redirectUri.replace(window.location.origin, "")} element={<LinkedinCallback />} />
<Route path={uri.discord.auth.redirectUri.replace(window.location.origin, "")} element={<DiscordCallback />} />

<Route path="/workflow/create" element={<CreateWorkflow />} />
<Route path="/workflows" element={<WorkflowsTable />} />
<Route path="/workflow/:id" element={<NotFound />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Layout>
</Router>
</ContextManager>
<>
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="light"
/>
{init && (
<Particles
id="tsparticles"
particlesLoaded={particlesLoaded}
options={options}
/>
)}
<ContextManager>
<Router>
<Layout>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/dashboard" element={<Dashboard />} />

<Route path={uri.spotify.auth.redirectUri.replace(window.location.origin, "")} element={<SpotifyCallback />} />
<Route path={uri.microsoft.auth.redirectUri.replace(window.location.origin, "")} element={<MicrosoftCallback />} />
<Route path={uri.linkedin.auth.redirectUri.replace(window.location.origin, "")} element={<LinkedinCallback />} />
<Route path={uri.discord.auth.redirectUri.replace(window.location.origin, "")} element={<DiscordCallback />} />

<Route path="/workflow/create" element={<CreateWorkflow />} />
<Route path="/workflows" element={<WorkflowsTable />} />
<Route path="/workflow/:id" element={<NotFound />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Layout>
</Router>
</ContextManager>
</>
);
};

Expand Down
6 changes: 4 additions & 2 deletions client_web/src/Components/LinkButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ interface LinkButtonProps {
text: string;
url?: string;
style?: React.CSSProperties;
type?: "primary" | "default" | "dashed" | "link" | "text" | undefined;
type?: "primary" | "default" | "dashed" | "link" | "text" | "danger" | undefined;
goBack?: boolean;
}

Expand All @@ -21,8 +21,10 @@ const LinkButton: React.FC<LinkButtonProps> = ({ text, url, type = "primary", st
}
};

const buttonStyle = type === "danger" ? { ...style, backgroundColor: 'red', borderColor: 'red', color: 'white' } : style;

return (
<Button type={type} style={style} onClick={handleClick}>
<Button type={type === "danger" ? "default" : type} style={buttonStyle} onClick={handleClick}>
{text}
</Button>
);
Expand Down
5 changes: 1 addition & 4 deletions client_web/src/Pages/Auth/Forms/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,6 @@ const Login = () => {

return (
<div style={{
backgroundImage: 'url("/background.png")',
backgroundSize: 'cover',
backgroundPosition: 'center',
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
Expand All @@ -52,7 +49,7 @@ const Login = () => {
width: '100%',
top: 0,
left: 0
}}>
}} role="main">
<Card title="Login" style={{ width: 400 }}>
<Form
name="login"
Expand Down
6 changes: 2 additions & 4 deletions client_web/src/Pages/Auth/Forms/Register.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Form, Input, Button, Card } from 'antd';
import { Link } from 'react-router-dom';
// @ts-ignore
import OAuthButtons from '@/Components/Auth/OAuthButtons.tsx';

const Register = () => {
Expand Down Expand Up @@ -41,9 +42,6 @@ const Register = () => {

return (
<div style={{
backgroundImage: 'url("/background.png")',
backgroundSize: 'cover',
backgroundPosition: 'center',
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
Expand All @@ -52,7 +50,7 @@ const Register = () => {
width: '100%',
top: 0,
left: 0
}}>
}} role="main">
<Card title="Register" style={{ width: 400 }}>
<Form
name="register"
Expand Down
35 changes: 17 additions & 18 deletions client_web/src/Pages/Dashboard/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,40 +11,39 @@ const { Title } = Typography;
const Dashboard: FC = () => {
return (
<Security>
<div style={{ padding: 24 }}>
{/* Header */}
<Title level={3} style={{ marginBottom: 24 }}>
<div style={{padding: 24, position: 'relative', zIndex: 1}} role="main">
<Title level={3} style={{marginBottom: 16}}>
Dashboard
</Title>

{/* Stats Cards */}
<Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
<Row gutter={[24, 24]} style={{marginBottom: 24}}>
<Col xs={24} md={8}>
<Card>
<Space direction="vertical" style={{ width: '100%', textAlign: 'center' }}>
<RobotOutlined style={{ fontSize: 32, color: '#1890ff' }} />
<Space direction="vertical" style={{width: '100%', textAlign: 'center'}}>
<RobotOutlined style={{fontSize: 32, color: '#1890ff'}}/>
{/* TODO: Replace X with the number of active automations */}
<Title level={2} style={{ margin: '8px 0' }}>X</Title>
<Title level={2} style={{margin: '8px 0'}}>X</Title>
<Typography.Text type="secondary">Active Automations</Typography.Text>
</Space>
</Card>
</Col>
<Col xs={24} md={8}>
<Card>
<Space direction="vertical" style={{ width: '100%', textAlign: 'center' }}>
<BarChartOutlined style={{ fontSize: 32, color: '#52c41a' }} />
<Space direction="vertical" style={{width: '100%', textAlign: 'center'}}>
<BarChartOutlined style={{fontSize: 32, color: '#52c41a'}}/>
{/* TODO: Replace X with the number of tasks completed */}
<Title level={2} style={{ margin: '8px 0' }}>X</Title>
<Title level={2} style={{margin: '8px 0'}}>X</Title>
<Typography.Text type="secondary">Tasks Completed</Typography.Text>
</Space>
</Card>
</Col>
<Col xs={24} md={8}>
<Card>
<Space direction="vertical" style={{ width: '100%', textAlign: 'center' }}>
<SettingOutlined style={{ fontSize: 32, color: '#faad14' }} />
<Space direction="vertical" style={{width: '100%', textAlign: 'center'}}>
<SettingOutlined style={{fontSize: 32, color: '#faad14'}}/>
{/* TODO: Replace X with the number of pending updates */}
<Title level={2} style={{ margin: '8px 0' }}>X</Title>
<Title level={2} style={{margin: '8px 0'}}>X</Title>
<Typography.Text type="secondary">Pending Updates</Typography.Text>
</Space>
</Card>
Expand All @@ -54,15 +53,15 @@ const Dashboard: FC = () => {
{/* Main Content Area */}
<Row gutter={[24, 24]}>
<Col xs={24} md={16}>
<Card title="Recent Activity" style={{ height: 400 }}>
<Card title="Recent Activity" style={{height: 400}}>
{/* Activity content would go here */}
</Card>
</Col>
<Col xs={24} md={8}>
<Card title="Quick Actions" style={{ height: 400 }}>
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<LinkButton text="Create A Workflow" url="/workflow/create" style={{ width: '100%' }} />
<LinkButton text="View All Workflows" url="/workflows" style={{ width: '100%' }} />
<Card title="Quick Actions" style={{height: 400}}>
<Space direction="vertical" size="middle" style={{width: '100%'}}>
<LinkButton text="Create A Workflow" url="/workflow/create" style={{width: '100%'}}/>
<LinkButton text="View All Workflows" url="/workflows" style={{width: '100%'}}/>
</Space>
</Card>
</Col>
Expand Down
26 changes: 14 additions & 12 deletions client_web/src/Pages/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,18 +96,20 @@ const Home = () => {
].map((item) => (
<Col xs={24} md={8} key={item.step}>
<motion.div whileHover={{ y: -10 }} style={{ textAlign: 'center' }}>
<Title
style={{
color: '#1890ff',
opacity: 0.2,
fontSize: 64,
marginBottom: 16
}}
>
{item.step}
</Title>
<Title level={4}>{item.title}</Title>
<Paragraph>{item.description}</Paragraph>
<Card>
<Title
style={{
color: '#1890ff',
opacity: 0.2,
fontSize: 64,
marginBottom: 16
}}
>
{item.step}
</Title>
<Title level={4}>{item.title}</Title>
<Paragraph>{item.description}</Paragraph>
</Card>
</motion.div>
</Col>
))}
Expand Down
Loading

0 comments on commit 0059c99

Please sign in to comment.