diff --git a/src/app/(dashboard)/subscriptions.tsx b/src/app/(dashboard)/subscriptions.tsx index 425d8ab..e3b4cad 100644 --- a/src/app/(dashboard)/subscriptions.tsx +++ b/src/app/(dashboard)/subscriptions.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { Plus, ShoppingBasket, @@ -54,6 +54,7 @@ interface FilterState { export function SubscriptionsSection() { const { data: subscriptions, isLoading } = api.subscription.getAll.useQuery(); + const [searchQuery, setSearchQuery] = useState(""); const [isDialogOpen, setIsDialogOpen] = useState(false); const [editingSubscription, setEditingSubscription] = useState< InputType["subscription"]["update"] | undefined @@ -209,7 +210,40 @@ export function SubscriptionsSection() { return Array.from(methods); }; - return ( + const handleSearchChange = (event: React.ChangeEvent) => { + setSearchQuery(event.target.value); + }; + + const getFilteredSubscriptions = ( + subscriptions: SubscriptionWithLatestPeriod[], + ) => { + if (!subscriptions) return []; + return subscriptions.filter((sub) => + sub.name.toLowerCase().includes(searchQuery.toLowerCase()), + ); + }; + + const getFilteredAndSortedSubscriptions = ( + subscriptions: SubscriptionWithLatestPeriod[], + ) => { + if (!subscriptions) return []; + + const filtered = getFilteredSubscriptions(subscriptions).filter((sub) => { + const paymentMethodMatch = + filters.paymentMethods.size === 0 || + filters.paymentMethods.has(sub.paymentMethod?.name ?? null); + + const subscriptionTypeMatch = + filters.subscriptionType === "all" || + (filters.subscriptionType === "trial" && sub.latestPeriod?.isTrial) || + (filters.subscriptionType === "non-trial" && + !sub.latestPeriod?.isTrial); + + return paymentMethodMatch && subscriptionTypeMatch; + }); + + return getSortedSubscriptions(filtered); + };
@@ -219,6 +253,13 @@ export function SubscriptionsSection() {
+