Use publicreport card component on planning page

platform/signal.go

@@ -229,7 +229,12 @@ func SignalList(ctx context.Context, user User, limit int) ([]*Signal, error) {
 			row.Report = nil
 		} else if row.Report.ID != 0 {
 			row.Pool = nil
-			row.Report = report_map[row.Report.ID]
+			report, ok := report_map[row.Report.ID] 
+			if !ok {
+				log.Debug().Int32("id", row.Report.ID).Msg("failed to got report")			
+				continue
+			}
+			row.Report = report
 		}
 		if row.Address.Street == "" {
 			row.Address = nil

ts/components/PlanningColumnDetail.vue

@@ -42,16 +42,14 @@
 								Click signals from the left panel to select them
 							</div>
 
-							<table
-								class="small mt-2 table"
+							<div
+								class="mt-2"
 								v-show="selectedSignals.length > 0"
 							>
-								<tbody>
-									<tr v-for="signal in selectedSignals" :key="signal.id">
+									<div v-for="signal in selectedSignals" :key="signal.id">
 										<PlanningColumnDetailEntry :signal="signal"/>
-									</tr>
-								</tbody>
-							</table>
+									</div>
+							</div>
 
 							<button
 								v-show="selectedSignals.length > 0"

ts/components/PlanningColumnDetailEntry.vue

@@ -1,4 +1,5 @@
 <template>
+<!--
 	<td>
 		<button
 			@click="toggleSignal(signal)"
@@ -21,10 +22,18 @@
 		<TimeRelative :time="signal.created"></TimeRelative>
 	</td>
 	<td>{{ shortAddress(signal.address) }}</td>
+-->
+	<div v-if="signal.type == 'publicreport nuisance'">
+		<PublicreportCard :report="signal.report"/>
+	</div>
+	<div v-else-if="signal.type == 'publicreport water'">
+		<PublicreportCard :report="signal.report"/>
+	</div>
 </template>
 
 <script setup lang="ts">
 import { shortAddress } from "../format";
+import PublicreportCard from "@/components/PublicreportCard.vue";
 import TimeRelative from "@/components/TimeRelative.vue";
 interface Props {
 	signal: Signal;

ts/components/PublicreportCard.vue

@@ -1,3 +1,16 @@
+<style scoped>
+.photo-thumbnail {
+	width: 100px;
+	height: 100px;
+	object-fit: cover;
+	cursor: pointer;
+	border-radius: 4px;
+	transition: transform 0.2s;
+}
+.photo-thumbnail:hover {
+	transform: scale(1.05);
+}
+</style>
 <template>
 	<div class="details-section p-3 border-top">
 		<div class="d-flex justify-content-between align-items-start mb-3">