Appschmiede/DeineDorfApp-Admin-Panel
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stabile version

Browse Source
This commit is contained in:
eddy
2026-04-15 15:17:11 +02:00
parent bd10bdc3ed
commit dd1d78e6ad
12 changed files with 248 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
src/App.jsx
View File

@@ -1,4 +1,4 @@
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import { createTheme, ThemeProvider, CssBaseline } from '@mui/material';
import { AuthProvider } from './context/AuthContext';
import PrivateRoute from './components/PrivateRoute';
@@ -19,139 +19,139 @@ import EditCompanyPage from "./pages/Company/EditCompanyPage.jsx";
import CalenderPostPage from "./pages/Calender/CalenderPostPage.jsx";
const theme = createTheme({
palette: {
mode: 'light',
primary: { main: '#1976d2' },
background: { default: '#f5f5f5' },
},
shape: { borderRadius: 8 },
typography: {
fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
},
components: {
MuiButton: {
styleOverrides: {
root: { textTransform: 'none', fontWeight: 500 },
},
palette: {
mode: 'light',
primary: { main: '#1976d2' },
background: { default: '#f5f5f5' },
},
MuiCard: {
styleOverrides: {
root: { boxShadow: '0 1px 3px rgba(0,0,0,0.08)', border: '1px solid #e0e0e0' },
},
shape: { borderRadius: 8 },
typography: {
fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
},
components: {
MuiButton: {
styleOverrides: {
root: { textTransform: 'none', fontWeight: 500 },
},
},
MuiCard: {
styleOverrides: {
root: { boxShadow: '0 1px 3px rgba(0,0,0,0.08)', border: '1px solid #e0e0e0' },
},
},
},
},
});
export default function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<AuthProvider>
<BrowserRouter>
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
<Route
path="/"
element={
<PrivateRoute>
<Layout />
</PrivateRoute>
}
>
<Route index element={<HomePage />} />
<Route
path="users"
element={
<PrivateRoute allowedRoles={['ADMIN']}>
<UsersPage />
</PrivateRoute>
}
/>
<Route
path="attractions"
element={
<PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
<AttractionPage />
</PrivateRoute>
}
/>
<Route
path="calenderPosts"
element={
<PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
<CalenderPostPage />
</PrivateRoute>
}
/>
<Route
path="posts"
element={
<PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
<PostsPage />
</PrivateRoute>
}
/>
<Route
path="companies"
element={
<PrivateRoute allowedRoles={['ADMIN', 'SITE_OWNER']}>
<CompanyPage />
</PrivateRoute>
}
/>
<Route
path="attractions/:id/edit"
element={
<PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
<EditAttractionPage/>
</PrivateRoute>
}
/>
<Route
path="companies/:id/edit"
element={
<PrivateRoute allowedRoles={['ADMIN', 'SITE_OWNER']}>
<EditCompanyPage/>
</PrivateRoute>
}
/>
<Route
path="organizations/:id/edit"
element={
<PrivateRoute allowedRoles={['ADMIN', 'SITE_OWNER']}>
<EditOrganizationPage/>
</PrivateRoute>
}
/>
<Route
path="organizations"
element={
<PrivateRoute allowedRoles={['ADMIN', 'SITE_OWNER']}>
<OrganizationPage />
</PrivateRoute>
}
/>
<Route
path="posts/create"
element={
<PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
<CreateNewsPage />
</PrivateRoute>
}
/>
<Route
path="push"
element={
<PrivateRoute allowedRoles={['ADMIN']}>
<PushPage />
</PrivateRoute>
}
/>
</Route>
</Routes>
</BrowserRouter>
</AuthProvider>
</ThemeProvider>
);
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<AuthProvider>
<BrowserRouter>
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
<Route
path="/"
element={
<PrivateRoute>
<Layout />
</PrivateRoute>
}
>
<Route index element={<HomePage />} />
<Route
path="users"
element={
<PrivateRoute allowedRoles={['ADMIN']}>
<UsersPage />
</PrivateRoute>
}
/>
<Route
path="attractions"
element={
<PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
<AttractionPage />
</PrivateRoute>
}
/>
<Route
path="calenderPosts"
element={
<PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
<CalenderPostPage />
</PrivateRoute>
}
/>
<Route
path="posts"
element={
<PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
<PostsPage />
</PrivateRoute>
}
/>
<Route
path="companies"
element={
<PrivateRoute allowedRoles={['ADMIN', 'SITE_OWNER']}>
<CompanyPage />
</PrivateRoute>
}
/>
<Route
path="attractions/:id/edit"
element={
<PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
<EditAttractionPage />
</PrivateRoute>
}
/>
<Route
path="companies/:id/edit"
element={
<PrivateRoute allowedRoles={['ADMIN', 'SITE_OWNER']}>
<EditCompanyPage />
</PrivateRoute>
}
/>
<Route
path="organizations/:id/edit"
element={
<PrivateRoute allowedRoles={['ADMIN', 'SITE_OWNER']}>
<EditOrganizationPage />
</PrivateRoute>
}
/>
<Route
path="organizations"
element={
<PrivateRoute allowedRoles={['ADMIN', 'SITE_OWNER']}>
<OrganizationPage />
</PrivateRoute>
}
/>
<Route
path="posts/create"
element={
<PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
<CreateNewsPage />
</PrivateRoute>
}
/>
<Route
path="push"
element={
<PrivateRoute allowedRoles={['ADMIN']}>
<PushPage />
</PrivateRoute>
}
/>
</Route>
</Routes>
</BrowserRouter>
</AuthProvider>
</ThemeProvider>
);
}

29
src/components/ErrorBoundary.jsx Normal file
View File

@@ -0,0 +1,29 @@
import { Component } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
render() {
if (this.state.hasError) {
return (
<div style={{ padding: 32 }}>
<h2>Etwas ist schiefgelaufen.</h2>
<p>{this.state.error?.message || 'Unbekannter Fehler'}</p>
<button onClick={() => this.setState({ hasError: false })}>
Erneut versuchen
</button>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;

12
src/components/Layout.jsx
View File

@@ -14,6 +14,7 @@ import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import HomeIcon from '@mui/icons-material/Home';
import StoreIcon from '@mui/icons-material/Store';
import { useAuth } from '../context/AuthContext';
import ErrorBoundary from './ErrorBoundary';
const DRAWER_WIDTH = 240;
@@ -34,9 +35,9 @@ const navCategories = [
{
label: 'Reporter',
items: [
{ label: 'Neuigkeiten', path: '/posts', icon: <ArticleIcon />, roles: ['ADMIN', 'REPORTER'] },
{ label: 'Kalendereinträge', path: '/calenderPosts', icon: <CalendarMonthIcon />, roles: ['ADMIN', 'REPORTER'] },
{ label: 'Sehenswürdigkeiten', path: '/attractions', icon: <LocationOnIcon />, roles: ['ADMIN', 'REPORTER'] },
{ label: 'Neuigkeiten', path: '/posts', icon: <ArticleIcon />, roles: ['ADMIN', 'REPORTER'] },
{ label: 'Kalendereinträge', path: '/calenderPosts', icon: <CalendarMonthIcon />, roles: ['ADMIN', 'REPORTER'] },
{ label: 'Sehenswürdigkeiten', path: '/attractions', icon: <LocationOnIcon />, roles: ['ADMIN', 'REPORTER'] },
],
},
{
@@ -173,8 +174,11 @@ export default function Layout() {
</Tooltip>
</Toolbar>
</AppBar>
<Box sx={{ p: 3 }}>
<Outlet />
<ErrorBoundary>
<Outlet />
</ErrorBoundary>
</Box>
</Box>
</Box>

6
src/pages/Attraction/AttractionPage.jsx
View File

@@ -31,7 +31,7 @@ export default function AttractionPage() {
const { data } = await axiosInstance.get('/attraction');
setRows(data);
} catch (err) {
setError(err.response?.data?.message ?? 'Fehler beim laden der Attractions');
setError(err.response?.data?.error ?? 'Fehler beim laden der Attractions');
} finally {
setLoading(false);
@@ -61,7 +61,7 @@ export default function AttractionPage() {
handleCreateClose();
} catch (err) {
setCreatingError(err.response?.data?.message ?? 'Erstellen fehlgeschlagen');
setCreatingError(err.response?.data?.error ?? 'Erstellen fehlgeschlagen');
} finally {
setCreating(false);
}
@@ -80,7 +80,7 @@ export default function AttractionPage() {
await axiosInstance.delete(`/attraction/${id}`);
setRows((prev) => prev.filter((r) => r.id !== id));
} catch(err){
alert(err.response?.data?.message ?? 'Löschen fehlgeschlagen');
alert(err.response?.data?.error ?? 'Löschen fehlgeschlagen');
}
};

13
src/pages/Attraction/EditAttractionPage.jsx
View File

@@ -60,7 +60,8 @@ export default function EditAttractionPage() {
setTitleImageUrl(imgs[0] || null);
setOtherImageUrls(imgs.slice(1));
} catch (err) {
setError(err.response?.data?.message ?? 'Fehler beim Laden der Sehenswürdigkeit');
const msg = err.response?.data?.error;
setError(typeof msg === 'string' ? msg : 'Fehler beim Laden der Sehenswürdigkeit');
}
};
fetchData();
@@ -135,7 +136,8 @@ export default function EditAttractionPage() {
});
navigate('/attractions');
} catch (err) {
setError(err.response?.data?.message ?? 'Fehler beim Speichern');
const msg = err.response?.data?.error;
setError(typeof msg === 'string' ? msg : 'Fehler beim Speichern');
setSaving(false);
}
};
@@ -155,8 +157,11 @@ export default function EditAttractionPage() {
<CardContent sx={{ p: 3 }}>
<Box component="form" onSubmit={handleSubmit}>
<Stack spacing={3}>
{error && <Alert severity="error">{error}</Alert>}
{error && (
<Alert severity="error">
{typeof error === 'string' ? error : JSON.stringify(error)}
</Alert>
)}
<TextField
label="Titel"
value={title}

6
src/pages/Auth/UsersPage.jsx
View File

@@ -63,7 +63,7 @@ export default function UsersPage() {
setSnackbar(`Änderungen an ${editUser.nickname} erfolgreich gespeichert.`);
handleEditClose();
} catch (err) {
setSaveError(err.response?.data?.message ?? 'Speichern fehlgeschlagen');
setSaveError(err.response?.data?.error ?? 'Speichern fehlgeschlagen');
} finally {
setSaving(false);
}
@@ -75,7 +75,7 @@ export default function UsersPage() {
await axiosInstance.post(`/users/${user.id}/reset-password`);
setSnackbar(`Passwort für ${user.nickname} wurde zurückgesetzt — E-Mail wurde versendet.`);
} catch (err) {
setSnackbar(err.response?.data?.message ?? 'Zurücksetzen fehlgeschlagen');
setSnackbar(err.response?.data?.error ?? 'Zurücksetzen fehlgeschlagen');
} finally {
setResetting(null);
}
@@ -89,7 +89,7 @@ export default function UsersPage() {
setSnackbar(`Nutzer ${deleteUser.nickname} wurde gelöscht.`);
setDeleteUser(null);
} catch (err) {
setSnackbar(err.response?.data?.message ?? 'Löschen fehlgeschlagen');
setSnackbar(err.response?.data?.error ?? 'Löschen fehlgeschlagen');
} finally {
setDeleting(false);
}

4
src/pages/Company/CompanyPage.jsx
View File

@@ -63,7 +63,7 @@ export default function CompanyPage() {
handleCreateClose();
} catch (err) {
setCreatingError(err.response?.data?.message ?? 'Erstellen fehlgeschlagen');
setCreatingError(err.response?.data?.error ?? 'Erstellen fehlgeschlagen');
} finally {
setCreating(false);
}
@@ -82,7 +82,7 @@ export default function CompanyPage() {
await axiosInstance.delete(`/company/${id}`);
setRows((prev) => prev.filter((r) => r.id !== id));
} catch (err){
alert(err.response?.data?.message ?? 'Löschen fehlgeschlagen');
alert(err.response?.data?.error ?? 'Löschen fehlgeschlagen');
}
};

22
src/pages/Company/EditCompanyPage.jsx
View File

@@ -70,7 +70,9 @@ export default function EditCompanyPage() {
setTitleImageUrl(imgs[0] || null);
setOtherImageUrls(imgs.slice(1));
} catch (err) {
setError(err.response?.data || 'Fehler beim Laden');
// ✅ err.response.data kann ein Objekt sein → .error extrahieren
const serverMessage = err.response?.data?.error || err.response?.data;
setError(typeof serverMessage === 'string' ? serverMessage : 'Fehler beim Laden');
}
};
fetchData();
@@ -143,9 +145,15 @@ export default function EditCompanyPage() {
await axiosInstance.put(`/company/${id}`, formData, {
headers: { 'Content-Type': undefined }
});
navigate('/companies');
} catch (err) {
setError(err.response?.data || 'Fehler beim Speichern');
// ✅ Fehlermeldung korrekt aus Axios-Response extrahieren
const serverMessage = err.response?.data?.error || err.response?.data;
const message = typeof serverMessage === 'string'
? serverMessage
: err.message || 'Fehler beim Speichern';
setError(message);
setSaving(false);
}
};
@@ -165,8 +173,11 @@ export default function EditCompanyPage() {
<CardContent sx={{ p: 3 }}>
<Box component="form" onSubmit={handleSubmit}>
<Stack spacing={3}>
{error && <Alert severity="error">{error}</Alert>}
{error && (
<Alert severity="error">
{typeof error === 'string' ? error : JSON.stringify(error)}
</Alert>
)}
<TextField label="Name" value={name} fullWidth InputProps={{ readOnly: true }} helperText="Der Name kann nicht geändert werden." />
<TextField label="Beschreibung" name="description" value={form.description} onChange={handleChange} required fullWidth autoFocus multiline rows={6} />
<TextField label="Telefonnummer" name="phone" value={form.phone} onChange={handleChange} required fullWidth />
@@ -224,7 +235,6 @@ export default function EditCompanyPage() {
<Typography variant="body2" color="text.secondary" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{titleImageFile ? titleImageFile.name : titleImageUrl}
</Typography>
{/* Titelbild tauschen ohne zu löschen */}
<Button
component="label"
size="small"
@@ -261,7 +271,6 @@ export default function EditCompanyPage() {
</Typography>
<Stack spacing={1.5}>
{/* Bestehende weitere Bilder */}
{otherImageUrls.map((src, i) => (
<Box
key={`existing-${i}`}
@@ -287,7 +296,6 @@ export default function EditCompanyPage() {
</Box>
))}
{/* Neu hinzugefügte weitere Bilder */}
{otherPreviews.map((src, i) => (
<Box
key={`new-${i}`}

19
src/pages/News/CreateNewsPage.jsx
View File

@@ -69,7 +69,7 @@ export default function CreateNewsPage() {
});
navigate('/posts');
} catch (err) {
setError(err.response?.data?.message ?? 'Erstellen fehlgeschlagen');
setError(err.response?.data?.error ?? 'Erstellen fehlgeschlagen');
} finally {
setSaving(false);
}
@@ -90,8 +90,11 @@ export default function CreateNewsPage() {
<CardContent sx={{ p: 3 }}>
<Box component="form" onSubmit={handleSubmit}>
<Stack spacing={3}>
{error && <Alert severity="error">{error}</Alert>}
{error && (
<Alert severity="error">
{typeof error === 'string' ? error : JSON.stringify(error)}
</Alert>
)}
<TextField label="Titel" name="title" value={form.title} onChange={handleChange} required fullWidth autoFocus />
<TextField label="Beschreibung" name="description" value={form.description} onChange={handleChange} required fullWidth multiline rows={6} />
<TextField label="Kategorie" name="category" value={form.category} onChange={handleChange} required fullWidth />
@@ -166,6 +169,16 @@ export default function CreateNewsPage() {
{/* Push Notification */}
<Box>
<Typography variant="subtitle2" fontWeight={500} mb={1.5}>Push Notification</Typography>
<Alert
severity="info"
variant="outlined"
sx={{ py: 0.5, mb: 2, fontSize: 13 }}
>
Wird gebündelt nach ~30 min gesendet. Kein Versand bei Ruhezeiten (22–8 Uhr),
wenn in den letzten 90 min bereits gesendet wurde oder das Tageslimit (3) erreicht ist.
</Alert>
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
<ToggleButtonGroup
exclusive

16
src/pages/Notification/PushPage.jsx
View File

@@ -23,7 +23,7 @@ export default function PushPage() {
setTitle('');
setBody('');
} catch (err) {
setResult({ type: 'error', msg: err.response?.data?.message ?? 'Senden fehlgeschlagen' });
setResult({ type: 'error', msg: err.response?.data?.error ?? 'Senden fehlgeschlagen' });
} finally {
setLoading(false);
}
@@ -31,7 +31,19 @@ export default function PushPage() {
return (
<Box>
<Typography variant="h5" fontWeight={600} mb={3}>Push Notifications</Typography>
<Typography variant="h5" fontWeight={600} mb={3}>Push Benachrichtigung</Typography>
<Alert severity="info" sx={{ maxWidth: 560, mb: 3 }}>
Nachrichten werden über <strong>Firebase Cloud Messaging (FCM)</strong> versendet
und landen zunächst in einer Queue. Der Worker verarbeitet sie anschließend
asynchron – Zustellung kann einige Sekunden dauern. iOS- und Android-Geräte
müssen Benachrichtigungen in der App-Einstellung erlaubt haben.
Benachrichtigung werden nicht verschickt, wenn eines der folgenden Punkte zutrifft:
- Benachrichtigung wird innerhalb der Ruhezeiten verschickt (22:00-8:00)
- In den letzten 90 Minuten wurde bereits an diese Platform eine Benachrichtigung geschickt
- Heute wurden bereits 3 Benachrichtigung an diese Platform geschickt
</Alert>
<Card sx={{ maxWidth: 560 }}>
<CardContent sx={{ p: 3 }}>
<Box component="form" onSubmit={handleSend} sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>

24
src/pages/Organization/EditOrganizationPage.jsx
View File

@@ -70,7 +70,7 @@ export default function EditOrganizationPage() {
setTitleImageUrl(imgs[0] || null);
setOtherImageUrls(imgs.slice(1));
} catch (err) {
setError(err.response?.data || 'Fehler beim Laden');
setError(err.response?.data?.error || err.response?.data || 'Fehler beim Laden');
}
};
fetchData();
@@ -140,12 +140,22 @@ export default function EditOrganizationPage() {
if (titleImageFile) formData.append('images', titleImageFile);
otherFiles.forEach((f) => formData.append('images', f));
// ✅ await hinzugefügt — ohne das wird die Response nie abgewartet
await axiosInstance.put(`/organization/${id}`, formData, {
headers: { 'Content-Type': undefined }
});
// Axios wirft bei 4xx/5xx automatisch eine Exception,
// hier kommen wir nur bei Erfolg an
navigate('/organizations');
} catch (err) {
setError(err.response?.data || 'Fehler beim Speichern');
// Axios-Fehlerstruktur: err.response.data enthält den Body
const serverMessage = err.response?.data?.error || err.response?.data;
const message =
typeof serverMessage === 'string'
? serverMessage
: err.message || 'Fehler beim Speichern';
setError(message);
setSaving(false);
}
};
@@ -165,8 +175,11 @@ export default function EditOrganizationPage() {
<CardContent sx={{ p: 3 }}>
<Box component="form" onSubmit={handleSubmit}>
<Stack spacing={3}>
{error && <Alert severity="error">{error}</Alert>}
{error && (
<Alert severity="error">
{typeof error === 'string' ? error : JSON.stringify(error)}
</Alert>
)}
<TextField label="Name" value={name} fullWidth InputProps={{ readOnly: true }} helperText="Der Name kann nicht geändert werden." />
<TextField label="Beschreibung" name="description" value={form.description} onChange={handleChange} required fullWidth autoFocus multiline rows={6} />
<TextField label="Telefonnummer" name="phone" value={form.phone} onChange={handleChange} required fullWidth />
@@ -224,7 +237,6 @@ export default function EditOrganizationPage() {
<Typography variant="body2" color="text.secondary" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{titleImageFile ? titleImageFile.name : titleImageUrl}
</Typography>
{/* Titelbild tauschen ohne zu löschen */}
<Button
component="label"
size="small"
@@ -261,7 +273,6 @@ export default function EditOrganizationPage() {
</Typography>
<Stack spacing={1.5}>
{/* Bestehende weitere Bilder */}
{otherImageUrls.map((src, i) => (
<Box
key={`existing-${i}`}
@@ -287,7 +298,6 @@ export default function EditOrganizationPage() {
</Box>
))}
{/* Neu hinzugefügte weitere Bilder */}
{otherPreviews.map((src, i) => (
<Box
key={`new-${i}`}

2
src/pages/Organization/OrganizationPage.jsx
View File

@@ -63,7 +63,7 @@ export default function OrganizationPage() {
handleCreateClose();
} catch (err) {
setCreatingError(err.response?.data?.message ?? 'Erstellen fehlgeschlagen');
setCreatingError(err.response?.data?.error ?? 'Erstellen fehlgeschlagen');
} finally {
setCreating(false);
}