main page

src/pages/AssetsPage.jsx

@@ -0,0 +1,47 @@
+import { useState } from 'react'
+import { FaServer, FaDesktop, FaPrint, FaNetworkWired } from 'react-icons/fa6'
+
+export default function AssetsPage() {
+  const [searchTerm, setSearchTerm] = useState('')
+
+  // Placeholder data - would come from Appwrite in production
+  const assetCategories = [
+    { icon: FaServer, name: 'Servers', count: 0 },
+    { icon: FaDesktop, name: 'Workstations', count: 0 },
+    { icon: FaPrint, name: 'Printers', count: 0 },
+    { icon: FaNetworkWired, name: 'Network Devices', count: 0 }
+  ]
+
+  return (
+    <div className="main-content">
+      <header className="text-center mb-2">
+        <h2>Assets Management</h2>
+      </header>
+
+      <div className="search-bar mb-2">
+        <input
+          type="text"
+          placeholder="Search assets..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="input"
+          style={{ width: '100%', maxWidth: '400px' }}
+        />
+      </div>
+
+      <div className="assets-grid">
+        {assetCategories.map(({ icon: Icon, name, count }) => (
+          <div key={name} className="asset-card">
+            <Icon size={48} className="text-teal" />
+            <h4>{name}</h4>
+            <span className="asset-count">{count}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className="text-center mt-4 text-grey">
+        <p>Asset management module - Connect to Appwrite to manage your IT assets.</p>
+      </div>
+    </div>
+  )
+}