add other tab views
This commit is contained in:
Anibal Angulo
195
frontend/src/components/DataroomView.tsx
Normal file
195
frontend/src/components/DataroomView.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useFileStore } from "@/stores/fileStore";
|
||||
import { api } from "@/services/api";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { FilesTab } from "./FilesTab";
|
||||
import { DashboardTab } from "./DashboardTab";
|
||||
import { ChatTab } from "./ChatTab";
|
||||
import {
|
||||
CheckCircle2,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
|
||||
interface DataroomViewProps {
|
||||
onProcessingChange?: (isProcessing: boolean) => void;
|
||||
}
|
||||
|
||||
export function DataroomView({ onProcessingChange }: DataroomViewProps = {}) {
|
||||
const { selectedTema, files } = useFileStore();
|
||||
|
||||
// Collection status states
|
||||
const [isCheckingCollection, setIsCheckingCollection] = useState(false);
|
||||
const [collectionExists, setCollectionExists] = useState<boolean | null>(
|
||||
null,
|
||||
);
|
||||
const [collectionError, setCollectionError] = useState<string | null>(null);
|
||||
const [processing, setProcessing] = useState(false);
|
||||
|
||||
// Check collection status when tema changes
|
||||
useEffect(() => {
|
||||
checkCollectionStatus();
|
||||
}, [selectedTema]);
|
||||
|
||||
// Load files when tema changes
|
||||
useEffect(() => {
|
||||
loadFiles();
|
||||
}, [selectedTema]);
|
||||
|
||||
const checkCollectionStatus = async () => {
|
||||
if (!selectedTema) {
|
||||
setCollectionExists(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsCheckingCollection(true);
|
||||
setCollectionError(null);
|
||||
|
||||
try {
|
||||
const result = await api.checkCollectionExists(selectedTema);
|
||||
setCollectionExists(result.exists);
|
||||
} catch (err) {
|
||||
console.error("Error checking collection:", err);
|
||||
setCollectionError(
|
||||
err instanceof Error ? err.message : "Error al verificar colección",
|
||||
);
|
||||
setCollectionExists(null);
|
||||
} finally {
|
||||
setIsCheckingCollection(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateCollection = async () => {
|
||||
if (!selectedTema) return;
|
||||
|
||||
setIsCheckingCollection(true);
|
||||
setCollectionError(null);
|
||||
|
||||
try {
|
||||
const result = await api.createCollection(selectedTema);
|
||||
if (result.success) {
|
||||
setCollectionExists(true);
|
||||
console.log(`Collection "${selectedTema}" created successfully`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error creating collection:", err);
|
||||
setCollectionError(
|
||||
err instanceof Error ? err.message : "Error al crear colección",
|
||||
);
|
||||
} finally {
|
||||
setIsCheckingCollection(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadFiles = async () => {
|
||||
// This will be handled by FilesTab component
|
||||
};
|
||||
|
||||
const handleProcessingChange = (isProcessing: boolean) => {
|
||||
setProcessing(isProcessing);
|
||||
onProcessingChange?.(isProcessing);
|
||||
};
|
||||
|
||||
const totalFiles = files.length;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-white">
|
||||
<div className="border-b border-gray-200 px-6 py-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h2 className="text-2xl font-semibold text-gray-900">
|
||||
{selectedTema
|
||||
? `Dataroom: ${selectedTema}`
|
||||
: "Selecciona un dataroom"}
|
||||
</h2>
|
||||
{/* Collection Status Indicator */}
|
||||
{selectedTema && (
|
||||
<div className="flex items-center gap-2">
|
||||
{isCheckingCollection ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin text-gray-500" />
|
||||
<span className="text-xs text-gray-500">
|
||||
Verificando...
|
||||
</span>
|
||||
</>
|
||||
) : collectionExists === true ? (
|
||||
<>
|
||||
<CheckCircle2 className="w-4 h-4 text-green-600" />
|
||||
<span className="text-xs text-green-600">
|
||||
Colección disponible
|
||||
</span>
|
||||
</>
|
||||
) : collectionExists === false ? (
|
||||
<>
|
||||
<AlertCircle className="w-4 h-4 text-yellow-600" />
|
||||
<button
|
||||
onClick={handleCreateCollection}
|
||||
className="text-xs text-yellow-600 hover:text-yellow-700 underline"
|
||||
>
|
||||
Crear colección
|
||||
</button>
|
||||
</>
|
||||
) : collectionError ? (
|
||||
<>
|
||||
<AlertCircle className="w-4 h-4 text-red-600" />
|
||||
<span className="text-xs text-red-600">
|
||||
Error de conexión
|
||||
</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">
|
||||
{selectedTema
|
||||
? `${totalFiles} archivo${totalFiles !== 1 ? "s" : ""}`
|
||||
: "Selecciona un dataroom de la barra lateral para ver sus archivos"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="files" className="flex flex-col flex-1">
|
||||
<div className="border-b border-gray-200 px-6 py-2">
|
||||
<TabsList className="flex h-10 w-full items-center gap-2 bg-transparent p-0 justify-start">
|
||||
<TabsTrigger
|
||||
value="overview"
|
||||
className="rounded-md px-4 py-2 text-sm font-medium text-gray-600 transition data-[state=active]:bg-gray-900 data-[state=active]:text-white data-[state=active]:shadow"
|
||||
>
|
||||
Overview
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="files"
|
||||
className="rounded-md px-4 py-2 text-sm font-medium text-gray-600 transition data-[state=active]:bg-gray-900 data-[state=active]:text-white data-[state=active]:shadow"
|
||||
>
|
||||
Files
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="chat"
|
||||
className="rounded-md px-4 py-2 text-sm font-medium text-gray-600 transition data-[state=active]:bg-gray-900 data-[state=active]:text-white data-[state=active]:shadow"
|
||||
>
|
||||
Chat
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
|
||||
<TabsContent value="overview" className="mt-0 flex-1">
|
||||
<DashboardTab selectedTema={selectedTema} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="files" className="mt-0 flex flex-1 flex-col">
|
||||
<FilesTab
|
||||
selectedTema={selectedTema}
|
||||
processing={processing}
|
||||
onProcessingChange={handleProcessingChange}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="chat" className="mt-0 flex-1">
|
||||
<ChatTab selectedTema={selectedTema} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user