From 5e82b96b8c82de51a17467847e84919861fdf57f Mon Sep 17 00:00:00 2001
From: "coderabbitai[bot]"
 <136622811+coderabbitai[bot]@users.noreply.github.com>
Date: Tue, 12 May 2026 08:18:12 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20CodeRabbit=20Chat:=20Implement?=
 =?UTF-8?q?=20requested=20code=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/components/report-settings.tsx   | 68 +++++++++++++++++++
 components/settings/components/settings.tsx   | 34 ++--------
 2 files changed, 73 insertions(+), 29 deletions(-)
 create mode 100644 components/settings/components/report-settings.tsx

diff --git a/components/settings/components/report-settings.tsx b/components/settings/components/report-settings.tsx
new file mode 100644
index 00000000..d5d510b7
--- /dev/null
+++ b/components/settings/components/report-settings.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { FileDown, Loader2 } from 'lucide-react'
+import { useAIState } from 'ai/rsc'
+import { useMapData } from '@/components/map/map-data-context'
+import { useMap } from '@/components/map/map-context'
+import { generateReport } from '@/lib/utils/report-generator'
+import { toast } from 'sonner'
+
+export function ReportSettings() {
+  const [aiState] = useAIState()
+  const { mapData } = useMapData()
+  const { map } = useMap()
+  const [isGenerating, setIsGenerating] = useState(false)
+
+  const handleDownloadReport = async () => {
+    if (isGenerating) return
+
+    setIsGenerating(true)
+    try {
+      const mapSnapshot = map ? map.getCanvas().toDataURL('image/png') : ''
+      const chatTitle = aiState.chatId ? `Chat-${aiState.chatId.substring(0, 8)}` : 'QCX-Analysis'
+
+      await generateReport({
+        messages: aiState.messages,
+        drawnFeatures: mapData.drawnFeatures || [],
+        mapSnapshot,
+        chatTitle
+      })
+
+      toast.success('Report generated successfully')
+    } catch (error) {
+      console.error('Failed to generate report:', error)
+      toast.error('Failed to generate report')
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Reports</CardTitle>
+        <CardDescription>
+          Generate and download a PDF report of your current analysis session, including chat history, map snapshot, and drawn feature measurements.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Button onClick={handleDownloadReport} disabled={isGenerating}>
+          {isGenerating ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Generating Report...
+            </>
+          ) : (
+            <>
+              <FileDown className="mr-2 h-4 w-4" />
+              Download PDF Report
+            </>
+          )}
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
\ No newline at end of file
diff --git a/components/settings/components/settings.tsx b/components/settings/components/settings.tsx
index 8806664d..2e0e0a28 100644
--- a/components/settings/components/settings.tsx
+++ b/components/settings/components/settings.tsx
@@ -15,10 +15,8 @@ import { SystemPromptForm } from './system-prompt-form'
 import { ModelSelectionForm } from './model-selection-form'
 import { UserManagementForm } from './user-management-form';
 import { Form } from "@/components/ui/form"
-import { useSettingsStore, MapProvider } from "@/lib/store/settings";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Label } from "@/components/ui/label";
 import { useToast } from "@/components/ui/hooks/use-toast"
+import { ReportSettings } from './report-settings'
 import { getSystemPrompt, saveSystemPrompt } from "../../../lib/actions/chat"
 import { getSelectedModel, saveSelectedModel } from "../../../lib/actions/users"
 import { useCurrentUser } from "@/lib/auth/use-current-user"
@@ -67,7 +65,6 @@ export function Settings({ initialTab = "system-prompt" }: SettingsProps) {
   const router = useRouter()
   const [isSaving, setIsSaving] = useState(false)
   const [currentTab, setCurrentTab] = useState(initialTab);
-  const { mapProvider, setMapProvider } = useSettingsStore();
   const { user, loading: authLoading } = useCurrentUser();
 
   useEffect(() => {
@@ -166,7 +163,7 @@ export function Settings({ initialTab = "system-prompt" }: SettingsProps) {
               <Tabs.Trigger value="system-prompt" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">System Prompt</Tabs.Trigger>
               <Tabs.Trigger value="model" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">Model Selection</Tabs.Trigger>
               <Tabs.Trigger value="user-management" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">User Management</Tabs.Trigger>
-              <Tabs.Trigger value="map" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">Map</Tabs.Trigger>
+              <Tabs.Trigger value="reports" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">Reports</Tabs.Trigger>
             </Tabs.List>
             <AnimatePresence mode="wait">
               <motion.div
@@ -203,33 +200,12 @@ export function Settings({ initialTab = "system-prompt" }: SettingsProps) {
                 <Tabs.Content value="user-management" className="mt-6">
                   <UserManagementForm form={form} />
                 </Tabs.Content>
-                <Tabs.Content value="map" className="mt-6">
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>Map Provider</CardTitle>
-                      <CardDescription>Choose the map provider to use in the application.</CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <RadioGroup
-                        value={mapProvider}
-                        onValueChange={(value) => setMapProvider(value as MapProvider)}
-                        className="space-y-2"
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="mapbox" id="mapbox" />
-                          <Label htmlFor="mapbox">Mapbox</Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="google" id="google" />
-                          <Label htmlFor="google">Google Maps</Label>
-                        </div>
-                      </RadioGroup>
-                    </CardContent>
-                  </Card>
+                <Tabs.Content value="reports" className="mt-6">
+                  <ReportSettings />
                 </Tabs.Content>
               </motion.div>
             </AnimatePresence>
-          </Tabs.Root>
+
 
           <Card>
             <CardFooter className="flex justify-between pt-6">