merge thr left sidebar fucntionaliity of this import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import ResultCard from '../components/Resultcard'; // Ensure the path is correct
import './Home.css';

const Home = () => {
const [searchTerm, setSearchTerm] = useState('');
const [excludeWords, setExcludeWords] = useState('');
const [searchResults, setSearchResults] = useState([]);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [filteredFilenames, setFilteredFilenames] = useState([]);
const [fileInput, setFileInput] = useState('');
const [searchType, setSearchType] = useState('issues');
const navigate = useNavigate();

const filenames = [
//all file names here
];

const issuefiles = [
//all issues names here 
];

useEffect(() => {
    setFilteredFilenames(searchType === 'issues' ? issueFiles : filenames);
}, [searchType]);

const handleSearchTypeChange = (event) => {
    const value = event.target.value;
    setSearchType(value);
    setFileInput('');
    setFilteredFilenames(value === 'issues' ? issueFiles : filenames);
};

const handleFileInputChange = (event) => {
    const value = event.target.value;
    setFileInput(value);
    if (value) {
        setFilteredFilenames(
            (searchType === 'issues' ? issueFiles : filenames).filter((file) =>
                file.name.toLowerCase().includes(value.toLowerCase())
            )
        );
    } else {
        setFilteredFilenames(searchType === 'issues' ? issueFiles : filenames);
    }
};

const handleSubmit = async (event) => {
    event.preventDefault();
    if (!searchTerm.trim()) {
        setError('Please enter a search term.');
        return;
    }

    setIsLoading(true);
    setError(null);

    try {
        const response = await fetch(
            `http://192.168.2.5:3006/search?keyword=${encodeURIComponent(searchTerm)}&exclude=${encodeURIComponent(
                excludeWords || ''
            )}&type=${encodeURIComponent(searchType)}`
        );
        if (!response.ok) throw new Error('Failed to fetch search results');
        const data = await response.json();
        setSearchResults(data);
    } catch (error) {
        console.error(error);
        setError('Error fetching search results.');
    } finally {
        setIsLoading(false);
    }
};

return (
    <div className="app-container">
        <div className="sidebar">
            <div className="sidebar-header">
                <h2>S&A Law Offices</h2>
            </div>
            <div className="sidebar-content">
                <div className="dropdown">
                    <input
                        type="text"
                        placeholder={searchType === 'issues' ? 'Type an issue to search...' : 'Type a filename to search...'}
                        value={fileInput}
                        onChange={handleFileInputChange}
                        className="sidebar-input"
                    />
                    <div className="search-type">
                        <label>
                            <input
                                type="radio"
                                value="issues"
                                checked={searchType === 'issues'}
                                onChange={handleSearchTypeChange}
                            />
                            Issues
                        </label>
                        <label>
                            <input
                                type="radio"
                                value="judgments"
                                checked={searchType === 'judgments'}
                                onChange={handleSearchTypeChange}
                            />
                            Judgments
                        </label>
                    </div>
                    {fileInput && (
                        <div className="dropdown-content show">
                            {filteredFilenames.length > 0 ? (
                                filteredFilenames.map((file, index) => (
                                    <a
                                        key={index}
                                        href={file.path}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="suggestion-item"
                                    >
                                        {file.name}
                                    </a>
                                ))
                            ) : (
                                <div className="no-suggestions">No matches found</div>
                            )}
                        </div>
                    )}
                </div>
            </div>
        </div>

        <div className="main-content">
            <div className="search-container">
                <form onSubmit={handleSubmit} className="search-form">
                    <input
                        type="text"
                        placeholder="Enter search term"
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                        className="search-input"
                    />
                    <input
                        type="text"
                        placeholder="Exclude words (optional)"
                        value={excludeWords}
                        onChange={(e) => setExcludeWords(e.target.value)}
                        className="search-input"
                    />

                    <button type="submit" disabled={isLoading} className="search-button">
                        {isLoading ? 'Searching...' : 'Search'}
                    </button>
                </form>

                {error && <div className="error-message">{error}</div>}

                <div className="results-section">
                    {isLoading ? (
                        <div className="loading">Loading...</div>
                    ) : searchResults.length > 0 ? (
                        <>
                            <div className="results-count">Found {searchResults.length} documents</div>
                            <div className="results-list">
                                {searchResults.map((result, index) => (
                                    <ResultCard
                                        key={index}
                                        result={result}
                                        cardNumber={index + 1}
                                        searchType={searchType}
                                    />
                                ))}
                            </div>
                        </>
                    ) : (
                        <div className="no-results">No results found</div>
                    )}
                </div>
            </div>
        </div>
    </div>
);
};

export default Home;
 
    with the right part from   import React, { useState, useEffect } from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
import { useNavigate } from 'react-router-dom';
import './Home.css';

const Home = () => {
    const [searchTerm, setSearchTerm] = useState('');
    const [excludeWords, setExcludeWords] = useState('');
    const [searchResults, setSearchResults] = useState([]);
    const [error, setError] = useState(null);
    const [isLoading, setIsLoading] = useState(false);
    const navigate = useNavigate();

    useEffect(() => {
        const token = localStorage.getItem('token');
        if (!token) {
            console.log("User is not logged in");
        }
    }, []);

    // Handle search term input
    const handleSearchTermChange = (event) => {
        setSearchTerm(event.target.value);
    };

    // Handle exclude-word input
    const handleExcludeWordsChange = (event) => {
        setExcludeWords(event.target.value);
    };

    // Add to Library Action
    const handleAddToLibrary = async (pdf) => {
        const token = localStorage.getItem('token');
        if (!token) {
            navigate('/login', {
                state: {
                    message: 'Please log in to add documents to your library',
                    redirectAfterLogin: '/home',
                },
            });
            return;
        }

        try {
            const response = await fetch('http://192.168.2.5:3006/api/lib/library/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`,
                },
                body: JSON.stringify({
                    filename: pdf.relativePath,
                    originalFilePath: pdf.Filename,
                }),
            });

            if (response.ok) {
                alert('Document added to library');
            } else {
                const errorData = await response.json();
                alert(errorData.message || 'Failed to add document to library');
            }
        } catch (error) {
            console.error('Error adding to library:', error);
            alert('Network error. Please try again.');
        }
    };

    // Form Submit for Search
    const handleSubmit = async (event) => {
        event.preventDefault();
        
        if (!searchTerm.trim()) {
            setError('Please enter a search term.');
            return;
        }

        setIsLoading(true);
        setError(null);

        try {
            const response = await fetch(
                `http://192.168.2.5:3006/search?keyword=${encodeURIComponent(searchTerm)}&exclude=${encodeURIComponent(
                    excludeWords || ''
                )}`
            );
            if (!response.ok) {
                throw new Error('Failed to fetch search results');
            }
            const data = await response.json();
            setSearchResults(data);
        } catch (error) {
            console.error(error);
            setError('Error fetching search results.');
        } finally {
            setIsLoading(false);
        }
    };

    // Handle Snippet Page Redirection
    const handleSnippetClick = (relativePath, page) => {
        const pdfUrl = `http://192.168.2.5:3006/files/${encodeURIComponent(relativePath)}#page=${page}`;
        window.open(pdfUrl, '_blank');
    };

    return (
        <div className="app-container">
            <Navbar />
            <main>
                {/* Search Form */}
                <form onSubmit={handleSubmit} className="search-form">
                    <input
                        type="text"
                        placeholder="Enter search term"
                        value={searchTerm}
                        onChange={handleSearchTermChange}
                        className="search-input"
                    />
                    <input
                        type="text"
                        placeholder="Exclude words (optional)"
                        value={excludeWords}
                        onChange={handleExcludeWordsChange}
                        className="exclude-input"
                    />
                    <button
                        type="submit"
                        className="search-button"
                        disabled={isLoading}
                    >
                        {isLoading ? 'Searching...' : 'Search'}
                    </button>
                </form>

                {/* Error Message */}
                {error && <p className="error-message">{error}</p>}

                {/* Search Results */}
                <div className="results-container">
                    {isLoading ? (
                        <p className="loading">Loading results...</p>
                    ) : searchResults.length > 0 ? (
                        <div className="scrollable-container">
                            <p className="total-matches">Total documents: {searchResults.length}</p> {/* Total document count */}
                            {searchResults.map((result, index) => (
                                <ResultCard
                                    key={index}
                                    result={result}
                                    handleSnippetClick={handleSnippetClick}
                                    onAddToLibrary={handleAddToLibrary}
                                    searchTerm={searchTerm}
                                    cardNumber={index + 1} // Add card number
                                />
                            ))}
                        </div>
                    ) : (
                        <p>No results found</p>
                    )}
                </div>
            </main>
            <Footer />
        </div>
    );
};

const ResultCard = ({ result, handleSnippetClick, onAddToLibrary, searchTerm, cardNumber }) => {
    const [isExpanded, setIsExpanded] = useState(false);

    return (
        <div className="result-card">
            <div className="result-header">
                <h3 className="filename">
                    <span className="card-number">{cardNumber}</span> {/* Display card number */}
                    <a
                        href={`http://192.168.2.5:3006/files/${result.relativePath}`}
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        {result.Filename.split('\\').pop()}
                    </a>
                </h3>
                <button
                    className="add-to-library-button"
                    onClick={() => onAddToLibrary(result)} // Call add to library function
                    title="Add to Library"
                >
                    Add
                </button>
            </div>
            <p className="relative-path">
                <strong>Location:</strong> {result.relativePath}
            </p>

            {result.matches.length > 0 ? (
                <div className="matches">
                    <h4>Keyword Matches:</h4>
                    {result.matches.slice(0, 1).map((match, index) => ( // Show one snippet initially
                        <div key={index} className="match-snippet">
                            <strong>{match.keyword} (Page {match.page}):</strong>{' '}
                            <span
                                className="snippet-text"
                                dangerouslySetInnerHTML={{
                                    __html: match.snippet.replace(
                                        new RegExp(`(${match.keyword})`, 'gi'),
                                        '<b>$1</b>' // Bold matching keyword
                                    ),
                                }}
                                onClick={() => handleSnippetClick(result.relativePath, match.page)} // Clickable snippet
                            />
                        </div>
                    ))}
                    {isExpanded ? (
                        result.matches.slice(1).map((match, index) => ( // Show additional snippets if expanded
                            <div key={index} className="match-snippet">
                                <strong>{match.keyword} (Page {match.page }):</strong>{' '}
                                <span
                                    className="snippet-text"
                                    dangerouslySetInnerHTML={{
                                        __html: match.snippet.replace(
                                            new RegExp(`(${match.keyword})`, 'gi'),
                                            '<b>$1</b>' // Bold matching keyword
                                        ),
                                    }}
                                    onClick={() => handleSnippetClick(result.relativePath, match.page)} // Clickable snippet
                                />
                            </div>
                        ))
                    ) : null}
                    {result.matches.length > 1 && (
                        <button
                            className="toggle-matches-btn"
                            onClick={() => setIsExpanded(!isExpanded)}
                        >
                            {isExpanded ? 'Show Less' : `Show More (${result.matches.length - 1})`}
                        </button>
                    )}
                </div>
            ) : (
                <p className="no-matches">No matches found in this file.</p>
            )}
        </div>
    );
};

export default Home;    ...right of this and left of above and make whole page responsive /* Base styles */
body {
  font-family: Arial, sans-serif;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

.app-container {
  display: flex;
  min-height: 100vh;
  min-width: 100vw;
}

/* Sidebar styling */
.sidebar {
  width: 300px;
  background-color: #f7f7f7;
  height: 100vh;
  padding: 20px;
  border-right: 1px solid #e0e0e0;
}

.sidebar-header h2 {
  margin: 0;
  margin-top: 45px;
  padding-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.sidebar-content {
  margin-top: 20px;
}

.sidebar-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}

/* Dropdown styling */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 230px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}

.dropdown-content.show {
  display: block;
}

.suggestion-item {
  color: #333;
  padding: 12px 16px;
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #f5f5f5;
}

/* Main content styling */
.main-content {
  flex-grow: 1;
  padding: 40px;
  background-color: #fff;
}

/* Search form styling */
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.search-input {
  flex: 1;
  min-width: 150px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.search-button {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s;
}

.search-button:hover {
  background-color: #45a049;
}

.search-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* Results styling */
.results-section {
  margin-top: 30px;
}

.results-count {
  margin-bottom: 20px;
  color: #666;
}

.result-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 15px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.result-number {
  margin-right: 10px;
  font-weight: bold;
  color: #666;
}

.match-item {
  border-top: 1px solid #eee;
  margin-top: 15px;
  padding-top: 15px;
}

.loading, .no-results {
  text-align: center;
  color: #666;
  padding: 20px;
}

/* Error message styling */
.error-message {
  color: #d32f2f;
  margin: 10px 0;
  padding: 10px;
  background-color: #ffebee;
  border-radius: 4px;
}
.results-section {
    max-height: 400px; /* Adjust this value as needed */
    overflow-y: auto; /* Enables vertical scrolling */
    border: 1px solid #ccc; /* Optional: Add border for visual separation */
    padding: 10px; /* Optional: Add padding for comfort */
    border-radius: 5px; /* Optional: Rounded corners */
    background-color: #f9f9f9; /* Optional: Background color */
}

.result-card {
    padding: 10px;
    margin: 5px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.result-card:hover {
    background-color: #eeeeee; /* Highlight on hover */
}

/* For responsiveness */
@media (max-width: 768px) {
    .search-input {
        width: 90%; /* Make it responsive */
    }

    .results-section {
        max-height: 300px; /* Reduce height on smaller screens */
    }
}
.sidebar {
  width: 350px; /* set a fixed width for the sidebar */
  background-color: #f7f7f7; /* light background color */
  border-right: 1px solid #ddd; /* border to separate from main content */
  padding: 20px;
  position: relative; /* for positioning dropdown */
}

/* Sidebar header styles */
.sidebar-header {
  margin-bottom: 20px;
}

/* Input styles */
.sidebar-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px; /* rounded corners */
  margin-bottom: 10px; 
}

/* Dropdown styles */
.dropdown {
  position: relative; /* positioning for absolute dropdown */
}

/* Dropdown content styles */
.dropdown-content {
  position: absolute;
  left: 0;
  right: 0;
  max-height: 200px; /* limit dropdown height */
  overflow-y: auto; /* enable vertical scrolling */
  background-color: #fff; /* white background */
  border: 1px solid #ccc; /* border around dropdown */
  border-radius: 4px; /* rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* subtle shadow */
  z-index: 1000; /* ensure it appears on top */
  display: none; /* hide by default */
}

/* Show dropdown content when there are matches */
.dropdown-content.show {
  display: block; /* show dropdown */
}

/* Individual suggestion styles */
.suggestion-item {
  padding: 10px; /* padding inside suggestion item */
  text-decoration: none; /* remove underline from links */
  color: #333; /* text color */
  display: block; /* display block for full width */
}

/* Hover effect on suggestion items */
.suggestion-item:hover {
  background-color: #f0f0f0; /* light gray on hover */
}

/* No suggestion message styles */
.no-suggestions {
  padding: 10px; /* padding for no suggestions */
  color: #888; /* gray color */
}

/* Main content styles */
.main-content {
  padding: 20px; /* padding around main content */
  flex-grow: 1; /* take remaining space */
}    compltete home.js and home.css