first commit

src/app/dashboard/documents/page.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import styles from './dms.module.css';
+import SmartSearchModal from '@/components/dms/SmartSearchModal'; // We'll need to create this
+
+export default function DMSDashboard() {
+    const [stats] = useState({
+        totalFiles: 1240,
+        usedStorage: '4.2 GB',
+        totalStorage: '10 GB',
+        recentUploads: 5
+    });
+
+    const recentDocs = [
+        { id: 1, name: 'Project_Alpha_proposal.pdf', type: 'PDF', size: '2.4 MB', date: '2024-11-20' },
+        { id: 2, name: 'Invoice_Nov_2024.pdf', type: 'PDF', size: '1.1 MB', date: '2024-11-19' },
+        { id: 3, name: 'Site_Images_Nov.zip', type: 'ZIP', size: '15 MB', date: '2024-11-18' },
+        { id: 4, name: 'Meeting_Notes_Q3.docx', type: 'DOCX', size: '450 KB', date: '2024-11-15' },
+    ];
+
+    const [showSearch, setShowSearch] = useState(false);
+
+    return (
+        <div className={styles.container}>
+            {showSearch && <SmartSearchModal onClose={() => setShowSearch(false)} />}
+
+            {/* Header */}
+            <div className={styles.header}>
+                <div>
+                    <h1>Documents</h1>
+                    <p className={styles.subtitle}>Securely manage and organize your digital assets</p>
+                </div>
+                <div className={styles.actions}>
+                    <Link href="/dashboard/documents/upload" className={styles.btnPrimary}>
+                        + Upload New
+                    </Link>
+                </div>
+            </div>
+
+            {/* Stats Cards */}
+            <div className={styles.statsGrid}>
+                <div className={styles.statCard}>
+                    <span className={styles.statIcon}>📂</span>
+                    <div className={styles.statInfo}>
+                        <h3>All Files</h3>
+                        <p>{stats.totalFiles}</p>
+                    </div>
+                </div>
+                <div className={styles.statCard}>
+                    <span className={styles.statIcon}>☁️</span>
+                    <div className={styles.statInfo}>
+                        <h3>Storage Used</h3>
+                        <p>{stats.usedStorage} <span className={styles.subStat}>/ {stats.totalStorage}</span></p>
+                    </div>
+                    {/* Simple Progress Bar */}
+                    <div className={styles.progressBar}>
+                        <div style={{ width: '42%' }}></div>
+                    </div>
+                </div>
+                <div className={styles.statCard}>
+                    <span className={styles.statIcon}>🕒</span>
+                    <div className={styles.statInfo}>
+                        <h3>Recent Uploads</h3>
+                        <p>{stats.recentUploads} <span className={styles.subStat}>this week</span></p>
+                    </div>
+                </div>
+            </div>
+
+            {/* Recent Documents Table */}
+            <div className={styles.section}>
+                <div className={styles.sectionHeader}>
+                    <h2>Recent Documents</h2>
+                    <Link href="/dashboard/documents/all" className={styles.link}>View All</Link>
+                </div>
+                <div className={styles.tableContainer}>
+                    <table className={styles.table}>
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Size</th>
+                                <th>Date</th>
+                                <th>Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {recentDocs.map(doc => (
+                                <tr key={doc.id}>
+                                    <td>
+                                        <div className={styles.fileName}>
+                                            <span className={styles.fileIcon}>📄</span>
+                                            {doc.name}
+                                        </div>
+                                    </td>
+                                    <td>{doc.type}</td>
+                                    <td>{doc.size}</td>
+                                    <td>{doc.date}</td>
+                                    <td>
+                                        <button className={styles.iconBtn}>⋮</button>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            {/* Quick Actions Grid */}
+            <h2 style={{ marginTop: '2rem', marginBottom: '1rem' }}>Quick Actions</h2>
+            <div className={styles.quickActions}>
+                <div className={styles.actionCard} onClick={() => setShowSearch(true)}>
+                    <span className={styles.actionIcon}>🔍</span>
+                    <h3>Smart Search</h3>
+                    <p>Find documents by content or tags</p>
+                </div>
+                <div className={styles.actionCard}>
+                    <span className={styles.actionIcon}>🏷️</span>
+                    <h3>Manage Tags</h3>
+                    <p>Organize files with custom labels</p>
+                </div>
+                <div className={styles.actionCard}>
+                    <span className={styles.actionIcon}>🗑️</span>
+                    <h3>Trash</h3>
+                    <p>Recover deleted items</p>
+                </div>
+            </div>
+        </div>
+    );
+}