feat: UI pagination and members search (#724)

* feat: pagination (UI)

* Fixes

* feat: add search to member list page

* responsiveness

apps/client/src/components/common/no-table-results.tsx

@@ -0,0 +1,19 @@
+import { Table, Text } from "@mantine/core";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+interface NoTableResultsProps {
+  colSpan: number;
+}
+export default function NoTableResults({ colSpan }: NoTableResultsProps) {
+  const { t } = useTranslation();
+  return (
+    <Table.Tr>
+      <Table.Td colSpan={colSpan}>
+        <Text fw={500} c="dimmed" ta="center">
+          {t("No results found...")}
+        </Text>
+      </Table.Td>
+    </Table.Tr>
+  );
+}

apps/client/src/components/common/paginate.tsx

@@ -0,0 +1,40 @@
+import { Button, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+export interface PagePaginationProps {
+  currentPage: number;
+  hasPrevPage: boolean;
+  hasNextPage: boolean;
+  onPageChange: (newPage: number) => void;
+}
+
+export default function Paginate({
+  currentPage,
+  hasPrevPage,
+  hasNextPage,
+  onPageChange,
+}: PagePaginationProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Group mt="md">
+      <Button
+        variant="default"
+        size="compact-sm"
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={!hasPrevPage}
+      >
+        {t("Prev")}
+      </Button>
+
+      <Button
+        variant="default"
+        size="compact-sm"
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={!hasNextPage}
+      >
+        {t("Next")}
+      </Button>
+    </Group>
+  );
+}

apps/client/src/components/common/search-input.tsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from "react";
+import { TextInput, Group } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import { IconSearch } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+
+export interface SearchInputProps {
+  placeholder?: string;
+  debounceDelay?: number;
+  onSearch: (value: string) => void;
+}
+
+export function SearchInput({
+  placeholder,
+  debounceDelay = 500,
+  onSearch,
+}: SearchInputProps) {
+  const { t } = useTranslation();
+  const [value, setValue] = useState("");
+  const [debouncedValue] = useDebouncedValue(value, debounceDelay);
+
+  useEffect(() => {
+    onSearch(debouncedValue);
+  }, [debouncedValue, onSearch]);
+
+  return (
+    <Group mb="md">
+      <TextInput
+        placeholder={placeholder || t("Search...")}
+        leftSection={<IconSearch size={14} />}
+        value={value}
+        onChange={(e) => setValue(e.currentTarget.value)}
+      />
+    </Group>
+  );
+}