@@ -164,62 +164,95 @@ export default function SettingsPage() {
164164 Alert Preferences
165165 </ CardTitle >
166166 </ CardHeader >
167- < CardContent className = "space-y-4" >
168- < div >
169- < Label className = "text-base font-semibold mb-3 block" > Dashboard Alert Severity</ Label >
167+ < CardContent className = "space-y-6" >
168+ < div className = "bg-blue-50 dark:bg-blue-950/30 rounded-lg p-4 border border-blue-200 dark:border-blue-800" >
169+ < div className = "flex items-start gap-3" >
170+ < AlertCircle className = "w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
171+ < div className = "text-sm space-y-2" >
172+ < p className = "font-semibold text-foreground" > How notifications work</ p >
173+ < div className = "space-y-1.5 text-muted-foreground" >
174+ < p > • < strong > Location-based:</ strong > You'll receive alerts for disasters within 100km of your location</ p >
175+ < p > • < strong > Severity filter:</ strong > Only alerts at or above your minimum severity will appear</ p >
176+ < p > • < strong > Alert types:</ strong > Choose which types of alerts you want to see</ p >
177+ < p > • < strong > Regions:</ strong > Optionally specify regions to receive alerts from anywhere</ p >
178+ </ div >
179+ </ div >
180+ </ div >
181+ </ div >
182+
183+ < div className = "space-y-1" >
184+ < Label className = "text-base font-semibold mb-3 block" > Step 1: Dashboard Alert Severity</ Label >
170185 < Select value = { String ( minSeverity ) } onValueChange = { ( value ) => setMinSeverity ( Number ( value ) ) } >
171186 < SelectTrigger className = "w-full" >
172187 < SelectValue />
173188 </ SelectTrigger >
174189 < SelectContent >
175- < SelectItem value = "1" > Low (1)</ SelectItem >
176- < SelectItem value = "2" > Medium (2)</ SelectItem >
177- < SelectItem value = "3" > High (3)</ SelectItem >
178- < SelectItem value = "4" > Very High (4)</ SelectItem >
179- < SelectItem value = "5" > Critical (5)</ SelectItem >
190+ < SelectItem value = "1" > Low (1) - All alerts </ SelectItem >
191+ < SelectItem value = "2" > Medium (2) - Moderate and above </ SelectItem >
192+ < SelectItem value = "3" > High (3) - Serious alerts only </ SelectItem >
193+ < SelectItem value = "4" > Very High (4) - Critical only </ SelectItem >
194+ < SelectItem value = "5" > Critical (5) - Most severe only </ SelectItem >
180195 </ SelectContent >
181196 </ Select >
182- < p className = "text-xs text-muted-foreground mt-2" > Show alerts in dashboard at this severity level or higher</ p >
197+ < p className = "text-xs text-muted-foreground mt-2" >
198+ Only alerts at this severity level or higher will appear in your dashboard. Lower severity = more alerts.
199+ </ p >
183200 </ div >
184201
185- < div >
186- < Label className = "text-base font-semibold mb-3 block" > Email Alert Severity</ Label >
202+ < div className = "space-y-1" >
203+ < Label className = "text-base font-semibold mb-3 block" > Step 2: Email Alert Severity</ Label >
187204 < Select value = { String ( emailMinSeverity ) } onValueChange = { ( value ) => setEmailMinSeverity ( Number ( value ) ) } >
188205 < SelectTrigger className = "w-full" >
189206 < SelectValue />
190207 </ SelectTrigger >
191208 < SelectContent >
192- < SelectItem value = "1" > Low (1)</ SelectItem >
193- < SelectItem value = "2" > Medium (2)</ SelectItem >
194- < SelectItem value = "3" > High (3)</ SelectItem >
195- < SelectItem value = "4" > Very High (4)</ SelectItem >
196- < SelectItem value = "5" > Critical (5)</ SelectItem >
209+ < SelectItem value = "1" > Low (1) - All alerts </ SelectItem >
210+ < SelectItem value = "2" > Medium (2) - Moderate and above </ SelectItem >
211+ < SelectItem value = "3" > High (3) - Serious alerts only </ SelectItem >
212+ < SelectItem value = "4" > Very High (4) - Critical only </ SelectItem >
213+ < SelectItem value = "5" > Critical (5) - Most severe only </ SelectItem >
197214 </ SelectContent >
198215 </ Select >
199- < p className = "text-xs text-muted-foreground mt-2" > Only send emails for alerts at this severity level or higher</ p >
216+ < p className = "text-xs text-muted-foreground mt-2" >
217+ Only emails will be sent for alerts at this severity level or higher. This is separate from dashboard alerts.
218+ </ p >
200219 </ div >
201220
202- < div >
203- < Label className = "text-base font-semibold mb-3 block" > Alert Types</ Label >
204- < div className = "space-y-2" >
205- { [ 'new_crisis' , 'severity_change' , 'update' ] . map ( type => (
206- < div key = { type } className = "flex items-center space-x-2" >
221+ < div className = "space-y-1" >
222+ < Label className = "text-base font-semibold mb-3 block" > Step 3: Alert Types</ Label >
223+ < p className = "text-xs text-muted-foreground mb-3" > Select which types of alerts you want to receive:</ p >
224+ < div className = "space-y-3" >
225+ { [
226+ { value : 'new_crisis' , label : 'New Crisis' , desc : 'When a new disaster is first detected' } ,
227+ { value : 'severity_change' , label : 'Severity Changes' , desc : 'When an existing disaster becomes more severe' } ,
228+ { value : 'update' , label : 'Updates' , desc : 'General updates about ongoing crises' }
229+ ] . map ( type => (
230+ < div key = { type . value } className = "flex items-start space-x-3 p-3 rounded-lg border hover:bg-muted/50 transition-colors" >
207231 < Checkbox
208- id = { type }
209- checked = { alertTypes . includes ( type ) }
210- onCheckedChange = { ( ) => toggleAlertType ( type ) }
232+ id = { type . value }
233+ checked = { alertTypes . includes ( type . value ) }
234+ onCheckedChange = { ( ) => toggleAlertType ( type . value ) }
235+ className = "mt-1"
211236 />
212- < Label htmlFor = { type } className = "font-normal cursor-pointer text-sm" >
213- { type === 'new_crisis' ? 'New Crisis' : type === 'severity_change' ? 'Severity Change' : 'Updates' }
214- </ Label >
237+ < div className = "flex-1" >
238+ < Label htmlFor = { type . value } className = "font-medium cursor-pointer text-sm" >
239+ { type . label }
240+ </ Label >
241+ < p className = "text-xs text-muted-foreground mt-0.5" > { type . desc } </ p >
242+ </ div >
215243 </ div >
216244 ) ) }
217245 </ div >
246+ { alertTypes . length === 0 && (
247+ < p className = "text-xs text-red-600 dark:text-red-400 mt-2" >
248+ ⚠️ You must select at least one alert type
249+ </ p >
250+ ) }
218251 </ div >
219252
220- < div >
253+ < div className = "space-y-1" >
221254 < Label htmlFor = "regions" className = "text-base font-semibold mb-2 block" >
222- Regions (Optional)
255+ Step 4: Regions (Optional)
223256 </ Label >
224257 < Input
225258 id = "regions"
@@ -228,13 +261,16 @@ export default function SettingsPage() {
228261 onChange = { ( e ) => setRegions ( e . target . value ) }
229262 className = "text-sm"
230263 />
231- < p className = "text-xs text-muted-foreground mt-2" > Comma-separated list. Leave empty to get alerts based on location radius.</ p >
264+ < p className = "text-xs text-muted-foreground mt-2" >
265+ < strong > Optional:</ strong > Enter specific regions (comma-separated) to receive alerts from anywhere, even outside your 100km radius.
266+ Leave empty to only receive alerts based on your location radius.
267+ </ p >
232268 </ div >
233269
234- < div className = "pt-2" >
270+ < div className = "pt-2 border-t " >
235271 < Button
236272 onClick = { ( ) => savePreferences ( ) }
237- disabled = { saving }
273+ disabled = { saving || alertTypes . length === 0 }
238274 className = "w-full"
239275 >
240276 { saving ? (
@@ -251,6 +287,11 @@ export default function SettingsPage() {
251287 'Save Preferences'
252288 ) }
253289 </ Button >
290+ { alertTypes . length === 0 && (
291+ < p className = "text-xs text-red-600 dark:text-red-400 mt-2 text-center" >
292+ Please select at least one alert type to save
293+ </ p >
294+ ) }
254295 </ div >
255296 </ CardContent >
256297 </ Card >
0 commit comments