Implement user appeal submission and admin review workflow

apps/ui-sharethrift/src/components/layouts/home/account/admin-dashboard/components/admin-appeals-table/admin-appeals-table.container.graphql

@@ -0,0 +1,38 @@
+query AdminAppealsTableContainerGetAllUserAppealRequests(
+	$input: GetAllUserAppealRequestsInput!
+) {
+	getAllUserAppealRequests(input: $input) {
+		items {
+			id
+			reason
+			state
+			type
+			createdAt
+			updatedAt
+			user {
+				id
+				account {
+					username
+					email
+					profile {
+						firstName
+						lastName
+					}
+				}
+			}
+		}
+		total
+		page
+		pageSize
+	}
+}
+
+mutation AdminAppealsTableContainerUpdateUserAppealRequestState(
+	$input: UpdateUserAppealRequestStateInput!
+) {
+	updateUserAppealRequestState(input: $input) {
+		id
+		state
+		updatedAt
+	}
+}

apps/ui-sharethrift/src/components/layouts/home/account/admin-dashboard/components/admin-appeals-table/admin-appeals-table.container.tsx

@@ -0,0 +1,172 @@
+import { useQuery, useMutation } from '@apollo/client/react';
+import { AdminAppealsTable } from './admin-appeals-table.tsx';
+import { ComponentQueryLoader } from '@sthrift/ui-components';
+import { useState } from 'react';
+import { message } from 'antd';
+import {
+	AdminAppealsTableContainerGetAllUserAppealRequestsDocument,
+	AdminAppealsTableContainerUpdateUserAppealRequestStateDocument,
+	type AdminAppealsTableContainerGetAllUserAppealRequestsQuery,
+} from '../../../../../../../generated.tsx';
+import type { AdminAppealData } from './admin-appeals-table.types.ts';
+
+export const AdminAppealsTableContainer: React.FC = () => {
+	const [searchText, setSearchText] = useState('');
+	const [statusFilters, setStatusFilters] = useState<string[]>([]);
+	const [sorter, setSorter] = useState<{
+		field: string;
+		order: 'ascend' | 'descend';
+	} | null>(null);
+	const [currentPage, setCurrentPage] = useState(1);
+	const [pageSize, setPageSize] = useState(10);
+
+	const { data, loading, error, refetch } = useQuery<
+		AdminAppealsTableContainerGetAllUserAppealRequestsQuery
+	>(AdminAppealsTableContainerGetAllUserAppealRequestsDocument, {
+		variables: {
+			input: {
+				page: currentPage,
+				pageSize: pageSize,
+				stateFilters: statusFilters.length > 0 ? statusFilters : undefined,
+				sorter: sorter
+					? {
+							field: sorter.field,
+							direction: sorter.order === 'ascend' ? 'ASC' : 'DESC',
+						}
+					: undefined,
+			},
+		},
+	});
+
+	const [updateAppealState] = useMutation(
+		AdminAppealsTableContainerUpdateUserAppealRequestStateDocument,
+	);
+
+	const handleSearch = (text: string) => {
+		setSearchText(text);
+		setCurrentPage(1);
+	};
+
+	const handleStatusFilter = (filters: string[]) => {
+		setStatusFilters(filters);
+		setCurrentPage(1);
+	};
+
+	const handleTableChange = (
+		_pagination: unknown,
+		_filters: unknown,
+		sorter: unknown,
+	) => {
+		// Handle sorting
+		if (sorter && typeof sorter === 'object' && 'field' in sorter) {
+			const { field, order } = sorter as {
+				field: string;
+				order?: 'ascend' | 'descend';
+			};
+			if (order) {
+				setSorter({ field, order });
+			} else {
+				setSorter(null);
+			}
+		}
+	};
+
+	const handlePageChange = (page: number, pageSize: number) => {
+		setCurrentPage(page);
+		setPageSize(pageSize);
+	};
+
+	const handleAction = async (
+		action: 'accept' | 'deny' | 'view-user',
+		appealId: string,
+	) => {
+		// TODO: Implement navigation to user profile
+		// The view-user action should navigate to the user's profile page
+		// Example: navigate(`/admin/users/${appealId}`)
+		if (action === 'view-user') {
+			console.log('Navigate to user:', appealId);
+			message.info('User profile navigation not yet implemented');
+			return;
+		}
+
+		try {
+			const newState =
+				action === 'accept' ? ('accepted' as const) : ('denied' as const);
+
+			await updateAppealState({
+				variables: {
+					input: {
+						id: appealId,
+						state: newState,
+					},
+				},
+			});
+
+			message.success(
+				`Appeal ${action === 'accept' ? 'accepted' : 'denied'} successfully`,
+			);
+			refetch();
+		} catch (error) {
+			console.error(`Failed to ${action} appeal:`, error);
+			message.error(`Failed to ${action} appeal. Please try again.`);
+		}
+	};
+
+	const appealsList = data?.getAllUserAppealRequests?.items || [];
+
+	// TODO: PERFORMANCE - Move search filtering to server-side
+	// Current implementation filters on the client which won't scale well
+	// The GraphQL schema needs to be extended to support searchText parameter
+	// Issue: https://github.com/simnova/sharethrift/issues/XXX
+	const filteredAppeals = searchText
+		? appealsList.filter(
+				(appeal) =>
+					appeal.user.account?.profile?.firstName
+						?.toLowerCase()
+						.includes(searchText.toLowerCase()) ||
+					appeal.user.account?.profile?.lastName
+						?.toLowerCase()
+						.includes(searchText.toLowerCase()) ||
+					appeal.user.account?.email
+						?.toLowerCase()
+						.includes(searchText.toLowerCase()),
+			)
+		: appealsList;
+
+	const appealsData: AdminAppealData[] = filteredAppeals.map((appeal) => ({
+		id: appeal.id,
+		userId: appeal.user.id,
+		userName: `${appeal.user.account?.profile?.firstName || ''} ${appeal.user.account?.profile?.lastName || ''}`.trim(),
+		userEmail: appeal.user.account?.email || '',
+		reason: appeal.reason,
+		state: appeal.state as 'requested' | 'accepted' | 'denied',
+		type: appeal.type as 'user' | 'listing',
+		createdAt: appeal.createdAt,
+		updatedAt: appeal.updatedAt,
+	}));
+
+	return (
+		<ComponentQueryLoader
+			loading={loading}
+			error={error}
+			hasData={data?.getAllUserAppealRequests ?? null}
+			hasDataComponent={
+				<AdminAppealsTable
+					data={appealsData}
+					searchText={searchText}
+					statusFilters={statusFilters}
+					sorter={sorter || undefined}
+					currentPage={currentPage}
+					pageSize={pageSize}
+					total={data?.getAllUserAppealRequests?.total || 0}
+					loading={loading}
+					onSearch={handleSearch}
+					onStatusFilter={handleStatusFilter}
+					onTableChange={handleTableChange}
+					onPageChange={handlePageChange}
+					onAction={handleAction}
+				/>
+			}
+		/>
+	);
+};

apps/ui-sharethrift/src/components/layouts/home/account/admin-dashboard/components/admin-appeals-table/admin-appeals-table.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AdminAppealsTable } from './admin-appeals-table';
+import type { AdminAppealData } from './admin-appeals-table.types';
+
+const meta = {
+	title:
+		'Layouts/Home/Account/AdminDashboard/Components/AdminAppealsTable',
+	component: AdminAppealsTable,
+	parameters: {
+		layout: 'padded',
+	},
+	tags: ['autodocs'],
+} satisfies Meta<typeof AdminAppealsTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockAppeals: AdminAppealData[] = [
+	{
+		id: '1',
+		userId: 'user1',
+		userName: 'John Doe',
+		userEmail: 'john.doe@example.com',
+		reason:
+			'I believe my account was blocked by mistake. I have always followed the community guidelines.',
+		state: 'requested',
+		type: 'user',
+		createdAt: new Date().toISOString(),
+		updatedAt: new Date().toISOString(),
+	},
+	{
+		id: '2',
+		userId: 'user2',
+		userName: 'Jane Smith',
+		userEmail: 'jane.smith@example.com',
+		reason:
+			'I apologize for the late return. There was a family emergency.',
+		state: 'accepted',
+		type: 'user',
+		createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+		updatedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+	},
+	{
+		id: '3',
+		userId: 'user3',
+		userName: 'Bob Johnson',
+		userEmail: 'bob.johnson@example.com',
+		reason: 'I disagree with the block decision.',
+		state: 'denied',
+		type: 'user',
+		createdAt: new Date(Date.now() - 14 * 24 * 60 * 60 * 1000).toISOString(),
+		updatedAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
+	},
+	{
+		id: '4',
+		userId: 'user4',
+		userName: 'Alice Williams',
+		userEmail: 'alice.williams@example.com',
+		reason:
+			'My listing was blocked unfairly. I have updated it according to the guidelines.',
+		state: 'requested',
+		type: 'listing',
+		createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+		updatedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+	},
+];
+
+export const Default: Story = {
+	args: {
+		data: mockAppeals,
+		searchText: '',
+		statusFilters: [],
+		currentPage: 1,
+		pageSize: 10,
+		total: mockAppeals.length,
+		loading: false,
+		onSearch: (text: string) => console.log('Search:', text),
+		onStatusFilter: (filters: string[]) => console.log('Filter:', filters),
+		onTableChange: (pagination, filters, sorter) =>
+			console.log('Table change:', { pagination, filters, sorter }),
+		onPageChange: (page, pageSize) =>
+			console.log('Page change:', { page, pageSize }),
+		onAction: (action, appealId) =>
+			console.log('Action:', { action, appealId }),
+	},
+};
+
+export const WithPendingAppeals: Story = {
+	args: {
+		...Default.args,
+		data: mockAppeals.filter((a) => a.state === 'requested'),
+		statusFilters: ['requested'],
+	},
+};
+
+export const WithAcceptedAppeals: Story = {
+	args: {
+		...Default.args,
+		data: mockAppeals.filter((a) => a.state === 'accepted'),
+		statusFilters: ['accepted'],
+	},
+};
+
+export const Empty: Story = {
+	args: {
+		...Default.args,
+		data: [],
+		total: 0,
+	},
+};
+
+export const Loading: Story = {
+	args: {
+		...Default.args,
+		loading: true,
+	},
+};