resolve issues with new features

frontend/src/components/dashboard/AnnouncementBanner.tsx

@@ -37,7 +37,7 @@ export default function AnnouncementBanner({ gridColumn }: { gridColumn?: string
     retry: 1,
   });
 
-  const visible = banners.filter(b => !dismissed.includes(b.id) || b.level === 'critical');
+  const visible = banners.filter(b => b.show_as !== 'widget' && (!dismissed.includes(b.id) || b.level === 'critical'));
 
   const handleDismiss = (banner: Banner) => {
     if (banner.level === 'critical') return; // never dismiss critical

frontend/src/components/dashboard/BannerWidget.tsx

@@ -0,0 +1,51 @@
+import { Card, CardContent, Typography, Box } from '@mui/material';
+import { Campaign } from '@mui/icons-material';
+import { useQuery } from '@tanstack/react-query';
+import { bannerApi } from '../../services/banners';
+import type { BannerLevel } from '../../types/banner.types';
+
+const SEVERITY_COLOR: Record<BannerLevel, string> = {
+  info: '#1976d2',
+  important: '#ed6c02',
+  critical: '#d32f2f',
+};
+
+export default function BannerWidget() {
+  const { data: banners = [] } = useQuery({
+    queryKey: ['banners', 'active'],
+    queryFn: bannerApi.getActive,
+    refetchInterval: 60_000,
+    retry: 1,
+  });
+
+  const widgetBanners = banners.filter(b => b.show_as === 'widget');
+
+  if (widgetBanners.length === 0) return null;
+
+  return (
+    <Card>
+      <CardContent>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
+          <Campaign color="primary" />
+          <Typography variant="h6">Mitteilungen</Typography>
+        </Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+          {widgetBanners.map(banner => (
+            <Box
+              key={banner.id}
+              sx={{
+                borderLeft: `4px solid ${SEVERITY_COLOR[banner.level]}`,
+                pl: 2,
+                py: 1,
+              }}
+            >
+              <Typography variant="body2">
+                {banner.message}
+              </Typography>
+            </Box>
+          ))}
+        </Box>
+      </CardContent>
+    </Card>
+  );
+}

frontend/src/components/dashboard/VikunjaMyTasksWidget.tsx

@@ -165,7 +165,7 @@ const VikunjaMyTasksWidget: React.FC = () => {
                 key={task.id}
                 task={task}
                 showDivider={index < tasks.length - 1}
-                vikunjaUrl={import.meta.env.VITE_VIKUNJA_URL ?? ''}
+                vikunjaUrl={data?.vikunjaUrl ?? ''}
               />
             ))}
           </Box>

frontend/src/components/dashboard/WidgetGroup.tsx

@@ -0,0 +1,49 @@
+import { Box, Typography } from '@mui/material';
+
+interface WidgetGroupProps {
+  title: string;
+  children: React.ReactNode;
+  gridColumn?: string;
+}
+
+function WidgetGroup({ title, children, gridColumn }: WidgetGroupProps) {
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        border: '1px solid',
+        borderColor: 'divider',
+        borderRadius: 1,
+        p: 2,
+        pt: 3,
+        gridColumn,
+      }}
+    >
+      <Typography
+        sx={{
+          position: 'absolute',
+          top: -10,
+          left: 16,
+          px: 1,
+          backgroundColor: 'background.default',
+          fontSize: '0.75rem',
+          color: 'text.secondary',
+          fontWeight: 500,
+        }}
+      >
+        {title}
+      </Typography>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+          gap: 2.5,
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
+export default WidgetGroup;

frontend/src/components/dashboard/index.ts

@@ -13,4 +13,6 @@ export { default as AdminStatusWidget } from './AdminStatusWidget';
 export { default as VehicleBookingQuickAddWidget } from './VehicleBookingQuickAddWidget';
 export { default as EventQuickAddWidget } from './EventQuickAddWidget';
 export { default as AnnouncementBanner } from './AnnouncementBanner';
+export { default as BannerWidget } from './BannerWidget';
 export { default as LinksWidget } from './LinksWidget';
+export { default as WidgetGroup } from './WidgetGroup';