Add OpenAI and PostgreSQL credential management

- Implemented OpenAICredencial class for managing OpenAI API keys.
- Created OpenAICredencialModel and OpenAICredencialMapper for SQLAlchemy integration.
- Developed OpenAICredencialRepo for CRUD operations on OpenAI credentials.
- Established OpenAICliente class for interacting with OpenAI API.
- Introduced PostgresCredencial class for managing PostgreSQL connection details.
- Created PostgresCredencialModel and PostgresCredencialMapper for SQLAlchemy integration.
- Developed PostgresCredencialRepo for CRUD operations on PostgreSQL credentials.
- Added base connection class and PostgreSQL connection implementation.
- Included environment variable loading for sensitive data management.

frontend/src/App.tsx

@@ -0,0 +1,13 @@
+import '@mantine/core/styles.css';
+
+import { MantineProvider } from '@mantine/core';
+import { Router } from './Router';
+import { theme } from './theme';
+
+export default function App() {
+  return (
+    <MantineProvider theme={theme}>
+      <Router />
+    </MantineProvider>
+  );
+}

frontend/src/Router.tsx

@@ -0,0 +1,13 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { HomePage } from './pages/Home.page';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <HomePage />,
+  },
+]);
+
+export function Router() {
+  return <RouterProvider router={router} />;
+}

frontend/src/components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -0,0 +1,13 @@
+import { Button, Group, useMantineColorScheme } from '@mantine/core';
+
+export function ColorSchemeToggle() {
+  const { setColorScheme } = useMantineColorScheme();
+
+  return (
+    <Group justify="center" mt="xl">
+      <Button onClick={() => setColorScheme('light')}>Light</Button>
+      <Button onClick={() => setColorScheme('dark')}>Dark</Button>
+      <Button onClick={() => setColorScheme('auto')}>Auto</Button>
+    </Group>
+  );
+}

frontend/src/components/Welcome/Welcome.module.css

@@ -0,0 +1,10 @@
+.title {
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  font-size: rem(100px);
+  font-weight: 900;
+  letter-spacing: rem(-2px);
+
+  @media (max-width: $mantine-breakpoint-md) {
+    font-size: rem(50px);
+  }
+}

frontend/src/components/Welcome/Welcome.story.tsx

@@ -0,0 +1,7 @@
+import { Welcome } from './Welcome';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Usage = () => <Welcome />;

frontend/src/components/Welcome/Welcome.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@test-utils';
+import { Welcome } from './Welcome';
+
+describe('Welcome component', () => {
+  it('has correct Vite guide link', () => {
+    render(<Welcome />);
+    expect(screen.getByText('this guide')).toHaveAttribute(
+      'href',
+      'https://mantine.dev/guides/vite/'
+    );
+  });
+});

frontend/src/components/Welcome/Welcome.tsx

@@ -0,0 +1,23 @@
+import { Anchor, Text, Title } from '@mantine/core';
+import classes from './Welcome.module.css';
+
+export function Welcome() {
+  return (
+    <>
+      <Title className={classes.title} ta="center" mt={100}>
+        Welcome to{' '}
+        <Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
+          Mantine
+        </Text>
+      </Title>
+      <Text c="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
+        This starter Vite project includes a minimal setup, if you want to learn more on Mantine +
+        Vite integration follow{' '}
+        <Anchor href="https://mantine.dev/guides/vite/" size="lg">
+          this guide
+        </Anchor>
+        . To get started edit pages/Home.page.tsx file.
+      </Text>
+    </>
+  );
+}

frontend/src/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 163 163"><path fill="#339AF0" d="M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"/><path fill="#fff" d="M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.145 6.145 0 00-1.616 1.786 6.21 6.21 0 00-.694 4.693 6.21 6.21 0 001.028 2.186 6.151 6.151 0 006.457 2.319 6.154 6.154 0 002.177-1.035 50.083 50.083 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.165 49.165 0 004.071-19.69 49.167 49.167 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.112 50.112 0 00-7.952-7.397 6.15 6.15 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"/><path fill="#fff" fill-rule="evenodd" d="M56.236 79.391a9.342 9.342 0 01.632-3.608 9.262 9.262 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.145 9.145 0 012.995 2.063 9.262 9.262 0 011.967 3.077 9.339 9.339 0 01-2.125 10.003 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.3 9.3 0 01-2.755-6.395z" clip-rule="evenodd"/></svg>

frontend/src/main.tsx

@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

frontend/src/pages/Home.page.tsx

@@ -0,0 +1,11 @@
+import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
+import { Welcome } from '../components/Welcome/Welcome';
+
+export function HomePage() {
+  return (
+    <>
+      <Welcome />
+      <ColorSchemeToggle />
+    </>
+  );
+}

frontend/src/theme.ts

@@ -0,0 +1,5 @@
+import { createTheme } from '@mantine/core';
+
+export const theme = createTheme({
+  /** Put your mantine theme override here */
+});

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />