From db8d1980609551354fd978dfb8807a969df2739b Mon Sep 17 00:00:00 2001
From: Rafael Ciobotariu <rafael.ciobotariu@yahoo.com>
Date: Fri, 28 Mar 2025 12:52:41 +0200
Subject: [PATCH 1/2] created card for every form in form page

---
 .../src/pages/ReportingFormsList.tsx          | 61 +++++++++++++++----
 .../src/routes/forms/index.tsx                |  2 +
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingFormsList.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingFormsList.tsx
index 7ffbdc2a3..17b96f1a6 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingFormsList.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingFormsList.tsx
@@ -1,23 +1,58 @@
 import { Button } from "@/components/ui/button";
-import { useForms } from "@/queries/use-forms";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { formsOptions } from "@/queries/use-forms";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 
 function ReportingFormsList() {
-  const { data: forms } = useForms();
+  const { data: forms } = useSuspenseQuery(formsOptions());
+
+  const sortedForms = [...forms].sort(
+    (a, b) => a.displayOrder - b.displayOrder
+  );
 
   return (
-    <>
-      {forms?.map((form) => (
-        <div key={form.id} className="flex gap-4">
-          <span>{form.name[form.defaultLanguage]}</span>
-          <Button asChild variant="link">
-            <Link to={"/forms/$formId"} params={{ formId: form.id }}>
-              Fill in
-            </Link>
-          </Button>
-        </div>
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {sortedForms.map((form) => (
+        <Card
+          key={form.id}
+          className="overflow-hidden flex flex-col gap-3 h-full"
+        >
+          <CardHeader className="flex flex-row items-center gap-3 pb-2">
+            {form.icon && (
+              <div
+                className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10"
+                dangerouslySetInnerHTML={{ __html: form.icon }}
+              />
+            )}
+            <CardTitle className="line-clamp-1 text-lg">
+              {form.name[form.defaultLanguage]}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="h-full flex-1 flex flex-col justify-between">
+            <section>
+              <p className="leading-7 [&:not(:first-child)]:mt-6 line-clamp-3">
+                {form.description[form.defaultLanguage]}
+              </p>
+              <div className="mt-2 flex items-center text-xs text-muted-foreground">
+                <span>{form.numberOfQuestions} questions</span>
+                <span className="mx-2">•</span>
+                {/* - form.lastModifiedOn nu este primit de la API */}
+                <span>
+                  {new Date(form.lastModifiedOn).toLocaleDateString()}
+                </span>
+              </div>
+            </section>
+
+            <Button asChild className="mt-4 w-24">
+              <Link to={"/forms/$formId"} params={{ formId: form.id }}>
+                Fill in
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
       ))}
-    </>
+    </div>
   );
 }
 
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/index.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/index.tsx
index b0686bde9..135669cba 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/index.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/routes/forms/index.tsx
@@ -1,6 +1,8 @@
 import ReportingFormsList from "@/pages/ReportingFormsList";
+import { formsOptions } from "@/queries/use-forms";
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/forms/")({
+  loader: (opts) => opts.context.queryClient.ensureQueryData(formsOptions()),
   component: ReportingFormsList,
 });

From 3915f22b56d2bc06b9b25e678511b1c997016b1f Mon Sep 17 00:00:00 2001
From: Rafael Ciobotariu <rafael.ciobotariu@yahoo.com>
Date: Fri, 28 Mar 2025 13:17:21 +0200
Subject: [PATCH 2/2] deleted span with lastModifiedOn data

---
 .../src/pages/ReportingFormsList.tsx                       | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingFormsList.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingFormsList.tsx
index 17b96f1a6..41ce99a5a 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingFormsList.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/pages/ReportingFormsList.tsx
@@ -34,13 +34,8 @@ function ReportingFormsList() {
               <p className="leading-7 [&:not(:first-child)]:mt-6 line-clamp-3">
                 {form.description[form.defaultLanguage]}
               </p>
-              <div className="mt-2 flex items-center text-xs text-muted-foreground">
+              <div className="mt-4 flex items-center text-xs text-muted-foreground">
                 <span>{form.numberOfQuestions} questions</span>
-                <span className="mx-2">•</span>
-                {/* - form.lastModifiedOn nu este primit de la API */}
-                <span>
-                  {new Date(form.lastModifiedOn).toLocaleDateString()}
-                </span>
               </div>
             </section>