💄 filter by approval state

src/components/ApprovalFeed.tsx

@@ -36,15 +36,11 @@ export function ApprovalFeed({ orgId }: ApprovalFeedProps) {
     );
 
     const { data, isFetching, refetch } = useQuery(
-        approvalQueries.listApprovals(orgId)
+        approvalQueries.listApprovals(orgId, filters)
     );
 
     const approvals = data?.approvals ?? [];
 
-    console.log({
-        approvals
-    });
-
     return (
         <div className="flex flex-col gap-5">
             <Card className="">
@@ -75,11 +71,16 @@ export function ApprovalFeed({ orgId }: ApprovalFeedProps) {
                                 />
                             </SelectTrigger>
                             <SelectContent className="w-full">
-                                <SelectItem value="pending">Pending</SelectItem>
-                                <SelectItem value="approved">
-                                    Approved
+                                <SelectItem value="pending">
+                                    {t("pending")}
                                 </SelectItem>
-                                <SelectItem value="all">All</SelectItem>
+                                <SelectItem value="approved">
+                                    {t("approved")}
+                                </SelectItem>
+                                <SelectItem value="denied">
+                                    {t("denied")}
+                                </SelectItem>
+                                <SelectItem value="all">{t("all")}</SelectItem>
                             </SelectContent>
                         </Select>
                     </div>

src/lib/queries.ts

@@ -321,13 +321,22 @@ export const approvalFiltersSchema = z.object({
 });
 
 export const approvalQueries = {
-    listApprovals: (orgId: string) =>
+    listApprovals: (
+        orgId: string,
+        filters: z.infer<typeof approvalFiltersSchema>
+    ) =>
         queryOptions({
-            queryKey: ["APPROVALS", orgId] as const,
+            queryKey: ["APPROVALS", orgId, filters] as const,
             queryFn: async ({ signal, meta }) => {
+                const sp = new URLSearchParams();
+
+                if (filters.approvalState) {
+                    sp.set("approvalState", filters.approvalState);
+                }
+
                 const res = await meta!.api.get<
                     AxiosResponse<ListApprovalsResponse>
-                >(`/org/${orgId}/approvals`, {
+                >(`/org/${orgId}/approvals?${sp.toString()}`, {
                     signal
                 });
                 return res.data.data;