From 3edf9b5750e4ca578376f012fe13f5b93bc53077 Mon Sep 17 00:00:00 2001
From: MuhdAthir <athirx1@gmail.com>
Date: Sat, 31 May 2025 10:31:10 +0800
Subject: [PATCH] Add ERD Page

---
 navigation/index.js |   7 +
 pages/dms/erd.vue   | 670 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 677 insertions(+)
 create mode 100644 pages/dms/erd.vue

diff --git a/navigation/index.js b/navigation/index.js
index 307749d..5f2c6af 100644
--- a/navigation/index.js
+++ b/navigation/index.js
@@ -18,6 +18,13 @@ export default [
     "header": "DMS",
     "description": "Document Management System",
     "child": [
+      {
+        "title": "ERD",
+        "path": "/dms/erd",
+        "icon": "material-symbols:database-sharp",
+        "child": [],
+        "meta": {}
+      },
       {
         "title": "Document Management",
         "path": "/dms",
diff --git a/pages/dms/erd.vue b/pages/dms/erd.vue
new file mode 100644
index 0000000..d1c7bdb
--- /dev/null
+++ b/pages/dms/erd.vue
@@ -0,0 +1,670 @@
+<template>
+  <div class="erd-container">
+    <h1 class="title">Document Management System - Entity Relationship Diagram</h1>
+    
+    <div class="erd-grid">
+      <!-- User Entity -->
+      <div class="entity">
+        <div class="entity-header">User</div>
+        <div class="entity-body">
+          <div class="attribute">
+            <span class="attribute-name key">id</span>
+            <span class="attribute-type">int PK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">username</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">email</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">password_hash</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">role</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">created_at</span>
+            <span class="attribute-type">datetime</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">updated_at</span>
+            <span class="attribute-type">datetime</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cabinet Entity -->
+      <div class="entity">
+        <div class="entity-header">Cabinet</div>
+        <div class="entity-body">
+          <div class="attribute">
+            <span class="attribute-name key">id</span>
+            <span class="attribute-type">int PK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">name</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">description</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">type</span>
+            <span class="attribute-type">enum "public/private"</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">is_active</span>
+            <span class="attribute-type">boolean</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">created_at</span>
+            <span class="attribute-type">datetime</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">updated_at</span>
+            <span class="attribute-type">datetime</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Unit Entity -->
+      <div class="entity">
+        <div class="entity-header">Unit</div>
+        <div class="entity-body">
+          <div class="attribute">
+            <span class="attribute-name key">id</span>
+            <span class="attribute-type">int PK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">cabinet_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">name</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">description</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">is_active</span>
+            <span class="attribute-type">boolean</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Project Entity -->
+      <div class="entity">
+        <div class="entity-header">Project</div>
+        <div class="entity-body">
+          <div class="attribute">
+            <span class="attribute-name key">id</span>
+            <span class="attribute-type">int PK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">unit_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">name</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">description</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">has_discipline</span>
+            <span class="attribute-type">boolean</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">is_active</span>
+            <span class="attribute-type">boolean</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Document Entity -->
+      <div class="entity">
+        <div class="entity-header">Document</div>
+        <div class="entity-body">
+          <div class="attribute">
+            <span class="attribute-name key">id</span>
+            <span class="attribute-type">int PK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">project_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">discipline_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">name</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">file_name</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">file_type</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">file_size</span>
+            <span class="attribute-type">int</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">status</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">is_public</span>
+            <span class="attribute-type">boolean</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">is_template</span>
+            <span class="attribute-type">boolean</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">created_at</span>
+            <span class="attribute-type">datetime</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">updated_at</span>
+            <span class="attribute-type">datetime</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- DocumentMetadata Entity -->
+      <div class="entity">
+        <div class="entity-header">DocumentMetadata</div>
+        <div class="entity-body">
+          <div class="attribute">
+            <span class="attribute-name key">id</span>
+            <span class="attribute-type">int PK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">document_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">tajuk</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">perkara</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">negeri</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">tarikh</span>
+            <span class="attribute-type">date</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">user</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">fulltext</span>
+            <span class="attribute-type">text</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- DocumentVersion Entity -->
+      <div class="entity">
+        <div class="entity-header">DocumentVersion</div>
+        <div class="entity-body">
+          <div class="attribute">
+            <span class="attribute-name key">id</span>
+            <span class="attribute-type">int PK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">document_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">version</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">file_path</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">created_at</span>
+            <span class="attribute-type">datetime</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- UserCabinetAccess Entity -->
+      <div class="entity">
+        <div class="entity-header">UserCabinetAccess</div>
+        <div class="entity-body">
+          <div class="attribute">
+            <span class="attribute-name key">id</span>
+            <span class="attribute-type">int PK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">user_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">cabinet_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">access_type</span>
+            <span class="attribute-type">enum</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">start_date</span>
+            <span class="attribute-type">date</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">end_date</span>
+            <span class="attribute-type">date</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">is_active</span>
+            <span class="attribute-type">boolean</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- UserDocumentAccess Entity -->
+      <div class="entity">
+        <div class="entity-header">UserDocumentAccess</div>
+        <div class="entity-body">
+          <div class="attribute">
+            <span class="attribute-name key">id</span>
+            <span class="attribute-type">int PK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">user_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">document_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">access_type</span>
+            <span class="attribute-type">enum</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">start_date</span>
+            <span class="attribute-type">date</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">end_date</span>
+            <span class="attribute-type">date</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">is_active</span>
+            <span class="attribute-type">boolean</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Access Request Entity -->
+      <div class="entity">
+        <div class="entity-header">AccessRequest</div>
+        <div class="entity-body">
+          <div class="attribute">
+            <span class="attribute-name key">id</span>
+            <span class="attribute-type">int PK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">user_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">target_id</span>
+            <span class="attribute-type">int</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">target_type</span>
+            <span class="attribute-type">string "document/cabinet"</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">access_type</span>
+            <span class="attribute-type">enum</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">duration_days</span>
+            <span class="attribute-type">int</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">justification</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">status</span>
+            <span class="attribute-type">enum</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">created_at</span>
+            <span class="attribute-type">datetime</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">updated_at</span>
+            <span class="attribute-type">datetime</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Discipline Entity -->
+      <div class="entity">
+        <div class="entity-header">Discipline</div>
+        <div class="entity-body">
+          <div class="attribute">
+            <span class="attribute-name key">id</span>
+            <span class="attribute-type">int PK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">cabinet_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">name</span>
+            <span class="attribute-type">string</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">description</span>
+            <span class="attribute-type">string</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- DocumentTag Entity -->
+      <div class="entity">
+        <div class="entity-header">DocumentTag</div>
+        <div class="entity-body">
+          <div class="attribute">
+            <span class="attribute-name key">id</span>
+            <span class="attribute-type">int PK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name foreign-key">document_id</span>
+            <span class="attribute-type">int FK</span>
+          </div>
+          <div class="attribute">
+            <span class="attribute-name">tag_name</span>
+            <span class="attribute-type">string</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="relationships">
+      <h2>Key Relationships</h2>
+      <div class="relationship">
+        <span>User</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:N</span>
+        <span class="relationship-line"></span>
+        <span>AccessRequest</span>
+      </div>
+      <div class="relationship">
+        <span>Cabinet</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:N</span>
+        <span class="relationship-line"></span>
+        <span>Unit</span>
+      </div>
+      <div class="relationship">
+        <span>Cabinet</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:N</span>
+        <span class="relationship-line"></span>
+        <span>Discipline</span>
+      </div>
+      <div class="relationship">
+        <span>Unit</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:N</span>
+        <span class="relationship-line"></span>
+        <span>Project</span>
+      </div>
+      <div class="relationship">
+        <span>Project</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:N</span>
+        <span class="relationship-line"></span>
+        <span>Document</span>
+      </div>
+      <div class="relationship">
+        <span>Discipline</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:N</span>
+        <span class="relationship-line"></span>
+        <span>Document</span>
+      </div>
+      <div class="relationship">
+        <span>Document</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:N</span>
+        <span class="relationship-line"></span>
+        <span>DocumentVersion</span>
+      </div>
+      <div class="relationship">
+        <span>Document</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:1</span>
+        <span class="relationship-line"></span>
+        <span>DocumentMetadata</span>
+      </div>
+      <div class="relationship">
+        <span>Document</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:N</span>
+        <span class="relationship-line"></span>
+        <span>DocumentTag</span>
+      </div>
+      <div class="relationship">
+        <span>User</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:N</span>
+        <span class="relationship-line"></span>
+        <span>UserCabinetAccess</span>
+      </div>
+      <div class="relationship">
+        <span>User</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:N</span>
+        <span class="relationship-line"></span>
+        <span>UserDocumentAccess</span>
+      </div>
+      <div class="relationship">
+        <span>Cabinet</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:N</span>
+        <span class="relationship-line"></span>
+        <span>UserCabinetAccess</span>
+      </div>
+      <div class="relationship">
+        <span>Document</span>
+        <span class="relationship-line"></span>
+        <span class="cardinality">1:N</span>
+        <span class="relationship-line"></span>
+        <span>UserDocumentAccess</span>
+      </div>
+    </div>
+
+    <div class="legend">
+      <h2>Legend</h2>
+      <div class="legend-item">
+        <div class="legend-color" style="background-color: #e74c3c;"></div>
+        <span>Primary Key (PK)</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color" style="background-color: #27ae60;"></div>
+        <span>Foreign Key (FK)</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color" style="background-color: #3498db;"></div>
+        <span>Relationship</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ErdDiagram',
+  head() {
+    return {
+      title: 'Document Management System - ERD'
+    }
+  }
+}
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+  padding: 2rem;
+  background-color: #f5f5f5;
+}
+
+.erd-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  background-color: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.title {
+  text-align: center;
+  color: #2c3e50;
+  margin-bottom: 2rem;
+  font-size: 24px;
+}
+
+.erd-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.entity {
+  border: 2px solid #3498db;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.entity-header {
+  background-color: #3498db;
+  color: white;
+  padding: 0.75rem;
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+.entity-body {
+  padding: 1rem;
+}
+
+.attribute {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem;
+  border-bottom: 1px solid #eee;
+}
+
+.attribute:last-child {
+  border-bottom: none;
+}
+
+.attribute-name {
+  color: #2c3e50;
+}
+
+.attribute-type {
+  color: #7f8c8d;
+  font-size: 0.9rem;
+}
+
+.key {
+  color: #e74c3c;
+  font-weight: bold;
+}
+
+.foreign-key {
+  color: #27ae60;
+  font-style: italic;
+}
+
+.relationships {
+  margin-top: 2rem;
+  background-color: #f8f9fa;
+  padding: 1rem;
+  border-radius: 8px;
+}
+
+.relationship {
+  display: flex;
+  align-items: center;
+  margin: 0.5rem 0;
+  padding: 0.5rem;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.relationship-line {
+  flex: 1;
+  height: 2px;
+  background-color: #3498db;
+  margin: 0 1rem;
+}
+
+.cardinality {
+  color: #e74c3c;
+  font-weight: bold;
+}
+
+.legend {
+  margin-top: 2rem;
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  margin: 0.5rem 0;
+}
+
+.legend-color {
+  width: 20px;
+  height: 20px;
+  margin-right: 1rem;
+  border-radius: 4px;
+}
+</style> 
\ No newline at end of file