Add generic layout of listing cards

This should eventually by ported to other interfaces for consistency.

ts/components/ReviewContactColumnList.vue

@@ -1,3 +1,106 @@
+<style scoped>
+.user-filters {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+.user-filters input[type="text"],
+.user-filters select {
+	padding: 0.5rem;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+}
+
+.user-filters button {
+	padding: 0.5rem 1rem;
+	background: #dc3545;
+	color: white;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+}
+
+.user-footer {
+	font-weight: 500;
+	color: #666;
+}
+</style>
+
 <template>
-	<p>list</p>
+	<ListCard :items="items" :loading="loading">
+		<!-- Filters Slot -->
+		<template #filters="{ applyFilter, clearFilters, activeFilters }">
+			<div class="user-filters">
+				<input
+					v-model="searchTerm"
+					type="text"
+					placeholder="Search by name..."
+					@input="handleSearch(applyFilter)"
+				/>
+
+				<button
+					@click="handleClearFilters(clearFilters)"
+					v-if="activeFilters > 0"
+				>
+					Clear Filters ({{ activeFilters }})
+				</button>
+			</div>
+		</template>
+
+		<!-- Item Slot -->
+		<template #item="{ item }">
+			<ListCardContact
+				:contact="item"
+				@click="handleContactClick(item)"
+				:isSelected="false"
+			/>
+		</template>
+	</ListCard>
 </template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import ListCard from "@/components/layout/ListCard.vue";
+import ListCardContact from "@/components/ListCardContact.vue";
+import { Contact } from "@/type/api";
+
+interface Props {
+	contacts: Contact[] | undefined;
+	loading: boolean;
+}
+
+const loading = ref(false);
+const props = defineProps<Props>();
+const searchTerm = ref("");
+const roleFilter = ref("");
+const activeOnly = ref(false);
+
+// Filter handlers
+const handleSearch = (
+	applyFilter: (fn: (contact: Contact) => boolean) => void,
+) => {
+	applyFilter((contact: Contact) =>
+		contact.name.toLowerCase().includes(searchTerm.value.toLowerCase()),
+	);
+};
+
+const handleClearFilters = (clearFilters: () => void) => {
+	searchTerm.value = "";
+	roleFilter.value = "";
+	activeOnly.value = false;
+	clearFilters();
+};
+
+const handleContactClick = (contact: any) => {
+	console.log("Clicked contact:", contact);
+};
+
+const items = computed((): Contact[] => {
+	if (props.contacts) {
+		return props.contacts;
+	}
+	return [];
+});
+</script>