Better page flow

client/src/components/base_table.rs

@@ -16,6 +16,7 @@ where
 {
     pub headers_view: &'a Signal<Vec<View<G>>>,
     pub data_view: &'a Signal<Vec<Vec<View<G>>>>,
+    pub table_class: &'a String,
 }
 
 #[derive(Debug, Clone)]
@@ -61,7 +62,7 @@ where
     });
 
     view! { cx,
-        table (class="table-auto bg-slate-200 text-left dark:bg-slate-800 rounded-lg mx-auto my-2") {
+        table (class=format!("{} table-auto bg-slate-200 text-left dark:bg-slate-800 rounded-lg mx-auto my-2", props.table_class)) {
             thead {
                 tr (class="border-b-2 border-slate-500 text-center") {
                     Keyed(

client/src/components/paginated_data_table.rs

@@ -13,7 +13,7 @@ use crate::{
 };
 
 #[derive(Prop)]
-pub struct PaginatedTableStateRx<M, F, C>
+pub struct PaginatedTableStateRx<'a, M, F, C>
 where
     M: 'static,
     C: Fn(Option<String>, i64, i64) -> F,
@@ -22,9 +22,10 @@ where
     pub record_label: String,
     pub route: C,
     pub filter: Option<String>,
+    pub table_class: &'a String,
 }
 
-impl<M, F, C> PaginatedTableStateRx<M, F, C>
+impl<'a, M, F, C> PaginatedTableStateRx<'a, M, F, C>
 where
     M: 'static,
     C: Fn(Option<String>, i64, i64) -> F,
@@ -39,7 +40,7 @@ where
 #[component]
 pub fn PaginatedTable<'a, G, M, F, C>(
     cx: Scope<'a>,
-    props: PaginatedTableStateRx<M, F, C>,
+    props: PaginatedTableStateRx<'a, M, F, C>,
 ) -> View<G>
 where
     G: Html,
@@ -53,6 +54,7 @@ where
     let table_prop: TableContentRx<G> = TableContentRx {
         headers_view: create_signal(cx, vec![]),
         data_view: create_signal(cx, vec![vec![]]),
+        table_class: props.table_class,
     };
     let page = create_signal(cx, 0);
     let n_page = create_signal(cx, 1);
@@ -132,7 +134,7 @@ where
                     }
                 }
             }
-            BaseTable(headers_view=table_prop.headers_view, data_view=table_prop.data_view)
+            BaseTable(headers_view=table_prop.headers_view, data_view=table_prop.data_view, table_class=table_prop.table_class)
             }
         }
     } else {

client/src/templates/index.rs

@@ -1,5 +1,4 @@
 use perseus::prelude::*;
-use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 
 use crate::{
@@ -18,11 +17,22 @@ use crate::{
 fn index_page<G: Html>(cx: Scope) -> View<G> {
     let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
 
+    let table_classes = create_ref(cx, "w-full".to_string());
+
     let table_transactions_24hours: PaginatedTableStateRx<TransactionsAggregated, _, _> =
         PaginatedTableStateRx {
             record_label: "companies".to_owned(),
             route: get_aggregated_transactions,
-            filter: Some("24".to_owned()),
+            filter: Some("72".to_string()),
+            table_class: table_classes,
+        };
+
+    let table_transactions_month: PaginatedTableStateRx<TransactionsAggregated, _, _> =
+        PaginatedTableStateRx {
+            record_label: "companies".to_owned(),
+            route: get_aggregated_transactions,
+            filter: Some((24 * 30).to_string()),
+            table_class: table_classes,
         };
 
     view! {cx,
@@ -31,14 +41,18 @@ fn index_page<G: Html>(cx: Scope) -> View<G> {
             TheHeader()
                 MainContentContainer(useless_prop=1) {
                     div(class="flex flex-wrap gap-4 justify-around") {
-                        div () {
+                        div (class="flex-grow") {
                             h1 (class="mb-1 text-center") {
-                                    "Companies with transactions published"
-                                    br () {}
-                                    "in the last 24 hours"
+                                "Latest insider activity (72h)"
                             }
                             PaginatedTable(table_transactions_24hours)
                         }
+                        div (class="flex-grow") {
+                            h1 (class="mb-1 text-center") {
+                                    "Most activity in the past month"
+                            }
+                            PaginatedTable(table_transactions_month)
+                        }
                     }
                 }
         }

client/src/templates/transactions.rs

@@ -45,6 +45,7 @@ fn transactions_page<G: Html>(cx: Scope, state: &TransactionsPageStateRx) -> Vie
             record_label: "transactions".to_owned(),
             route: get_transactions,
             filter: (*state.company_slug.get()).clone(),
+            table_class: create_ref(cx, "".to_string()),
         };
 
     let async_select_prop: AsyncSelectRx<Company> = AsyncSelectRx {

client/static/tailwind.css

@@ -584,6 +584,10 @@ video {
   display: table;
 }
 
+.grid {
+  display: grid;
+}
+
 .contents {
   display: contents;
 }
@@ -612,10 +616,36 @@ video {
   width: 80%;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
+.w-60 {
+  width: 15rem;
+}
+
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
+
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.w-5\/12 {
+  width: 41.666667%;
+}
+
 .flex-none {
   flex: none;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .grow {
   flex-grow: 1;
 }
@@ -632,6 +662,22 @@ video {
   cursor: pointer;
 }
 
+.auto-cols-max {
+  grid-auto-columns: max-content;
+}
+
+.grid-flow-row {
+  grid-auto-flow: row;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
+.auto-rows-max {
+  grid-auto-rows: max-content;
+}
+
 .flex-row {
   flex-direction: row;
 }