first commit: Complete phishing test management panel with Node.js backend and React frontend

2025-11-10 17:00:40 +03:00
commit 19e551f33b
77 changed files with 6677 additions and 0 deletions
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:3000
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="tr">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Oltalama Test Yönetim Paneli</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.5",
+    "@mui/material": "^7.3.5",
+    "axios": "^1.13.2",
+    "chart.js": "^4.5.1",
+    "date-fns": "^4.1.0",
+    "react": "^19.2.0",
+    "react-chartjs-2": "^5.3.1",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.2.2"
+  }
+}
--- a/frontend/public/vite.svg
+++ b/frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -0,0 +1,64 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { ThemeProvider, createTheme, CssBaseline } from '@mui/material';
+import { AuthProvider, useAuth } from './context/AuthContext';
+import Layout from './components/Layout/Layout';
+import Login from './pages/Login';
+import Dashboard from './pages/Dashboard';
+import Companies from './pages/Companies';
+import Tokens from './pages/Tokens';
+import Settings from './pages/Settings';
+
+const theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#1976d2',
+    },
+    secondary: {
+      main: '#dc004e',
+    },
+  },
+  typography: {
+    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+  },
+});
+
+function PrivateRoute({ children }) {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return null;
+  }
+
+  return user ? children : <Navigate to="/login" />;
+}
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <BrowserRouter>
+        <AuthProvider>
+          <Routes>
+            <Route path="/login" element={<Login />} />
+            <Route
+              path="/"
+              element={
+                <PrivateRoute>
+                  <Layout />
+                </PrivateRoute>
+              }
+            >
+              <Route index element={<Dashboard />} />
+              <Route path="companies" element={<Companies />} />
+              <Route path="tokens" element={<Tokens />} />
+              <Route path="settings" element={<Settings />} />
+            </Route>
+          </Routes>
+        </AuthProvider>
+      </BrowserRouter>
+    </ThemeProvider>
+  );
+}
+
+export default App;
--- a/frontend/src/assets/react.svg
+++ b/frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/frontend/src/components/Layout/Layout.jsx
+++ b/frontend/src/components/Layout/Layout.jsx
@@ -0,0 +1,171 @@
+import { useState } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+import {
+  Box,
+  Drawer,
+  AppBar,
+  Toolbar,
+  List,
+  Typography,
+  Divider,
+  IconButton,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Avatar,
+  Menu,
+  MenuItem,
+} from '@mui/material';
+import {
+  Menu as MenuIcon,
+  Dashboard,
+  Business,
+  Token as TokenIcon,
+  Settings,
+  Logout,
+  AccountCircle,
+} from '@mui/icons-material';
+import { useAuth } from '../../context/AuthContext';
+
+const drawerWidth = 240;
+
+const menuItems = [
+  { text: 'Dashboard', icon: <Dashboard />, path: '/' },
+  { text: 'Şirketler', icon: <Business />, path: '/companies' },
+  { text: 'Tokenlar', icon: <TokenIcon />, path: '/tokens' },
+  { text: 'Ayarlar', icon: <Settings />, path: '/settings' },
+];
+
+function Layout() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen);
+  };
+
+  const handleMenuOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleLogout = async () => {
+    await logout();
+    navigate('/login');
+  };
+
+  const drawer = (
+    <div>
+      <Toolbar>
+        <Typography variant="h6" noWrap component="div">
+          🛡️ Oltalama
+        </Typography>
+      </Toolbar>
+      <Divider />
+      <List>
+        {menuItems.map((item) => (
+          <ListItem key={item.text} disablePadding>
+            <ListItemButton onClick={() => navigate(item.path)}>
+              <ListItemIcon>{item.icon}</ListItemIcon>
+              <ListItemText primary={item.text} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </div>
+  );
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <AppBar
+        position="fixed"
+        sx={{
+          width: { sm: `calc(100% - ${drawerWidth}px)` },
+          ml: { sm: `${drawerWidth}px` },
+        }}
+      >
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            edge="start"
+            onClick={handleDrawerToggle}
+            sx={{ mr: 2, display: { sm: 'none' } }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
+            Phishing Test Yönetim Paneli
+          </Typography>
+          <IconButton color="inherit" onClick={handleMenuOpen}>
+            <Avatar sx={{ width: 32, height: 32 }}>
+              <AccountCircle />
+            </Avatar>
+          </IconButton>
+          <Menu
+            anchorEl={anchorEl}
+            open={Boolean(anchorEl)}
+            onClose={handleMenuClose}
+          >
+            <MenuItem disabled>
+              <Typography variant="body2">{user?.username}</Typography>
+            </MenuItem>
+            <Divider />
+            <MenuItem onClick={handleLogout}>
+              <Logout fontSize="small" sx={{ mr: 1 }} />
+              Çıkış Yap
+            </MenuItem>
+          </Menu>
+        </Toolbar>
+      </AppBar>
+
+      <Box
+        component="nav"
+        sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
+      >
+        <Drawer
+          variant="temporary"
+          open={mobileOpen}
+          onClose={handleDrawerToggle}
+          ModalProps={{ keepMounted: true }}
+          sx={{
+            display: { xs: 'block', sm: 'none' },
+            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+          }}
+        >
+          {drawer}
+        </Drawer>
+        <Drawer
+          variant="permanent"
+          sx={{
+            display: { xs: 'none', sm: 'block' },
+            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+          }}
+          open
+        >
+          {drawer}
+        </Drawer>
+      </Box>
+
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          p: 3,
+          width: { sm: `calc(100% - ${drawerWidth}px)` },
+        }}
+      >
+        <Toolbar />
+        <Outlet />
+      </Box>
+    </Box>
+  );
+}
+
+export default Layout;
+
--- a/frontend/src/context/AuthContext.jsx
+++ b/frontend/src/context/AuthContext.jsx
@@ -0,0 +1,52 @@
+import { createContext, useState, useContext, useEffect } from 'react';
+import { authService } from '../services/authService';
+
+const AuthContext = createContext(null);
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
+  const checkAuth = async () => {
+    try {
+      const response = await authService.checkAuth();
+      if (response.authenticated) {
+        setUser(response.user);
+      }
+    } catch (error) {
+      console.error('Auth check failed:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const login = async (username, password) => {
+    const response = await authService.login(username, password);
+    setUser(response.user);
+    return response;
+  };
+
+  const logout = async () => {
+    await authService.logout();
+    setUser(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider');
+  }
+  return context;
+};
+
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,15 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  min-height: 100vh;
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/frontend/src/pages/Companies.jsx
+++ b/frontend/src/pages/Companies.jsx
@@ -0,0 +1,160 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Grid,
+  Typography,
+  Chip,
+  CircularProgress,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+} from '@mui/material';
+import { Add, TrendingUp } from '@mui/icons-material';
+import { companyService } from '../services/companyService';
+
+function Companies() {
+  const [companies, setCompanies] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [openDialog, setOpenDialog] = useState(false);
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    industry: '',
+  });
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    loadCompanies();
+  }, []);
+
+  const loadCompanies = async () => {
+    try {
+      const response = await companyService.getAll();
+      setCompanies(response.data);
+    } catch (error) {
+      console.error('Failed to load companies:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreate = async () => {
+    try {
+      await companyService.create(formData);
+      setOpenDialog(false);
+      setFormData({ name: '', description: '', industry: '' });
+      loadCompanies();
+    } catch (error) {
+      console.error('Failed to create company:', error);
+      alert('Şirket oluşturulamadı');
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box display="flex" justifyContent="center" alignItems="center" minHeight="400px">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
+        <Typography variant="h4">Şirketler</Typography>
+        <Button
+          variant="contained"
+          startIcon={<Add />}
+          onClick={() => setOpenDialog(true)}
+        >
+          Yeni Şirket
+        </Button>
+      </Box>
+
+      <Grid container spacing={3}>
+        {companies.map((company) => (
+          <Grid item xs={12} sm={6} md={4} key={company.id}>
+            <Card
+              sx={{ cursor: 'pointer', '&:hover': { boxShadow: 6 } }}
+              onClick={() => navigate(`/companies/${company.id}`)}
+            >
+              <CardContent>
+                <Typography variant="h6" gutterBottom>
+                  {company.name}
+                </Typography>
+                <Typography variant="body2" color="text.secondary" gutterBottom>
+                  {company.industry || 'Sektör belirtilmemiş'}
+                </Typography>
+                <Box mt={2} display="flex" gap={1} flexWrap="wrap">
+                  <Chip
+                    label={`${company.total_tokens} Token`}
+                    size="small"
+                    color="primary"
+                  />
+                  <Chip
+                    label={`${company.total_clicks} Tıklama`}
+                    size="small"
+                    color="success"
+                  />
+                  <Chip
+                    icon={<TrendingUp />}
+                    label={`${company.click_rate}%`}
+                    size="small"
+                    color={company.click_rate > 30 ? 'error' : 'default'}
+                  />
+                </Box>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+
+      <Dialog open={openDialog} onClose={() => setOpenDialog(false)} maxWidth="sm" fullWidth>
+        <DialogTitle>Yeni Şirket Ekle</DialogTitle>
+        <DialogContent>
+          <TextField
+            autoFocus
+            margin="dense"
+            label="Şirket Adı"
+            fullWidth
+            required
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          />
+          <TextField
+            margin="dense"
+            label="Açıklama"
+            fullWidth
+            multiline
+            rows={2}
+            value={formData.description}
+            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+          />
+          <TextField
+            margin="dense"
+            label="Sektör"
+            fullWidth
+            value={formData.industry}
+            onChange={(e) => setFormData({ ...formData, industry: e.target.value })}
+            placeholder="Örn: Banking, Telecom, Government"
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenDialog(false)}>İptal</Button>
+          <Button onClick={handleCreate} variant="contained" disabled={!formData.name}>
+            Oluştur
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}
+
+export default Companies;
+
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -0,0 +1,202 @@
+import { useState, useEffect } from 'react';
+import {
+  Grid,
+  Paper,
+  Typography,
+  Box,
+  Card,
+  CardContent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Chip,
+  CircularProgress,
+} from '@mui/material';
+import {
+  Business,
+  Token as TokenIcon,
+  CheckCircle,
+  TrendingUp,
+} from '@mui/icons-material';
+import { statsService } from '../services/statsService';
+import { format } from 'date-fns';
+import { tr } from 'date-fns/locale';
+
+function Dashboard() {
+  const [stats, setStats] = useState(null);
+  const [recentClicks, setRecentClicks] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      const [statsData, clicksData] = await Promise.all([
+        statsService.getDashboard(),
+        statsService.getRecentClicks(10),
+      ]);
+      setStats(statsData.data);
+      setRecentClicks(clicksData.data);
+    } catch (error) {
+      console.error('Failed to load dashboard:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box display="flex" justifyContent="center" alignItems="center" minHeight="400px">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  const StatCard = ({ title, value, icon, color }) => (
+    <Card>
+      <CardContent>
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Box>
+            <Typography color="textSecondary" gutterBottom variant="body2">
+              {title}
+            </Typography>
+            <Typography variant="h4">{value}</Typography>
+          </Box>
+          <Box
+            sx={{
+              bgcolor: `${color}.light`,
+              borderRadius: 2,
+              p: 1.5,
+              display: 'flex',
+            }}
+          >
+            {icon}
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+
+  return (
+    <Box>
+      <Typography variant="h4" gutterBottom>
+        Dashboard
+      </Typography>
+
+      <Grid container spacing={3} sx={{ mb: 3 }}>
+        <Grid item xs={12} sm={6} md={3}>
+          <StatCard
+            title="Şirketler"
+            value={stats?.overview?.total_companies || 0}
+            icon={<Business sx={{ color: 'primary.main' }} />}
+            color="primary"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <StatCard
+            title="Toplam Token"
+            value={stats?.overview?.total_tokens || 0}
+            icon={<TokenIcon sx={{ color: 'info.main' }} />}
+            color="info"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <StatCard
+            title="Tıklanan"
+            value={stats?.overview?.clicked_tokens || 0}
+            icon={<CheckCircle sx={{ color: 'success.main' }} />}
+            color="success"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <StatCard
+            title="Başarı Oranı"
+            value={`${stats?.overview?.click_rate || 0}%`}
+            icon={<TrendingUp sx={{ color: 'warning.main' }} />}
+            color="warning"
+          />
+        </Grid>
+      </Grid>
+
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={6}>
+          <Paper sx={{ p: 2 }}>
+            <Typography variant="h6" gutterBottom>
+              Şirket Performansı
+            </Typography>
+            <TableContainer>
+              <Table size="small">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Şirket</TableCell>
+                    <TableCell align="right">Tokenlar</TableCell>
+                    <TableCell align="right">Tıklama</TableCell>
+                    <TableCell align="right">Oran</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {stats?.top_companies?.map((company) => (
+                    <TableRow key={company.id}>
+                      <TableCell>{company.name}</TableCell>
+                      <TableCell align="right">{company.total_tokens}</TableCell>
+                      <TableCell align="right">{company.total_clicks}</TableCell>
+                      <TableCell align="right">
+                        <Chip
+                          label={`${company.click_rate}%`}
+                          size="small"
+                          color={company.click_rate > 30 ? 'error' : 'success'}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </Paper>
+        </Grid>
+
+        <Grid item xs={12} md={6}>
+          <Paper sx={{ p: 2 }}>
+            <Typography variant="h6" gutterBottom>
+              Son Tıklamalar
+            </Typography>
+            <TableContainer>
+              <Table size="small">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Email</TableCell>
+                    <TableCell>Şirket</TableCell>
+                    <TableCell>Konum</TableCell>
+                    <TableCell>Zaman</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {recentClicks.map((click) => (
+                    <TableRow key={click.id}>
+                      <TableCell sx={{ fontSize: '0.875rem' }}>
+                        {click.token?.target_email}
+                      </TableCell>
+                      <TableCell>{click.token?.company?.name}</TableCell>
+                      <TableCell>{click.city}, {click.country}</TableCell>
+                      <TableCell>
+                        {format(new Date(click.clicked_at), 'HH:mm', { locale: tr })}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </Paper>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
+
+export default Dashboard;
+
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Container,
+  Paper,
+  TextField,
+  Button,
+  Typography,
+  Box,
+  Alert,
+} from '@mui/material';
+import { LockOutlined } from '@mui/icons-material';
+import { useAuth } from '../context/AuthContext';
+
+function Login() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      await login(username, password);
+      navigate('/');
+    } catch (err) {
+      setError(err.response?.data?.error || 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Box
+        sx={{
+          marginTop: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Paper elevation={3} sx={{ p: 4, width: '100%' }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mb: 3 }}>
+            <LockOutlined sx={{ fontSize: 40, mb: 1, color: 'primary.main' }} />
+            <Typography component="h1" variant="h5">
+              Oltalama Test Paneli
+            </Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+              Güvenlik Farkındalık Yönetimi
+            </Typography>
+          </Box>
+
+          {error && (
+            <Alert severity="error" sx={{ mb: 2 }}>
+              {error}
+            </Alert>
+          )}
+
+          <Box component="form" onSubmit={handleSubmit}>
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              label="Kullanıcı Adı"
+              autoFocus
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              disabled={loading}
+            />
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              label="Şifre"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={loading}
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+              disabled={loading}
+            >
+              {loading ? 'Giriş yapılıyor...' : 'Giriş Yap'}
+            </Button>
+
+            <Box sx={{ mt: 2, p: 2, bgcolor: 'grey.100', borderRadius: 1 }}>
+              <Typography variant="caption" color="text.secondary">
+                <strong>Default Giriş:</strong><br />
+                Kullanıcı Adı: admin<br />
+                Şifre: admin123
+              </Typography>
+            </Box>
+          </Box>
+        </Paper>
+      </Box>
+    </Container>
+  );
+}
+
+export default Login;
+
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -0,0 +1,243 @@
+import { useState, useEffect } from 'react';
+import {
+  Box,
+  Paper,
+  Typography,
+  TextField,
+  Button,
+  Grid,
+  Alert,
+  CircularProgress,
+  Divider,
+} from '@mui/material';
+import { Save, Send } from '@mui/icons-material';
+import axios from 'axios';
+
+const API_URL = import.meta.env.VITE_API_URL;
+
+function Settings() {
+  const [settings, setSettings] = useState({
+    gmail_user: '',
+    gmail_app_password: '',
+    telegram_bot_token: '',
+    telegram_chat_id: '',
+  });
+  const [loading, setLoading] = useState(true);
+  const [testLoading, setTestLoading] = useState({ mail: false, telegram: false });
+  const [alerts, setAlerts] = useState({ mail: null, telegram: null });
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      const response = await axios.get(`${API_URL}/api/settings`, {
+        withCredentials: true,
+      });
+      setSettings(response.data.data);
+    } catch (error) {
+      console.error('Failed to load settings:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      await axios.put(`${API_URL}/api/settings`, settings, {
+        withCredentials: true,
+      });
+      alert('Ayarlar kaydedildi!');
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+      alert('Ayarlar kaydedilemedi');
+    }
+  };
+
+  const handleTestMail = async () => {
+    setTestLoading({ ...testLoading, mail: true });
+    try {
+      const response = await axios.post(
+        `${API_URL}/api/settings/test-mail`,
+        {},
+        { withCredentials: true }
+      );
+      setAlerts({ ...alerts, mail: { severity: 'success', message: response.data.message } });
+    } catch (error) {
+      setAlerts({
+        ...alerts,
+        mail: { severity: 'error', message: error.response?.data?.error || 'Test başarısız' },
+      });
+    } finally {
+      setTestLoading({ ...testLoading, mail: false });
+    }
+  };
+
+  const handleTestTelegram = async () => {
+    setTestLoading({ ...testLoading, telegram: true });
+    try {
+      const response = await axios.post(
+        `${API_URL}/api/settings/test-telegram`,
+        {},
+        { withCredentials: true }
+      );
+      setAlerts({ ...alerts, telegram: { severity: 'success', message: response.data.message } });
+    } catch (error) {
+      setAlerts({
+        ...alerts,
+        telegram: {
+          severity: 'error',
+          message: error.response?.data?.error || 'Test başarısız',
+        },
+      });
+    } finally {
+      setTestLoading({ ...testLoading, telegram: false });
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box display="flex" justifyContent="center" alignItems="center" minHeight="400px">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Typography variant="h4" gutterBottom>
+        Sistem Ayarları
+      </Typography>
+
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={6}>
+          <Paper sx={{ p: 3 }}>
+            <Typography variant="h6" gutterBottom>
+              Gmail Ayarları
+            </Typography>
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              Gmail App Password kullanın (2FA aktif olmalı)
+            </Typography>
+
+            <TextField
+              fullWidth
+              margin="normal"
+              label="Gmail Adresi"
+              type="email"
+              value={settings.gmail_user}
+              onChange={(e) =>
+                setSettings({ ...settings, gmail_user: e.target.value })
+              }
+            />
+            <TextField
+              fullWidth
+              margin="normal"
+              label="App Password"
+              type="password"
+              value={settings.gmail_app_password}
+              onChange={(e) =>
+                setSettings({ ...settings, gmail_app_password: e.target.value })
+              }
+            />
+
+            {alerts.mail && (
+              <Alert severity={alerts.mail.severity} sx={{ mt: 2 }}>
+                {alerts.mail.message}
+              </Alert>
+            )}
+
+            <Box mt={2} display="flex" gap={2}>
+              <Button
+                variant="contained"
+                startIcon={<Save />}
+                onClick={handleSave}
+              >
+                Kaydet
+              </Button>
+              <Button
+                variant="outlined"
+                startIcon={<Send />}
+                onClick={handleTestMail}
+                disabled={testLoading.mail}
+              >
+                Test Mail Gönder
+              </Button>
+            </Box>
+          </Paper>
+        </Grid>
+
+        <Grid item xs={12} md={6}>
+          <Paper sx={{ p: 3 }}>
+            <Typography variant="h6" gutterBottom>
+              Telegram Ayarları
+            </Typography>
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              @BotFather'dan bot token alın, @userinfobot'dan chat ID öğrenin
+            </Typography>
+
+            <TextField
+              fullWidth
+              margin="normal"
+              label="Bot Token"
+              type="password"
+              value={settings.telegram_bot_token}
+              onChange={(e) =>
+                setSettings({ ...settings, telegram_bot_token: e.target.value })
+              }
+            />
+            <TextField
+              fullWidth
+              margin="normal"
+              label="Chat ID"
+              value={settings.telegram_chat_id}
+              onChange={(e) =>
+                setSettings({ ...settings, telegram_chat_id: e.target.value })
+              }
+            />
+
+            {alerts.telegram && (
+              <Alert severity={alerts.telegram.severity} sx={{ mt: 2 }}>
+                {alerts.telegram.message}
+              </Alert>
+            )}
+
+            <Box mt={2} display="flex" gap={2}>
+              <Button
+                variant="contained"
+                startIcon={<Save />}
+                onClick={handleSave}
+              >
+                Kaydet
+              </Button>
+              <Button
+                variant="outlined"
+                startIcon={<Send />}
+                onClick={handleTestTelegram}
+                disabled={testLoading.telegram}
+              >
+                Test Bildirimi
+              </Button>
+            </Box>
+          </Paper>
+        </Grid>
+      </Grid>
+
+      <Paper sx={{ p: 3, mt: 3 }}>
+        <Typography variant="h6" gutterBottom>
+          Tracking URL Bilgisi
+        </Typography>
+        <Divider sx={{ my: 2 }} />
+        <Typography variant="body2" color="text.secondary">
+          Tracking URL formatı: <strong>http://your-domain.com/t/TOKEN</strong>
+        </Typography>
+        <Typography variant="body2" color="text.secondary" mt={1}>
+          Bu URL'ler mail şablonlarında otomatik olarak oluşturulur ve gönderilir.
+        </Typography>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Settings;
+
--- a/frontend/src/pages/Tokens.jsx
+++ b/frontend/src/pages/Tokens.jsx
@@ -0,0 +1,198 @@
+import { useState, useEffect } from 'react';
+import {
+  Box,
+  Button,
+  Paper,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Chip,
+  CircularProgress,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  MenuItem,
+} from '@mui/material';
+import { Add, Check, Close } from '@mui/icons-material';
+import { tokenService } from '../services/tokenService';
+import { companyService } from '../services/companyService';
+import { templateService } from '../services/templateService';
+import { format } from 'date-fns';
+
+function Tokens() {
+  const [tokens, setTokens] = useState([]);
+  const [companies, setCompanies] = useState([]);
+  const [templates, setTemplates] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [openDialog, setOpenDialog] = useState(false);
+  const [formData, setFormData] = useState({
+    company_id: '',
+    target_email: '',
+    employee_name: '',
+    template_type: 'bank',
+  });
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      const [tokensData, companiesData, templatesData] = await Promise.all([
+        tokenService.getAll(),
+        companyService.getAll(),
+        templateService.getAll(),
+      ]);
+      setTokens(tokensData.data);
+      setCompanies(companiesData.data);
+      setTemplates(templatesData.data);
+    } catch (error) {
+      console.error('Failed to load data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateAndSend = async () => {
+    try {
+      await tokenService.createAndSend(formData);
+      setOpenDialog(false);
+      setFormData({ company_id: '', target_email: '', employee_name: '', template_type: 'bank' });
+      loadData();
+      alert('Token oluşturuldu ve mail gönderildi!');
+    } catch (error) {
+      console.error('Failed to create token:', error);
+      alert('Token oluşturulamadı: ' + (error.response?.data?.error || error.message));
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box display="flex" justifyContent="center" alignItems="center" minHeight="400px">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
+        <Typography variant="h4">Tracking Tokenlar</Typography>
+        <Button
+          variant="contained"
+          startIcon={<Add />}
+          onClick={() => setOpenDialog(true)}
+        >
+          Yeni Mail Oluştur
+        </Button>
+      </Box>
+
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Email</TableCell>
+              <TableCell>Şirket</TableCell>
+              <TableCell>Çalışan</TableCell>
+              <TableCell>Durum</TableCell>
+              <TableCell align="right">Tıklama</TableCell>
+              <TableCell>Tarih</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {tokens.map((token) => (
+              <TableRow key={token.id} hover sx={{ cursor: 'pointer' }}>
+                <TableCell>{token.target_email}</TableCell>
+                <TableCell>{token.company?.name}</TableCell>
+                <TableCell>{token.employee_name || '-'}</TableCell>
+                <TableCell>
+                  <Chip
+                    icon={token.clicked ? <Check /> : <Close />}
+                    label={token.clicked ? 'Tıklandı' : 'Bekliyor'}
+                    color={token.clicked ? 'success' : 'default'}
+                    size="small"
+                  />
+                </TableCell>
+                <TableCell align="right">{token.click_count}×</TableCell>
+                <TableCell>
+                  {format(new Date(token.created_at), 'dd/MM/yyyy HH:mm')}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      <Dialog open={openDialog} onClose={() => setOpenDialog(false)} maxWidth="sm" fullWidth>
+        <DialogTitle>Yeni Token Oluştur ve Mail Gönder</DialogTitle>
+        <DialogContent>
+          <TextField
+            select
+            margin="dense"
+            label="Şirket Seç"
+            fullWidth
+            required
+            value={formData.company_id}
+            onChange={(e) => setFormData({ ...formData, company_id: e.target.value })}
+          >
+            {companies.map((company) => (
+              <MenuItem key={company.id} value={company.id}>
+                {company.name}
+              </MenuItem>
+            ))}
+          </TextField>
+          <TextField
+            margin="dense"
+            label="Hedef Email"
+            type="email"
+            fullWidth
+            required
+            value={formData.target_email}
+            onChange={(e) => setFormData({ ...formData, target_email: e.target.value })}
+          />
+          <TextField
+            margin="dense"
+            label="Çalışan Adı (Opsiyonel)"
+            fullWidth
+            value={formData.employee_name}
+            onChange={(e) => setFormData({ ...formData, employee_name: e.target.value })}
+          />
+          <TextField
+            select
+            margin="dense"
+            label="Mail Şablonu"
+            fullWidth
+            required
+            value={formData.template_type}
+            onChange={(e) => setFormData({ ...formData, template_type: e.target.value })}
+          >
+            {templates.map((template) => (
+              <MenuItem key={template.id} value={template.template_type}>
+                {template.name}
+              </MenuItem>
+            ))}
+          </TextField>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenDialog(false)}>İptal</Button>
+          <Button
+            onClick={handleCreateAndSend}
+            variant="contained"
+            disabled={!formData.company_id || !formData.target_email}
+          >
+            Oluştur ve Gönder
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}
+
+export default Tokens;
+
--- a/frontend/src/services/api.js
+++ b/frontend/src/services/api.js
@@ -0,0 +1,26 @@
+import axios from 'axios';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+
+const api = axios.create({
+  baseURL: API_URL,
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Response interceptor for error handling
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      // Redirect to login if unauthorized
+      window.location.href = '/login';
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api;
+
--- a/frontend/src/services/authService.js
+++ b/frontend/src/services/authService.js
@@ -0,0 +1,24 @@
+import api from './api';
+
+export const authService = {
+  login: async (username, password) => {
+    const response = await api.post('/api/auth/login', { username, password });
+    return response.data;
+  },
+
+  logout: async () => {
+    const response = await api.post('/api/auth/logout');
+    return response.data;
+  },
+
+  checkAuth: async () => {
+    const response = await api.get('/api/auth/check');
+    return response.data;
+  },
+
+  getMe: async () => {
+    const response = await api.get('/api/auth/me');
+    return response.data;
+  },
+};
+
--- a/frontend/src/services/companyService.js
+++ b/frontend/src/services/companyService.js
@@ -0,0 +1,39 @@
+import api from './api';
+
+export const companyService = {
+  getAll: async () => {
+    const response = await api.get('/api/companies');
+    return response.data;
+  },
+
+  getById: async (id) => {
+    const response = await api.get(`/api/companies/${id}`);
+    return response.data;
+  },
+
+  create: async (data) => {
+    const response = await api.post('/api/companies', data);
+    return response.data;
+  },
+
+  update: async (id, data) => {
+    const response = await api.put(`/api/companies/${id}`, data);
+    return response.data;
+  },
+
+  delete: async (id) => {
+    const response = await api.delete(`/api/companies/${id}`);
+    return response.data;
+  },
+
+  getTokens: async (id, params = {}) => {
+    const response = await api.get(`/api/companies/${id}/tokens`, { params });
+    return response.data;
+  },
+
+  getStats: async (id) => {
+    const response = await api.get(`/api/companies/${id}/stats`);
+    return response.data;
+  },
+};
+
--- a/frontend/src/services/statsService.js
+++ b/frontend/src/services/statsService.js
@@ -0,0 +1,58 @@
+import api from './api';
+
+export const statsService = {
+  getDashboard: async () => {
+    const response = await api.get('/api/stats/dashboard');
+    return response.data;
+  },
+
+  getRecentClicks: async (limit = 20) => {
+    const response = await api.get('/api/stats/recent-clicks', { params: { limit } });
+    return response.data;
+  },
+
+  getByCompany: async () => {
+    const response = await api.get('/api/stats/by-company');
+    return response.data;
+  },
+};
+
+export const templateService = {
+  getAll: async () => {
+    const response = await api.get('/api/templates');
+    return response.data;
+  },
+
+  getByType: async (type) => {
+    const response = await api.get(`/api/templates/${type}`);
+    return response.data;
+  },
+};
+
+export const settingsService = {
+  getAll: async () => {
+    const response = await api.get('/api/settings');
+    return response.data;
+  },
+
+  updateGmail: async (data) => {
+    const response = await api.put('/api/settings/gmail', data);
+    return response.data;
+  },
+
+  updateTelegram: async (data) => {
+    const response = await api.put('/api/settings/telegram', data);
+    return response.data;
+  },
+
+  testGmail: async () => {
+    const response = await api.post('/api/settings/test-gmail');
+    return response.data;
+  },
+
+  testTelegram: async () => {
+    const response = await api.post('/api/settings/test-telegram');
+    return response.data;
+  },
+};
+
--- a/frontend/src/services/templateService.js
+++ b/frontend/src/services/templateService.js
@@ -0,0 +1,11 @@
+import api from './api';
+
+export const templateService = {
+  getAll: () => api.get('/api/templates'),
+  getById: (id) => api.get(`/api/templates/${id}`),
+  create: (data) => api.post('/api/templates', data),
+  update: (id, data) => api.put(`/api/templates/${id}`, data),
+  delete: (id) => api.delete(`/api/templates/${id}`),
+  preview: (data) => api.post('/api/templates/preview', data),
+};
+
--- a/frontend/src/services/tokenService.js
+++ b/frontend/src/services/tokenService.js
@@ -0,0 +1,44 @@
+import api from './api';
+
+export const tokenService = {
+  getAll: async (params = {}) => {
+    const response = await api.get('/api/tokens', { params });
+    return response.data;
+  },
+
+  getById: async (id) => {
+    const response = await api.get(`/api/tokens/${id}`);
+    return response.data;
+  },
+
+  create: async (data) => {
+    const response = await api.post('/api/tokens/create', data);
+    return response.data;
+  },
+
+  createAndSend: async (data) => {
+    const response = await api.post('/api/tokens/create-and-send', data);
+    return response.data;
+  },
+
+  update: async (id, data) => {
+    const response = await api.put(`/api/tokens/${id}`, data);
+    return response.data;
+  },
+
+  delete: async (id) => {
+    const response = await api.delete(`/api/tokens/${id}`);
+    return response.data;
+  },
+
+  sendMail: async (id) => {
+    const response = await api.post(`/api/tokens/${id}/send`);
+    return response.data;
+  },
+
+  getClicks: async (id) => {
+    const response = await api.get(`/api/tokens/${id}/clicks`);
+    return response.data;
+  },
+};
+
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>