Merge remote-tracking branch 'origin/main' into pr-2508

# Conflicts:
#	packages/lib/translations/de/web.po
#	packages/lib/translations/en/web.po
#	packages/lib/translations/es/web.po
#	packages/lib/translations/fr/web.po
#	packages/lib/translations/it/web.po
#	packages/lib/translations/ja/web.po
#	packages/lib/translations/ko/web.po
#	packages/lib/translations/nl/web.po
#	packages/lib/translations/pl/web.po
#	packages/lib/translations/pt-BR/web.po
#	packages/lib/translations/zh/web.po

apps/remix/app/components/forms/search-param-selector.tsx

@@ -1,49 +0,0 @@
-import { Select, SelectContent, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
-import type React from 'react';
-import { useMemo } from 'react';
-import { useLocation, useNavigate, useSearchParams } from 'react-router';
-
-export type SearchParamSelector = {
-  paramKey: string;
-  isValueValid: (value: unknown) => boolean;
-  children: React.ReactNode;
-};
-
-export const SearchParamSelector = ({ children, paramKey, isValueValid }: SearchParamSelector) => {
-  const { pathname } = useLocation();
-  const [searchParams] = useSearchParams();
-
-  const navigate = useNavigate();
-
-  const value = useMemo(() => {
-    const p = searchParams?.get(paramKey) ?? 'all';
-
-    return isValueValid(p) ? p : 'all';
-  }, [searchParams]);
-
-  const onValueChange = (newValue: string) => {
-    if (!pathname) {
-      return;
-    }
-
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set(paramKey, newValue);
-
-    if (newValue === '' || newValue === 'all') {
-      params.delete(paramKey);
-    }
-
-    void navigate(`${pathname}?${params.toString()}`, { preventScrollReset: true });
-  };
-
-  return (
-    <Select defaultValue={value} onValueChange={onValueChange}>
-      <SelectTrigger className="max-w-[200px] text-muted-foreground">
-        <SelectValue />
-      </SelectTrigger>
-
-      <SelectContent position="popper">{children}</SelectContent>
-    </Select>
-  );
-};

apps/remix/app/components/general/document/document-search.tsx

@@ -1,46 +0,0 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
-import { Input } from '@documenso/ui/primitives/input';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { useCallback, useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router';
-
-export const DocumentSearch = ({ initialValue = '' }: { initialValue?: string }) => {
-  const { _ } = useLingui();
-
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const [searchTerm, setSearchTerm] = useState(initialValue);
-  const debouncedSearchTerm = useDebouncedValue(searchTerm, 500);
-
-  const handleSearch = useCallback(
-    (term: string) => {
-      const params = new URLSearchParams(searchParams?.toString() ?? '');
-      if (term) {
-        params.set('query', term);
-      } else {
-        params.delete('query');
-      }
-
-      setSearchParams(params);
-    },
-    [searchParams],
-  );
-
-  useEffect(() => {
-    const currentQueryParam = searchParams.get('query') || '';
-
-    if (debouncedSearchTerm !== currentQueryParam) {
-      handleSearch(debouncedSearchTerm);
-    }
-  }, [debouncedSearchTerm, searchParams]);
-
-  return (
-    <Input
-      type="search"
-      placeholder={_(msg`Search documents...`)}
-      value={searchTerm}
-      onChange={(e) => setSearchTerm(e.target.value)}
-    />
-  );
-};

apps/remix/app/components/general/period-selector.tsx

@@ -1,62 +0,0 @@
-import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
-import { Trans } from '@lingui/react/macro';
-import { useMemo } from 'react';
-import { useLocation, useNavigate, useSearchParams } from 'react-router';
-
-const isPeriodSelectorValue = (value: unknown): value is PeriodSelectorValue => {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  return ['', '7d', '14d', '30d'].includes(value as string);
-};
-
-export const PeriodSelector = () => {
-  const { pathname } = useLocation();
-  const [searchParams] = useSearchParams();
-
-  const navigate = useNavigate();
-
-  const period = useMemo(() => {
-    const p = searchParams?.get('period') ?? 'all';
-
-    return isPeriodSelectorValue(p) ? p : 'all';
-  }, [searchParams]);
-
-  const onPeriodChange = (newPeriod: string) => {
-    if (!pathname) {
-      return;
-    }
-
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('period', newPeriod);
-
-    if (newPeriod === '' || newPeriod === 'all') {
-      params.delete('period');
-    }
-
-    void navigate(`${pathname}?${params.toString()}`, { preventScrollReset: true });
-  };
-
-  return (
-    <Select defaultValue={period} onValueChange={onPeriodChange}>
-      <SelectTrigger className="max-w-[200px] text-muted-foreground">
-        <SelectValue />
-      </SelectTrigger>
-
-      <SelectContent position="popper">
-        <SelectItem value="all">
-          <Trans>All Time</Trans>
-        </SelectItem>
-        <SelectItem value="7d">
-          <Trans>Last 7 days</Trans>
-        </SelectItem>
-        <SelectItem value="14d">
-          <Trans>Last 14 days</Trans>
-        </SelectItem>
-        <SelectItem value="30d">
-          <Trans>Last 30 days</Trans>
-        </SelectItem>
-      </SelectContent>
-    </Select>
-  );
-};

apps/remix/app/components/general/template/template-page-view-documents-table.tsx

@@ -1,10 +1,9 @@
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { trpc } from '@documenso/trpc/react';
+import { ZFindDocumentsInternalRequestSchema } from '@documenso/trpc/server/document-router/find-documents-internal.types';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
-import { SelectItem } from '@documenso/ui/primitives/select';
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
@@ -12,39 +11,33 @@ import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { DocumentSource, DocumentStatus as DocumentStatusEnum } from '@prisma/client';
+import type { DocumentSource } from '@prisma/client';
 import { InfoIcon } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useMemo } from 'react';
 import { useSearchParams } from 'react-router';
-import { z } from 'zod';
 
-import { SearchParamSelector } from '~/components/forms/search-param-selector';
-import { DocumentSearch } from '~/components/general/document/document-search';
 import { DocumentStatus } from '~/components/general/document/document-status';
 import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { DocumentsTableActionButton } from '~/components/tables/documents-table-action-button';
 import { DocumentsTableActionDropdown } from '~/components/tables/documents-table-action-dropdown';
 import { DataTableTitle } from '~/components/tables/documents-table-title';
+import { TemplateDocumentsTableToolbar } from '~/components/tables/template-documents-table-toolbar';
 import { useCurrentTeam } from '~/providers/team';
 
-import { PeriodSelector } from '../period-selector';
-
 const DOCUMENT_SOURCE_LABELS: { [key in DocumentSource]: MessageDescriptor } = {
   DOCUMENT: msg`Document`,
   TEMPLATE: msg`Template`,
   TEMPLATE_DIRECT_LINK: msg`Direct link`,
 };
 
-const ZDocumentSearchParamsSchema = ZUrlSearchParamsSchema.extend({
-  source: z
-    .nativeEnum(DocumentSource)
-    .optional()
-    .catch(() => undefined),
-  status: z
-    .nativeEnum(DocumentStatusEnum)
-    .optional()
-    .catch(() => undefined),
+const ZDocumentSearchParamsSchema = ZFindDocumentsInternalRequestSchema.pick({
+  page: true,
+  perPage: true,
+  query: true,
+  period: true,
+  status: true,
+  source: true,
 });
 
 type TemplatePageViewDocumentsTableProps = {
@@ -59,9 +52,14 @@ export const TemplatePageViewDocumentsTable = ({ templateId }: TemplatePageViewD
 
   const team = useCurrentTeam();
 
-  const parsedSearchParams = ZDocumentSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
+  const searchParamsString = searchParams.toString();
 
-  const { data, isLoading, isLoadingError } = trpc.document.find.useQuery(
+  const parsedSearchParams = useMemo(
+    () => ZDocumentSearchParamsSchema.parse(Object.fromEntries(searchParams)),
+    [searchParamsString],
+  );
+
+  const { data, isLoading, isLoadingError } = trpc.document.findDocumentsInternal.useQuery(
     {
       templateId,
       page: parsedSearchParams.page,
@@ -69,6 +67,7 @@ export const TemplatePageViewDocumentsTable = ({ templateId }: TemplatePageViewD
       query: parsedSearchParams.query,
       source: parsedSearchParams.source,
       status: parsedSearchParams.status,
+      period: parsedSearchParams.period,
     },
     {
       placeholderData: (previousData) => previousData,
@@ -166,48 +165,11 @@ export const TemplatePageViewDocumentsTable = ({ templateId }: TemplatePageViewD
         ),
       },
     ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
-  }, []);
+  }, [_, i18n, team?.url]);
 
   return (
-    <div>
-      <div className="mb-4 flex flex-row space-x-4">
-        <DocumentSearch />
-
-        <SearchParamSelector
-          paramKey="status"
-          isValueValid={(value) => [...DocumentStatusEnum.COMPLETED].includes(value as unknown as string)}
-        >
-          <SelectItem value="all">
-            <Trans>Any Status</Trans>
-          </SelectItem>
-          <SelectItem value={DocumentStatusEnum.COMPLETED}>
-            <Trans>Completed</Trans>
-          </SelectItem>
-          <SelectItem value={DocumentStatusEnum.PENDING}>
-            <Trans>Pending</Trans>
-          </SelectItem>
-          <SelectItem value={DocumentStatusEnum.DRAFT}>
-            <Trans>Draft</Trans>
-          </SelectItem>
-        </SearchParamSelector>
-
-        <SearchParamSelector
-          paramKey="source"
-          isValueValid={(value) => [...DocumentSource.TEMPLATE].includes(value as unknown as string)}
-        >
-          <SelectItem value="all">
-            <Trans>Any Source</Trans>
-          </SelectItem>
-          <SelectItem value={DocumentSource.TEMPLATE}>
-            <Trans>Template</Trans>
-          </SelectItem>
-          <SelectItem value={DocumentSource.TEMPLATE_DIRECT_LINK}>
-            <Trans>Direct Link</Trans>
-          </SelectItem>
-        </SearchParamSelector>
-
-        <PeriodSelector />
-      </div>
+    <div className="space-y-4">
+      <TemplateDocumentsTableToolbar />
 
       <DataTable
         columns={columns}

apps/remix/app/components/tables/documents-table-sender-filter.tsx

@@ -1,63 +0,0 @@
-import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
-import { trpc } from '@documenso/trpc/react';
-import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
-import { msg } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { useLocation, useNavigate, useSearchParams } from 'react-router';
-
-type DocumentsTableSenderFilterProps = {
-  teamId: number;
-};
-
-export const DocumentsTableSenderFilter = ({ teamId }: DocumentsTableSenderFilterProps) => {
-  const { pathname } = useLocation();
-  const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-
-  const isMounted = useIsMounted();
-
-  const senderIds = (searchParams?.get('senderIds') ?? '').split(',').filter((value) => value !== '');
-
-  const { data, isLoading } = trpc.team.member.getMany.useQuery({
-    teamId,
-  });
-
-  const comboBoxOptions = (data ?? []).map((member) => ({
-    label: member.name ?? member.email,
-    value: member.userId.toString(),
-  }));
-
-  const onChange = (newSenderIds: string[]) => {
-    if (!pathname) {
-      return;
-    }
-
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('senderIds', newSenderIds.join(','));
-
-    if (newSenderIds.length === 0) {
-      params.delete('senderIds');
-    }
-
-    void navigate(`${pathname}?${params.toString()}`, { preventScrollReset: true });
-  };
-
-  return (
-    <MultiSelectCombobox
-      emptySelectionPlaceholder={
-        <p className="font-normal text-muted-foreground">
-          <Trans>
-            <span className="text-muted-foreground/70">Sender:</span> All
-          </Trans>
-        </p>
-      }
-      enableClearAllButton={true}
-      inputPlaceholder={msg`Search`}
-      loading={!isMounted || isLoading}
-      options={comboBoxOptions}
-      selectedValues={senderIds}
-      onChange={onChange}
-    />
-  );
-};

apps/remix/app/components/tables/documents-table-toolbar.tsx

@@ -0,0 +1,196 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { XIcon } from 'lucide-react';
+import { useSearchParams } from 'react-router';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { parseToStringArray, toCommaSeparatedSearchParam } from '@documenso/lib/utils/params';
+import { trpc } from '@documenso/trpc/react';
+import type { TFindDocumentsInternalResponse } from '@documenso/trpc/server/document-router/find-documents-internal.types';
+import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableFacetedFilterOption } from '@documenso/ui/primitives/data-table-faceted-filter';
+import { DataTableFacetedFilter } from '@documenso/ui/primitives/data-table-faceted-filter';
+import { Input } from '@documenso/ui/primitives/input';
+
+import { PERIOD_OPTIONS } from './table-toolbar.constants';
+
+type DocumentsTableToolbarProps = {
+  teamId?: number;
+  statusOptions: DataTableFacetedFilterOption[];
+  statusCounts: TFindDocumentsInternalResponse['stats'];
+};
+
+export const DocumentsTableToolbar = ({
+  teamId,
+  statusOptions,
+  statusCounts,
+}: DocumentsTableToolbarProps) => {
+  const { _ } = useLingui();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const query = searchParams.get('query') ?? '';
+  const period = searchParams.get('period') ?? '';
+  const statusParam = searchParams.get('status');
+  const senderIdsParam = searchParams.get('senderIds');
+
+  const selectedStatusValues = useMemo(() => parseToStringArray(statusParam), [statusParam]);
+  const selectedSenderValues = useMemo(() => parseToStringArray(senderIdsParam), [senderIdsParam]);
+
+  const [searchTerm, setSearchTerm] = useState(query);
+  const debouncedSearchTerm = useDebouncedValue(searchTerm, 500);
+
+  useEffect(() => {
+    setSearchTerm(query);
+  }, [query]);
+
+  useEffect(() => {
+    if (debouncedSearchTerm !== searchTerm) {
+      return;
+    }
+
+    if (debouncedSearchTerm === query) {
+      return;
+    }
+
+    updateSearchParams(
+      { query: debouncedSearchTerm || undefined, page: undefined },
+      { replace: true },
+    );
+  }, [debouncedSearchTerm, query, searchTerm, updateSearchParams]);
+
+  const { data: members } = trpc.team.member.getMany.useQuery(
+    {
+      teamId: teamId ?? 0,
+    },
+    {
+      enabled: teamId !== undefined,
+    },
+  );
+
+  const senderOptions = useMemo(() => {
+    return (members ?? []).map((member) => ({
+      label: member.name ?? member.email,
+      value: member.userId.toString(),
+    }));
+  }, [members]);
+
+  const periodOptions = useMemo<DataTableFacetedFilterOption[]>(() => {
+    return PERIOD_OPTIONS.map((option) => ({
+      label: _(option.label),
+      value: option.value,
+    }));
+  }, [_]);
+
+  const hasActiveFilters =
+    query.length > 0 ||
+    selectedStatusValues.length > 0 ||
+    selectedSenderValues.length > 0 ||
+    (period.length > 0 && period !== 'all');
+
+  const onResetFilters = () => {
+    setSearchTerm('');
+
+    updateSearchParams({
+      query: undefined,
+      status: undefined,
+      senderIds: undefined,
+      period: undefined,
+      page: undefined,
+    });
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <div className="relative min-w-[286px] max-w-[494px]">
+        <Input
+          type="text"
+          value={searchTerm}
+          onChange={(event) => setSearchTerm(event.target.value)}
+          placeholder={_(msg`Search documents...`)}
+          className="h-9 w-full pe-9"
+        />
+
+        {searchTerm.length > 0 && (
+          <button
+            type="button"
+            aria-label={_(msg`Clear search`)}
+            className="absolute inset-y-0 end-0 flex w-9 items-center justify-center text-muted-foreground hover:text-foreground"
+            onClick={() => {
+              setSearchTerm('');
+              updateSearchParams({ query: undefined, page: undefined }, { replace: true });
+            }}
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+
+      <DataTableFacetedFilter
+        title={_(msg`Status`)}
+        options={statusOptions}
+        selectedValues={selectedStatusValues}
+        counts={statusCounts}
+        showSearch={false}
+        onSelectedValuesChange={(values) => {
+          updateSearchParams(
+            {
+              status: toCommaSeparatedSearchParam(values),
+              page: undefined,
+            },
+            { replace: true },
+          );
+        }}
+      />
+
+      {teamId !== undefined && (
+        <DataTableFacetedFilter
+          title={_(msg`Sender`)}
+          options={senderOptions}
+          selectedValues={selectedSenderValues}
+          showSearch
+          onSelectedValuesChange={(values) => {
+            updateSearchParams(
+              {
+                senderIds: toCommaSeparatedSearchParam(values),
+                page: undefined,
+              },
+              { replace: true },
+            );
+          }}
+        />
+      )}
+
+      <DataTableFacetedFilter
+        title={_(msg`Time`)}
+        options={periodOptions}
+        selectedValues={period ? [period] : []}
+        singleSelect
+        showSearch={false}
+        onSelectedValuesChange={(values) => {
+          const nextPeriod = values[0];
+
+          updateSearchParams(
+            {
+              period: nextPeriod ?? undefined,
+              page: undefined,
+            },
+            { replace: true },
+          );
+        }}
+      />
+
+      {hasActiveFilters && (
+        <Button variant="ghost" size="sm" onClick={onResetFilters}>
+          <Trans>Reset</Trans>
+          <XIcon className="ml-2 h-4 w-4" />
+        </Button>
+      )}
+    </div>
+  );
+};

apps/remix/app/components/tables/table-toolbar.constants.ts

@@ -0,0 +1,21 @@
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+
+export const PERIOD_OPTIONS: Array<{ label: MessageDescriptor; value: string }> = [
+  {
+    label: msg`All Time`,
+    value: 'all',
+  },
+  {
+    label: msg`Last 7 days`,
+    value: '7d',
+  },
+  {
+    label: msg`Last 14 days`,
+    value: '14d',
+  },
+  {
+    label: msg`Last 30 days`,
+    value: '30d',
+  },
+];

apps/remix/app/components/tables/template-documents-table-toolbar.tsx

@@ -0,0 +1,206 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DocumentSource, DocumentStatus as DocumentStatusEnum } from '@prisma/client';
+import { CheckCircle2, Clock, File, FileText, LinkIcon, XIcon } from 'lucide-react';
+import { useSearchParams } from 'react-router';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { parseToStringArray, toCommaSeparatedSearchParam } from '@documenso/lib/utils/params';
+import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableFacetedFilterOption } from '@documenso/ui/primitives/data-table-faceted-filter';
+import { DataTableFacetedFilter } from '@documenso/ui/primitives/data-table-faceted-filter';
+import { Input } from '@documenso/ui/primitives/input';
+
+import { PERIOD_OPTIONS } from './table-toolbar.constants';
+
+export const TemplateDocumentsTableToolbar = () => {
+  const { _ } = useLingui();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams({ preventScrollReset: true });
+
+  const query = searchParams.get('query') ?? '';
+  const period = searchParams.get('period') ?? '';
+  const statusParam = searchParams.get('status');
+  const sourceParam = searchParams.get('source');
+
+  const selectedStatusValues = useMemo(() => parseToStringArray(statusParam), [statusParam]);
+  const selectedSourceValues = useMemo(() => parseToStringArray(sourceParam), [sourceParam]);
+
+  const [searchTerm, setSearchTerm] = useState(query);
+  const debouncedSearchTerm = useDebouncedValue(searchTerm, 500);
+
+  useEffect(() => {
+    setSearchTerm(query);
+  }, [query]);
+
+  useEffect(() => {
+    if (debouncedSearchTerm !== searchTerm) {
+      return;
+    }
+
+    if (debouncedSearchTerm === query) {
+      return;
+    }
+
+    updateSearchParams(
+      { query: debouncedSearchTerm || undefined, page: undefined },
+      { replace: true },
+    );
+  }, [debouncedSearchTerm, query, searchTerm, updateSearchParams]);
+
+  const statusOptions = useMemo<DataTableFacetedFilterOption[]>(
+    () => [
+      {
+        label: _(msg`Completed`),
+        value: DocumentStatusEnum.COMPLETED,
+        icon: CheckCircle2,
+        iconClassName: 'text-green-500 dark:text-green-300',
+      },
+      {
+        label: _(msg`Pending`),
+        value: DocumentStatusEnum.PENDING,
+        icon: Clock,
+        iconClassName: 'text-blue-600 dark:text-blue-300',
+      },
+      {
+        label: _(msg`Draft`),
+        value: DocumentStatusEnum.DRAFT,
+        icon: File,
+        iconClassName: 'text-yellow-500 dark:text-yellow-200',
+      },
+    ],
+    [_],
+  );
+
+  const sourceOptions = useMemo<DataTableFacetedFilterOption[]>(
+    () => [
+      {
+        label: _(msg`Template`),
+        value: DocumentSource.TEMPLATE,
+        icon: FileText,
+      },
+      {
+        label: _(msg`Direct Link`),
+        value: DocumentSource.TEMPLATE_DIRECT_LINK,
+        icon: LinkIcon,
+      },
+    ],
+    [_],
+  );
+
+  const periodOptions = useMemo<DataTableFacetedFilterOption[]>(() => {
+    return PERIOD_OPTIONS.map((option) => ({
+      label: _(option.label),
+      value: option.value,
+    }));
+  }, [_]);
+
+  const hasActiveFilters =
+    query.length > 0 ||
+    selectedStatusValues.length > 0 ||
+    selectedSourceValues.length > 0 ||
+    (period.length > 0 && period !== 'all');
+
+  const onResetFilters = () => {
+    setSearchTerm('');
+
+    updateSearchParams({
+      query: undefined,
+      status: undefined,
+      source: undefined,
+      period: undefined,
+      page: undefined,
+    });
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <div className="relative min-w-[286px] max-w-[494px]">
+        <Input
+          type="text"
+          value={searchTerm}
+          onChange={(event) => setSearchTerm(event.target.value)}
+          placeholder={_(msg`Search documents...`)}
+          className="h-9 w-full pe-9"
+        />
+
+        {searchTerm.length > 0 && (
+          <button
+            type="button"
+            aria-label={_(msg`Clear search`)}
+            className="absolute inset-y-0 end-0 flex w-9 items-center justify-center text-muted-foreground hover:text-foreground"
+            onClick={() => {
+              setSearchTerm('');
+              updateSearchParams({ query: undefined, page: undefined }, { replace: true });
+            }}
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+
+      <DataTableFacetedFilter
+        title={_(msg`Status`)}
+        options={statusOptions}
+        selectedValues={selectedStatusValues}
+        showSearch={false}
+        onSelectedValuesChange={(values) => {
+          updateSearchParams(
+            {
+              status: toCommaSeparatedSearchParam(values),
+              page: undefined,
+            },
+            { replace: true },
+          );
+        }}
+      />
+
+      <DataTableFacetedFilter
+        title={_(msg`Source`)}
+        options={sourceOptions}
+        selectedValues={selectedSourceValues}
+        showSearch={false}
+        onSelectedValuesChange={(values) => {
+          updateSearchParams(
+            {
+              source: toCommaSeparatedSearchParam(values),
+              page: undefined,
+            },
+            { replace: true },
+          );
+        }}
+      />
+
+      <DataTableFacetedFilter
+        title={_(msg`Time`)}
+        options={periodOptions}
+        selectedValues={period ? [period] : []}
+        singleSelect
+        showSearch={false}
+        onSelectedValuesChange={(values) => {
+          const nextPeriod = values[0];
+
+          updateSearchParams(
+            {
+              period: nextPeriod ?? undefined,
+              page: undefined,
+            },
+            { replace: true },
+          );
+        }}
+      />
+
+      {hasActiveFilters && (
+        <Button variant="ghost" size="sm" onClick={onResetFilters}>
+          <Trans>Reset</Trans>
+          <XIcon className="ml-2 h-4 w-4" />
+        </Button>
+      )}
+    </div>
+  );
+};

apps/remix/app/components/tables/templates-table-toolbar.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { TemplateType } from '@prisma/client';
+import { Globe2Icon, LockIcon, XIcon } from 'lucide-react';
+import { useSearchParams } from 'react-router';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { parseToStringArray, toCommaSeparatedSearchParam } from '@documenso/lib/utils/params';
+import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableFacetedFilterOption } from '@documenso/ui/primitives/data-table-faceted-filter';
+import { DataTableFacetedFilter } from '@documenso/ui/primitives/data-table-faceted-filter';
+import { Input } from '@documenso/ui/primitives/input';
+
+export const TemplatesTableToolbar = () => {
+  const { _ } = useLingui();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const query = searchParams.get('query') ?? '';
+  const typeParam = searchParams.get('type');
+
+  const selectedTypeValues = useMemo(() => parseToStringArray(typeParam), [typeParam]);
+
+  const [searchTerm, setSearchTerm] = useState(query);
+  const debouncedSearchTerm = useDebouncedValue(searchTerm, 500);
+
+  useEffect(() => {
+    setSearchTerm(query);
+  }, [query]);
+
+  useEffect(() => {
+    if (debouncedSearchTerm !== searchTerm) {
+      return;
+    }
+
+    if (debouncedSearchTerm === query) {
+      return;
+    }
+
+    updateSearchParams(
+      { query: debouncedSearchTerm || undefined, page: undefined },
+      { replace: true },
+    );
+  }, [debouncedSearchTerm, query, searchTerm, updateSearchParams]);
+
+  const typeOptions = useMemo<DataTableFacetedFilterOption[]>(
+    () => [
+      {
+        label: _(msg`Public`),
+        value: TemplateType.PUBLIC,
+        icon: Globe2Icon,
+        iconClassName: 'text-green-500 dark:text-green-300',
+      },
+      {
+        label: _(msg`Private`),
+        value: TemplateType.PRIVATE,
+        icon: LockIcon,
+        iconClassName: 'text-blue-600 dark:text-blue-300',
+      },
+    ],
+    [_],
+  );
+
+  const hasActiveFilters = query.length > 0 || selectedTypeValues.length > 0;
+
+  const onResetFilters = () => {
+    setSearchTerm('');
+
+    updateSearchParams({
+      query: undefined,
+      type: undefined,
+      page: undefined,
+    });
+  };
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <div className="relative min-w-[286px] max-w-[494px]">
+        <Input
+          type="text"
+          value={searchTerm}
+          onChange={(event) => setSearchTerm(event.target.value)}
+          placeholder={_(msg`Search templates...`)}
+          className="h-9 w-full pe-9"
+        />
+
+        {searchTerm.length > 0 && (
+          <button
+            type="button"
+            aria-label={_(msg`Clear search`)}
+            className="absolute inset-y-0 end-0 flex w-9 items-center justify-center text-muted-foreground hover:text-foreground"
+            onClick={() => {
+              setSearchTerm('');
+              updateSearchParams({ query: undefined, page: undefined }, { replace: true });
+            }}
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+
+      <DataTableFacetedFilter
+        title={_(msg`Type`)}
+        options={typeOptions}
+        selectedValues={selectedTypeValues}
+        showSearch={false}
+        onSelectedValuesChange={(values) => {
+          updateSearchParams(
+            {
+              type: toCommaSeparatedSearchParam(values),
+              page: undefined,
+            },
+            { replace: true },
+          );
+        }}
+      />
+
+      {hasActiveFilters && (
+        <Button variant="ghost" size="sm" onClick={onResetFilters}>
+          <Trans>Reset</Trans>
+          <XIcon className="ml-2 h-4 w-4" />
+        </Button>
+      )}
+    </div>
+  );
+};

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx

@@ -1,35 +1,32 @@
 import { useSessionStorage } from '@documenso/lib/client-only/hooks/use-session-storage';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { STATS_COUNT_CAP } from '@documenso/lib/constants/document';
 import { SKIP_QUERY_BATCH_META } from '@documenso/lib/constants/trpc';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { parseToIntegerArray } from '@documenso/lib/utils/params';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { trpc } from '@documenso/trpc/react';
 import type { TFindDocumentsInternalResponse } from '@documenso/trpc/server/document-router/find-documents-internal.types';
 import { ZFindDocumentsInternalRequestSchema } from '@documenso/trpc/server/document-router/find-documents-internal.types';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import type { RowSelectionState } from '@documenso/ui/primitives/data-table';
-import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import type { DataTableFacetedFilterOption } from '@documenso/ui/primitives/data-table-faceted-filter';
 import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType, FolderType, OrganisationType } from '@prisma/client';
 import { useEffect, useMemo, useState } from 'react';
-import { Link, useParams, useSearchParams } from 'react-router';
+import { useParams, useSearchParams } from 'react-router';
 import { z } from 'zod';
 
 import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
 import { EnvelopesBulkDeleteDialog } from '~/components/dialogs/envelopes-bulk-delete-dialog';
 import { EnvelopesBulkMoveDialog } from '~/components/dialogs/envelopes-bulk-move-dialog';
-import { DocumentSearch } from '~/components/general/document/document-search';
-import { DocumentStatus } from '~/components/general/document/document-status';
+import { FRIENDLY_STATUS_MAP } from '~/components/general/document/document-status';
 import { EnvelopeDropZoneWrapper } from '~/components/general/envelope/envelope-drop-zone-wrapper';
 import { FolderGrid } from '~/components/general/folder/folder-grid';
-import { PeriodSelector } from '~/components/general/period-selector';
 import { DocumentsTable } from '~/components/tables/documents-table';
 import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
-import { DocumentsTableSenderFilter } from '~/components/tables/documents-table-sender-filter';
+import { DocumentsTableToolbar } from '~/components/tables/documents-table-toolbar';
 import { EnvelopesTableBulkActionBar } from '~/components/tables/envelopes-table-bulk-action-bar';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -49,6 +46,8 @@ const ZSearchParamsSchema = ZFindDocumentsInternalRequestSchema.pick({
 });
 
 export default function DocumentsPage() {
+  const { _ } = useLingui();
+
   const organisation = useCurrentOrganisation();
   const team = useCurrentTeam();
 
@@ -90,35 +89,36 @@ export default function DocumentsPage() {
     },
   );
 
-  const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
-    const params = new URLSearchParams(searchParams);
+  const statusOptions = useMemo<DataTableFacetedFilterOption[]>(() => {
+    return [
+      ExtendedDocumentStatus.INBOX,
+      ExtendedDocumentStatus.PENDING,
+      ExtendedDocumentStatus.COMPLETED,
+      ExtendedDocumentStatus.DRAFT,
+      ExtendedDocumentStatus.REJECTED,
+    ]
+      .filter((status) => {
+        if (organisation.type === OrganisationType.PERSONAL) {
+          return status !== ExtendedDocumentStatus.INBOX;
+        }
 
-    params.set('status', value);
+        return true;
+      })
+      .map((status) => {
+        const { label, icon, color } = FRIENDLY_STATUS_MAP[status];
 
-    if (value === ExtendedDocumentStatus.ALL) {
-      params.delete('status');
-    }
+        return {
+          label: _(label),
+          value: status,
+          icon,
+          iconClassName: color,
+        };
+      });
+  }, [organisation.type, _]);
 
-    if (value === ExtendedDocumentStatus.INBOX && organisation.type === OrganisationType.PERSONAL) {
-      params.delete('status');
-    }
+  const selectedStatuses = findDocumentSearchParams.status ?? [];
 
-    if (params.has('page')) {
-      params.delete('page');
-    }
-
-    let path = formatDocumentsPath(team.url);
-
-    if (folderId) {
-      path += `/f/${folderId}`;
-    }
-
-    if (params.toString()) {
-      path += `?${params.toString()}`;
-    }
-
-    return path;
-  };
+  const selectedStatus = selectedStatuses.length === 1 ? selectedStatuses[0] : ExtendedDocumentStatus.ALL;
 
   useEffect(() => {
     if (data?.stats) {
@@ -142,55 +142,16 @@ export default function DocumentsPage() {
               <Trans>Documents</Trans>
             </h2>
           </div>
+        </div>
 
-          <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
-            <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto">
-              <TabsList>
-                {[
-                  ExtendedDocumentStatus.INBOX,
-                  ExtendedDocumentStatus.PENDING,
-                  ExtendedDocumentStatus.COMPLETED,
-                  ExtendedDocumentStatus.DRAFT,
-                  ExtendedDocumentStatus.ALL,
-                ]
-                  .filter((value) => {
-                    if (organisation.type === OrganisationType.PERSONAL) {
-                      return value !== ExtendedDocumentStatus.INBOX;
-                    }
-
-                    return true;
-                  })
-                  .map((value) => (
-                    <TabsTrigger key={value} className="min-w-[60px] hover:text-foreground" value={value} asChild>
-                      <Link to={getTabHref(value)} preventScrollReset>
-                        <DocumentStatus status={value} />
-
-                        {value !== ExtendedDocumentStatus.ALL && (
-                          <span className="ml-1 inline-block opacity-50">
-                            {stats[value] >= STATS_COUNT_CAP ? `${STATS_COUNT_CAP.toLocaleString()}+` : stats[value]}
-                          </span>
-                        )}
-                      </Link>
-                    </TabsTrigger>
-                  ))}
-              </TabsList>
-            </Tabs>
-
-            {team && <DocumentsTableSenderFilter teamId={team.id} />}
-
-            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
-              <PeriodSelector />
-            </div>
-            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
-              <DocumentSearch initialValue={findDocumentSearchParams.query} />
-            </div>
-          </div>
+        <div className="mt-8">
+          <DocumentsTableToolbar teamId={team?.id} statusOptions={statusOptions} statusCounts={stats} />
         </div>
 
         <div className="mt-8">
           <div>
             {data && data.count === 0 ? (
-              <DocumentsTableEmptyState status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL} />
+              <DocumentsTableEmptyState status={selectedStatus} />
             ) : (
               <DocumentsTable
                 data={data}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates._index.tsx

@@ -1,7 +1,9 @@
 import { useSessionStorage } from '@documenso/lib/client-only/hooks/use-session-storage';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { FolderType } from '@documenso/lib/types/folder-type';
+import { ZFindSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { parseToStringArray } from '@documenso/lib/utils/params';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
@@ -9,6 +11,7 @@ import type { RowSelectionState } from '@documenso/ui/primitives/data-table';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
+import type { TemplateType } from '@prisma/client';
 import { EnvelopeType, OrganisationType } from '@prisma/client';
 import { Bird } from 'lucide-react';
 import { parseAsStringLiteral, useQueryState } from 'nuqs';
@@ -21,6 +24,7 @@ import { EnvelopeDropZoneWrapper } from '~/components/general/envelope/envelope-
 import { FolderGrid } from '~/components/general/folder/folder-grid';
 import { EnvelopesTableBulkActionBar } from '~/components/tables/envelopes-table-bulk-action-bar';
 import { TemplatesTable } from '~/components/tables/templates-table';
+import { TemplatesTableToolbar } from '~/components/tables/templates-table-toolbar';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
 
@@ -32,6 +36,12 @@ export function meta() {
   return appMetaTags(msg`Templates`);
 }
 
+const ZTemplatesSearchParamsSchema = ZFindSearchParamsSchema.pick({
+  query: true,
+  page: true,
+  perPage: true,
+});
+
 export default function TemplatesPage() {
   const team = useCurrentTeam();
   const organisation = useCurrentOrganisation();
@@ -39,8 +49,15 @@ export default function TemplatesPage() {
   const { folderId } = useParams();
   const [searchParams] = useSearchParams();
 
-  const page = Number(searchParams.get('page')) || 1;
-  const perPage = Number(searchParams.get('perPage')) || 10;
+  const findTemplatesSearchParams = useMemo(
+    () => ZTemplatesSearchParamsSchema.safeParse(Object.fromEntries(searchParams.entries())).data || {},
+    [searchParams],
+  );
+
+  const typeFilter = useMemo(() => {
+    const selected = parseToStringArray(searchParams.get('type'));
+    return selected.length === 1 ? (selected[0] as TemplateType) : undefined;
+  }, [searchParams]);
 
   const [view, setView] = useQueryState('view', parseAsStringLiteral(TEMPLATE_VIEWS).withDefault('team'));
 
@@ -60,8 +77,8 @@ export default function TemplatesPage() {
 
   const teamTemplatesQuery = trpc.template.findTemplates.useQuery(
     {
-      page,
-      perPage,
+      ...findTemplatesSearchParams,
+      type: typeFilter,
       folderId,
     },
     {
@@ -71,8 +88,8 @@ export default function TemplatesPage() {
 
   const orgTemplatesQuery = trpc.template.findOrganisationTemplates.useQuery(
     {
-      page,
-      perPage,
+      page: findTemplatesSearchParams.page,
+      perPage: findTemplatesSearchParams.perPage,
     },
     {
       enabled: isOrgView,
@@ -129,6 +146,12 @@ export default function TemplatesPage() {
             </div>
           )}
 
+          {!isOrgView && (
+            <div className="mt-8">
+              <TemplatesTableToolbar />
+            </div>
+          )}
+
           <div className="mt-8">
             {activeQuery.data && activeQuery.data.count === 0 ? (
               <div className="flex h-96 flex-col items-center justify-center gap-y-4 text-muted-foreground/60">

packages/app-tests/e2e/fixtures/documents.ts

@@ -2,12 +2,27 @@ import type { Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 
 export const checkDocumentTabCount = async (page: Page, tabName: string, count: number) => {
-  await page.getByRole('tab', { name: tabName }).click();
+  const statusMap: Record<string, string | undefined> = {
+    Inbox: 'INBOX',
+    Pending: 'PENDING',
+    Completed: 'COMPLETED',
+    Draft: 'DRAFT',
+    All: undefined,
+  };
 
-  if (tabName !== 'All') {
-    await expect(page.getByRole('tab', { name: tabName })).toContainText(count.toString());
+  const currentUrl = new URL(page.url());
+  const status = statusMap[tabName];
+
+  if (status) {
+    currentUrl.searchParams.set('status', status);
+  } else {
+    currentUrl.searchParams.delete('status');
   }
 
+  currentUrl.searchParams.delete('page');
+
+  await page.goto(currentUrl.toString());
+
   if (count === 0) {
     await expect(page.getByTestId('empty-document-state')).toBeVisible();
     return;

packages/app-tests/e2e/teams/team-documents.spec.ts

@@ -27,7 +27,7 @@ test('[TEAMS]: check team documents count', async ({ page }) => {
     await checkDocumentTabCount(page, 'All', 5);
 
     // Apply filter.
-    await page.locator('button').filter({ hasText: 'Sender: All' }).click();
+    await page.getByRole('button', { name: /Sender/ }).click();
     await page.getByRole('option', { name: teamMember2.name ?? '' }).click();
     await page.waitForURL(/senderIds/);
 
@@ -42,6 +42,21 @@ test('[TEAMS]: check team documents count', async ({ page }) => {
   }
 });
 
+test('[TEAMS]: supports filtering documents by multiple statuses', async ({ page }) => {
+  const { team, teamOwner } = await seedTeamDocuments();
+
+  await apiSignin({
+    page,
+    email: teamOwner.email,
+    redirectPath: `/t/${team.url}/documents?status=PENDING,DRAFT`,
+  });
+
+  await expect(page).toHaveURL(/status=PENDING,DRAFT/);
+  await expect(page.getByTestId('data-table-count')).toContainText('Showing 4');
+
+  await apiSignout({ page });
+});
+
 test('[TEAMS]: check team documents count with internal team email', async ({ page }) => {
   const { team, teamOwner, teamMember2, teamMember4 } = await seedTeamDocuments();
   const { team: team2, teamOwner: team2Owner, teamMember2: team2Member2 } = await seedTeamDocuments();
@@ -122,7 +137,7 @@ test('[TEAMS]: check team documents count with internal team email', async ({ pa
     await checkDocumentTabCount(page, 'All', 11);
 
     // Apply filter.
-    await page.locator('button').filter({ hasText: 'Sender: All' }).click();
+    await page.getByRole('button', { name: /Sender/ }).click();
     await page.getByRole('option', { name: teamMember2.name ?? '' }).click();
     await page.waitForURL(/senderIds/);
 
@@ -209,7 +224,7 @@ test('[TEAMS]: check team documents count with external team email', async ({ pa
   await checkDocumentTabCount(page, 'All', 9);
 
   // Apply filter.
-  await page.locator('button').filter({ hasText: 'Sender: All' }).click();
+  await page.getByRole('button', { name: /Sender/ }).click();
   await page.getByRole('option', { name: teamMember2.name ?? '' }).click();
   await page.waitForURL(/senderIds/);
 

packages/app-tests/e2e/templates/manage-templates.spec.ts

@@ -1,7 +1,8 @@
+import { prisma } from '@documenso/prisma';
 import { seedTeam, seedTeamMember } from '@documenso/prisma/seed/teams';
 import { seedTemplate } from '@documenso/prisma/seed/templates';
 import { expect, test } from '@playwright/test';
-import { TeamMemberRole } from '@prisma/client';
+import { TeamMemberRole, TemplateType } from '@prisma/client';
 
 import { apiSignin } from '../fixtures/authentication';
 import { openDropdownMenu } from '../fixtures/generic';
@@ -40,6 +41,56 @@ test('[TEMPLATES]: view templates', async ({ page }) => {
   await expect(page.getByTestId('data-table-count')).toContainText('Showing 2 results');
 });
 
+test('[TEMPLATES]: supports search and multi-type filtering', async ({ page }) => {
+  const { team, owner } = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const publicTemplate = await seedTemplate({
+    title: 'Public Team Template',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  const privateTemplate = await seedTemplate({
+    title: 'Private Team Template',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  await prisma.envelope.update({
+    where: {
+      id: publicTemplate.id,
+    },
+    data: {
+      templateType: TemplateType.PUBLIC,
+    },
+  });
+
+  await prisma.envelope.update({
+    where: {
+      id: privateTemplate.id,
+    },
+    data: {
+      templateType: TemplateType.PRIVATE,
+    },
+  });
+
+  await apiSignin({
+    page,
+    email: owner.email,
+    redirectPath: `/t/${team.url}/templates?query=Public&type=PUBLIC`,
+  });
+
+  await expect(page.getByRole('link', { name: 'Public Team Template' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Private Team Template' })).not.toBeVisible();
+
+  await page.goto(`/t/${team.url}/templates?type=PUBLIC,PRIVATE`);
+
+  await expect(page.getByRole('link', { name: 'Public Team Template' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Private Team Template' })).toBeVisible();
+});
+
 test('[TEMPLATES]: delete template', async ({ page }) => {
   const { team, owner, organisation } = await seedTeam({
     createTeamMembers: 1,

packages/lib/client-only/hooks/use-update-search-params.ts

@@ -1,19 +1,37 @@
+import { useCallback, useRef } from 'react';
+
+import type { NavigateOptions } from 'react-router';
 import { useSearchParams } from 'react-router';
 
-export const useUpdateSearchParams = () => {
+type SearchParamValues = Record<string, string | number | boolean | null | undefined>;
+type UpdateSearchParamsOptions = Pick<NavigateOptions, 'preventScrollReset' | 'replace' | 'state'>;
+
+export const useUpdateSearchParams = (defaultOptions: UpdateSearchParamsOptions = {}) => {
   const [searchParams, setSearchParams] = useSearchParams();
 
-  return (params: Record<string, string | number | boolean | null | undefined>) => {
-    const nextSearchParams = new URLSearchParams(searchParams?.toString() ?? '');
+  const searchParamsRef = useRef(searchParams);
+  searchParamsRef.current = searchParams;
 
-    Object.entries(params).forEach(([key, value]) => {
-      if (value === undefined || value === null) {
-        nextSearchParams.delete(key);
-      } else {
-        nextSearchParams.set(key, String(value));
-      }
-    });
+  const defaultOptionsRef = useRef(defaultOptions);
+  defaultOptionsRef.current = defaultOptions;
 
-    setSearchParams(nextSearchParams);
-  };
+  return useCallback(
+    (params: SearchParamValues, options?: UpdateSearchParamsOptions) => {
+      const nextSearchParams = new URLSearchParams(searchParamsRef.current?.toString() ?? '');
+
+      Object.entries(params).forEach(([key, value]) => {
+        if (value === undefined || value === null) {
+          nextSearchParams.delete(key);
+        } else {
+          nextSearchParams.set(key, String(value));
+        }
+      });
+
+      setSearchParams(nextSearchParams, {
+        ...defaultOptionsRef.current,
+        ...options,
+      });
+    },
+    [setSearchParams],
+  );
 };

packages/lib/server-only/document/find-documents.ts

@@ -18,14 +18,31 @@ import type { FindResultResponse } from '../../types/search-params';
 import { maskRecipientTokensForDocument } from '../../utils/mask-recipient-tokens-for-document';
 import { getTeamById } from '../team/get-team';
 
-export type PeriodSelectorValue = '' | '7d' | '14d' | '30d';
+export type PeriodSelectorValue = '' | 'all' | '7d' | '14d' | '30d';
+
+const normalizeStatuses = (
+  status: ExtendedDocumentStatus | ExtendedDocumentStatus[] | undefined,
+): ExtendedDocumentStatus[] => {
+  if (!status) {
+    return [ExtendedDocumentStatus.ALL];
+  }
+
+  const arr = Array.isArray(status) ? status : [status];
+  const deduped = Array.from(new Set(arr));
+
+  if (deduped.length === 0 || deduped.includes(ExtendedDocumentStatus.ALL)) {
+    return [ExtendedDocumentStatus.ALL];
+  }
+
+  return deduped;
+};
 
 export type FindDocumentsOptions = {
   userId: number;
   teamId?: number;
   templateId?: number;
-  source?: DocumentSource;
-  status?: ExtendedDocumentStatus;
+  source?: DocumentSource | DocumentSource[];
+  status?: ExtendedDocumentStatus | ExtendedDocumentStatus[];
   page?: number;
   perPage?: number;
   orderBy?: {
@@ -107,7 +124,7 @@ export const findDocuments = async ({
   teamId,
   templateId,
   source,
-  status = ExtendedDocumentStatus.ALL,
+  status,
   page = 1,
   perPage = 10,
   orderBy,
@@ -135,6 +152,8 @@ export const findDocuments = async ({
   const hasSearch = searchQuery.length > 0;
   const searchPattern = `%${searchQuery}%`;
 
+  const normalizedStatuses = normalizeStatuses(status);
+
   // ─── Base query with common filters ──────────────────────────────────
   //
   // Every code path starts from this base: Envelope rows filtered by type,
@@ -151,7 +170,7 @@ export const findDocuments = async ({
       folderId !== undefined ? qb.where('Envelope.folderId', '=', folderId) : qb.where('Envelope.folderId', 'is', null);
 
     // Period filter
-    if (period) {
+    if (period && period !== 'all') {
       const daysAgo = parseInt(period.replace(/d$/, ''), 10);
       const startOfPeriod = DateTime.now().minus({ days: daysAgo }).startOf('day');
 
@@ -165,7 +184,15 @@ export const findDocuments = async ({
 
     // Source filter (enum cast)
     if (source) {
-      qb = qb.where('Envelope.source', '=', sql.lit(source));
+      const sources = Array.isArray(source) ? source : [source];
+
+      if (sources.length > 0) {
+        qb = qb.where(
+          'Envelope.source',
+          'in',
+          sources.map((s) => sql.lit(s)),
+        );
+      }
     }
 
     // Template filter
@@ -204,35 +231,32 @@ export const findDocuments = async ({
 
   // ─── Personal path filters ───────────────────────────────────────────
 
-  const applyPersonalFilters = (qb: EnvelopeQueryBuilder): EnvelopeQueryBuilder | null => {
+  const buildPersonalStatusPredicate = (
+    eb: EnvelopeExpressionBuilder,
+    s: ExtendedDocumentStatus,
+  ): Expression<SqlBool> => {
     // Deleted filter: owned → deletedAt IS NULL, received → documentDeletedAt IS NULL
-    const personalDeletedFilter = (eb: EnvelopeExpressionBuilder) =>
-      eb.or([
-        eb.and([eb('Envelope.userId', '=', user.id), eb('Envelope.deletedAt', 'is', null)]),
-        recipientExists(eb, user.email, (reb) => reb('Recipient.documentDeletedAt', 'is', null)),
-      ]);
+    const personalDeletedFilter = eb.or([
+      eb.and([eb('Envelope.userId', '=', user.id), eb('Envelope.deletedAt', 'is', null)]),
+      recipientExists(eb, user.email, (reb) => reb('Recipient.documentDeletedAt', 'is', null)),
+    ]);
 
-    return match<ExtendedDocumentStatus, EnvelopeQueryBuilder | null>(status)
+    return match<ExtendedDocumentStatus, Expression<SqlBool>>(s)
       .with(ExtendedDocumentStatus.ALL, () =>
-        qb.where((eb) =>
-          eb.and([
-            personalDeletedFilter(eb),
-            eb.or([
-              eb('Envelope.userId', '=', user.id),
-              eb.and([
-                eb('Envelope.status', 'in', [sql.lit(DocumentStatus.COMPLETED), sql.lit(DocumentStatus.PENDING)]),
-                recipientExists(eb, user.email),
-              ]),
+        eb.and([
+          personalDeletedFilter,
+          eb.or([
+            eb('Envelope.userId', '=', user.id),
+            eb.and([
+              eb('Envelope.status', 'in', [sql.lit(DocumentStatus.COMPLETED), sql.lit(DocumentStatus.PENDING)]),
+              recipientExists(eb, user.email),
             ]),
           ]),
-        ),
+        ]),
       )
       .with(ExtendedDocumentStatus.INBOX, () =>
-        qb.where('Envelope.status', '!=', sql.lit(ExtendedDocumentStatus.DRAFT)).where((eb) =>
-          // Single EXISTS check: the recipient must be NOT_SIGNED, non-CC, and
-          // not soft-deleted. This replaces the previous personalDeletedFilter +
-          // separate recipientExists pair, eliminating a hashed SubPlan that
-          // materialised all recipient rows for this email (~125k for heavy users).
+        eb.and([
+          eb('Envelope.status', '!=', sql.lit(DocumentStatus.DRAFT)),
           recipientExists(eb, user.email, (reb) =>
             reb.and([
               reb('Recipient.documentDeletedAt', 'is', null),
@@ -240,66 +264,62 @@ export const findDocuments = async ({
               reb('role', '!=', sql.lit(RecipientRole.CC)),
             ]),
           ),
-        ),
+        ]),
       )
       .with(ExtendedDocumentStatus.DRAFT, () =>
-        qb
-          .where('Envelope.userId', '=', user.id)
-          .where('Envelope.deletedAt', 'is', null)
-          .where('Envelope.status', '=', sql.lit(DocumentStatus.DRAFT)),
+        eb.and([
+          eb('Envelope.userId', '=', user.id),
+          eb('Envelope.deletedAt', 'is', null),
+          eb('Envelope.status', '=', sql.lit(DocumentStatus.DRAFT)),
+        ]),
       )
       .with(ExtendedDocumentStatus.PENDING, () =>
-        qb
-          .where('Envelope.status', '=', sql.lit(DocumentStatus.PENDING))
-          .where((eb) =>
-            eb.and([
-              personalDeletedFilter(eb),
-              eb.or([
-                eb('Envelope.userId', '=', user.id),
-                recipientExists(eb, user.email, (reb) =>
-                  reb.and([
-                    reb('Recipient.signingStatus', '=', sql.lit(SigningStatus.SIGNED)),
-                    reb('Recipient.role', '!=', sql.lit(RecipientRole.CC)),
-                  ]),
-                ),
+        eb.and([
+          eb('Envelope.status', '=', sql.lit(DocumentStatus.PENDING)),
+          personalDeletedFilter,
+          eb.or([
+            eb('Envelope.userId', '=', user.id),
+            recipientExists(eb, user.email, (reb) =>
+              reb.and([
+                reb('Recipient.signingStatus', '=', sql.lit(SigningStatus.SIGNED)),
+                reb('Recipient.role', '!=', sql.lit(RecipientRole.CC)),
               ]),
-            ]),
-          ),
+            ),
+          ]),
+        ]),
       )
       .with(ExtendedDocumentStatus.COMPLETED, () =>
-        qb
-          .where('Envelope.status', '=', sql.lit(ExtendedDocumentStatus.COMPLETED))
-          .where((eb) =>
-            eb.and([
-              personalDeletedFilter(eb),
-              eb.or([eb('Envelope.userId', '=', user.id), recipientExists(eb, user.email)]),
-            ]),
-          ),
+        eb.and([
+          eb('Envelope.status', '=', sql.lit(DocumentStatus.COMPLETED)),
+          personalDeletedFilter,
+          eb.or([eb('Envelope.userId', '=', user.id), recipientExists(eb, user.email)]),
+        ]),
       )
       .with(ExtendedDocumentStatus.REJECTED, () =>
-        qb
-          .where('Envelope.status', '=', sql.lit(ExtendedDocumentStatus.REJECTED))
-          .where((eb) =>
-            eb.and([
-              personalDeletedFilter(eb),
-              eb.or([
-                eb('Envelope.userId', '=', user.id),
-                recipientExists(eb, user.email, (reb) =>
-                  reb('Recipient.signingStatus', '=', sql.lit(SigningStatus.REJECTED)),
-                ),
-              ]),
-            ]),
-          ),
+        eb.and([
+          eb('Envelope.status', '=', sql.lit(DocumentStatus.REJECTED)),
+          personalDeletedFilter,
+          eb.or([
+            eb('Envelope.userId', '=', user.id),
+            recipientExists(eb, user.email, (reb) =>
+              reb('Recipient.signingStatus', '=', sql.lit(SigningStatus.REJECTED)),
+            ),
+          ]),
+        ]),
       )
       .exhaustive();
   };
 
+  const applyPersonalFilters = (qb: EnvelopeQueryBuilder): EnvelopeQueryBuilder =>
+    qb.where((eb) => eb.or(normalizedStatuses.map((s) => buildPersonalStatusPredicate(eb, s))));
+
   // ─── Team path filters ───────────────────────────────────────────────
 
-  const applyTeamFilters = (
-    qb: EnvelopeQueryBuilder,
+  const buildTeamStatusPredicate = (
+    eb: EnvelopeExpressionBuilder,
     teamData: Team & { teamEmail: TeamEmail | null; currentTeamRole: TeamMemberRole },
-  ): EnvelopeQueryBuilder | null => {
+    s: ExtendedDocumentStatus,
+  ): Expression<SqlBool> | null => {
     const teamEmail = teamData.teamEmail?.email ?? null;
 
     const allowedVisibilities = match(teamData.currentTeamRole)
@@ -311,127 +331,152 @@ export const findDocuments = async ({
       .with(TeamMemberRole.MANAGER, () => [DocumentVisibility.EVERYONE, DocumentVisibility.MANAGER_AND_ABOVE])
       .otherwise(() => [DocumentVisibility.EVERYONE]);
 
-    // Visibility: meets role threshold OR directly involved
-    const visibilityFilter = (eb: EnvelopeExpressionBuilder) =>
-      eb.or([
-        eb(
-          'Envelope.visibility',
-          'in',
-          allowedVisibilities.map((v) => sql.lit(v)),
-        ),
-        eb('Envelope.userId', '=', user.id),
-        recipientExists(eb, user.email),
-      ]);
+    const visibilityFilter = eb.or([
+      eb(
+        'Envelope.visibility',
+        'in',
+        allowedVisibilities.map((v) => sql.lit(v)),
+      ),
+      eb('Envelope.userId', '=', user.id),
+      recipientExists(eb, user.email),
+    ]);
 
-    // Deleted filter for team path
-    const teamDeletedFilter = (eb: EnvelopeExpressionBuilder) => {
-      const branches = [eb.and([eb('Envelope.teamId', '=', teamData.id), eb('Envelope.deletedAt', 'is', null)])];
+    const teamDeletedBranches = [
+      eb.and([eb('Envelope.teamId', '=', teamData.id), eb('Envelope.deletedAt', 'is', null)]),
+    ];
 
-      if (teamEmail) {
-        branches.push(eb.and([senderEmailIs(eb, teamEmail), eb('Envelope.deletedAt', 'is', null)]));
-        branches.push(recipientExists(eb, teamEmail, (reb) => reb('Recipient.documentDeletedAt', 'is', null)));
-      }
+    if (teamEmail) {
+      teamDeletedBranches.push(eb.and([senderEmailIs(eb, teamEmail), eb('Envelope.deletedAt', 'is', null)]));
+      teamDeletedBranches.push(recipientExists(eb, teamEmail, (reb) => reb('Recipient.documentDeletedAt', 'is', null)));
+    }
 
-      return eb.or(branches);
-    };
+    const teamDeletedFilter = eb.or(teamDeletedBranches);
 
-    return match<ExtendedDocumentStatus, EnvelopeQueryBuilder | null>(status)
-      .with(ExtendedDocumentStatus.ALL, () =>
-        qb.where((eb) => {
-          const accessBranches = [eb('Envelope.teamId', '=', teamData.id)];
+    return match<ExtendedDocumentStatus, Expression<SqlBool> | null>(s)
+      .with(ExtendedDocumentStatus.ALL, () => {
+        const accessBranches = [eb('Envelope.teamId', '=', teamData.id)];
 
-          if (teamEmail) {
-            accessBranches.push(senderEmailIs(eb, teamEmail));
-            accessBranches.push(
-              eb.and([eb('status', '!=', sql.lit(ExtendedDocumentStatus.DRAFT)), recipientExists(eb, teamEmail)]),
-            );
-          }
+        if (teamEmail) {
+          accessBranches.push(senderEmailIs(eb, teamEmail));
+          accessBranches.push(
+            eb.and([eb('Envelope.status', '!=', sql.lit(DocumentStatus.DRAFT)), recipientExists(eb, teamEmail)]),
+          );
+        }
 
-          return eb.and([teamDeletedFilter(eb), visibilityFilter(eb), eb.or(accessBranches)]);
-        }),
-      )
+        return eb.and([teamDeletedFilter, visibilityFilter, eb.or(accessBranches)]);
+      })
       .with(ExtendedDocumentStatus.INBOX, () => {
         if (!teamEmail) {
           return null;
         }
 
-        return qb.where('Envelope.status', '!=', sql.lit(ExtendedDocumentStatus.DRAFT)).where((eb) =>
-          eb.and([
-            visibilityFilter(eb),
-            // Single EXISTS check: the team-email recipient must be NOT_SIGNED,
-            // non-CC, and not soft-deleted. Replaces teamDeletedFilter + separate
-            // recipientExists, eliminating a hashed SubPlan (~79k rows).
+        return eb.and([
+          eb('Envelope.status', '!=', sql.lit(DocumentStatus.DRAFT)),
+          visibilityFilter,
+          recipientExists(eb, teamEmail, (reb) =>
+            reb.and([
+              reb('Recipient.documentDeletedAt', 'is', null),
+              reb('Recipient.signingStatus', '=', sql.lit(SigningStatus.NOT_SIGNED)),
+              reb('Recipient.role', '!=', sql.lit(RecipientRole.CC)),
+            ]),
+          ),
+        ]);
+      })
+      .with(ExtendedDocumentStatus.DRAFT, () => {
+        const accessBranches = [eb('Envelope.teamId', '=', teamData.id)];
+
+        if (teamEmail) {
+          accessBranches.push(senderEmailIs(eb, teamEmail));
+        }
+
+        return eb.and([
+          eb('Envelope.status', '=', sql.lit(DocumentStatus.DRAFT)),
+          teamDeletedFilter,
+          visibilityFilter,
+          eb.or(accessBranches),
+        ]);
+      })
+      .with(ExtendedDocumentStatus.PENDING, () => {
+        const accessBranches = [eb('Envelope.teamId', '=', teamData.id)];
+
+        if (teamEmail) {
+          accessBranches.push(senderEmailIs(eb, teamEmail));
+          accessBranches.push(
             recipientExists(eb, teamEmail, (reb) =>
               reb.and([
-                reb('Recipient.documentDeletedAt', 'is', null),
-                reb('Recipient.signingStatus', '=', sql.lit(SigningStatus.NOT_SIGNED)),
+                reb('Recipient.signingStatus', '=', sql.lit(SigningStatus.SIGNED)),
                 reb('Recipient.role', '!=', sql.lit(RecipientRole.CC)),
               ]),
             ),
-          ]),
-        );
+          );
+        }
+
+        return eb.and([
+          eb('Envelope.status', '=', sql.lit(DocumentStatus.PENDING)),
+          teamDeletedFilter,
+          visibilityFilter,
+          eb.or(accessBranches),
+        ]);
       })
-      .with(ExtendedDocumentStatus.DRAFT, () =>
-        qb.where('Envelope.status', '=', sql.lit(ExtendedDocumentStatus.DRAFT)).where((eb) => {
-          const accessBranches = [eb('Envelope.teamId', '=', teamData.id)];
+      .with(ExtendedDocumentStatus.COMPLETED, () => {
+        const accessBranches = [eb('Envelope.teamId', '=', teamData.id)];
 
-          if (teamEmail) {
-            accessBranches.push(senderEmailIs(eb, teamEmail));
-          }
+        if (teamEmail) {
+          accessBranches.push(senderEmailIs(eb, teamEmail));
+          accessBranches.push(recipientExists(eb, teamEmail));
+        }
 
-          return eb.and([teamDeletedFilter(eb), visibilityFilter(eb), eb.or(accessBranches)]);
-        }),
-      )
-      .with(ExtendedDocumentStatus.PENDING, () =>
-        qb.where('Envelope.status', '=', sql.lit(ExtendedDocumentStatus.PENDING)).where((eb) => {
-          const accessBranches = [eb('Envelope.teamId', '=', teamData.id)];
+        return eb.and([
+          eb('Envelope.status', '=', sql.lit(DocumentStatus.COMPLETED)),
+          teamDeletedFilter,
+          visibilityFilter,
+          eb.or(accessBranches),
+        ]);
+      })
+      .with(ExtendedDocumentStatus.REJECTED, () => {
+        const accessBranches = [eb('Envelope.teamId', '=', teamData.id)];
 
-          if (teamEmail) {
-            accessBranches.push(senderEmailIs(eb, teamEmail));
-            accessBranches.push(
-              recipientExists(eb, teamEmail, (reb) =>
-                reb.and([
-                  reb('Recipient.signingStatus', '=', sql.lit(SigningStatus.SIGNED)),
-                  reb('Recipient.role', '!=', sql.lit(RecipientRole.CC)),
-                ]),
-              ),
-            );
-          }
+        if (teamEmail) {
+          accessBranches.push(senderEmailIs(eb, teamEmail));
+          accessBranches.push(
+            recipientExists(eb, teamEmail, (reb) =>
+              reb('Recipient.signingStatus', '=', sql.lit(SigningStatus.REJECTED)),
+            ),
+          );
+        }
 
-          return eb.and([teamDeletedFilter(eb), visibilityFilter(eb), eb.or(accessBranches)]);
-        }),
-      )
-      .with(ExtendedDocumentStatus.COMPLETED, () =>
-        qb.where('Envelope.status', '=', sql.lit(ExtendedDocumentStatus.COMPLETED)).where((eb) => {
-          const accessBranches = [eb('Envelope.teamId', '=', teamData.id)];
-
-          if (teamEmail) {
-            accessBranches.push(senderEmailIs(eb, teamEmail));
-            accessBranches.push(recipientExists(eb, teamEmail));
-          }
-
-          return eb.and([teamDeletedFilter(eb), visibilityFilter(eb), eb.or(accessBranches)]);
-        }),
-      )
-      .with(ExtendedDocumentStatus.REJECTED, () =>
-        qb.where('Envelope.status', '=', sql.lit(ExtendedDocumentStatus.REJECTED)).where((eb) => {
-          const accessBranches = [eb('Envelope.teamId', '=', teamData.id)];
-
-          if (teamEmail) {
-            accessBranches.push(senderEmailIs(eb, teamEmail));
-            accessBranches.push(
-              recipientExists(eb, teamEmail, (reb) =>
-                reb('Recipient.signingStatus', '=', sql.lit(SigningStatus.REJECTED)),
-              ),
-            );
-          }
-
-          return eb.and([teamDeletedFilter(eb), visibilityFilter(eb), eb.or(accessBranches)]);
-        }),
-      )
+        return eb.and([
+          eb('Envelope.status', '=', sql.lit(DocumentStatus.REJECTED)),
+          teamDeletedFilter,
+          visibilityFilter,
+          eb.or(accessBranches),
+        ]);
+      })
       .exhaustive();
   };
 
+  const applyTeamFilters = (
+    qb: EnvelopeQueryBuilder,
+    teamData: Team & { teamEmail: TeamEmail | null; currentTeamRole: TeamMemberRole },
+  ): EnvelopeQueryBuilder | null => {
+    const teamEmail = teamData.teamEmail?.email ?? null;
+
+    // INBOX requires a team email; drop statuses that produce no predicate.
+    const validStatuses = normalizedStatuses.filter((s) => !(s === ExtendedDocumentStatus.INBOX && !teamEmail));
+
+    if (validStatuses.length === 0) {
+      return null;
+    }
+
+    return qb.where((eb) => {
+      const predicates = validStatuses
+        .map((s) => buildTeamStatusPredicate(eb, teamData, s))
+        .filter((p): p is Expression<SqlBool> => p !== null);
+
+      return eb.or(predicates);
+    });
+  };
+
   // ─── Assemble and execute ────────────────────────────────────────────
 
   const baseQuery = buildBaseQuery();

packages/lib/server-only/document/get-stats.ts

@@ -109,7 +109,7 @@ export const getStats = async ({ userId, teamId, period, search = '', folderId,
       folderId !== undefined ? qb.where('Envelope.folderId', '=', folderId) : qb.where('Envelope.folderId', 'is', null);
 
     // Period filter
-    if (period) {
+    if (period && period !== 'all') {
       const daysAgo = parseInt(period.replace(/d$/, ''), 10);
       const startOfPeriod = DateTime.now().minus({ days: daysAgo }).startOf('day');
 

packages/lib/server-only/template/find-templates.ts

@@ -9,7 +9,8 @@ import { getMemberRoles } from '../team/get-member-roles';
 export type FindTemplatesOptions = {
   userId: number;
   teamId: number;
-  type?: TemplateType;
+  type?: TemplateType | TemplateType[];
+  query?: string;
   page?: number;
   perPage?: number;
   folderId?: string;
@@ -19,6 +20,7 @@ export const findTemplates = async ({
   userId,
   teamId,
   type,
+  query = '',
   page = 1,
   perPage = 10,
   folderId,
@@ -31,9 +33,11 @@ export const findTemplates = async ({
     },
   });
 
+  const templateTypeFilter = type ? { in: Array.isArray(type) ? type : [type] } : undefined;
+
   const where: Prisma.EnvelopeWhereInput = {
     type: EnvelopeType.TEMPLATE,
-    templateType: type,
+    templateType: templateTypeFilter,
     AND: [
       { teamId },
       {
@@ -47,6 +51,26 @@ export const findTemplates = async ({
         ],
       },
       folderId ? { folderId } : { folderId: null },
+      ...(query
+        ? [
+            {
+              OR: [
+                {
+                  title: {
+                    contains: query,
+                    mode: 'insensitive' as const,
+                  },
+                },
+                {
+                  externalId: {
+                    contains: query,
+                    mode: 'insensitive' as const,
+                  },
+                },
+              ],
+            },
+          ]
+        : []),
     ],
   };
 

packages/lib/utils/params.ts

@@ -1,8 +1,3 @@
-/**
- * From an unknown string, parse it into an integer array.
- *
- * Filter out unknown values.
- */
 export const parseToIntegerArray = (value: unknown): number[] => {
   if (typeof value !== 'string') {
     return [];
@@ -14,6 +9,30 @@ export const parseToIntegerArray = (value: unknown): number[] => {
     .filter((value) => !isNaN(value));
 };
 
+export const parseToStringArray = (value: unknown): string[] => {
+  if (Array.isArray(value)) {
+    return value.filter((item): item is string => typeof item === 'string');
+  }
+
+  if (typeof value !== 'string') {
+    return [];
+  }
+
+  return value
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean);
+};
+
+export const parseCommaSeparatedValues = (value: unknown): string[] | undefined => {
+  const parsed = parseToStringArray(value);
+  return parsed.length > 0 ? parsed : undefined;
+};
+
+export const toCommaSeparatedSearchParam = (values: string[]): string | undefined => {
+  return values.length > 0 ? values.join(',') : undefined;
+};
+
 type GetRootHrefOptions = {
   returnEmptyRootString?: boolean;
 };

packages/trpc/server/document-router/find-documents-internal.types.ts

@@ -1,14 +1,17 @@
 import { ZDocumentManySchema } from '@documenso/lib/types/document';
 import { ZFindResultResponse } from '@documenso/lib/types/search-params';
+import { parseCommaSeparatedValues } from '@documenso/lib/utils/params';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { DocumentSource } from '@prisma/client';
 import { z } from 'zod';
 
 import { ZFindDocumentsRequestSchema } from './find-documents.types';
 
 export const ZFindDocumentsInternalRequestSchema = ZFindDocumentsRequestSchema.extend({
-  period: z.enum(['7d', '14d', '30d']).optional(),
+  period: z.enum(['all', '7d', '14d', '30d']).optional(),
   senderIds: z.array(z.number()).optional(),
-  status: z.nativeEnum(ExtendedDocumentStatus).optional(),
+  source: z.preprocess(parseCommaSeparatedValues, z.array(z.nativeEnum(DocumentSource)).optional()),
+  status: z.preprocess(parseCommaSeparatedValues, z.array(z.nativeEnum(ExtendedDocumentStatus)).optional()),
   folderId: z.string().optional(),
 });
 

packages/ui/primitives/data-table-faceted-filter.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { Check, PlusCircle } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+import { Badge } from './badge';
+import { Button } from './button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { Separator } from './separator';
+
+export type DataTableFacetedFilterOption = {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  iconClassName?: string;
+};
+
+export type DataTableFacetedFilterProps = {
+  title: string;
+  options: DataTableFacetedFilterOption[];
+  selectedValues: string[];
+  onSelectedValuesChange: (values: string[]) => void;
+  singleSelect?: boolean;
+  counts?: Record<string, number>;
+  showSearch?: boolean;
+};
+
+export const DataTableFacetedFilter = ({
+  title,
+  options,
+  selectedValues,
+  onSelectedValuesChange,
+  singleSelect,
+  counts,
+  showSearch = true,
+}: DataTableFacetedFilterProps) => {
+  const selectedValuesSet = new Set(selectedValues);
+
+  const selectedOptions = options.filter((option) => selectedValuesSet.has(option.value));
+
+  const onSelect = (value: string) => {
+    if (singleSelect) {
+      const nextValue = selectedValuesSet.has(value) ? [] : [value];
+
+      onSelectedValuesChange(nextValue);
+
+      return;
+    }
+
+    const nextValues = new Set(selectedValuesSet);
+
+    if (nextValues.has(value)) {
+      nextValues.delete(value);
+    } else {
+      nextValues.add(value);
+    }
+
+    onSelectedValuesChange(Array.from(nextValues));
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-9 border-dashed">
+          <PlusCircle className="mr-2 h-4 w-4" />
+          {title}
+
+          {selectedValues.length > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+
+              <Badge
+                variant="neutral"
+                size="small"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.length}
+              </Badge>
+
+              <div className="hidden gap-1 lg:flex">
+                {selectedValues.length > 2 ? (
+                  <Badge variant="neutral" size="small" className="rounded-sm px-1 font-normal">
+                    {selectedValues.length} <Trans>selected</Trans>
+                  </Badge>
+                ) : (
+                  selectedOptions.map((option) => (
+                    <Badge
+                      key={option.value}
+                      variant="neutral"
+                      size="small"
+                      className="rounded-sm px-1 font-normal"
+                    >
+                      {option.label}
+                    </Badge>
+                  ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-[220px] p-0" align="start">
+        <Command shouldFilter={showSearch}>
+          {showSearch && <CommandInput placeholder={title} />}
+
+          <CommandList>
+            <CommandEmpty>
+              <Trans>No results found.</Trans>
+            </CommandEmpty>
+
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValuesSet.has(option.value);
+
+                return (
+                  <CommandItem key={option.value} onSelect={() => onSelect(option.value)}>
+                    <div
+                      className={cn(
+                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        isSelected
+                          ? 'bg-primary text-primary-foreground'
+                          : 'opacity-50 [&_svg]:invisible',
+                      )}
+                    >
+                      <Check className="h-4 w-4" />
+                    </div>
+
+                    {option.icon && (
+                      <option.icon
+                        className={cn(
+                          'mr-2 h-4 w-4',
+                          option.iconClassName ?? 'text-muted-foreground',
+                        )}
+                      />
+                    )}
+
+                    <span>{option.label}</span>
+
+                    {counts && counts[option.value] !== undefined && (
+                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs text-muted-foreground">
+                        {counts[option.value]}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+
+            {selectedValues.length > 0 && (
+              <>
+                <CommandSeparator />
+
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => onSelectedValuesChange([])}
+                    className="justify-center text-center"
+                  >
+                    <Trans>Clear filters</Trans>
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};

packages/ui/primitives/data-table.tsx

@@ -18,7 +18,7 @@ export type DataTableChildren<TData> = (_table: TTable<TData>) => React.ReactNod
 
 export type { ColumnDef as DataTableColumnDef, RowSelectionState } from '@tanstack/react-table';
 
-export interface DataTableProps<TData, TValue> {
+export type DataTableProps<TData, TValue> = {
   columns: ColumnDef<TData, TValue>[];
   columnVisibility?: VisibilityState;
   data: TData[];
@@ -45,7 +45,7 @@ export interface DataTableProps<TData, TValue> {
   rowSelection?: RowSelectionState;
   onRowSelectionChange?: (selection: RowSelectionState) => void;
   getRowId?: (row: TData) => string;
-}
+};
 
 export function DataTable<TData, TValue>({
   columns,
@@ -165,7 +165,7 @@ export function DataTable<TData, TValue>({
                 )}
               </TableRow>
             ) : skeleton?.enable ? (
-              Array.from({ length: skeleton.rows }).map((_, i) => (
+              Array.from({ length: skeleton.rows }, (_, i) => (
                 <TableRow key={`skeleton-row-${i}`}>{skeleton.component ?? <Skeleton />}</TableRow>
               ))
             ) : (
@@ -178,7 +178,7 @@ export function DataTable<TData, TValue>({
                       </p>
 
                       {hasFilters && onClearFilters !== undefined && (
-                        <button onClick={() => onClearFilters()} className="mt-1 text-foreground text-sm">
+                        <button type="button" onClick={() => onClearFilters()} className="mt-1 text-foreground text-sm">
                           <Trans>Clear filters</Trans>
                         </button>
                       )}