From c5f6b2fd60da5f1fe908454f75c6718f3d925de1 Mon Sep 17 00:00:00 2001
From: Trey <73353716+TreyWW@users.noreply.github.com>
Date: Sun, 29 Sep 2024 16:16:41 +0100
Subject: [PATCH] Feature/draft invoices (#503)

* removed backend sorting+filtering, added frontend js class that handles tables

* added docs, removed dashboard page test table, added draft statuses

Signed-off-by: Trey <73353716+TreyWW@users.noreply.github.com>
---
 assets/scripts/init.js                        |   1 -
 assets/scripts/tableify.js                    | 228 ++++++++++++++++++
 backend/api/invoices/edit.py                  |  16 +-
 backend/api/invoices/fetch.py                 |  45 +---
 backend/api/invoices/recurring/fetch.py       |  27 +--
 backend/api/public/endpoints/Invoices/edit.py |  16 +-
 backend/api/public/endpoints/Invoices/list.py |  97 +++-----
 ...e_invoice_payment_status_invoice_status.py |  24 ++
 backend/models.py                             |  15 +-
 backend/service/invoices/common/fetch.py      |  85 +------
 .../service/invoices/single/create/create.py  |   2 -
 .../views/core/invoices/recurring/overview.py |   2 +-
 backend/webhooks/invoices/invoice_status.py   |  51 ++++
 docs/js/extra.js                              |   6 +
 docs/overrides/main.html                      |   6 +-
 docs/user-guide/invoices/index.md             |  49 ++++
 frontend/templates/base/_head.html            |   1 +
 .../templates/pages/emails/dashboard.html     |   2 -
 .../dashboard/+payment_status_badge.html      |   4 +-
 .../pages/invoices/dashboard/_fetch_body.html |  81 ++-----
 .../pages/invoices/dashboard/manage.html      |  16 +-
 .../recurring/dashboard/_fetch_body.html      |  88 +------
 .../recurring/dashboard/dashboard.html        | 127 ++--------
 .../invoices/single/dashboard/dashboard.html  | 112 ++-------
 .../single/view/_banner/_invoice_status.html  |   2 +-
 mkdocs.yml                                    |  15 +-
 webpack.common.js                             |   4 +
 27 files changed, 525 insertions(+), 597 deletions(-)
 create mode 100644 assets/scripts/tableify.js
 create mode 100644 backend/migrations/0064_remove_invoice_payment_status_invoice_status.py
 create mode 100644 backend/webhooks/invoices/invoice_status.py
 create mode 100644 docs/js/extra.js
 create mode 100644 docs/user-guide/invoices/index.md

diff --git a/assets/scripts/init.js b/assets/scripts/init.js
index d6464df46..afc049231 100644
--- a/assets/scripts/init.js
+++ b/assets/scripts/init.js
@@ -1,7 +1,6 @@
 import Alpine from 'alpinejs'
 import $ from 'jquery'
 
-
 window.Alpine = Alpine
 
 Alpine.start()
diff --git a/assets/scripts/tableify.js b/assets/scripts/tableify.js
new file mode 100644
index 000000000..559988b32
--- /dev/null
+++ b/assets/scripts/tableify.js
@@ -0,0 +1,228 @@
+window.Tableify = class Tableify {
+  constructor(selector) {
+    this.table = $(selector);
+    this.filters = {};
+    this.currentSort = null;
+    this.sortDirection = 0; // 0 for no sort, 1 for ascending, -1 for descending
+
+    this.initialize();
+  }
+
+  initialize() {
+    this.table.find("thead th").each((index, th) => {
+      const colName = $(th).attr("mft-col-name");
+      const colFilters = $(th).attr("mft-filters");
+      const filterType = $(th).attr("mft-filter-type");
+
+      // Add filter icon if filters are defined
+      if (colFilters || filterType === "searchable" || filterType === "searchable-amount" || filterType === "normal") {
+        const filterIcon = $('<i class="fa fa-filter ml-2 cursor-pointer"></i>');
+        const countBadge = $('<span class="filter-count hidden ml-1 badge badge-primary"></span>');
+        $(th).append(filterIcon).append(countBadge);
+
+        $(th).addClass('cursor-pointer').on("click", () => {
+          this.toggleFilter(th, colName);
+        });
+      }
+    });
+
+    // Initialize sorting buttons
+    $('[mft-sort-by]').each((index, button) => {
+      $(button).on("click", (e) => {
+        e.preventDefault();
+        const colName = $(button).attr("mft-sort-by");
+        this.handleSortButtonClick(colName);
+      });
+    });
+  }
+
+  handleSortButtonClick(colName, parentId) {
+    // Determine the new sort direction
+    let newSortDirection;
+
+    if (this.currentSort === colName) {
+      // If the same column is clicked again, toggle the direction
+      newSortDirection = this.sortDirection === 1 ? -1 : (this.sortDirection === -1 ? 0 : 1);
+    } else {
+      // New column is clicked, set to ascending
+      newSortDirection = 1;
+    }
+
+    // Update the current sort column and direction
+    this.currentSort = newSortDirection === 0 ? null : colName;
+    this.sortDirection = newSortDirection;
+
+    this.redraw(); // Redraw the table with updated sorting
+  }
+
+  redraw() {
+    const rows = this.table.find("tbody tr");
+    rows.show(); // Show all rows initially
+
+    if (Object.keys(this.filters).length > 0) {
+      rows.each((index, row) => {
+        const isVisible = Object.keys(this.filters).every((colName) => {
+          const filterType = this.table.find(`th[mft-col-name="${colName}"]`).attr("mft-filter-type") || "normal";
+
+          // Get the index of the column
+          const colIndex = this.table.find(`th[mft-col-name="${colName}"]`).index();
+          const cell = $(row).find(`td:eq(${colIndex})`);
+
+          // Get the value to check against the filter
+          const cellText = cell.text();
+          const cellValue = cell.attr("td-value") || cellText; // Use td-value if available
+          const parsedValue = parseFloat(cellValue);
+
+          // Perform filtering logic based on filter type
+          if (filterType === "amount") {
+            const maxFilter = Math.max(...this.filters[colName].map(f => parseFloat(f)));
+            return parsedValue >= maxFilter;
+          } else if (filterType === "searchable") {
+            return cellText.toLowerCase().includes(this.filters[colName][0].toLowerCase());
+          } else if (filterType === "searchable-amount") {
+            const inputValue = this.filters[colName][0];
+
+            // Handle both exact match and greater than
+            if (inputValue.endsWith('+')) {
+              const numericValue = parseFloat(inputValue.slice(0, -1)); // Remove '+' and parse
+              return parsedValue >= numericValue; // Include equal and greater
+            } else {
+              const numericValue = parseFloat(inputValue); // Exact number
+              return parsedValue === numericValue; // Exact match
+            }
+          } else {
+            return this.filters[colName].some(filterValue => cellValue.includes(filterValue));
+          }
+        });
+
+        if (!isVisible) {
+          $(row).hide();
+        }
+      });
+    }
+
+    // Handle sorting if a column is selected for sorting
+    if (this.currentSort) {
+      const sortedRows = rows.toArray().sort((a, b) => {
+        const valA = $(a).find(`td:eq(${this.table.find(`th[mft-col-name="${this.currentSort}"]`).index()})`).text();
+        const valB = $(b).find(`td:eq(${this.table.find(`th[mft-col-name="${this.currentSort}"]`).index()})`).text();
+
+        const isAmount = this.table.find(`th[mft-col-name="${this.currentSort}"]`).attr("mft-filter-type") === "amount";
+
+        if (isAmount) {
+          return (parseFloat(valA) - parseFloat(valB)) * this.sortDirection;
+        } else {
+          return (valA < valB ? -1 : (valA > valB ? 1 : 0)) * this.sortDirection;
+        }
+      });
+
+      this.table.find("tbody").html(sortedRows);
+    }
+
+    this.updateFilterCounts();
+  }
+
+  toggleFilter(element, colName) {
+    const colFilters = $(element).attr("mft-filters");
+    const filterType = $(element).attr("mft-filter-type");
+
+    // Do nothing if there are no filters or search options defined
+    if (!colFilters && (filterType !== "searchable" && filterType !== "searchable-amount" && filterType !== "normal")) {
+      return;
+    }
+
+    let dropdown = $(element).find('.filter-dropdown');
+    if (dropdown.length === 0) {
+      dropdown = $('<div class="filter-dropdown absolute bg-base-300 shadow-md rounded-md p-2 mt-1 hidden z-50"></div>');
+
+      // Handle different filter types
+      if (filterType === "normal" && colFilters) {
+        const filters = colFilters.split(",");
+        filters.forEach((filter) => {
+          const checkbox = $(`<label class="flex items-center">
+                              <input type="checkbox" value="${filter}" class="mr-2" />
+                              ${filter}
+                            </label>`);
+          checkbox.on("change", (e) => {
+            e.stopPropagation(); // Prevent closing on checkbox interaction
+            this.updateFilter(colName, filter, checkbox.find('input').is(":checked"));
+          });
+          dropdown.append(checkbox);
+        });
+      } else if (filterType === "searchable") {
+        // Create search input for searchable columns
+        const searchInput = $(`<input type="text" class="input input-bordered w-full input-sm" placeholder="Search..." />`);
+        searchInput.on("input", (e) => {
+          e.stopPropagation(); // Prevent closing on typing
+          const searchValue = searchInput.val();
+          if (searchValue) {
+            this.filters[colName] = [searchValue];
+          } else {
+            delete this.filters[colName];
+          }
+          this.redraw();
+        });
+        dropdown.append(searchInput);
+      } else if (filterType === "searchable-amount") {
+        // Create numeric input for searchable-amount columns
+        const amountInput = $(`<input type="text" class="input input-bordered w-full input-sm" placeholder="Enter amount or amount+ for greater..." />`);
+        amountInput.on("input", (e) => {
+          e.stopPropagation(); // Prevent closing on typing
+          const amountValue = amountInput.val();
+
+          if (amountValue) {
+            this.filters[colName] = [amountValue]; // Store as is
+          } else {
+            delete this.filters[colName]; // Remove if empty
+          }
+
+          this.redraw();
+        });
+        dropdown.append(amountInput);
+      }
+
+      $(element).append(dropdown); // Append the new dropdown to the column header
+
+      // Prevent dropdown from closing when clicking inside
+      dropdown.on("click", (e) => {
+        e.stopPropagation(); // Prevent propagation of clicks within the dropdown
+      });
+    }
+
+    // Toggle dropdown visibility
+    dropdown.toggleClass('hidden');
+
+    // Close dropdown when clicking outside
+    const handleClickOutside = (e) => {
+      if (!$(e.target).closest(dropdown).length && !$(e.target).closest(element).length) {
+        dropdown.addClass('hidden');
+        $(document).off('click', handleClickOutside); // Remove event listener when dropdown is closed
+      }
+    };
+
+    $(document).on('click', handleClickOutside); // Attach event listener to close dropdown when clicking outside
+  }
+
+  updateFilter(colName, value, checked) {
+    if (!this.filters[colName]) this.filters[colName] = [];
+
+    if (checked) {
+      if (!this.filters[colName].includes(value)) {
+        this.filters[colName].push(value);
+      }
+    } else {
+      this.filters[colName] = this.filters[colName].filter((val) => val !== value);
+      if (this.filters[colName].length === 0) delete this.filters[colName];
+    }
+
+    this.redraw();
+  }
+
+  updateFilterCounts() {
+    this.table.find("thead th").each((index, th) => {
+      const colName = $(th).attr("mft-col-name");
+      const count = this.filters[colName] ? this.filters[colName].length : 0;
+      $(th).find('.filter-count').text(count).toggleClass('hidden', count === 0);
+    });
+  }
+}
diff --git a/backend/api/invoices/edit.py b/backend/api/invoices/edit.py
index f6cef5256..83aca9226 100644
--- a/backend/api/invoices/edit.py
+++ b/backend/api/invoices/edit.py
@@ -89,23 +89,15 @@ def change_status(request: HtmxHttpRequest, invoice_id: int, status: str) -> Htt
     if request.user.logged_in_as_team and request.user.logged_in_as_team != invoice.organization or request.user != invoice.user:
         return return_message(request, "You don't have permission to make changes to this invoice.")
 
-    if status not in ["paid", "overdue", "pending"]:
-        return return_message(request, "Invalid status. Please choose from: pending, paid, overdue")
+    if status not in ["paid", "draft", "pending"]:
+        return return_message(request, "Invalid status. Please choose from: pending, paid, draft")
 
-    if invoice.payment_status == status:
+    if invoice.status == status:
         return return_message(request, f"Invoice status is already {status}")
 
-    invoice.payment_status = status
+    invoice.status = status
     invoice.save()
 
-    dps = invoice.dynamic_payment_status
-    if (status == "overdue" and dps == "pending") or (status == "pending" and dps == "overdue"):
-        message = f"""
-            The invoice status was automatically changed from <strong>{status}</strong> to <strong>{dps}</strong>
-            as the invoice dates override the manual status.
-        """
-        return return_message(request, message, success=False)
-
     send_message(request, f"Invoice status been changed to <strong>{status}</strong>", success=True)
 
     return render(request, "pages/invoices/dashboard/_modify_payment_status.html", {"status": status, "invoice_id": invoice_id})
diff --git a/backend/api/invoices/fetch.py b/backend/api/invoices/fetch.py
index 6e6e149cb..e15b56537 100644
--- a/backend/api/invoices/fetch.py
+++ b/backend/api/invoices/fetch.py
@@ -1,7 +1,4 @@
-from django.db.models import When, CharField, F
-from django.db.models.expressions import Case, Value
 from django.shortcuts import render, redirect
-from django.utils import timezone
 from django.views.decorators.http import require_http_methods
 
 from backend.decorators import web_require_scopes
@@ -23,44 +20,12 @@ def fetch_all_invoices(request: HtmxHttpRequest):
         invoices = Invoice.objects.filter(user=request.user)
 
     # Get filter and sort parameters from the request
-    sort_by = request.GET.get("sort")
-    sort_direction = request.GET.get("sort_direction", "")
-    action_filter_type = request.GET.get("filter_type")
-    action_filter_by = request.GET.get("filter")
+    # sort_by = request.GET.get("sort")
+    # sort_direction = request.GET.get("sort_direction", "")
+    # action_filter_type = request.GET.get("filter_type")
+    # action_filter_by = request.GET.get("filter")
 
-    # Define previous filters as a dictionary
-    previous_filters = {
-        "payment_status": {
-            "paid": True if request.GET.get("payment_status_paid") else False,
-            "pending": True if request.GET.get("payment_status_pending") else False,
-            "overdue": True if request.GET.get("payment_status_overdue") else False,
-        },
-        "amount": {
-            "20+": True if request.GET.get("amount_20+") else False,
-            "50+": True if request.GET.get("amount_50+") else False,
-            "100+": True if request.GET.get("amount_100+") else False,
-        },
-    }
-
-    context, invoices = get_context(invoices, sort_by, previous_filters, sort_direction, action_filter_type, action_filter_by)
-
-    # check/update payment status to make sure it is correct before invoices are filtered and displayed
-    invoices.update(
-        payment_status=Case(
-            When(
-                date_due__lt=timezone.now().date(),
-                payment_status="pending",
-                then=Value("overdue"),
-            ),
-            When(
-                date_due__gt=timezone.now().date(),
-                payment_status="overdue",
-                then=Value("pending"),
-            ),
-            default=F("payment_status"),
-            output_field=CharField(),
-        )
-    )
+    context, invoices = get_context(invoices)
 
     # Render the HTMX response
     return render(request, "pages/invoices/dashboard/_fetch_body.html", context)
diff --git a/backend/api/invoices/recurring/fetch.py b/backend/api/invoices/recurring/fetch.py
index 35445bba5..8ad43e3f3 100644
--- a/backend/api/invoices/recurring/fetch.py
+++ b/backend/api/invoices/recurring/fetch.py
@@ -18,29 +18,12 @@ def fetch_all_recurring_invoices_endpoint(request: WebRequest):
     invoices = InvoiceRecurringProfile.filter_by_owner(owner=request.actor).filter(active=True)
 
     # Get filter and sort parameters from the request
-    sort_by = request.GET.get("sort")
-    sort_direction = request.GET.get("sort_direction", "")
-    action_filter_type = request.GET.get("filter_type")
-    action_filter_by = request.GET.get("filter")
+    # sort_by = request.GET.get("sort")
+    # sort_direction = request.GET.get("sort_direction", "")
+    # action_filter_type = request.GET.get("filter_type")
+    # action_filter_by = request.GET.get("filter")
 
-    # Define previous filters as a dictionary
-    previous_filters = {
-        "status": {
-            "ongoing": True if request.GET.get("status_ongoing") else False,
-            "paused": True if request.GET.get("status_paused") else False,
-            "cancelled": True if request.GET.get("status_cancelled") else False,
-        }
-    }
-
-    context, _ = get_context(invoices, sort_by, previous_filters, sort_direction, action_filter_type, action_filter_by)
-
-    previous_amount_filter = request.GET.get("amount_filter")
-
-    amount_filter = previous_amount_filter if previous_amount_filter else action_filter_by if action_filter_type == "amount" else None
-
-    if amount_filter:
-        context["invoices"] = context["invoices"].filter(amount__gte=amount_filter)
-        context["amount_filter"] = amount_filter
+    context, _ = get_context(invoices)
 
     paginator = Paginator(context["invoices"], 8)
 
diff --git a/backend/api/public/endpoints/Invoices/edit.py b/backend/api/public/endpoints/Invoices/edit.py
index 42abcf0c7..0772b4ebd 100644
--- a/backend/api/public/endpoints/Invoices/edit.py
+++ b/backend/api/public/endpoints/Invoices/edit.py
@@ -82,23 +82,15 @@ def change_status_endpoint(request, invoice_id: int, invoice_status: str):
     if request.user.logged_in_as_team and request.user.logged_in_as_team != invoice.organization or request.user != invoice.user:
         return Response({"error": "You do not have permission to edit this invoice"}, status=status.HTTP_403_FORBIDDEN)
 
-    if invoice_status not in ["paid", "overdue", "pending"]:
-        return Response({"error": "Invalid status. Please choose from: pending, paid, overdue"}, status=status.HTTP_400_BAD_REQUEST)
+    if invoice_status not in ["paid", "draft", "pending"]:
+        return Response({"error": "Invalid status. Please choose from: pending, paid, draft"}, status=status.HTTP_400_BAD_REQUEST)
 
-    if invoice.payment_status == invoice_status:
+    if invoice.status == invoice_status:
         return Response({"error": f"Invoice status is already {invoice_status}"}, status=status.HTTP_400_BAD_REQUEST)
 
-    invoice.payment_status = invoice_status
+    invoice.status = invoice_status
     invoice.save()
 
-    dps = invoice.dynamic_payment_status
-    if (invoice_status == "overdue" and dps == "pending") or (invoice_status == "pending" and dps == "overdue"):
-        message = f"""
-            The invoice status was automatically changed from <strong>{invoice_status}</strong> to <strong>{dps}</strong>
-            as the invoice dates override the manual status.
-        """
-        return Response({"error": message}, status=status.HTTP_400_BAD_REQUEST)
-
     return Response({"message": f"Invoice status been changed to <strong>{invoice_status}</strong>"}, status=status.HTTP_200_OK)
 
 
diff --git a/backend/api/public/endpoints/Invoices/list.py b/backend/api/public/endpoints/Invoices/list.py
index dabc7f33d..76b5fbca5 100644
--- a/backend/api/public/endpoints/Invoices/list.py
+++ b/backend/api/public/endpoints/Invoices/list.py
@@ -21,33 +21,33 @@
     operation_id="list_invoices",
     manual_parameters=[
         TEAM_PARAMETER,
-        openapi.Parameter(
-            "sort",
-            openapi.IN_QUERY,
-            description="Field you want to order by to. Sort options: 'date_due', 'id', 'payment_status'. Default by 'id'.",
-            type=openapi.TYPE_STRING,
-        ),
-        openapi.Parameter(
-            "sort_direction",
-            openapi.IN_QUERY,
-            description="Order by descending or ascending. 'False' for descending and 'True' for ascending. Default is ascending.",
-            type=openapi.TYPE_STRING,
-        ),
-        openapi.Parameter(
-            "filter_type",
-            openapi.IN_QUERY,
-            description="Select filter type by which results will be filtered. Filter types are 'payment_status' and "
-            "'amount'. By default there is no filter types applied.",
-            type=openapi.TYPE_STRING,
-        ),
-        openapi.Parameter(
-            "filter",
-            openapi.IN_QUERY,
-            description="Select filter by which results will be filtered. Filters for 'payment_status' are 'paid', "
-            "'pending', 'overdue' and for 'amount' are '20+', '50+', '100+'. By default there is no "
-            "filter applied.",
-            type=openapi.TYPE_STRING,
-        ),
+        # openapi.Parameter(
+        #     "sort",
+        #     openapi.IN_QUERY,
+        #     description="Field you want to order by to. Sort options: 'date_due', 'id', 'status'. Default by 'id'.",
+        #     type=openapi.TYPE_STRING,
+        # ),
+        # openapi.Parameter(
+        #     "sort_direction",
+        #     openapi.IN_QUERY,
+        #     description="Order by descending or ascending. 'False' for descending and 'True' for ascending. Default is ascending.",
+        #     type=openapi.TYPE_STRING,
+        # ),
+        # openapi.Parameter(
+        #     "filter_type",
+        #     openapi.IN_QUERY,
+        #     description="Select filter type by which results will be filtered. Filter types are 'status' and "
+        #                 "'amount'. By default there is no filter types applied.",
+        #     type=openapi.TYPE_STRING,
+        # ),
+        # openapi.Parameter(
+        #     "filter",
+        #     openapi.IN_QUERY,
+        #     description="Select filter by which results will be filtered. Filters for 'status' are 'paid', "
+        #                 "'pending', 'overdue', 'draft' and for 'amount' are '20+', '50+', '100+'. By default there is no "
+        #                 "filter applied.",
+        #     type=openapi.TYPE_STRING,
+        # ),
     ],
     responses={
         200: openapi.Response(
@@ -70,45 +70,14 @@ def list_invoices_endpoint(request: APIRequest) -> Response:
     else:
         invoices = Invoice.objects.filter(user=request.user)
 
-    sort_by = request.query_params.get("sort")
-    sort_direction = request.query_params.get("sort_direction", "")
-    action_filter_type = request.query_params.get("filter_type")
-    action_filter_by = request.query_params.get("filter")
+    # sort_by = request.query_params.get("sort")
+    # sort_direction = request.query_params.get("sort_direction", "")
+    # action_filter_type = request.query_params.get("filter_type")
+    # action_filter_by = request.query_params.get("filter")
 
-    previous_filters = {
-        "payment_status": {
-            "paid": False,
-            "pending": False,
-            "overdue": False,
-        },
-        "amount": {
-            "20+": False,
-            "50+": False,
-            "100+": False,
-        },
-    }
+    # todo: add back sort + filters on backend for API
 
-    _, invoices = get_context(
-        invoices, sort_by, previous_filters, sort_direction, action_filter_type, action_filter_by
-    )  # type: ignore[assignment]
-
-    # check/update payment status to make sure it is correct before invoices are filtered and displayed
-    invoices.update(
-        payment_status=Case(
-            When(
-                date_due__lt=timezone.now().date(),
-                payment_status="pending",
-                then=Value("overdue"),
-            ),
-            When(
-                date_due__gt=timezone.now().date(),
-                payment_status="overdue",
-                then=Value("pending"),
-            ),
-            default=F("payment_status"),
-            output_field=CharField(),
-        )
-    )
+    _, invoices = get_context(invoices)  # type: ignore[assignment]
 
     serializer = InvoiceSerializer(invoices, many=True)
 
diff --git a/backend/migrations/0064_remove_invoice_payment_status_invoice_status.py b/backend/migrations/0064_remove_invoice_payment_status_invoice_status.py
new file mode 100644
index 000000000..d0049a0ed
--- /dev/null
+++ b/backend/migrations/0064_remove_invoice_payment_status_invoice_status.py
@@ -0,0 +1,24 @@
+# Generated by Django 5.1 on 2024-09-28 19:36
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("backend", "0063_defaultvalues_email_template_recurring_invoices_invoice_cancelled_and_more"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="invoice",
+            name="payment_status",
+        ),
+        migrations.AddField(
+            model_name="invoice",
+            name="status",
+            field=models.CharField(
+                choices=[("draft", "Draft"), ("pending", "Pending"), ("paid", "Paid")], default="pending", max_length=10
+            ),
+        ),
+    ]
diff --git a/backend/models.py b/backend/models.py
index 60d7117fb..34240f06a 100644
--- a/backend/models.py
+++ b/backend/models.py
@@ -583,14 +583,15 @@ class Invoice(InvoiceBase):
     # objects = InvoiceManager()
 
     STATUS_CHOICES = (
+        ("draft", "Draft"),
+        # ("ready", "Ready"),
         ("pending", "Pending"),
         ("paid", "Paid"),
-        ("overdue", "Overdue"),
     )
 
     invoice_id = models.IntegerField(unique=True, blank=True, null=True)  # todo: add
     date_due = models.DateField()
-    payment_status = models.CharField(max_length=10, choices=STATUS_CHOICES, default="pending")
+    status = models.CharField(max_length=10, choices=STATUS_CHOICES, default="draft")
     invoice_recurring_profile = models.ForeignKey(
         "InvoiceRecurringProfile", related_name="generated_invoices", on_delete=models.SET_NULL, blank=True, null=True
     )
@@ -607,11 +608,15 @@ def __str__(self):
         return f"Invoice #{invoice_id} for {client}"
 
     @property
-    def dynamic_payment_status(self):
-        if self.date_due and timezone.now().date() > self.date_due and self.payment_status == "pending":
+    def dynamic_status(self):
+        if self.status == "pending" and self.is_overdue:
             return "overdue"
         else:
-            return self.payment_status
+            return self.status
+
+    @property
+    def is_overdue(self):
+        return self.date_due and timezone.now().date() > self.date_due
 
     @property
     def get_to_details(self) -> tuple[str, dict[str, str | None]] | tuple[str, Client]:
diff --git a/backend/service/invoices/common/fetch.py b/backend/service/invoices/common/fetch.py
index bad872b44..decbc7d6f 100644
--- a/backend/service/invoices/common/fetch.py
+++ b/backend/service/invoices/common/fetch.py
@@ -4,48 +4,11 @@
 from backend.models import Invoice, InvoiceItem
 
 
-def build_filter_condition(filter_type, filter_by):
-    if "+" in filter_by:
-        numeric_part = float(filter_by.split("+")[0])
-        return {f"{filter_type}__gte": numeric_part}
-    else:
-        return {f"{filter_type}": filter_by}
-
-
 def should_add_condition(was_previous_selection, has_just_been_selected):
     return (was_previous_selection and not has_just_been_selected) or (not was_previous_selection and has_just_been_selected)
 
 
-def filter_conditions(or_conditions, previous_filters, action_filter_by, action_filter_type, context):
-    for filter_type, filter_by_list in previous_filters.items():
-        or_conditions_filter = Q()  # Initialize OR conditions for each filter type
-        for filter_by, status in filter_by_list.items():
-            # Determine if the filter was selected in the previous request
-            was_previous_selection = bool(status)
-            # Determine if the filter is selected in the current request
-            has_just_been_selected = action_filter_by == filter_by and action_filter_type == filter_type
-
-            # Check if the filter status has changed
-            if should_add_condition(was_previous_selection, has_just_been_selected):
-                # Construct filter condition dynamically based on filter_type
-                filter_condition = build_filter_condition(filter_type, filter_by)
-                or_conditions_filter |= Q(**filter_condition)
-                context["selected_filters"].append(filter_by)
-
-        # Combine OR conditions for each filter type with AND
-        or_conditions &= or_conditions_filter
-
-    return or_conditions, context
-
-
-def get_context(
-    invoices: QuerySet,
-    sort_by: str | None,
-    previous_filters: dict,
-    sort_direction: str = "True",
-    action_filter_type: str | None = None,
-    action_filter_by: str | None = None,
-) -> tuple[dict, QuerySet[Invoice]]:
+def get_context(invoices: QuerySet) -> tuple[dict, QuerySet[Invoice]]:
     context: dict = {}
 
     invoices = (
@@ -74,42 +37,16 @@ def get_context(
         .distinct()  # just an extra precaution
     )
 
-    # Initialize context variables
-    context["selected_filters"] = []
-    context["all_filters"] = {item: [i for i, _ in dictio.items()] for item, dictio in previous_filters.items()}
-
-    # Initialize OR conditions for filters using Q objects
-    or_conditions = Q()
-
-    if action_filter_by or action_filter_type:
-        or_conditions, context = filter_conditions(or_conditions, previous_filters, action_filter_by, action_filter_type, context)
-
-    invoices = invoices.filter(or_conditions)
-
-    if action_filter_type == "id":
-        invoices = invoices.filter(id=action_filter_by)
-    elif action_filter_type == "recurring_profile_id":
-        invoices = invoices.filter(invoice_recurring_profile=action_filter_by)
-
-    # Validate and sanitize the sort_by parameter
-    all_sort_options = ["end_date", "id", "status"]
-    context["all_sort_options"] = all_sort_options
-
-    # Apply sorting to the invoices queryset
-    if sort_by not in all_sort_options:
-        context["sort"] = "id"
-    elif sort_by in all_sort_options:
-        # True is for reverse order
-        # first time set direction is none
-        if sort_direction is not None and sort_direction.lower() == "true" or sort_direction == "":
-            context["sort"] = f"-{sort_by}"
-            context["sort_direction"] = False
-            invoices = invoices.order_by(f"-{sort_by}")
-        else:
-            # sort_direction is False
-            context["sort"] = sort_by
-            context["sort_direction"] = True
-            invoices = invoices.order_by(sort_by)
+    if invoices.model is Invoice:
+        invoices = invoices.annotate(
+            filterable_dynamic_status=Case(
+                When(status="draft", then=Value("draft")),
+                When(status="pending", date_due__gt=timezone.now(), then=Value("pending")),
+                When(status="pending", date_due__lt=timezone.now(), then=Value("overdue")),
+                When(status="paid", then=Value("paid")),
+                output_field=CharField(),
+            )
+        )
 
     context["invoices"] = invoices
 
diff --git a/backend/service/invoices/single/create/create.py b/backend/service/invoices/single/create/create.py
index 1b5c03697..617be9980 100644
--- a/backend/service/invoices/single/create/create.py
+++ b/backend/service/invoices/single/create/create.py
@@ -86,8 +86,6 @@ def save_invoice(request: WebRequest, invoice_items):
 
     save_invoice_common(request, invoice_items, invoice)
 
-    invoice.payment_status = invoice.dynamic_payment_status
-
     try:
         invoice.full_clean()
     except ValidationError as validation_errors:
diff --git a/backend/views/core/invoices/recurring/overview.py b/backend/views/core/invoices/recurring/overview.py
index f0b5a2b01..54fa1eef3 100644
--- a/backend/views/core/invoices/recurring/overview.py
+++ b/backend/views/core/invoices/recurring/overview.py
@@ -36,7 +36,7 @@ def manage_recurring_invoice_profile_endpoint(request: WebRequest, invoice_profi
     context["total_paid"] = 0
 
     for invoice in invoice_profile.generated_invoices.all():
-        if invoice.payment_status == "paid":
+        if invoice.status == "paid":
             context["total_paid"] += 1
         context["total_amt"] += invoice.get_total_price()
 
diff --git a/backend/webhooks/invoices/invoice_status.py b/backend/webhooks/invoices/invoice_status.py
new file mode 100644
index 000000000..63da8ad19
--- /dev/null
+++ b/backend/webhooks/invoices/invoice_status.py
@@ -0,0 +1,51 @@
+from datetime import datetime, timedelta
+
+from django.http import JsonResponse
+from django.views.decorators.csrf import csrf_exempt
+from django.views.decorators.http import require_POST
+from login_required import login_not_required
+
+from backend.models import InvoiceRecurringProfile, Invoice, DefaultValues, AuditLog
+from backend.service.invoices.recurring.generation.next_invoice import safe_generate_next_invoice_service
+from backend.service.invoices.recurring.webhooks.webhook_apikey_auth import authenticate_api_key
+
+import logging
+
+from backend.types.requests import WebRequest
+from settings.settings import AWS_TAGS_APP_NAME
+
+logger = logging.getLogger(__name__)
+
+
+@require_POST
+@csrf_exempt
+@login_not_required
+def handle_invoice_now_webhook_endpoint(request: WebRequest):
+
+    invoice_profile_id = request.POST.get("invoice_profile_id", "")
+
+    logger.info("Received Scheduled Invoice. Now authenticating...")
+    api_auth_response = authenticate_api_key(request)
+
+    if api_auth_response.failed:
+        logger.info(f"Webhook auth failed: {api_auth_response.error}")
+        return JsonResponse({"message": api_auth_response.error, "success": False}, status=api_auth_response.status_code or 400)
+
+    try:
+        invoice_recurring_profile: InvoiceRecurringProfile = InvoiceRecurringProfile.objects.get(pk=invoice_profile_id, active=True)
+    except InvoiceRecurringProfile.DoesNotExist:
+        logger.error(f"Invoice recurring profile was not found (#{invoice_profile_id}). ERROR!")
+        return JsonResponse({"message": "Invoice recurring profile not found", "success": False}, status=404)
+
+    logger.info("Invoice recurring profile found. Now processing...")
+
+    DATE_TODAY = datetime.now().date()
+
+    svc_resp = safe_generate_next_invoice_service(invoice_recurring_profile=invoice_recurring_profile, issue_date=DATE_TODAY)
+
+    if svc_resp.success:
+        logger.info("Successfully generated next invoice")
+        return JsonResponse({"message": "Invoice generated", "success": True})
+    else:
+        logger.info(svc_resp.error)
+        return JsonResponse({"message": svc_resp.error, "success": False}, status=400)
diff --git a/docs/js/extra.js b/docs/js/extra.js
new file mode 100644
index 000000000..07fba6241
--- /dev/null
+++ b/docs/js/extra.js
@@ -0,0 +1,6 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const viewSourceButton = document.querySelector('a[title="View source of this page"]');
+  if (viewSourceButton) {
+    viewSourceButton.style.display = 'none';
+  }
+});
diff --git a/docs/overrides/main.html b/docs/overrides/main.html
index 90210d5c6..ce11458ae 100644
--- a/docs/overrides/main.html
+++ b/docs/overrides/main.html
@@ -1,4 +1,4 @@
 {% extends "base.html" %}
-{% block announce %}
-    <a href="https://github.com/TreyWW/MyFinances/discussions/293">New Announcement</a>: License Change to AGPL v3
-{% endblock %}
+{#{% block announce %}#}
+{#        <a href="https://github.com/TreyWW/MyFinances/discussions/293">New Announcement</a>: License Change to AGPL v3#}
+{#{% endblock %}#}
diff --git a/docs/user-guide/invoices/index.md b/docs/user-guide/invoices/index.md
new file mode 100644
index 000000000..e31816ae6
--- /dev/null
+++ b/docs/user-guide/invoices/index.md
@@ -0,0 +1,49 @@
+# Invoices
+
+Invoices allow you to bill customers for tasks or products. Customers can be sent an "invoice link" which allows them to view
+the invoice via the dashboard, print out the invoice and pay the invoice.
+
+## View an Invoice
+
+You can find an invoice from the "`Invoices`" -> "`Single`" tab, where every invoice under your [Logged in Profile](#) will be
+shown. Use the filters above each column to narrow down the list.
+
+You can view an overview of the invoice by either clicking anywhere in the row, or the "three dots" -> "overview".
+
+Here you can view things like the invoice status, ID, discounts, preview, and edit the invoice details.
+
+## Invoice Statuses
+
+Each invoice has a status: `draft`, `pending` or `paid`.
+
+- **draft**: the invoice isn't yet finalised, you can easily make changes and get the invoice ready without the user
+interacting or viewing details.
+- **pending**: the invoice is ready for customer viewing and awaiting payment
+- **overdue**: the invoice is still `pending`, however the due date has expired. You and the user can view the invoice as now
+"overdue" - it's up to your business whether you add late fees.
+- **paid**: the invoice has been fully (or partially) paid by the user and doesn't need modification
+
+
+## Invoices vs Invoice Profiles
+
+**Invoices** are invoice documents sent to customers to be paid. They have a status, products, total price, etc. **Invoice
+Profiles** are sets of invoices that are often automatically created on a recurring basis, to be paid regularly. In an invoice
+profile a normal **Invoice** is created every period. The profile just defines how often they are created, and the default
+values attached to it.
+
+# Invoice Profiles
+
+As stated above, invoice profiles hold individual invoices and can be set to create a new invoice every period.
+
+## Recurring Frequencies
+
+- Weekly - choose a day of week, e.g. "mondays"
+- Monthly - choose a day of month, e.g. "15th"
+- Yearly - choose a day of month, e.g. "15th" and choose a month of year e.g. "january"
+
+A single Invoice will be created every (period defined) and set to draft, you will be emailed automatically.
+
+Invoices are created at `7am UTC` (`8am BST`) of each period, this is currently not customisable. Please contact us at
+[enquiry@myfinances.cloud](mailto:enquiry@myfinances.cloud) if you require the flexibility.
+
+The `end date` is when the automatic invoice creation will finish.
diff --git a/frontend/templates/base/_head.html b/frontend/templates/base/_head.html
index 9eb4a93d7..2e634e3dd 100644
--- a/frontend/templates/base/_head.html
+++ b/frontend/templates/base/_head.html
@@ -53,6 +53,7 @@
         {#        <script defer type="text/javascript" src="{% static "js/c/font_awesome.js" %}"></script>#}
         {#        {% render_bundle 'all' 'js' %}#}
         {% render_bundle 'init' 'js' %}
+        {% render_bundle 'tableify' 'js' %}
         {% render_bundle 'htmx' 'js' %}
         {% render_bundle 'font_awesome' 'js' %}
         <!-- Tailwind & DaisyUI -->
diff --git a/frontend/templates/pages/emails/dashboard.html b/frontend/templates/pages/emails/dashboard.html
index 73f23eefb..588885466 100644
--- a/frontend/templates/pages/emails/dashboard.html
+++ b/frontend/templates/pages/emails/dashboard.html
@@ -1,7 +1,5 @@
 {% extends base|default:"base/base.html" %}
 {% block content %}
-    <form id="filter_list_storage">
-    </form>
     <div class="card bg-base-100 p-6 mb-4">
         <div class="flex gap-3 justify-between mb-3">
             <button tabindex="0"
diff --git a/frontend/templates/pages/invoices/dashboard/+payment_status_badge.html b/frontend/templates/pages/invoices/dashboard/+payment_status_badge.html
index 9f91e5387..61e9a4321 100644
--- a/frontend/templates/pages/invoices/dashboard/+payment_status_badge.html
+++ b/frontend/templates/pages/invoices/dashboard/+payment_status_badge.html
@@ -30,7 +30,7 @@
               data-invoice-id="{{ inv_id }}">Overdue</span>
     {% else %}
         <span class="rounded p-3 badge badge-outline badge-info"
-              data-status="{{ invoice.payment_status | lower }}"
-              data-invoice-id="{{ inv_id }}">{{ status | default:"sent" | title }}</span>
+              data-status="{{ invoice.status | lower }}"
+              data-invoice-id="{{ inv_id }}">{{ status | default:"draft" | title }}</span>
     {% endif %}
 {% endif %}
diff --git a/frontend/templates/pages/invoices/dashboard/_fetch_body.html b/frontend/templates/pages/invoices/dashboard/_fetch_body.html
index 8754be4d1..0fdb11bae 100644
--- a/frontend/templates/pages/invoices/dashboard/_fetch_body.html
+++ b/frontend/templates/pages/invoices/dashboard/_fetch_body.html
@@ -12,28 +12,28 @@
             hx-vals='{"invoice_structure_main": "True"}'
             hx-push-url="{% url "invoices:single:overview" invoice_id=invoice.id %}"
             hx-get="{% url "invoices:single:overview" invoice_id=invoice.id %}">
-            <td class="link link-primary no-underline">
+            <td class="link link-primary no-underline" td-value="{{ invoice.id }}">
                 <a href="{% url "invoices:single:overview" invoice_id=invoice.id %}">{{ invoice.id }}</a>
             </td>
             <td>{{ invoice.date_due | date:"d/m/Y" }}</td>
-            <td>
-                <div class="flex items-center text-sm">
-                    <div>
-                        {% with cli_name=invoice.client_to.name|default:invoice.client_name %}
+            {% with cli_name=invoice.client_to.name|default:invoice.client_name %}
+                <td td-value="{{ cli_name|default_if_none:"No Client" }}">
+                    <div class="flex items-center text-sm">
+                        <div>
                             {% if cli_name %}
                                 <p class="font-semibold">{{ cli_name }}</p>
                             {% else %}
                                 <p class="font-thin">No Client</p>
                             {% endif %}
-                        {% endwith %}
+                        </div>
                     </div>
-                </div>
-            </td>
-            <td>
+                </td>
+            {% endwith %}
+            <td td-value="{{ invoice.get_total_price | default_if_none:0 }}">
                 {{ invoice.get_currency_symbol }}{{ invoice.get_total_price | default_if_none:0 | floatformat:2 | intcomma }}
             </td>
-            <td>
-                {% component "pages:invoices:dashboard:payment_status_badge" status=invoice.payment_status inv_id=invoice.id %}
+            <td td-value="{{ invoice.dynamic_status }}">
+                {% component "pages:invoices:dashboard:payment_status_badge" status=invoice.dynamic_status inv_id=invoice.id %}
             </td>
             <td colspan="2"
                 onclick="const e = arguments[0] || window.event; e.stopPropagation();"
@@ -84,6 +84,13 @@
                                     Mark As
                                 </summary>
                                 <ul>
+                                    <li>
+                                        <button hx-swap="none"
+                                                hx-post="{% url "api:invoices:single:edit status" invoice_id=invoice.id status='draft' %}">
+                                            <i class="fa-solid fa-note-sticky"></i>
+                                            Draft
+                                        </button>
+                                    </li>
                                     <li>
                                         <button hx-swap="none"
                                                 hx-post="{% url "api:invoices:single:edit status" invoice_id=invoice.id status='pending' %}">
@@ -98,13 +105,6 @@
                                             Paid
                                         </button>
                                     </li>
-                                    <li>
-                                        <button hx-swap="none"
-                                                hx-post="{% url "api:invoices:single:edit status" invoice_id=invoice.id status='overdue' %}">
-                                            <i class="fa-solid fa-exclamation-triangle"></i>
-                                            Overdue
-                                        </button>
-                                    </li>
                                 </ul>
                             </details>
                         </li>
@@ -173,48 +173,3 @@
                         <td colspan="100%" class="text-center">No Invoices Found</td>
                     {% endfor %}
                 </tbody>
-                {% for option in all_sort_options %}
-                    <div hx-swap-oob="innerHTML:li[data-sort='{{ option }}'] button">
-                        {% if sort == option or sort == "-"|add:option %}<i class="fa fa-solid fa-sort"></i>{% endif %}
-                        {% if option == "payment_status" %}
-                            Payment Status
-                        {% elif option == "date_due" %}
-                            Date
-                        {% elif option == "amount" %}
-                            Amount
-                        {% else %}
-                            ID
-                        {% endif %}
-                    </div>
-                {% endfor %}
-                {% for filter_type, inner_filters in all_filters.items %}
-                    {% for filter in inner_filters %}
-                        <div hx-swap-oob="innerHTML:div[data-filter-type='{{ filter_type }}'] ul li[data-filter-by='{{ filter }}'] button">
-                            {% if filter in selected_filters %}<i class="fa fa-solid fa-check text-success"></i>{% endif %}
-                            {{ filter | title }}
-                        </div>
-                    {% endfor %}
-                {% endfor %}
-                <div hx-swap-oob="innerHTML:#filter_list_storage">
-                    <input type="hidden"
-                           name="payment_status_paid"
-                           value="{% if 'paid' in selected_filters %}true{% endif %}">
-                    <input type="hidden"
-                           name="payment_status_pending"
-                           value="{% if 'pending' in selected_filters %}true{% endif %}">
-                    <input type="hidden"
-                           name="payment_status_overdue"
-                           value="{% if 'overdue' in selected_filters %}true{% endif %}">
-                    <input type="hidden"
-                           name="amount_20+"
-                           value="{% if '20+' in selected_filters %}true{% endif %}">
-                    <input type="hidden"
-                           name="amount_50+"
-                           value="{% if '50+' in selected_filters %}true{% endif %}">
-                    <input type="hidden"
-                           name="amount_100+"
-                           value="{% if '100+' in selected_filters %}true{% endif %}">
-                </div>
-                <div hx-swap-oob="innerHTML:#sort_direction_storage">
-                    <input type="hidden" name="sort_direction" value="{{ sort_direction }}">
-                </div>
diff --git a/frontend/templates/pages/invoices/dashboard/manage.html b/frontend/templates/pages/invoices/dashboard/manage.html
index 6ba3ff547..e203edd8d 100644
--- a/frontend/templates/pages/invoices/dashboard/manage.html
+++ b/frontend/templates/pages/invoices/dashboard/manage.html
@@ -51,7 +51,7 @@ <h1 class="text-center col-span-2">Invoice #{{ invoice.id }}</h1>
         <div class="basis-[100%] h-0"></div>
         <!-- Icon and Text for Current Status -->
         <div data-oob="status">
-            {% component "pages:invoices:dashboard:payment_status_badge" status=invoice.payment_status inv_id=invoice_id design="default" %}
+            {% component "pages:invoices:dashboard:payment_status_badge" status=invoice.dynamic_status inv_id=invoice_id design="default" %}
         </div>
         <!-- Mark As Button -->
         <div class="dropdown dropdown-right dropdown-hover grow flex">
@@ -61,6 +61,13 @@ <h1 class="text-center col-span-2">Invoice #{{ invoice.id }}</h1>
             </div>
             <ul tabindex="0"
                 class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
+                <li>
+                    <button hx-swap="none"
+                            hx-post="{% url "api:invoices:single:edit status" invoice_id=invoice.id status='draft' %}">
+                        <i class="fa-solid fa-note-sticky"></i>
+                        Draft
+                    </button>
+                </li>
                 <li>
                     <button hx-swap="none"
                             hx-post="{% url "api:invoices:single:edit status" invoice_id=invoice.id status='pending' %}">
@@ -75,13 +82,6 @@ <h1 class="text-center col-span-2">Invoice #{{ invoice.id }}</h1>
                         Paid
                     </button>
                 </li>
-                <li>
-                    <button hx-swap="none"
-                            hx-post="{% url "api:invoices:single:edit status" invoice_id=invoice.id status='overdue' %}">
-                        <i class="fa-solid fa-exclamation-triangle"></i>
-                        Overdue
-                    </button>
-                </li>
             </ul>
         </div>
         <button class="btn btn-secondary btn-outline grow"
diff --git a/frontend/templates/pages/invoices/recurring/dashboard/_fetch_body.html b/frontend/templates/pages/invoices/recurring/dashboard/_fetch_body.html
index 25ec29d42..9558abc7b 100644
--- a/frontend/templates/pages/invoices/recurring/dashboard/_fetch_body.html
+++ b/frontend/templates/pages/invoices/recurring/dashboard/_fetch_body.html
@@ -17,23 +17,23 @@
                 <a href="{% url "invoices:recurring:overview" invoice_profile_id=invoiceProfile.id %}">{{ invoiceProfile.id }}</a>
             </td>
             <td>{{ invoiceProfile.end_date | date:"d/m/Y" | default:"never" }}</td>
-            <td>
-                <div class="flex items-center text-sm">
-                    <div>
-                        {% with cli_name=invoiceProfile.client_to.name|default:invoiceProfile.client_name %}
+            {% with cli_name=invoiceProfile.client_to.name|default:invoiceProfile.client_name %}
+                <td td-value="{{ cli_name | default_if_none:'No Client' }}">
+                    <div class="flex items-center text-sm">
+                        <div>
                             {% if cli_name %}
                                 <p class="font-semibold">{{ cli_name }}</p>
                             {% else %}
                                 <p class="font-thin">No Client</p>
                             {% endif %}
-                        {% endwith %}
+                        </div>
                     </div>
-                </div>
-            </td>
-            <td>
+                </td>
+            {% endwith %}
+            <td td-value="{{ invoiceProfile.get_total_price | default_if_none:0 }}">
                 {{ invoiceProfile.get_currency_symbol }}{{ invoiceProfile.get_total_price | default_if_none:0 | floatformat:2 | intcomma }}
             </td>
-            <td>
+            <td td-value="{{ invoiceProfile.status }}">
                 {% include "pages/invoices/recurring/dashboard/_status_badge.html" with status=invoiceProfile.status inv_id=invoiceProfile.id %}
             </td>
             <td colspan="2"
@@ -47,7 +47,7 @@
                         <i class="fa-solid fa-ellipsis-vertical"></i>
                     </label>
                     <ul tabindex="0"
-                        class="dropdown-content z-[1] menu wp-2 shadow-2xl bg-base-200 rounded-box w-52">
+                        class="dropdown-content z-[1] menu wp-2 shadow-2xl bg-base-200 border border-base-300 rounded-box w-52">
                         <li hx-boost="true">
                             <a href="{% url "invoices:recurring:overview" invoice_profile_id=invoiceProfile.id %}">
                                 <i class="fa-solid fa-eye"></i>
@@ -97,7 +97,6 @@
                                 hx-swap="outerHTML"
                                 hx-target="#table_body"
                                 hx-indicator=""
-                                hx-include='#filter_list_storage, #sort_direction_storage, [name="sort"]'
                                 hx-get="{% url "api:invoices:recurring:fetch" %}?page={{ page.previous_page_number }}">
                             «
                         </button>
@@ -112,7 +111,6 @@
                                 hx-swap="outerHTML"
                                 hx-target="#table_body"
                                 hx-indicator=""
-                                hx-include='#filter_list_storage, #sort_direction_storage, [name="sort"]'
                                 hx-get="{% url "api:invoices:recurring:fetch" %}?page={{ page.next_page_number }}">
                             »
                         </button>
@@ -140,72 +138,6 @@
         {% endif %}
     </div>
 {% endfor %}
-{% for option in all_sort_options %}
-    <div hx-swap-oob="innerHTML:li[data-sort='{{ option }}'] button">
-        {% if sort == option or sort == "-"|add:option %}<i class="fa fa-solid fa-sort"></i>{% endif %}
-        {% if option == "status" %}
-            Status
-        {% elif option == "end_date" %}
-            Date
-        {% elif option == "amount" %}
-            Amount
-        {% else %}
-            ID
-        {% endif %}
-    </div>
-{% endfor %}
-{% for filter_type, inner_filters in all_filters.items %}
-    {% for filter in inner_filters %}
-        {% comment %}
-            This will set the checkmarks for each selected filter
-        {% endcomment %}
-        <div hx-swap-oob='innerHTML:ul[data-filter-type="{{ filter_type }}"] li[data-filter-by="{{ filter }}"] span'>
-            {% if filter in selected_filters %}
-                <i class="fa fa-check text-success"></i>
-            {% else %}
-                <i class="fa fa-check text-success hidden"></i>
-            {% endif %}
-        </div>
-        {% comment %}
-            This will set the little in brackets (x) number for how many filters are applied
-        {% endcomment %}
-        <div hx-swap-oob='innerHTML:li[data-filter-type="{{ filter_type }}"] details summary'>
-            {% with FILTER_COUNT=inner_filters|common_children_filter:selected_filters|length %}
-                {{ filter_type | title }}
-                {% if FILTER_COUNT %}({{ FILTER_COUNT }}){% endif %}
-            {% endwith %}
-        </div>
-    {% endfor %}
-{% endfor %}
-<div hx-swap-oob="innerHTML:#filter_list_storage">
-    <input type="hidden"
-           name="status_cancelled"
-           value="{% if 'cancelled' in selected_filters %}true{% endif %}">
-    <input type="hidden"
-           name="status_paused"
-           value="{% if 'paused' in selected_filters %}true{% endif %}">
-    <input type="hidden"
-           name="status_ongoing"
-           value="{% if 'ongoing' in selected_filters %}true{% endif %}">
-    <input type="hidden"
-           name="amount_20+"
-           value="{% if '20+' in selected_filters %}true{% endif %}">
-    <input type="hidden"
-           name="amount_50+"
-           value="{% if '50+' in selected_filters %}true{% endif %}">
-    <input type="hidden"
-           name="amount_100+"
-           value="{% if '100+' in selected_filters %}true{% endif %}">
-</div>
-<div hx-swap-oob="innerHTML:#sort_direction_storage">
-    <input type="hidden" name="sort_direction" value="{{ sort_direction }}">
-</div>
-<div hx-swap-oob="innerHTML:#sort_direction_storage">
-    <input type="hidden" name="sort_direction" value="{{ sort_direction }}">
-</div>
-<div hx-swap-oob="innerHTML:#amount_storage">
-    <input type="hidden" name="amount_filter" value="{{ amount_filter }}">
-</div>
 <div hx-swap-oob="innerHTML:#page_storage">
     <input type="hidden" name="page" value="{{ page.number }}">
 </div>
diff --git a/frontend/templates/pages/invoices/recurring/dashboard/dashboard.html b/frontend/templates/pages/invoices/recurring/dashboard/dashboard.html
index 1ad4216b6..8fbfe5f12 100644
--- a/frontend/templates/pages/invoices/recurring/dashboard/dashboard.html
+++ b/frontend/templates/pages/invoices/recurring/dashboard/dashboard.html
@@ -1,80 +1,6 @@
 <div class="card bg-base-100 p-3 mb-2">
     <div class="flex items-center justify-between">
         <div class="flex items-center space-x-2">
-            <div class="dropdown">
-                <div class="btn btn-square btn-sm btn-outline loading-htmx"
-                     data-indicator="filter"
-                     role="button"
-                     tabindex="0">
-                    <i class="fa fa-filter loading-htmx-text"></i>
-                    <span id="currency_save_loading"
-                          class="loading loading-spinner loading-htmx-loader h-3 w-3"></span>
-                </div>
-                <ul tabindex="0"
-                    class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
-                    <h2 class="menu-title">Filter by</h2>
-                    <li>
-                        <details>
-                            <summary>Above Amount</summary>
-                            <ul>
-                                <li>
-                                    <input class="input input-sm input-bordered w-full mt-1"
-                                           placeholder="20"
-                                           value="{{ previous_amount_filter }}"
-                                           data-filter-type="amount"
-                                           hx-vals='{"filter_type": "amount"}'
-                                           hx-swap="outerHTML"
-                                           hx-target="#table_body"
-                                           hx-indicator='div[data-indicator="filter"]'
-                                           hx-get="{% url 'api:invoices:recurring:fetch' %}"
-                                           hx-trigger="keyup changed delay:500ms"
-                                           name="filter"
-                                           hx-include='#filter_list_storage, #sort_direction_storage, [name="sort"]' />
-                                </li>
-                            </ul>
-                        </details>
-                    </li>
-                    <li data-filter-type="status">
-                        <details>
-                            <summary>Status</summary>
-                            <ul hx-vals='{"filter_type": "status"}'
-                                data-filter-type="status"
-                                hx-swap="outerHTML"
-                                hx-target="#table_body"
-                                hx-indicator='div[data-indicator="filter"]'
-                                hx-include='#filter_list_storage, #sort_direction_storage, [name="sort"], #amount_storage'>
-                                <li data-filter-by="ongoing">
-                                    <button class="dropdown-item text-sm border-none"
-                                            name="filter"
-                                            value="ongoing"
-                                            hx-get="{% url 'api:invoices:recurring:fetch' %}">
-                                        <span><i class="fa fa-check text-success hidden"></i></span>
-                                        Ongoing
-                                    </button>
-                                </li>
-                                <li data-filter-by="paused">
-                                    <button class="dropdown-item text-sm border-none"
-                                            name="filter"
-                                            value="paused"
-                                            hx-get="{% url 'api:invoices:recurring:fetch' %}">
-                                        <span><i class="fa fa-check text-success hidden"></i></span>
-                                        Paused
-                                    </button>
-                                </li>
-                                <li data-filter-by="cancelled">
-                                    <button class="dropdown-item text-sm border-none"
-                                            name="filter"
-                                            value="cancelled"
-                                            hx-get="{% url 'api:invoices:recurring:fetch' %}">
-                                        <span><i class="fa fa-check text-success hidden"></i></span>
-                                        Cancelled
-                                    </button>
-                                </li>
-                            </ul>
-                        </details>
-                    </li>
-                </ul>
-            </div>
             <div class="dropdown dropdown-right w-14">
                 <div tabindex="0"
                      role="button"
@@ -86,31 +12,25 @@ <h2 class="menu-title">Filter by</h2>
                 </div>
                 <ul class="dropdown-content menu z-[1] w-52 rounded-box bg-base-200 p-2 shadow"
                     tabindex="0"
-                    hx-swap="outerHTML"
-                    hx-target="#table_body"
-                    hx-include="#sort_direction_storage"
-                    hx-indicator="#sort-indicator">
+                    mft-id="single_invoices_list_table">
                     <h2 class="menu-title">Sort by</h2>
                     <li data-sort="id">
-                        <button class="dropdown-item"
-                                hx-get="{% url 'api:invoices:recurring:fetch' %}"
-                                name="sort"
-                                value="id">
+                        <button class="dropdown-item" mft-sort-by="id">
                             <i class="fa-solid fa-sort"></i>
                             ID
                         </button>
                     </li>
                     <li data-sort="status">
-                        <button class="dropdown-item"
-                                hx-get="{% url 'api:invoices:recurring:fetch' %}"
-                                name="sort"
-                                value="status">Payment Status</button>
+                        <button class="dropdown-item" mft-sort-by="status">
+                            <i class="fa-solid fa-sort"></i>
+                            Status
+                        </button>
                     </li>
                     <li data-sort="date_due">
-                        <button class="dropdown-item"
-                                hx-get="{% url 'api:invoices:recurring:fetch' %}"
-                                name="sort"
-                                value="date_due">Date</button>
+                        <button class="dropdown-item" mft-sort-by="end_date">
+                            <i class="fa-solid fa-sort"></i>
+                            Date
+                        </button>
                     </li>
                 </ul>
             </div>
@@ -130,25 +50,19 @@ <h2 class="text-xl" data-oob="recurring-invoices-title">Recurring Invoices</h2>
     </div>
 </div>
 <div class="card bg-base-100 p-6 h-screen">
-    <form id="filter_list_storage">
-    </form>
-    <form id="sort_direction_storage">
-    </form>
     <form id="page_storage">
     </form>
-    <form id="amount_storage">
-    </form>
-    <div class="w-full overflow-x-auto">
-        <table class="table">
+    <div class="flex w-full h-full overflow-x-auto overflow-y-auto">
+        <table class="table h-fit" id="recurring_invoices_list_table">
             <thead>
-                <tr hx-swap="outerHTML"
-                    hx-target="#table_body"
-                    hx-include="#filter_list_storage">
-                    <th>Profile ID</th>
-                    <th>End Date</th>
-                    <th>Client Name</th>
-                    <th>Amount</th>
-                    <th>Status</th>
+                <tr>
+                    <th mft-col-name="id" mft-filter-type="searchable-amount">Profile ID</th>
+                    <th mft-col-name="end_date" mft-filter-type="searchable">End Date</th>
+                    <th mft-col-name="client_name" mft-filter-type="searchable">Client Name</th>
+                    <th mft-col-name="amount" mft-filter-type="searchable-amount">Amount</th>
+                    <th mft-col-name="status"
+                        mft-filter-type="normal"
+                        mft-filters="paused,ongoing">Status</th>
                     <th>Actions</th>
                 </tr>
             </thead>
@@ -159,6 +73,7 @@ <h2 class="text-xl" data-oob="recurring-invoices-title">Recurring Invoices</h2>
                 {% include 'components/table/skeleton_rows.html' with rows=3 cols=6 %}
             </tbody>
         </table>
+        <script>new Tableify('#recurring_invoices_list_table');</script>
     </div>
 </div>
 {% component "messages_list" %}
diff --git a/frontend/templates/pages/invoices/single/dashboard/dashboard.html b/frontend/templates/pages/invoices/single/dashboard/dashboard.html
index 7361b774d..8052dd52b 100644
--- a/frontend/templates/pages/invoices/single/dashboard/dashboard.html
+++ b/frontend/templates/pages/invoices/single/dashboard/dashboard.html
@@ -1,9 +1,6 @@
 <div class="card bg-base-100 p-3 mb-2">
     <div class="flex items-center justify-between">
         <div class="flex items-center space-x-2">
-            <button class="btn btn-square btn-sm">
-                <i class="fa fa-filter"></i>
-            </button>
             <div class="dropdown dropdown-right w-14">
                 <div tabindex="0"
                      role="button"
@@ -14,32 +11,25 @@
                           class="loading loading-spinner loading-htmx-loader"></span>
                 </div>
                 <ul class="dropdown-content menu z-[1] w-52 rounded-box bg-base-200 p-2 shadow"
-                    tabindex="0"
-                    hx-swap="outerHTML"
-                    hx-target="#table_body"
-                    hx-include="#sort_direction_storage"
-                    hx-indicator="#sort-indicator">
+                    tabindex="0">
                     <h2 class="menu-title">Sort by</h2>
                     <li data-sort="id">
                         <button class="dropdown-item"
-                                hx-get="{% url 'api:invoices:single:fetch' %}"
-                                name="sort"
-                                value="id">
+                                mft-sort-by="invoice-id"
+                                mft-id="single_invoices_list_table">
                             <i class="fa-solid fa-sort"></i>
                             ID
                         </button>
                     </li>
-                    <li data-sort="payment_status">
+                    <li data-sort="status">
                         <button class="dropdown-item"
-                                hx-get="{% url 'api:invoices:single:fetch' %}"
-                                name="sort"
-                                value="payment_status">Payment Status</button>
+                                mft-id="single_invoices_list_table"
+                                mft-sort-by="status">Status</button>
                     </li>
                     <li data-sort="date_due">
                         <button class="dropdown-item"
-                                hx-get="{% url 'api:invoices:single:fetch' %}"
-                                name="sort"
-                                value="date_due">Date</button>
+                                mft-id="single_invoices_list_table"
+                                mft-sort-by="due_date">Date</button>
                     </li>
                 </ul>
             </div>
@@ -54,84 +44,17 @@ <h2 class="text-xl" data-oob="invoices-title">Invoices</h2>
     </div>
 </div>
 <div class="card bg-base-100 p-6 h-screen">
-    <form id="filter_list_storage">
-    </form>
-    <form id="sort_direction_storage">
-    </form>
     <div class="flex w-full h-full overflow-x-auto overflow-y-auto">
-        <table class="table h-fit">
+        <table class="table h-fit" id="single_invoices_list_table">
             <thead>
-                <tr hx-swap="outerHTML"
-                    hx-target="#table_body"
-                    hx-indicator=""
-                    hx-include="#filter_list_storage">
-                    <th>Invoice ID</th>
-                    <th>Due Date</th>
-                    <th>Client Name</th>
-                    <th>
-                        <div class="dropdown"
-                             data-filter-type="amount"
-                             hx-vals='{"filter_type": "amount"}'>
-                            <label tabindex="0" class="border-none">
-                                Amount
-                                <i class="fa-solid fa-caret-down border-none pt-1 pl-1/2"></i>
-                            </label>
-                            <ul class="dropdown-content">
-                                <h2 class="menu-title">Amount</h2>
-                                <div class="divider -mt-2 -mb-1"></div>
-                                <li data-filter-by="20+">
-                                    <button class="dropdown-item text-sm border-none"
-                                            hx-get="{% url "api:invoices:single:fetch" %}"
-                                            name="filter"
-                                            value="20+">20+</button>
-                                </li>
-                                <li data-filter-by="50+">
-                                    <button class="dropdown-item text-sm border-none"
-                                            hx-get="{% url "api:invoices:single:fetch" %}"
-                                            name="filter"
-                                            value="50+">50+</button>
-                                </li>
-                                <li data-filter-by="100+">
-                                    <button class="dropdown-item text-sm border-none"
-                                            hx-get="{% url "api:invoices:single:fetch" %}"
-                                            name="filter"
-                                            value="100+">100+</button>
-                                </li>
-                            </ul>
-                        </div>
-                    </th>
-                    <th>
-                        <div class="dropdown"
-                             data-filter-type="payment_status"
-                             hx-vals='{"filter_type": "payment_status"}'>
-                            <label tabindex="0" class="border-none">
-                                Payment Status
-                                <i class="fa-solid fa-caret-down border-none pt-1 pl-1/2"></i>
-                            </label>
-                            <ul class="dropdown-content">
-                                <h2 class="menu-title">Payment Status</h2>
-                                <div class="divider -mt-2 -mb-1"></div>
-                                <li data-filter-by="paid">
-                                    <button class="dropdown-item text-sm border-none"
-                                            hx-get="{% url "api:invoices:single:fetch" %}"
-                                            name="filter"
-                                            value="paid">Paid</button>
-                                </li>
-                                <li data-filter-by="pending">
-                                    <button class="dropdown-item text-sm border-none"
-                                            hx-get="{% url "api:invoices:single:fetch" %}"
-                                            name="filter"
-                                            value="pending">Pending</button>
-                                </li>
-                                <li data-filter-by="overdue">
-                                    <button class="dropdown-item text-sm border-none"
-                                            hx-get="{% url "api:invoices:single:fetch" %}"
-                                            name="filter"
-                                            value="overdue">Overdue</button>
-                                </li>
-                            </ul>
-                        </div>
-                    </th>
+                <tr>
+                    <th mft-col-name="invoice-id" mft-filter-type="searchable-amount">Invoice ID</th>
+                    <th mft-col-name="due_date" mft-filter-type="searchable">Due Date</th>
+                    <th mft-col-name="client_name" mft-filter-type="searchable">Client Name</th>
+                    <th mft-col-name="amount" mft-filter-type="searchable-amount">Amount</th>
+                    <th mft-col-name="status"
+                        mft-filter-type="normal"
+                        mft-filters="draft,pending,overdue,paid">Status</th>
                     <th>Actions</th>
                 </tr>
             </thead>
@@ -144,4 +67,5 @@ <h2 class="menu-title">Payment Status</h2>
         </table>
     </div>
 </div>
+<script>new Tableify('#single_invoices_list_table');</script>
 {% component "messages_list" %}
diff --git a/frontend/templates/pages/invoices/single/view/_banner/_invoice_status.html b/frontend/templates/pages/invoices/single/view/_banner/_invoice_status.html
index 81ddb7602..3c2d5a819 100644
--- a/frontend/templates/pages/invoices/single/view/_banner/_invoice_status.html
+++ b/frontend/templates/pages/invoices/single/view/_banner/_invoice_status.html
@@ -1,6 +1,6 @@
 <div class="flex items-center mx-auto status-btn">
     <p class="flex text-sm font-normal me-8">
-        {% with ps=invoice.payment_status %}
+        {% with ps=invoice.status %}
             {% if ps == "paid" %}
                 <span class="circle-tick bg-success text-neutral">
                     <i class="fa-solid fa-check"></i>
diff --git a/mkdocs.yml b/mkdocs.yml
index 67d9fc826..d099819c0 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -75,6 +75,11 @@ site_description: Documentation for MyFinances
 site_author: treyww
 
 nav:
+  - User Guide:
+      - user-guide/index.md
+      - Pricing: user-guide/pricing/index.md
+      - Email Templates: user-guide/emails/templates/index.md
+      - Invoices: user-guide/invoices/index.md
   - Developer Guide:
       - getting-started/index.md
       - Installation: getting-started/installation.md
@@ -97,8 +102,6 @@ nav:
       #            - Private Media Files: getting-started/settings/AWS/private-media.md
       - Common issues / debugging:
           - Poetry: debugging/python/poetry.md
-  #  - User Guide:
-  #      - user-guide/index.md
   - Contributing:
       - contributing/index.md
       - Setup project: contributing/setup.md
@@ -111,11 +114,6 @@ nav:
       - Motivation: contributing/motivation.md
       - Development Progression: contributing/development-progression.md
       - Taking on a lead position: contributing/lead-position.md
-  - User Guide:
-      - user-guide/index.md
-      - Pricing: user-guide/pricing/index.md
-      - Email Templates:
-          - Home: user-guide/emails/templates/index.md
   - Changelog:
       - changelog/index.md
 
@@ -127,3 +125,6 @@ extra:
   status:
     new: Recently added
     deprecated: Deprecated
+
+extra_javascript:
+  - 'js/extra.js'
diff --git a/webpack.common.js b/webpack.common.js
index 8fbe7d3c8..868b6d080 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -9,6 +9,10 @@ module.exports = {
       import: './assets/scripts/htmx.js',
       dependOn: 'init'
     },
+    tableify: {
+      import: './assets/scripts/tableify.js',
+      dependOn: 'init'
+    },
     receipt_downloads: {
       import: './assets/scripts/receipt_downloads.js'
     },