fixes to the company dashboard template (#81)

Co-authored-by: pourhakimi <[email protected]>

Author: LineIndent

company_dashboard/.gitignore

@@ -0,0 +1,6 @@
+*.db
+*.py[cod]
+.states
+assets/external/
+.web
+__pycache__/

company_dashboard/company_dashboard/company_dashboard.py

@@ -24,9 +24,9 @@ def index() -> rx.Component:
                 documents_table_section(),
                 class_name="p-6 space-y-6",
             ),
-            class_name="ml-64 w-full h-[100vh] overflow-y-auto",
+            class_name="w-full h-[100vh] overflow-y-auto",
         ),
-        class_name="flex bg-gray-50 h-[100vh] w-full overflow-hidden",
+        class_name="flex flex-row bg-gray-50 h-[100vh] w-full overflow-hidden",
         on_mount=DashboardState.load_initial_data,
     )
 

company_dashboard/company_dashboard/components/documents_table.py

@@ -68,7 +68,7 @@ def documents_table_section() -> rx.Component:
                 document_tab_button("Past Performance", 3),
                 document_tab_button("Key Personnel", 2),
                 document_tab_button("Focus Documents"),
-                class_name="flex items-center space-x-2 border-b border-gray-200 pb-2 mb-4",
+                class_name="flex flex-row flex-wrap items-center gap-2 justify-start pb-2",
             ),
             rx.el.div(
                 rx.el.button(
@@ -93,7 +93,7 @@ def documents_table_section() -> rx.Component:
                 ),
                 class_name="flex items-center space-x-3",
             ),
-            class_name="flex items-center justify-between mb-4",
+            class_name="flex flex-wrap items-center justify-between mb-4",
         ),
         rx.el.div(
             rx.el.table(
@@ -158,7 +158,7 @@ def documents_table_section() -> rx.Component:
                 ),
                 class_name="min-w-full divide-y divide-gray-200",
             ),
-            class_name="overflow-hidden border border-gray-200 rounded-lg shadow-sm",
+            class_name="overflow-x-auto border border-gray-200 rounded-lg shadow-sm",
         ),
         class_name="p-5 bg-white border border-gray-200 rounded-lg shadow-sm mt-5",
     )

company_dashboard/company_dashboard/components/sidebar.py

@@ -63,5 +63,5 @@ def sidebar() -> rx.Component:
                 class_name="space-y-1",
             ),
         ),
-        class_name="flex flex-col justify-between w-64 h-screen px-2 bg-white border-r border-gray-200 fixed",
+        class_name="max-md:hidden flex flex-col justify-between w-[280px] h-screen px-2 bg-white border-r border-gray-200 sticky",
     )

company_dashboard/company_dashboard/components/visitors_chart.py

@@ -39,7 +39,7 @@ def visitors_chart_section() -> rx.Component:
                 time_range_button("Last 7 days"),
                 class_name="flex items-center space-x-2",
             ),
-            class_name="flex items-center justify-between mb-4",
+            class_name="flex flex-wrap items-center justify-between mb-4 gap-y-2",
         ),
         rx.recharts.area_chart(
             rx.recharts.cartesian_grid(
@@ -133,10 +133,10 @@ def visitors_chart_section() -> rx.Component:
                     y2="1",
                 ),
             ),
-            data=DashboardState.visitor_data,
-            height=300,
+            data=DashboardState.displayed_visitor_data,
+            height=360,
             margin={
-                "top": 10,
+                "top": 25,
                 "right": 0,
                 "left": 0,
                 "bottom": 0,

company_dashboard/company_dashboard/states/dashboard_state.py

@@ -38,6 +38,7 @@ class DashboardState(rx.State):
 
     key_metrics: List[Metric] = []
     visitor_data: List[VisitorDataPoint] = []
+    displayed_visitor_data: List[VisitorDataPoint] = []
     document_data: List[DocumentRow] = []
     selected_visitor_timeframe: str = "Last 3 months"
     selected_document_tab: str = "Outline"
@@ -102,6 +103,7 @@ def _generate_fake_data(self):
                     "series2": fake.random_int(min=50, max=300),
                 }
             )
+        self.displayed_visitor_data = self.visitor_data
         self.visitor_data.reverse()
         statuses = ["Done", "In Process", "Pending"]
         section_types = [
@@ -180,6 +182,15 @@ def load_initial_data(self):
     def set_visitor_timeframe(self, timeframe: str):
         self.selected_visitor_timeframe = timeframe
 
+        if timeframe == "Last 3 months":
+            self.displayed_visitor_data = self.visitor_data
+
+        if timeframe == "Last 30 days":
+            self.displayed_visitor_data = self.visitor_data[-30:]
+
+        if timeframe == "Last 7 days":
+            self.displayed_visitor_data = self.visitor_data[-7:]
+
     @rx.event
     def set_document_tab(self, tab: str):
         self.selected_document_tab = tab