+ {/*
+ )
+}
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 430ab4fb..f489ba01 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -4,7 +4,7 @@ import { Toaster as Sonner } from 'sonner'
type ToasterProps = React.ComponentProps
+ {table.getFilteredSelectedRowModel().rows.length} of{' '}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
*/}
+
+
+
+ {/* */}
+
+
+
+ Page {table.getState().pagination.pageIndex + 1} of{' '}
+ {table.getPageCount()}
+
+
+
+
+
+
+
+
+
+
+))
+Table.displayName = 'Table'
+
+const TableHeader = forwardRef<
+ HTMLTableSectionElement,
+ HTMLAttributes
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+
+
+ table.toggleAllPageRowsSelected(!!value)
+ }
+ aria-label="select all"
+ />
+
+ ),
+ cell: ({ row }) => (
+
+ row.toggleSelected(!!value)}
+ aria-label="select row"
+ />
+
+ ),
+ },
+ {
+ accessorKey: 'accountId',
+ accessorFn: (row) =>
+ `${row.accountId}${row.displayName ?? ''}${row.alias}`,
+ header: () => {
+ return Name
+ },
+ cell: ({ row }) => {
+ return (
+
+
+
+ )
+ },
+ },
+ {
+ id: 'actions',
+ header: 'Actions',
+ cell: ({ row }) => (
+
+ {/* */}
+
+
+
+
+
+
+ ),
+ },
+ ]
+
+ return {
+ columns,
+ }
+}
+
+export function useIncomingColumns() {
+ const { handleAdd, handleBlock, handleRemove } = useFriendsTableActions()
+
+ const columns: Array
+
+ table.toggleAllPageRowsSelected(!!value)
+ }
+ aria-label="select all"
+ />
+
+ ),
+ cell: ({ row }) => (
+
+ row.toggleSelected(!!value)}
+ aria-label="select row"
+ />
+
+ ),
+ },
+ {
+ accessorKey: 'accountId',
+ accessorFn: (row) => `${row.accountId}${row.displayName ?? ''}`,
+ header: () => {
+ return Name
+ },
+ cell: ({ row }) => {
+ return (
+
+
+
+ )
+ },
+ },
+ {
+ id: 'actions',
+ header: 'Actions',
+ cell: ({ row }) => (
+
+
+
+
+ ),
+ },
+ ]
+
+ return {
+ columns,
+ }
+}
+
+export function useOutgoingColumns() {
+ const { handleBlock, handleRemove } = useFriendsTableActions()
+
+ const columns: Array
+
+ table.toggleAllPageRowsSelected(!!value)
+ }
+ aria-label="select all"
+ />
+
+ ),
+ cell: ({ row }) => (
+
+ row.toggleSelected(!!value)}
+ aria-label="select row"
+ />
+
+ ),
+ },
+ {
+ accessorKey: 'accountId',
+ accessorFn: (row) => `${row.accountId}${row.displayName ?? ''}`,
+ header: () => {
+ return Name
+ },
+ cell: ({ row }) => {
+ return (
+
+
+
+ )
+ },
+ },
+ {
+ id: 'actions',
+ header: 'Actions',
+ cell: ({ row }) => (
+
+
+ ),
+ },
+ ]
+
+ return {
+ columns,
+ }
+}
+
+export function useBlocklistColumns() {
+ const { handleUnblock } = useFriendsTableActions()
+
+ const columns: Array
+
+ table.toggleAllPageRowsSelected(!!value)
+ }
+ aria-label="select all"
+ />
+
+ ),
+ cell: ({ row }) => (
+
+ row.toggleSelected(!!value)}
+ aria-label="select row"
+ />
+
+ ),
+ },
+ {
+ accessorKey: 'accountId',
+ accessorFn: (row) => `${row.accountId}${row.displayName ?? ''}`,
+ header: () => {
+ return Name
+ },
+ cell: ({ row }) => {
+ return (
+
+
+
+ )
+ },
+ },
+ {
+ id: 'actions',
+ header: 'Actions',
+ cell: ({ row }) => (
+
+
+
+ ),
+ },
+ ]
+
+ return {
+ columns,
+ }
+}
+
+function ActionDelete({
+ callback,
+ displayName,
+}: {
+ callback: () => void
+ displayName?: string
+}) {
+ return (
+
+ )
+}
+
+function ActionBlock({
+ callback,
+ displayName,
+}: {
+ callback: () => void
+ displayName?: string
+}) {
+ return (
+
+ )
+}
diff --git a/src/routes/account-management/friends-management/-hooks.ts b/src/routes/account-management/friends-management/-hooks.ts
new file mode 100644
index 00000000..3aa072d7
--- /dev/null
+++ b/src/routes/account-management/friends-management/-hooks.ts
@@ -0,0 +1,182 @@
+import type {
+ ComboboxOption,
+ ComboboxProps,
+} from '../../../components/ui/extended/combobox/hooks'
+import type {
+ EpicAddFriend,
+ EpicFriend,
+ FriendBlock,
+ FriendIncoming,
+ FriendOutgoing,
+ FriendsSummary,
+} from '../../../types/services/friends'
+
+import {
+ useFriendsManagement,
+ useFriendsManagementActions,
+} from '../../../hooks/management/friends'
+import { useGetAccounts } from '../../../hooks/accounts'
+import { useGetGroups } from '../../../hooks/groups'
+
+import { checkIfCustomDisplayNameIsValid } from '../../../lib/validations/properties'
+import { parseCustomDisplayName } from '../../../lib/utils'
+
+export function useAccountSelector() {
+ const { accountsArray } = useGetAccounts()
+ const { getGroupTagsByAccountId } = useGetGroups()
+ const { accounts, defaultFriendsSummary, selected, changeSelection } =
+ useFriendsManagement()
+
+ const data: FriendsSummary = selected
+ ? accounts[selected] ?? defaultFriendsSummary
+ : defaultFriendsSummary
+
+ const options = accountsArray.map((account) => {
+ const _keys: Array
+
+ )
+}
diff --git a/src/routes/account-management/friends-management/-sections/-friends.tsx b/src/routes/account-management/friends-management/-sections/-friends.tsx
new file mode 100644
index 00000000..d936bc39
--- /dev/null
+++ b/src/routes/account-management/friends-management/-sections/-friends.tsx
@@ -0,0 +1,61 @@
+import type { FriendsSummary } from '../../../../types/services/friends'
+
+import {
+ CustomSearch,
+ CustomTable,
+ CustomTablePagination,
+ useTableConfig,
+} from '../../../../components/ui/extended/form/table'
+
+import { useFriendsColumns } from '../-columns'
+
+import { useFnnyHandleActions } from '../../../information/credits/-hooks'
+import { useFriendsManagement } from '../../../../hooks/management/friends'
+
+import { numberWithCommaSeparator } from '../../../../lib/parsers/numbers'
+
+export function FriendsSection({
+ data,
+}: {
+ data: FriendsSummary['friends']
+}) {
+ const { columns } = useFriendsColumns()
+ const { selected } = useFriendsManagement()
+ const { handleMnomoeAttrs } = useFnnyHandleActions()
+
+ const { perPageList, table } = useTableConfig({
+ columns,
+ data,
+ rowId: 'accountId',
+ })
+
+ return (
+
+ Total Blocklist
+
+
+
+ {numberWithCommaSeparator(data.length)}
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/routes/account-management/friends-management/-sections/-incoming.tsx b/src/routes/account-management/friends-management/-sections/-incoming.tsx
new file mode 100644
index 00000000..eaf088f7
--- /dev/null
+++ b/src/routes/account-management/friends-management/-sections/-incoming.tsx
@@ -0,0 +1,53 @@
+import type { FriendsSummary } from '../../../../types/services/friends'
+
+import {
+ CustomSearch,
+ CustomTable,
+ CustomTablePagination,
+ useTableConfig,
+} from '../../../../components/ui/extended/form/table'
+
+import { useIncomingColumns } from '../-columns'
+
+import { numberWithCommaSeparator } from '../../../../lib/parsers/numbers'
+
+export function IncomingSection({
+ data,
+}: {
+ data: FriendsSummary['incoming']
+}) {
+ const { columns } = useIncomingColumns()
+
+ const { perPageList, table } = useTableConfig({
+ columns,
+ data,
+ rowId: 'accountId',
+ })
+
+ return (
+
+ Total Friends
+
+
+
+ {numberWithCommaSeparator(data.length)}
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/routes/account-management/friends-management/-sections/-outgoing.tsx b/src/routes/account-management/friends-management/-sections/-outgoing.tsx
new file mode 100644
index 00000000..af5feef8
--- /dev/null
+++ b/src/routes/account-management/friends-management/-sections/-outgoing.tsx
@@ -0,0 +1,53 @@
+import type { FriendsSummary } from '../../../../types/services/friends'
+
+import {
+ CustomSearch,
+ CustomTable,
+ CustomTablePagination,
+ useTableConfig,
+} from '../../../../components/ui/extended/form/table'
+
+import { useOutgoingColumns } from '../-columns'
+
+import { numberWithCommaSeparator } from '../../../../lib/parsers/numbers'
+
+export function OutgoingSection({
+ data,
+}: {
+ data: FriendsSummary['outgoing']
+}) {
+ const { columns } = useOutgoingColumns()
+
+ const { perPageList, table } = useTableConfig({
+ columns,
+ data,
+ rowId: 'accountId',
+ })
+
+ return (
+
+ Total Incoming
+
+
+
+ {numberWithCommaSeparator(data.length)}
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/routes/account-management/friends-management/route.tsx b/src/routes/account-management/friends-management/route.tsx
new file mode 100644
index 00000000..15d5bff4
--- /dev/null
+++ b/src/routes/account-management/friends-management/route.tsx
@@ -0,0 +1,175 @@
+import { createRoute } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+
+import { Route as RootRoute } from '../../__root'
+
+import { HomeBreadcrumb } from '../../../components/navigations/breadcrumb/home'
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbList,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+} from '../../../components/ui/breadcrumb'
+import { Button } from '../../../components/ui/button'
+import { Combobox } from '../../../components/ui/extended/combobox'
+// import { Label } from '../../../components/ui/label'
+import {
+ Tabs,
+ TabsContent,
+ TabsList,
+ TabsTrigger,
+} from '../../../components/ui/tabs'
+import { GoToTop } from '../../../components/go-to-top'
+
+import { FriendsSection } from './-sections/-friends'
+import { IncomingSection } from './-sections/-incoming'
+import { OutgoingSection } from './-sections/-outgoing'
+import { BlocklistSection } from './-sections/-blocklist'
+
+import { useCustomizableMenuSettingsVisibility } from '../../../hooks/settings'
+import { useAccountSelector, useFriendsActions } from './-hooks'
+
+import { cn } from '../../../lib/utils'
+
+export const Route = createRoute({
+ getParentRoute: () => RootRoute,
+ path: '/account-management/friends-management',
+ component: () => {
+ const { t } = useTranslation(['sidebar'], {
+ keyPrefix: 'account-management',
+ })
+
+ return (
+ <>
+
+ Total Outgoing
+
+
+
+ {numberWithCommaSeparator(data.length)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Friends
+ Incoming
+ Outgoing
+ Blocklist
+
+
+