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/private_html/src/pages/documents/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import DocumentEditor from '../../components/DocumentEditor';

interface Document {
  id: string;
  name: string;
  type: string;
  createdAt: string;
  versions: Version[];
  comments: Comment[];
  permissions: Permission[];
}
interface Version {
  id: string;
  version: number;
  content: string;
  createdAt: string;
  createdById: string;
}
interface Comment {
  id: string;
  content: string;
  createdAt: string;
  user: { id: string; name: string };
}
interface Permission {
  id: string;
  user: { id: string; name: string };
  canEdit: boolean;
  canComment: boolean;
  canView: boolean;
}

export default function DocumentDetailPage() {
  const router = useRouter();
  const { id } = router.query;
  const [doc, setDoc] = useState<Document | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!id) return;
    fetch(`/api/documents?id=${id}`)
      .then(res => res.json())
      .then(data => {
        setDoc(Array.isArray(data) ? data[0] : data);
        setLoading(false);
      });
  }, [id]);

  const handleVersionSave = () => {
    if (!id) return;
    setLoading(true);
    fetch(`/api/documents?id=${id}`)
      .then(res => res.json())
      .then(data => {
        setDoc(Array.isArray(data) ? data[0] : data);
        setLoading(false);
      });
  };

  if (loading) return <div style={{ padding: 32 }}>Loading...</div>;
  if (!doc) return <div style={{ padding: 32 }}>Document not found.</div>;

  return (
    <div style={{ maxWidth: 900, margin: '0 auto', padding: 32 }}>
      <Link href="/documents">&larr; Back to Documents</Link>
      <h1>{doc.name}</h1>
      <div style={{ color: '#888', marginBottom: 16 }}>{doc.type} | Created: {new Date(doc.createdAt).toLocaleString()}</div>
      <div style={{ display: 'flex', gap: 32 }}>
        <div style={{ flex: 2 }}>
          <h2>Editor (Latest Version)</h2>
          <DocumentEditor
            documentId={doc.id}
            initialContent={doc.versions[0]?.content || ''}
            onSave={handleVersionSave}
          />
          <h3>Version History</h3>
          <ul>
            {doc.versions.map(v => (
              <li key={v.id}>
                Version {v.version} - {new Date(v.createdAt).toLocaleString()} (by {v.createdById})
              </li>
            ))}
          </ul>
        </div>
        <div style={{ flex: 1, borderLeft: '1px solid #eee', paddingLeft: 24 }}>
          <h3>Comments</h3>
          {/* Placeholder for DocumentComments */}
          <ul>
            {doc.comments.map(c => (
              <li key={c.id}>
                <b>{c.user?.name || c.user?.id}</b>: {c.content} <span style={{ color: '#888', fontSize: 12 }}>{new Date(c.createdAt).toLocaleString()}</span>
              </li>
            ))}
          </ul>
          <h3>Permissions</h3>
          {/* Placeholder for DocumentPermissions */}
          <ul>
            {doc.permissions.map(p => (
              <li key={p.id}>
                <b>{p.user?.name || p.user?.id}</b>: [Edit: {p.canEdit ? 'Y' : 'N'} | Comment: {p.canComment ? 'Y' : 'N'} | View: {p.canView ? 'Y' : 'N'}]
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}