-

faas/web/src/App.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { MantineProvider, AppShell, Title, Group, Badge, Text } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
+import { IconFunction } from '@tabler/icons-react';
+import { FunctionList } from './components/FunctionList';
+import { FunctionForm } from './components/FunctionForm';
+import { ExecutionModal } from './components/ExecutionModal';
+import { FunctionDefinition } from './types';
+
+// Default Mantine theme
+const theme = {
+  colorScheme: 'light',
+};
+
+const App: React.FC = () => {
+  const [functionFormOpened, setFunctionFormOpened] = useState(false);
+  const [executionModalOpened, setExecutionModalOpened] = useState(false);
+  const [editingFunction, setEditingFunction] = useState<FunctionDefinition | null>(null);
+  const [executingFunction, setExecutingFunction] = useState<FunctionDefinition | null>(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const handleCreateFunction = () => {
+    setEditingFunction(null);
+    setFunctionFormOpened(true);
+  };
+
+  const handleEditFunction = (func: FunctionDefinition) => {
+    setEditingFunction(func);
+    setFunctionFormOpened(true);
+  };
+
+  const handleExecuteFunction = (func: FunctionDefinition) => {
+    setExecutingFunction(func);
+    setExecutionModalOpened(true);
+  };
+
+  const handleFormSuccess = () => {
+    setRefreshKey(prev => prev + 1);
+  };
+
+  const handleFormClose = () => {
+    setFunctionFormOpened(false);
+    setEditingFunction(null);
+  };
+
+  const handleExecutionClose = () => {
+    setExecutionModalOpened(false);
+    setExecutingFunction(null);
+  };
+
+  return (
+    <MantineProvider theme={theme}>
+      <Notifications />
+      <AppShell
+        header={{ height: 60 }}
+        padding="md"
+      >
+        <AppShell.Header>
+          <Group h="100%" px="md" justify="space-between">
+            <Group>
+              <IconFunction size={24} />
+              <Title order={3}>Function as a Service</Title>
+              <Badge variant="light" color="blue">FaaS</Badge>
+            </Group>
+            <Text size="sm" c="dimmed">
+              Serverless Functions Platform
+            </Text>
+          </Group>
+        </AppShell.Header>
+
+        <AppShell.Main>
+          <FunctionList
+            key={refreshKey}
+            onCreateFunction={handleCreateFunction}
+            onEditFunction={handleEditFunction}
+            onExecuteFunction={handleExecuteFunction}
+          />
+
+          <FunctionForm
+            opened={functionFormOpened}
+            onClose={handleFormClose}
+            onSuccess={handleFormSuccess}
+            editFunction={editingFunction}
+          />
+
+          <ExecutionModal
+            opened={executionModalOpened}
+            onClose={handleExecutionClose}
+            function={executingFunction}
+          />
+        </AppShell.Main>
+      </AppShell>
+    </MantineProvider>
+  );
+};
+
+export default App;