Skip to content

Commit 2f1ac14

Browse files
BTheCoderrBTheCoderr
committed
Fix empty pages and routing issues
- Added missing routes to ResourcesLayout in App.js: - /resources/checklist/:type -> DocumentChecklistPage - /resources/immigration -> ImmigrationResourcesPage - /resources/external -> ExternalResourcesPage - /resources/guides -> LegalGuidesPage - Created ImmigrationRightsPage for /rights/immigration route - Fixed routing structure to properly handle nested resource pages - All 'View All' buttons in Resources page now work correctly - Document checklist page now accessible at /resources/checklist/immigration - Immigration rights page now accessible at /rights/immigration - External resources page now accessible at /resources/external - Legal guides page now accessible at /resources/guides
1 parent 2078258 commit 2f1ac14

2 files changed

Lines changed: 270 additions & 0 deletions

File tree

‎frontend/src/App.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@ import DocumentGenerator from './components/DocumentGenerator';
6767
import ExpungementWizard from './components/ExpungementWizard';
6868
import LanguageSwitcher from './components/LanguageSwitcher';
6969
import DocumentScanPage from './pages/DocumentScanPage';
70+
import DocumentChecklistPage from './pages/DocumentChecklistPage';
71+
import ImmigrationResourcesPage from './pages/ImmigrationResourcesPage';
72+
import ImmigrationRightsPage from './pages/ImmigrationRightsPage';
73+
import ExternalResourcesPage from './pages/ExternalResourcesPage';
74+
import LegalGuidesPage from './pages/LegalGuidesPage';
7075

7176
// Protected route wrapper - updated to use the current AuthContext implementation
7277
const ProtectedRoute = ({ children }) => {
@@ -133,6 +138,10 @@ const ResourcesLayout = () => (
133138
<Routes>
134139
<Route index element={<Resources />} />
135140
<Route path="rights" element={<RightsPage />} />
141+
<Route path="checklist/:type" element={<DocumentChecklistPage />} />
142+
<Route path="immigration" element={<ImmigrationResourcesPage />} />
143+
<Route path="external" element={<ExternalResourcesPage />} />
144+
<Route path="guides" element={<LegalGuidesPage />} />
136145
<Route
137146
path="premium-guides"
138147
element={
@@ -298,6 +307,7 @@ function AppContent() {
298307
<Route path="/team" element={<TeamPage />} />
299308
<Route path="/mission" element={<OurMissionPage />} />
300309
<Route path="/rights" element={<RightsPage />} />
310+
<Route path="/rights/immigration" element={<ImmigrationRightsPage />} />
301311
<Route path="/glossary" element={<GlossaryPage />} />
302312
<Route path="/faq" element={<FAQPage />} />
303313
<Route path="/blog" element={<BlogPage />} />

‎frontend/src/pages/ImmigrationRightsPage.js‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
import React from 'react';
2+
import {
3+
Container,
4+
Typography,
5+
Box,
6+
Card,
7+
CardContent,
8+
Grid,
9+
List,
10+
ListItem,
11+
ListItemIcon,
12+
ListItemText,
13+
Chip,
14+
Divider,
15+
Button
16+
} from '@mui/material';
17+
import {
18+
Gavel as GavelIcon,
19+
Security as SecurityIcon,
20+
BusinessCenter as BusinessCenterIcon,
21+
Home as HomeIcon,
22+
HealthAndSafety as HealthAndSafetyIcon,
23+
AccountBalance as AccountBalanceIcon,
24+
ArrowBack as ArrowBackIcon,
25+
CheckCircle as CheckCircleIcon
26+
} from '@mui/icons-material';
27+
import { useNavigate } from 'react-router-dom';
28+
import { PageLayout, Section, designTokens } from '../design-system';
29+
30+
const ImmigrationRightsPage = () => {
31+
const navigate = useNavigate();
32+
33+
const immigrationRights = [
34+
{
35+
title: 'Right to Due Process',
36+
icon: <GavelIcon sx={{ fontSize: 40, color: '#1565C0' }} />,
37+
description: 'Fair treatment in immigration proceedings',
38+
rights: [
39+
'Right to legal representation',
40+
'Right to present evidence',
41+
'Right to appeal decisions',
42+
'Right to interpretation services'
43+
],
44+
color: '#1565C0'
45+
},
46+
{
47+
title: 'Right to Non-Discrimination',
48+
icon: <SecurityIcon sx={{ fontSize: 40, color: '#14B8A6' }} />,
49+
description: 'Protection from discrimination based on national origin',
50+
rights: [
51+
'Equal treatment regardless of country of origin',
52+
'Protection from racial profiling',
53+
'Fair access to services',
54+
'Equal employment opportunities'
55+
],
56+
color: '#14B8A6'
57+
},
58+
{
59+
title: 'Right to Family Unity',
60+
icon: <HomeIcon sx={{ fontSize: 40, color: '#1565C0' }} />,
61+
description: 'Protection of family relationships',
62+
rights: [
63+
'Right to petition for family members',
64+
'Protection from family separation',
65+
'Right to visit detained family',
66+
'Family-based immigration options'
67+
],
68+
color: '#1565C0'
69+
},
70+
{
71+
title: 'Right to Work',
72+
icon: <BusinessCenterIcon sx={{ fontSize: 40, color: '#14B8A6' }} />,
73+
description: 'Employment rights for immigrants',
74+
rights: [
75+
'Right to work with proper authorization',
76+
'Protection from workplace discrimination',
77+
'Right to fair wages',
78+
'Protection from exploitation'
79+
],
80+
color: '#14B8A6'
81+
},
82+
{
83+
title: 'Right to Education',
84+
icon: <AccountBalanceIcon sx={{ fontSize: 40, color: '#1565C0' }} />,
85+
description: 'Access to educational opportunities',
86+
rights: [
87+
'Right to public education (K-12)',
88+
'Access to higher education',
89+
'Equal treatment in schools',
90+
'Language assistance programs'
91+
],
92+
color: '#1565C0'
93+
},
94+
{
95+
title: 'Right to Healthcare',
96+
icon: <HealthAndSafetyIcon sx={{ fontSize: 40, color: '#14B8A6' }} />,
97+
description: 'Access to healthcare services',
98+
rights: [
99+
'Emergency medical care',
100+
'Access to public health programs',
101+
'Protection of medical privacy',
102+
'Language interpretation in healthcare'
103+
],
104+
color: '#14B8A6'
105+
}
106+
];
107+
108+
const handleBackClick = () => {
109+
navigate('/rights');
110+
};
111+
112+
return (
113+
<PageLayout
114+
title="Immigration Rights"
115+
description="Know your rights as an immigrant in the United States"
116+
>
117+
<Section>
118+
<Box sx={{ mb: 4 }}>
119+
<Button
120+
startIcon={<ArrowBackIcon />}
121+
onClick={handleBackClick}
122+
sx={{
123+
mb: 3,
124+
color: designTokens.colors.primary[600],
125+
'&:hover': {
126+
backgroundColor: designTokens.colors.primary[50]
127+
}
128+
}}
129+
>
130+
Back to All Rights
131+
</Button>
132+
133+
<Typography variant="h4" sx={{
134+
fontWeight: designTokens.typography.fontWeight.bold,
135+
color: designTokens.colors.neutral[900],
136+
mb: 2
137+
}}>
138+
Immigration Rights
139+
</Typography>
140+
141+
<Typography variant="body1" sx={{
142+
color: designTokens.colors.neutral[600],
143+
mb: 4,
144+
fontSize: '1.1rem',
145+
lineHeight: 1.6
146+
}}>
147+
Understanding your rights as an immigrant is crucial for protecting yourself and your family.
148+
These rights are protected by the U.S. Constitution and federal laws, regardless of your immigration status.
149+
</Typography>
150+
</Box>
151+
152+
<Grid container spacing={4}>
153+
{immigrationRights.map((right, index) => (
154+
<Grid item xs={12} md={6} key={index}>
155+
<Card
156+
sx={{
157+
height: '100%',
158+
transition: 'all 0.3s ease',
159+
border: `2px solid transparent`,
160+
'&:hover': {
161+
transform: 'translateY(-8px)',
162+
boxShadow: designTokens.shadows.large,
163+
border: `2px solid ${right.color}`,
164+
}
165+
}}
166+
>
167+
<CardContent sx={{ p: designTokens.spacing[4] }}>
168+
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
169+
{right.icon}
170+
<Box sx={{ ml: 2 }}>
171+
<Typography variant="h6" sx={{
172+
fontWeight: designTokens.typography.fontWeight.semibold,
173+
color: designTokens.colors.neutral[900]
174+
}}>
175+
{right.title}
176+
</Typography>
177+
<Typography variant="body2" sx={{
178+
color: designTokens.colors.neutral[600],
179+
mt: 0.5
180+
}}>
181+
{right.description}
182+
</Typography>
183+
</Box>
184+
</Box>
185+
186+
<Divider sx={{ my: 2 }} />
187+
188+
<List dense>
189+
{right.rights.map((rightItem, rightIndex) => (
190+
<ListItem key={rightIndex} sx={{ px: 0 }}>
191+
<ListItemIcon sx={{ minWidth: 32 }}>
192+
<CheckCircleIcon
193+
sx={{
194+
fontSize: 20,
195+
color: right.color
196+
}}
197+
/>
198+
</ListItemIcon>
199+
<ListItemText
200+
primary={rightItem}
201+
sx={{
202+
'& .MuiListItemText-primary': {
203+
fontSize: '0.9rem',
204+
color: designTokens.colors.neutral[700]
205+
}
206+
}}
207+
/>
208+
</ListItem>
209+
))}
210+
</List>
211+
</CardContent>
212+
</Card>
213+
</Grid>
214+
))}
215+
</Grid>
216+
217+
<Box sx={{
218+
mt: 6,
219+
p: 4,
220+
backgroundColor: designTokens.colors.primary[50],
221+
borderRadius: designTokens.borderRadius.lg,
222+
border: `1px solid ${designTokens.colors.primary[200]}`
223+
}}>
224+
<Typography variant="h6" sx={{
225+
fontWeight: designTokens.typography.fontWeight.semibold,
226+
color: designTokens.colors.primary[800],
227+
mb: 2
228+
}}>
229+
Important Reminders
230+
</Typography>
231+
<Typography variant="body2" sx={{
232+
color: designTokens.colors.primary[700],
233+
mb: 2
234+
}}>
235+
• You have the right to remain silent and not answer questions about your immigration status
236+
</Typography>
237+
<Typography variant="body2" sx={{
238+
color: designTokens.colors.primary[700],
239+
mb: 2
240+
}}>
241+
• You have the right to speak with an attorney before answering questions
242+
</Typography>
243+
<Typography variant="body2" sx={{
244+
color: designTokens.colors.primary[700],
245+
mb: 2
246+
}}>
247+
• You have the right to refuse consent to searches without a warrant
248+
</Typography>
249+
<Typography variant="body2" sx={{
250+
color: designTokens.colors.primary[700]
251+
}}>
252+
• If you are detained, you have the right to contact your consulate
253+
</Typography>
254+
</Box>
255+
</Section>
256+
</PageLayout>
257+
);
258+
};
259+
260+
export default ImmigrationRightsPage;

0 commit comments

Comments
 (0)