Replace all files except .github/workflows

Author: Rezasz

README.md

@@ -15,7 +15,6 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.0",
     "react-markdown": "^8.0.7",
-    "firebase": "^10.7.1",
     "react-hot-toast": "^2.4.1"
   },
   "devDependencies": {

package-lock.json

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Download, FileText } from 'lucide-react';
+import { Document } from '../../types/document';
+
+interface DocumentListProps {
+  documents: Document[];
+}
+
+const DocumentList: React.FC<DocumentListProps> = ({ documents }) => {
+  if (documents.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <FileText className="mx-auto h-12 w-12 text-gray-400" />
+        <h3 className="mt-2 text-sm font-medium text-gray-900">No documents found</h3>
+        <p className="mt-1 text-sm text-gray-500">
+          Documents will appear here once added
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-6">
+      {documents.map((doc) => (
+        <div key={doc.id} className="bg-white p-6 rounded-lg shadow-md">
+          <div className="flex items-start justify-between">
+            <div className="flex-1">
+              <h3 className="text-xl font-semibold mb-2">{doc.title}</h3>
+              <p className="text-gray-600 mb-4">{doc.brief}</p>
+              <p className="text-sm text-gray-500">
+                Uploaded on {new Date(doc.uploadDate).toLocaleDateString()}
+              </p>
+            </div>
+            <a
+              href={doc.fileUrl}
+              download={doc.fileName}
+              className="inline-flex items-center text-blue-600 hover:text-blue-700"
+              title="Download document"
+            >
+              <Download className="h-5 w-5" />
+            </a>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DocumentList;

package.json

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { Upload } from 'lucide-react';
+
+interface DocumentUploadProps {
+  onUpload: (title: string, brief: string, file: File) => Promise<void>;
+  isUploading: boolean;
+}
+
+const DocumentUpload: React.FC<DocumentUploadProps> = ({ onUpload, isUploading }) => {
+  const [title, setTitle] = useState('');
+  const [brief, setBrief] = useState('');
+  const [file, setFile] = useState<File | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!file || !title || !brief) return;
+    
+    if (!file.type.includes('pdf')) {
+      alert('Please upload a PDF file');
+      return;
+    }
+    
+    await onUpload(title, brief, file);
+    setTitle('');
+    setBrief('');
+    setFile(null);
+    
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    if (fileInput) fileInput.value = '';
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-white p-6 rounded-lg shadow-md mb-8">
+      <h2 className="text-2xl font-bold mb-6">Upload New Document</h2>
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Title</label>
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+            required
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Brief Description</label>
+          <textarea
+            value={brief}
+            onChange={(e) => setBrief(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+            rows={3}
+            required
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700">PDF File</label>
+          <input
+            type="file"
+            accept=".pdf"
+            onChange={(e) => e.target.files && setFile(e.target.files[0])}
+            className="mt-1 block w-full"
+            required
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={isUploading}
+          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+        >
+          <Upload className="h-4 w-4 mr-2" />
+          {isUploading ? 'Uploading...' : 'Upload Document'}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default DocumentUpload;

src/components/knowledge-base/DocumentList.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Lock, FileText } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+const LoginPrompt = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="min-h-screen bg-gradient-to-r from-blue-600 to-blue-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+        <div className="max-w-md mx-auto bg-white rounded-lg shadow-xl overflow-hidden">
+          <div className="px-6 py-8">
+            <div className="text-center">
+              <FileText className="mx-auto h-12 w-12 text-blue-600" />
+              <h2 className="mt-4 text-3xl font-bold text-gray-900">Knowledge Base</h2>
+              <p className="mt-2 text-gray-600">
+                Access our comprehensive collection of technical documentation, guides, and resources.
+              </p>
+            </div>
+
+            <div className="mt-8 bg-gray-50 p-4 rounded-lg border border-gray-200">
+              <div className="flex items-center">
+                <Lock className="h-5 w-5 text-gray-400" />
+                <p className="ml-2 text-sm text-gray-600">
+                  Use your partner's Login Credentials to Access the Knowledge base
+                </p>
+              </div>
+            </div>
+
+            <div className="mt-8">
+              <button
+                onClick={() => navigate('/login')}
+                className="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                Login to Access
+              </button>
+            </div>
+
+            <div className="mt-6 text-center">
+              <p className="text-sm text-gray-600">
+                Contact your account manager if you need access credentials.
+              </p>
+            </div>
+          </div>
+
+          <div className="px-6 py-4 bg-gray-50 border-t border-gray-200">
+            <div className="text-center text-sm text-gray-600">
+              <p>Protected documents include:</p>
+              <ul className="mt-2 space-y-1">
+                <li>Technical Documentation</li>
+                <li>Integration Guides</li>
+                <li>API References</li>
+                <li>Best Practices</li>
+                <li>Case Studies</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPrompt;

src/components/knowledge-base/DocumentUpload.tsx

@@ -1,109 +1,50 @@
 import React, { useState, useEffect } from 'react';
 import { useAuth } from '../contexts/AuthContext';
-import { Search } from 'lucide-react';
-import { Toaster, toast } from 'react-hot-toast';
-import DocumentUploadForm from '../components/DocumentUploadForm';
-import DocumentList from '../components/DocumentList';
-import { saveDocument, getDocuments, deleteDocument } from '../utils/documentStorage';
+import LoginPrompt from '../components/knowledge-base/LoginPrompt';
+import DocumentList from '../components/knowledge-base/DocumentList';
+import DocumentUpload from '../components/knowledge-base/DocumentUpload';
+import { saveDocument, getDocuments } from '../utils/documentStorage';
 import type { Document } from '../types/document';
 
 const KnowledgeBase = () => {
   const { isAuthenticated } = useAuth();
   const [documents, setDocuments] = useState<Document[]>([]);
-  const [searchQuery, setSearchQuery] = useState('');
   const [isUploading, setIsUploading] = useState(false);
 
   useEffect(() => {
-    loadDocuments();
+    setDocuments(getDocuments());
   }, []);
 
-  const loadDocuments = () => {
-    const docs = getDocuments();
-    setDocuments(docs);
-  };
-
   const handleUpload = async (title: string, brief: string, file: File) => {
     setIsUploading(true);
     try {
       await saveDocument(title, brief, file);
-      loadDocuments();
-      toast.success('Document uploaded successfully!');
+      setDocuments(getDocuments());
     } catch (error) {
       console.error('Error uploading document:', error);
-      toast.error('Failed to upload document. Please try again.');
     } finally {
       setIsUploading(false);
     }
   };
 
-  const handleDelete = (docId: string) => {
-    const confirmed = window.confirm('Are you sure you want to delete this document?');
-    if (!confirmed) return;
-
-    try {
-      deleteDocument(docId);
-      loadDocuments();
-      toast.success('Document deleted successfully!');
-    } catch (error) {
-      console.error('Error deleting document:', error);
-      toast.error('Failed to delete document. Please try again.');
-    }
-  };
-
-  const filteredDocuments = documents.filter(doc =>
-    doc.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    doc.brief.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  if (!isAuthenticated) {
+    return <LoginPrompt />;
+  }
 
   return (
-    <div>
-      <Toaster position="top-right" />
-      
-      {/* Hero Section */}
-      <section className="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="max-w-3xl">
-            <h1 className="text-4xl font-bold mb-4">Document Repository</h1>
-            <p className="text-xl opacity-90">Access and manage our collection of documents and resources</p>
-          </div>
-        </div>
-      </section>
-
-      {/* Upload Form - Only visible when authenticated */}
-      {isAuthenticated && (
-        <section className="py-8 bg-gray-50">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <DocumentUploadForm onUpload={handleUpload} isUploading={isUploading} />
-          </div>
-        </section>
-      )}
-
-      {/* Search Section */}
-      <section className="py-8">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="relative w-full md:w-96 mx-auto">
-            <input
-              type="text"
-              placeholder="Search documents..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-            <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
-          </div>
-        </div>
-      </section>
-
-      {/* Documents List */}
-      <section className="py-12">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <DocumentList
-            documents={filteredDocuments}
-            isAuthenticated={isAuthenticated}
-            onDelete={handleDelete}
+    <div className="min-h-screen bg-gray-50 py-12">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <h1 className="text-3xl font-bold text-gray-900 mb-8">Knowledge Base</h1>
+        
+        {isAuthenticated && (
+          <DocumentUpload 
+            onUpload={handleUpload}
+            isUploading={isUploading}
           />
-        </div>
-      </section>
+        )}
+        
+        <DocumentList documents={documents} />
+      </div>
     </div>
   );
 };

src/components/knowledge-base/LoginPrompt.tsx

@@ -3,6 +3,7 @@ export interface Document {
   title: string;
   brief: string;
   fileName: string;
+  fileUrl: string;
   uploadDate: string;
   uploadedBy: string;
 }

src/pages/KnowledgeBase.tsx

@@ -15,12 +15,10 @@ export const saveDocument = async (title: string, brief: string, file: File): Pr
     title,
     brief,
     fileName: file.name,
+    fileUrl,
     uploadDate: timestamp,
     uploadedBy: 'admin'
   };
-
-  // Store the blob URL in sessionStorage to persist across page reloads
-  sessionStorage.setItem(`file_${id}`, fileUrl);
 
   documents.push(newDocument);
   localStorage.setItem(STORAGE_KEY, JSON.stringify(documents));
@@ -36,13 +34,8 @@ export const deleteDocument = (id: string): void => {
   localStorage.setItem(STORAGE_KEY, JSON.stringify(documents));
 
   // Clean up the blob URL
-  const fileUrl = sessionStorage.getItem(`file_${id}`);
-  if (fileUrl) {
-    URL.revokeObjectURL(fileUrl);
-    sessionStorage.removeItem(`file_${id}`);
+  const doc = getDocuments().find(d => d.id === id);
+  if (doc?.fileUrl) {
+    URL.revokeObjectURL(doc.fileUrl);
   }
-};
-
-export const getDocumentUrl = (id: string): string | null => {
-  return sessionStorage.getItem(`file_${id}`);
 };