refactor: replace month dropdown with week dropdown and update related components

feat: add feedback functionality and modal for category feedback
style: add feedback button styles in CSS
docs: add explanation tab for dashboard usage instructions

src/components/data_table.py

@@ -1,45 +1,123 @@
 import pandas as pd
-from dash import Dash, dcc, html, dash_table
-from dash.dependencies import Input, Output
+from dash import Dash, dcc, html, dash_table, Input, Output, State, callback_context
+from datetime import datetime
+import os
+import dash_bootstrap_components as dbc
 
 from ..data.loader import DataSchema
 from . import ids
 
-
 def render(app: Dash, data: pd.DataFrame) -> html.Div:
     @app.callback(
         Output(ids.DATA_TABLE, "children"),
         [
             Input(ids.YEAR_DROPDOWN, "value"),
-            Input(ids.MONTH_DROPDOWN, "value"),
+            Input(ids.WEEK_DROPDOWN, "value"),
             Input(ids.CATEGORY_DROPDOWN, "value"),
         ],
     )
     def update_data_table(
-        years: list[str], months: list[str], categories: list[str]
+        years: list[str], weeks: list[str], categories: list[str]
     ) -> html.Div:
         filtered_data = data.query(
-            "year in @years and month in @months and category in @categories"
+            "year in @years and week in @weeks and category in @categories"
         )
 
         if filtered_data.shape[0] == 0:
             return html.Div("No data selected.")
 
-        def create_pivot_table() -> pd.DataFrame:
-            pt = filtered_data.pivot_table(
-                values=DataSchema.AMOUNT,
-                index=[DataSchema.CATEGORY],
-                aggfunc="sum",
-                fill_value=0,
-                dropna=False,
-            )
-            return pt.reset_index().sort_values(DataSchema.AMOUNT, ascending=False)
+        pt = filtered_data.pivot_table(
+            values=DataSchema.AMOUNT,
+            index=[DataSchema.CATEGORY],
+            aggfunc="sum",
+            fill_value=0,
+            dropna=False,
+        ).reset_index().sort_values(DataSchema.AMOUNT, ascending=False)
 
-        pt = create_pivot_table()
+        columns = [{"name": i.capitalize(), "id": i} for i in pt.columns]
 
         return dash_table.DataTable(
+            id=ids.CATEGORY_TABLE,
             data=pt.to_dict("records"),
-            columns=[{"name": i, "id": i} for i in pt.columns],
+            columns=columns,
+            row_selectable='single',
+            selected_rows=[]
         )
 
-    return html.Div(id=ids.DATA_TABLE)
+    @app.callback(
+        Output(ids.FEEDBACK_MODAL, "is_open"),
+        Output(ids.FEEDBACK_MESSAGE, "children"),
+        Input(ids.CATEGORY_TABLE, "selected_rows"),
+        Input(ids.SAVE_FEEDBACK_BUTTON_POPUP, "n_clicks"),
+        Input(ids.CLOSE_FEEDBACK_BUTTON_POPUP, "n_clicks"),
+        State(ids.FEEDBACK_MODAL, "is_open"),
+        State(ids.CATEGORY_TABLE, "data"),
+        State(ids.FEEDBACK_INPUT, "value"),
+    )
+    def handle_feedback_modal(selected_rows, save_clicks, close_clicks, is_open, data, comment):
+        ctx = callback_context
+        if not ctx.triggered:
+            return False, ""
+
+        triggered_id = ctx.triggered[0]['prop_id'].split('.')[0]
+        
+        if triggered_id == ids.CATEGORY_TABLE and selected_rows:
+            return True, ""
+
+        if triggered_id == ids.SAVE_FEEDBACK_BUTTON_POPUP and selected_rows:
+            selected_row_data = data[selected_rows[0]]
+            category = selected_row_data[DataSchema.CATEGORY]
+            timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+            if not comment:
+                comment = ""
+            feedback_data = f'{timestamp},{category},"{comment}"\n'
+            file_path = "data/feedback.csv"
+            try:
+                is_new_file = not os.path.exists(file_path) or os.path.getsize(file_path) == 0
+                with open(file_path, "a") as f:
+                    if is_new_file:
+                        f.write("timestamp,category,comment\n")
+                    f.write(feedback_data)
+                message = f"Feedback for category '{category}' has been saved successfully at {timestamp}."
+                return False, message
+            except Exception as e:
+                return True, "An error occurred while saving feedback."
+
+        if triggered_id == ids.CLOSE_FEEDBACK_BUTTON_POPUP:
+            return False, ""
+
+        return is_open, ""
+
+    @app.callback(
+        Output("feedback-category-label", "children"),
+        Input(ids.CATEGORY_TABLE, "selected_rows"),
+        State(ids.CATEGORY_TABLE, "data"),
+        prevent_initial_call=True
+    )
+    def update_feedback_category_label(selected_rows, data):
+        if selected_rows:
+            category = data[selected_rows[0]][DataSchema.CATEGORY]
+            return f"Category: {category}"
+        return "Category: "
+
+    modal = dbc.Modal(
+        [
+            dbc.ModalHeader(dbc.ModalTitle("Submit Feedback")),
+            dbc.ModalBody([
+                html.H6("Category: ", id="feedback-category-label"),
+                dcc.Input(id=ids.FEEDBACK_INPUT, type='text', placeholder='Enter feedback...', style={'width': '100%'}),
+            ]),
+            dbc.ModalFooter([
+                dbc.Button("Save", id=ids.SAVE_FEEDBACK_BUTTON_POPUP, className="ms-auto", n_clicks=0),
+                dbc.Button("Close", id=ids.CLOSE_FEEDBACK_BUTTON_POPUP, className="ms-auto", n_clicks=0)
+            ]),
+        ],
+        id=ids.FEEDBACK_MODAL,
+        is_open=False,
+    )
+
+    return html.Div([
+        html.Div(id=ids.DATA_TABLE),
+        html.Div(id=ids.FEEDBACK_MESSAGE),
+        modal
+    ])