src/pages/provider_portal.rs

@@ -1,14 +1,32 @@
-use crate::components::{Banner, DashboardButton};
+use crate::components::{Banner, DashboardButton, DateList, Loading};
 use leptos::prelude::*;
+use leptos_oidc::{AuthLoaded, Authenticated};
+use crate::pages::api::get_important_dates;
+use crate::pages::UnauthenticatedPage;
 
 #[component]
 pub fn ProviderPortal() -> impl IntoView {
+    let dates_resource = OnceResource::new(async move {
+        get_important_dates().await
+    });
+
+    let dates_list = RwSignal::new(Vec::new());
+
+    Effect::new(move || {
+        if let Some(Ok(mut dates)) = dates_resource.get() {
+            dates.sort_by_key(|info| info.date.get_status());
+            dates_list.set(dates);
+        }
+    });
+    
     view! {
         <Banner
             title="Provider Dashboard"
             logo="PHS_Stacked_Acronym.png"
             path="/"
         />
+        <AuthLoaded fallback=Loading>
+            <Authenticated unauthenticated=UnauthenticatedPage>
                 <div class="mx-auto px-6">
                     <div class="container mx-auto px-6 py-8 space-y-8">
                         <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
@@ -33,10 +51,21 @@ pub fn ProviderPortal() -> impl IntoView {
                                 />
                             </section>
                             <section class="space-y-4">
-
+                                <div class="rounded-lg shadow-lg/25 overflow-hidden">
+                                    <div class="bg-red-900 text-white px-4 py-3 shadow-lg">
+                                        <h3 class="text-white font-bold">Important Dates</h3>
+                                    </div>
+                                    <div class="p-2">
+                                        <div class="flex flex-col p-3 gap-3">
+                                            <DateList dates=dates_list />
+                                        </div>
+                                    </div>
+                                </div>
                             </section>
                         </div>
                     </div>
                 </div>
+            </Authenticated>
+        </AuthLoaded>
     }
 }