Add manager data to admin frontend

overthq · Feb 9, 2025 · 1cddd76 · 1cddd76
1 parent 30abb79
commit 1cddd76
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 6 deletions.
diff --git a/api/src/controllers/stores.ts b/api/src/controllers/stores.ts
@@ -39,6 +39,31 @@ export default class StoreController {
 		return res.json({ payouts });
 	}
 
+	// GET /stores/current/managers
+	public async getCurrentStoreManagers(req: Request, res: Response) {
+		const store = await this.loadCurrentStore(req);
+		const managers = await prismaClient.storeManager.findMany({
+			where: { storeId: store.id }
+		});
+		return res.json({ managers });
+	}
+
+	// GET /stores/:id/payouts
+	public async getStorePayouts(req: Request, res: Response) {
+		if (!req.params.id) {
+			return res.status(400).json({ error: 'Store ID is required' });
+		}
+
+		const query = hydrateQuery(req.query);
+
+		const payouts = await prismaClient.payout.findMany({
+			where: { storeId: req.params.id },
+			...query
+		});
+
+		return res.json({ payouts });
+	}
+
 	// GET /stores/:id
 	public async getStoreById(req: Request, res: Response) {
 		if (!req.params.id) {
@@ -126,7 +151,7 @@ export default class StoreController {
 
 		const managers = await prismaClient.store
 			.findUnique({ where: { id: req.params.id } })
-			.managers();
+			.managers({ include: { manager: true } });
 
 		return res.json({ managers });
 	}

diff --git a/api/src/routes/stores.ts b/api/src/routes/stores.ts
@@ -17,6 +17,8 @@ router.post('/:id/products', authenticate, storeController.createStoreProduct);
 router.get('/current', authenticate, storeController.getCurrentStore);
 router.get('/:id', optionalAuth, storeController.getStoreById);
 router.get('/:id/products', optionalAuth, storeController.getStoreProducts);
+router.get('/:id/managers', isAdmin, storeController.getStoreManagers);
+router.get('/:id/payouts', isAdmin, storeController.getStorePayouts);
 router.get('/:id/orders', optionalAuth, storeController.getStoreOrders);
 
 export default router;
diff --git a/apps/admin/src/app/(dashboard)/stores/[id]/page.tsx b/apps/admin/src/app/(dashboard)/stores/[id]/page.tsx
@@ -14,21 +14,32 @@ import {
 	TableHeader,
 	TableRow
 } from '@/components/ui/table';
-import { useStoreProductsQuery, useStoreQuery } from '@/data/queries/stores';
+import {
+	useStoreProductsQuery,
+	useStoreQuery,
+	useStorePayoutsQuery,
+	useStoreManagersQuery
+} from '@/data/queries/stores';
 import { formatNaira } from '@/utils/format';
 
 const StoreDetailPage = ({ params }: { params: Promise<{ id: string }> }) => {
 	const { id } = React.use(params);
 	const { data: storeData, isLoading: isLoadingStore } = useStoreQuery(id);
 	const { data: productsData, isLoading: isLoadingProducts } =
 		useStoreProductsQuery(id);
+	const { data: payoutsData, isLoading: isLoadingPayouts } =
+		useStorePayoutsQuery(id);
+	const { data: managersData, isLoading: isLoadingManagers } =
+		useStoreManagersQuery(id);
 
 	if (isLoadingStore || isLoadingProducts) {
 		return <div>Loading...</div>;
 	}
 
 	const store = storeData?.store;
 	const products = productsData?.products || [];
+	const managers = managersData?.managers || [];
+	const payouts = payoutsData?.payouts || [];
 
 	return (
 		<div className='space-y-6'>
@@ -112,6 +123,64 @@ const StoreDetailPage = ({ params }: { params: Promise<{ id: string }> }) => {
 					</CardContent>
 				</Card>
 			</div>
+
+			<div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
+				<Card>
+					<CardHeader>
+						<CardTitle>Managers</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className='rounded-md border'>
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead>Name</TableHead>
+										<TableHead>Email</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{managers.map(({ manager }) => (
+										<TableRow key={manager.id}>
+											<TableCell>{manager.name}</TableCell>
+											<TableCell>{manager.email}</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>Payouts</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className='rounded-md border'>
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead>Amount</TableHead>
+										<TableHead>Status</TableHead>
+										<TableHead>Date</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{payoutsData?.payouts.map(payout => (
+										<TableRow key={payout.id}>
+											<TableCell>{formatNaira(payout.amount)}</TableCell>
+											<TableCell>{payout.status}</TableCell>
+											<TableCell>
+												{new Date(payout.createdAt).toLocaleDateString()}
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
 		</div>
 	);
 };

diff --git a/apps/admin/src/app/(dashboard)/stores/page.tsx b/apps/admin/src/app/(dashboard)/stores/page.tsx
@@ -62,13 +62,13 @@ const columns: ColumnDef<Store>[] = [
 					<DropdownMenuContent align='end'>
 						<DropdownMenuLabel>Actions</DropdownMenuLabel>
 						<DropdownMenuItem
-							onClick={() => navigator.clipboard.writeText(row.original.id)}
+							onClick={() => navigator.clipboard.writeText(store.id)}
 						>
 							Copy store ID
 						</DropdownMenuItem>
 						<DropdownMenuSeparator />
 						<DropdownMenuItem
-							onClick={() => router.push(`/stores/${row.original.id}`)}
+							onClick={() => router.push(`/stores/${store.id}`)}
 						>
 							View store
 						</DropdownMenuItem>
@@ -81,7 +81,6 @@ const columns: ColumnDef<Store>[] = [
 
 export default function StoresPage() {
 	const { data, isLoading } = useStoresQuery();
-	const router = useRouter();
 
 	return (
 		<div className='space-y-6'>

diff --git a/apps/admin/src/data/queries/stores.ts b/apps/admin/src/data/queries/stores.ts
@@ -33,3 +33,19 @@ export const useStoreOrdersQuery = (id: string, params?: StoreFilters) => {
 		enabled: !!id
 	});
 };
+
+export const useStorePayoutsQuery = (id: string, params?: StoreFilters) => {
+	return useQuery({
+		queryKey: ['stores', id, 'payouts', params],
+		queryFn: () => dataService.stores.getStorePayouts(id, params),
+		enabled: !!id
+	});
+};
+
+export const useStoreManagersQuery = (id: string, params?: StoreFilters) => {
+	return useQuery({
+		queryKey: ['stores', id, 'managers', params],
+		queryFn: () => dataService.stores.getStoreManagers(id, params),
+		enabled: !!id
+	});
+};
diff --git a/apps/admin/src/data/services/stores.ts b/apps/admin/src/data/services/stores.ts
@@ -1,4 +1,5 @@
 import { APIService } from './api';
+import { Order } from './orders';
 import { Product } from './products';
 
 export interface Store {
@@ -13,6 +14,14 @@ export interface Store {
 	updatedAt: string;
 }
 
+export interface Payout {
+	id: string;
+	amount: number;
+	status: string;
+	createdAt: string;
+	updatedAt: string;
+}
+
 export interface GetStoresResponse {
 	stores: Store[];
 }
@@ -35,6 +44,24 @@ export interface GetStoreResponse {
 	store: Store;
 }
 
+export interface GetStoreManagersResponse {
+	managers: {
+		manager: {
+			id: string;
+			name: string;
+			email: string;
+		};
+	}[];
+}
+
+export interface GetStorePayoutsResponse {
+	payouts: Payout[];
+}
+
+export interface GetStoreOrdersResponse {
+	orders: Order[];
+}
+
 export class StoreService {
 	constructor(private readonly api: APIService) {}
 
@@ -62,6 +89,20 @@ export class StoreService {
 	}
 
 	async getStoreOrders(id: string, params?: StoreFilters) {
-		return this.api.get(`/stores/${id}/orders`, params);
+		return this.api.get<GetStoreOrdersResponse>(`/stores/${id}/orders`, params);
+	}
+
+	async getStorePayouts(id: string, params?: StoreFilters) {
+		return this.api.get<GetStorePayoutsResponse>(
+			`/stores/${id}/payouts`,
+			params
+		);
+	}
+
+	async getStoreManagers(id: string, params?: StoreFilters) {
+		return this.api.get<GetStoreManagersResponse>(
+			`/stores/${id}/managers`,
+			params
+		);
 	}
 }