Fix TypeScript build errors and complete full-width layout implementation

- Add missing Divider import to DashboardLayout
- Remove unused imports and functions from ContactListPage
- Complete NotificationsPage Card wrapper removal
- All TypeScript errors resolved, build successful

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/layout/DashboardLayout.tsx

@@ -17,6 +17,7 @@ import {
   useMediaQuery,
   Badge,
   Collapse,
+  Divider,
 } from '@mui/material';
 import {
   SearchRounded,

src/pages/ContactListPage.tsx

@@ -19,7 +19,6 @@ import {
   InputLabel,
   Select,
   MenuItem,
-  IconButton,
   Menu,
   ListItemIcon,
   ListItemText
@@ -39,16 +38,9 @@ import {
   CloudDownload,
   VerifiedUser,
   Favorite,
-  CheckCircle,
-  Schedule,
-  Send,
-  ArrowUpward,
-  ArrowDownward,
-  FilterList,
   Sort,
   SortByAlpha,
   Business,
-  AccessTime,
   FamilyRestroom,
   Person,
   Work,
@@ -69,7 +61,6 @@ const ContactListPage = () => {
   const [groupFilter, setGroupFilter] = useState<string>('all');
   const [sortBy, setSortBy] = useState<string>('name');
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
-  const [filterMenuAnchor, setFilterMenuAnchor] = useState<null | HTMLElement>(null);
   const [sortMenuAnchor, setSortMenuAnchor] = useState<null | HTMLElement>(null);
   const theme = useTheme();
   const navigate = useNavigate();
@@ -210,45 +201,13 @@ const ContactListPage = () => {
   };
 
 
-  const getNaoStatusIndicator = (contact: Contact) => {
-    switch (contact.naoStatus) {
-      case 'member':
-        return {
-          icon: <CheckCircle sx={{ fontSize: 16 }} />,
-          label: 'NAO Member',
-          color: theme.palette.success.main,
-          bgColor: alpha(theme.palette.success.main, 0.08),
-          borderColor: alpha(theme.palette.success.main, 0.2)
-        };
-      case 'invited':
-        return {
-          icon: <Schedule sx={{ fontSize: 16 }} />,
-          label: 'Invited',
-          color: theme.palette.warning.main,
-          bgColor: alpha(theme.palette.warning.main, 0.08),
-          borderColor: alpha(theme.palette.warning.main, 0.2)
-        };
-      default:
-        return null;
-    }
-  };
 
-  const handleInviteToNao = (contact: Contact) => {
-    // Navigate to invitation page with contact pre-filled
-    navigate(`/invite?inviteeName=${encodeURIComponent(contact.name)}&inviteeEmail=${encodeURIComponent(contact.email)}`);
-  };
 
-  const handleFilterClick = (event: React.MouseEvent<HTMLElement>) => {
-    setFilterMenuAnchor(event.currentTarget);
-  };
 
   const handleSortClick = (event: React.MouseEvent<HTMLElement>) => {
     setSortMenuAnchor(event.currentTarget);
   };
 
-  const handleFilterClose = () => {
-    setFilterMenuAnchor(null);
-  };
 
   const handleSortClose = () => {
     setSortMenuAnchor(null);

src/pages/NotificationsPage.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect } from 'react';
 import {
   Typography,
   Box,
-  Card,
   Button,
   Chip,
   Avatar,
@@ -228,15 +227,12 @@ const NotificationsPage = () => {
       </Box>
 
       {/* Notifications List */}
-      <Card sx={{ 
-        width: { xs: 'calc(100% + 20px)', md: '100%' }, 
-        maxWidth: { xs: 'calc(100vw - 0px)', md: '100%' }, 
+      <Box sx={{ 
+        width: '100%', 
         overflow: 'hidden',
-        mx: { xs: '-10px', md: 0 },
-        borderRadius: 0,
         boxSizing: 'border-box'
       }}>
-        <Box sx={{ p: { xs: '10px', md: 3 } }}>
+        <Box sx={{ p: { xs: 0, md: 0 } }}>
           {isLoading ? (
             <Box sx={{ textAlign: 'center', py: 8 }}>
               <Typography variant="h6" color="text.secondary" gutterBottom>
@@ -405,7 +401,7 @@ const NotificationsPage = () => {
             </Box>
           )}
         </Box>
-      </Card>
+      </Box>
     </Box>
   );
 };