client/src/RightBar.jsx

import React from 'react';
import { FaFileAlt } from 'react-icons/fa';

const RightBar = ({ reports, onSelect }) => {
  return (
    <div className="hidden lg:block w-80 p-4 border-l border-gray-800 h-screen sticky top-0 overflow-y-auto">

      <div className="bg-gray-900 rounded-2xl p-4 mb-4">

        <h2 className="font-bold text-xl mb-4">Storage</h2>

        <div className="space-y-4">

          {reports.map((report) => (

            <div 

              key={report._id} 

              draggable 

              onDragEnd={() => onSelect(report)} // Simple Drag Logic: Drop anywhere to select

              onClick={() => onSelect(report)}

              className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded-xl cursor-grab active:cursor-grabbing transition"

            >

              <div className="bg-blue-500/20 text-blue-500 p-3 rounded-lg">

                <FaFileAlt />

              </div>

              <div className="overflow-hidden">

                <p className="font-bold truncate">Acct: {report.accountId}</p>

                <p className="text-sm text-gray-500">{new Date(report.uploadDate).toLocaleDateString()}</p>

              </div>

            </div>

          ))}

          {reports.length === 0 && <p className="text-gray-500">No reports found.</p>}

        </div>

      </div>

    </div>
  );
};

export default RightBar;