a

app/(app)/data-sources/[id]/page.tsx

@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/dialog"
 import { Settings } from "lucide-react"
 import * as React from "react"
+import { ProfileSectionEditor, SectionEditor } from "@/components/analysis-section-editor"
 
 function formatDate(timestamp?: number) {
   if (!timestamp) return "Not analyzed yet";
@@ -34,10 +35,22 @@ export default function DataSourceDetailPage() {
     api.analyses.getLatestByDataSource,
     dataSourceId ? { dataSourceId: dataSourceId as any } : "skip"
   )
+  const sections = useQuery(
+    api.analysisSections.listByAnalysis,
+    analysis?._id ? { analysisId: analysis._id as any } : "skip"
+  )
   const removeDataSource = useMutation(api.dataSources.remove)
   const [isDeleting, setIsDeleting] = React.useState(false)
   const [isDialogOpen, setIsDialogOpen] = React.useState(false)
 
+  const sectionMap = React.useMemo(() => {
+    const map = new Map<string, any>()
+    sections?.forEach((section: any) => {
+      map.set(section.sectionKey, section.items)
+    })
+    return map
+  }, [sections])
+
   if (dataSource === undefined) {
     return (
       <div className="p-8">
@@ -49,7 +62,7 @@ export default function DataSourceDetailPage() {
   if (!dataSource) {
     return (
       <div className="p-8">
-        <h1 className="text-2xl font-semibold">Data source not found</h1>
+          <h1 className="text-2xl font-semibold">Data source not found</h1>
         <p className="mt-2 text-sm text-muted-foreground">
           This data source may have been removed or you no longer have access.
         </p>
@@ -101,7 +114,7 @@ export default function DataSourceDetailPage() {
           <div className="grid gap-4 md:grid-cols-3">
             <Card>
               <CardHeader className="pb-2">
-                <CardTitle className="text-sm">Features</CardTitle>
+                <CardTitle className="text-sm">Key Features</CardTitle>
               </CardHeader>
               <CardContent className="text-2xl font-semibold">
                 {analysis.features.length}
@@ -109,7 +122,7 @@ export default function DataSourceDetailPage() {
             </Card>
             <Card>
               <CardHeader className="pb-2">
-                <CardTitle className="text-sm">Keywords</CardTitle>
+                <CardTitle className="text-sm">Search Keywords</CardTitle>
               </CardHeader>
               <CardContent className="text-2xl font-semibold">
                 {analysis.keywords.length}
@@ -117,7 +130,7 @@ export default function DataSourceDetailPage() {
             </Card>
             <Card>
               <CardHeader className="pb-2">
-                <CardTitle className="text-sm">Personas</CardTitle>
+                <CardTitle className="text-sm">Target Users</CardTitle>
               </CardHeader>
               <CardContent className="text-2xl font-semibold">
                 {analysis.personas.length}
@@ -127,7 +140,7 @@ export default function DataSourceDetailPage() {
 
           <Card>
             <CardHeader>
-              <CardTitle className="text-base">Overview</CardTitle>
+              <CardTitle className="text-base">Summary</CardTitle>
             </CardHeader>
             <CardContent className="space-y-2 text-sm text-muted-foreground">
               <div>
@@ -153,7 +166,7 @@ export default function DataSourceDetailPage() {
           <div className="grid gap-4 lg:grid-cols-2">
             <Card>
               <CardHeader>
-                <CardTitle className="text-base">Top Features</CardTitle>
+                <CardTitle className="text-base">Key Features</CardTitle>
               </CardHeader>
               <CardContent className="space-y-3 text-sm">
                 {analysis.features.slice(0, 6).map((feature) => (
@@ -168,7 +181,7 @@ export default function DataSourceDetailPage() {
             </Card>
             <Card>
               <CardHeader>
-                <CardTitle className="text-base">Pain Points</CardTitle>
+                <CardTitle className="text-base">Problems</CardTitle>
               </CardHeader>
               <CardContent className="space-y-3 text-sm">
                 {analysis.problemsSolved.slice(0, 6).map((problem) => (
@@ -186,7 +199,7 @@ export default function DataSourceDetailPage() {
           <div className="grid gap-4 lg:grid-cols-2">
             <Card>
               <CardHeader>
-                <CardTitle className="text-base">Personas</CardTitle>
+                <CardTitle className="text-base">Target Users</CardTitle>
               </CardHeader>
               <CardContent className="space-y-3 text-sm">
                 {analysis.personas.slice(0, 4).map((persona) => (
@@ -203,7 +216,7 @@ export default function DataSourceDetailPage() {
             </Card>
             <Card>
               <CardHeader>
-                <CardTitle className="text-base">Keywords</CardTitle>
+                <CardTitle className="text-base">Search Keywords</CardTitle>
               </CardHeader>
               <CardContent className="flex flex-wrap gap-2">
                 {analysis.keywords.slice(0, 12).map((keyword) => (
@@ -214,11 +227,71 @@ export default function DataSourceDetailPage() {
               </CardContent>
             </Card>
           </div>
+
+          <div className="space-y-4">
+            <h2 className="text-lg font-semibold">Edit Sections</h2>
+            <div className="grid gap-4 lg:grid-cols-2">
+              <ProfileSectionEditor
+                analysisId={analysis._id as any}
+                items={
+                  sectionMap.get("profile") || {
+                    productName: analysis.productName,
+                    tagline: analysis.tagline,
+                    description: analysis.description,
+                    category: analysis.category,
+                    positioning: analysis.positioning,
+                  }
+                }
+              />
+              <SectionEditor
+                analysisId={analysis._id as any}
+                sectionKey="features"
+                title="Key Features"
+                items={sectionMap.get("features") || analysis.features}
+              />
+              <SectionEditor
+                analysisId={analysis._id as any}
+                sectionKey="competitors"
+                title="Competitors"
+                items={sectionMap.get("competitors") || analysis.competitors}
+              />
+              <SectionEditor
+                analysisId={analysis._id as any}
+                sectionKey="keywords"
+                title="Search Keywords"
+                items={sectionMap.get("keywords") || analysis.keywords}
+              />
+              <SectionEditor
+                analysisId={analysis._id as any}
+                sectionKey="problems"
+                title="Problems"
+                items={sectionMap.get("problems") || analysis.problemsSolved}
+              />
+              <SectionEditor
+                analysisId={analysis._id as any}
+                sectionKey="personas"
+                title="Target Users"
+                items={sectionMap.get("personas") || analysis.personas}
+              />
+              <SectionEditor
+                analysisId={analysis._id as any}
+                sectionKey="useCases"
+                title="Use Cases"
+                items={sectionMap.get("useCases") || analysis.useCases}
+              />
+              <SectionEditor
+                analysisId={analysis._id as any}
+                sectionKey="dorkQueries"
+                title="Search Queries"
+                items={sectionMap.get("dorkQueries") || analysis.dorkQueries}
+              />
+            </div>
+          </div>
         </>
       ) : (
         <Card>
           <CardHeader>
-            <CardTitle className="text-base">Analysis</CardTitle>
+            <CardTitle className="text-base">Full Analysis</CardTitle>
           </CardHeader>
           <CardContent className="text-sm text-muted-foreground">
             No analysis available yet. Trigger a new analysis to populate this