Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.ca/public_html/src/pages/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import LayoutWithSidebar from '@/components/LayoutWithSidebar';
import CaseChatWidget from '@/components/CaseChatWidget';
import { Button } from '@/components/ui/button';
import { MessageSquare, ArrowLeft } from 'lucide-react';

const TestCaseChatPage = () => {
  const { data: session, status } = useSession();
  const router = useRouter();

  // Sample case ID for testing
  const sampleCaseId = 'test-case-123';
  const sampleCaseTitle = 'Test Case - Contract Dispute';

  if (status === 'loading') {
    return (
      <LayoutWithSidebar>
        <div className="p-8">
          <div className="max-w-4xl mx-auto">
            <div className="animate-pulse space-y-4">
              <div className="h-8 bg-gray-200 rounded w-1/3"></div>
              <div className="h-96 bg-gray-200 rounded"></div>
            </div>
          </div>
        </div>
      </LayoutWithSidebar>
    );
  }

  if (!session) {
    router.push('/auth/login');
    return null;
  }

  return (
    <LayoutWithSidebar>
      <div className="p-6">
        <div className="max-w-4xl mx-auto">
          {/* Header */}
          <div className="mb-6">
            <div className="flex items-center gap-4 mb-4">
              <Button
                variant="outline"
                onClick={() => router.push('/admin/cases')}
                className="flex items-center gap-2"
              >
                <ArrowLeft className="h-4 w-4" />
                Back to Cases
              </Button>
            </div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              Case Chat System Test
            </h1>
            <p className="text-gray-600">
              Testing the case-specific team chat functionality
            </p>
          </div>

          {/* Test Information */}
          <div className="mb-6">
            <div className="flex items-center gap-2">
              <MessageSquare className="h-5 w-5" />
              <h2 className="text-2xl font-semibold">Test Information</h2>
            </div>
            <p className="text-gray-600">
              <strong>Current User:</strong> {session.user.name}<br />
              <strong>Email:</strong> {session.user.email}<br />
              <strong>Role:</strong> {session.user.role}
            </p>
            <p className="text-gray-600">
              <strong>Test Case:</strong> {sampleCaseId}<br />
              <strong>Case Title:</strong> {sampleCaseTitle}
            </p>
            <p className="text-gray-600">
              <strong>Features to Test:</strong>
              <ul className="list-disc list-inside">
                <li>Opening and closing the chat widget</li>
                <li>Sending text messages</li>
                <li>File upload and sharing</li>
                <li>Team member panel</li>
                <li>Typing indicators</li>
                <li>Real-time message updates</li>
              </ul>
            </p>
          </div>

          {/* Case Chat Widget */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2">
              <CaseChatWidget 
                caseId={sampleCaseId}
                caseTitle={sampleCaseTitle}
              />
            </div>
            
            {/* Instructions */}
            <div className="space-y-4">
              <div className="p-4 border rounded-lg">
                <h3 className="font-semibold text-gray-900 mb-2">Instructions</h3>
                <div className="space-y-3 text-sm">
                  <div>
                    <h4 className="font-semibold text-gray-900">1. Open Chat</h4>
                    <p className="text-gray-600">Click "Open Case Chat" to start the chat interface</p>
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900">2. Send Message</h4>
                    <p className="text-gray-600">Type a message and press Enter or click Send</p>
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900">3. Upload File</h4>
                    <p className="text-gray-600">Click the paperclip icon to attach a file</p>
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900">4. View Team</h4>
                    <p className="text-gray-600">Toggle the team panel to see case members</p>
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900">5. Close Chat</h4>
                    <p className="text-gray-600">Click the X button to close the chat</p>
                  </div>
                </div>
              </div>

              <div className="p-4 border rounded-lg">
                <h3 className="font-semibold text-gray-900 mb-2">Expected Behavior</h3>
                <div className="space-y-2 text-sm">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span className="text-gray-600">Chat widget opens/closes smoothly</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span className="text-gray-600">Messages appear in real-time</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span className="text-gray-600">File uploads work correctly</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span className="text-gray-600">Team panel shows case members</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span className="text-gray-600">Typing indicators appear</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </LayoutWithSidebar>
  );
};

export default TestCaseChatPage;