feat: add backend

apps/web/src/pages/App.tsx

@@ -0,0 +1,18 @@
+import { Route, Routes } from 'react-router';
+import Home from '@pages/home';
+import Login from '@pages/login';
+import Application from '@pages/application';
+
+import '@styles/index.css';
+const App = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />}>
+        <Route path="application" element={<Application />} index />
+      </Route>
+      <Route path="/login" element={<Login />} />
+    </Routes>
+  );
+};
+
+export default App;

apps/web/src/pages/application/index.tsx

@@ -0,0 +1,12 @@
+import { useState } from "react";
+
+function Application() {
+  const [apps, setApps] = useState<Application[]>([]);
+  return (
+    <div>
+      application
+    </div>
+  )
+}
+
+export default Application;

apps/web/src/pages/application/types.ts

@@ -0,0 +1,15 @@
+enum AppStatus {
+  Idle = "Pending",
+  Running = "Running",
+  Stopped = "Stopped",
+}
+
+export interface Application {
+  id: string;
+  name: string;
+  description: string;
+  git: string;
+  env: Record<string, string>;
+  createdAt: string;
+  status: AppStatus;
+}

apps/web/src/pages/home/index.tsx

@@ -0,0 +1,73 @@
+import { Avatar, Layout, Menu } from '@arco-design/web-react';
+import {
+  IconApps,
+  IconBulb,
+  IconFire,
+  IconMenuFold,
+  IconMenuUnfold,
+  IconRobot,
+  IconSafe,
+  IconUser,
+} from '@arco-design/web-react/icon';
+import { useState } from 'react';
+import Logo from '@assets/images/logo.svg?react';
+import { Outlet } from 'react-router';
+
+function Home() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <Layout className="h-screen w-full">
+      <Layout.Sider
+        collapsible
+        onCollapse={setCollapsed}
+        trigger={collapsed ? <IconMenuUnfold /> : <IconMenuFold />}
+      >
+        <div className="flex flex-row items-center justify-center px-2 py-3">
+          <Logo />
+          {!collapsed && <h2 className="ml-4 text-xl font-medium">Foka CI</h2>}
+        </div>
+        <Menu
+          className="flex-1"
+          defaultOpenKeys={['0']}
+          defaultSelectedKeys={['0_1']}
+        >
+          <Menu.Item key="0">
+            <IconApps />
+            Navigation 1
+          </Menu.Item>
+          <Menu.Item key="1">
+            <IconRobot />
+            Navigation 2
+          </Menu.Item>
+          <Menu.Item key="2">
+            <IconBulb />
+            Navigation 3
+          </Menu.Item>
+          <Menu.Item key="3">
+            <IconSafe />
+            Navigation 4
+          </Menu.Item>
+          <Menu.Item key="4">
+            <IconFire />
+            Navigation 5
+          </Menu.Item>
+        </Menu>
+      </Layout.Sider>
+      <Layout>
+        <Layout.Header className="h-14 border-b-gray-100 border-b-[1px]">
+          <div className="flex items-center justify-end px-4 h-full">
+            <Avatar>
+              <IconUser />
+            </Avatar>
+          </div>
+        </Layout.Header>
+        <Layout.Content>
+          <Outlet />
+        </Layout.Content>
+      </Layout>
+    </Layout>
+  );
+}
+
+export default Home;

apps/web/src/pages/login/index.tsx

@@ -0,0 +1,18 @@
+import { Input, Space } from '@arco-design/web-react';
+import { IconUser, IconInfoCircle } from '@arco-design/web-react/icon';
+function Login() {
+  return (
+    <div>
+      <Space direction='vertical'>
+        <Input placeholder="username" prefix={<IconUser />} size="large" />
+        <Input.Password
+          placeholder="password"
+          prefix={<IconInfoCircle />}
+          size="large"
+        />
+      </Space>
+    </div>
+  );
+}
+
+export default Login;