-
-
-
-
-
- Loading document...
-
-
-
-
-
-
-
PDF Viewer
-Page {{ currentPage }} of {{ totalPages }}
-{{ props.document.name }}
+
+
+
+
+
-
-
+
+
+
+
+
+
{{ document?.name }}
+{{ document?.extension?.toUpperCase() }} • {{ document?.size }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ currentPage }} / {{ totalPages }}
+
+
+
+
+
+
+
+
+ Download
+
+
+
+
+ Print
+
+
+
+
+ Edit
+
+
+
+
+
+
+
+
+
-
- 
+
+
+
+
-
-
-
+
-
+
+
Loading document...
+
-
-
-
-
-
\ No newline at end of file
diff --git a/composables/useAsnafMockData.js b/composables/useAsnafMockData.js
new file mode 100644
index 0000000..103f0a8
--- /dev/null
+++ b/composables/useAsnafMockData.js
@@ -0,0 +1,102 @@
+import { ref } from 'vue';
+
+export const useAsnafMockData = () => {
+ // Mock data for Asnaf (beneficiaries) module
+ const mockData = ref([
+ {
+ id: 1,
+ name: 'Ahmad bin Abdullah',
+ ic: '850123-01-1234',
+ phone: '019-1234567',
+ address: 'No. 123, Jalan Merdeka, 15000 Kota Bharu, Kelantan',
+ category: 'Fakir',
+ status: 'Active',
+ registrationDate: '2023-01-15',
+ lastUpdate: '2023-10-15'
+ },
+ {
+ id: 2,
+ name: 'Fatimah binti Hassan',
+ ic: '900615-05-5678',
+ phone: '013-9876543',
+ address: 'No. 456, Lorong Parit, 16150 Kubang Kerian, Kelantan',
+ category: 'Miskin',
+ status: 'Active',
+ registrationDate: '2023-02-20',
+ lastUpdate: '2023-09-30'
+ },
+ {
+ id: 3,
+ name: 'Omar bin Salleh',
+ ic: '751203-14-9012',
+ phone: '017-5554321',
+ address: 'No. 789, Kampung Tok Guru, 17070 Pasir Mas, Kelantan',
+ category: 'Gharimin',
+ status: 'Pending',
+ registrationDate: '2023-03-10',
+ lastUpdate: '2023-10-01'
+ }
+ ]);
+
+ const categories = ref([
+ 'Fakir',
+ 'Miskin',
+ 'Amil',
+ 'Muallaf',
+ 'Riqab',
+ 'Gharimin',
+ 'Fi Sabilillah',
+ 'Ibn Sabil'
+ ]);
+
+ const statuses = ref([
+ 'Active',
+ 'Pending',
+ 'Suspended',
+ 'Inactive'
+ ]);
+
+ // Methods
+ const getAsnafById = (id) => {
+ return mockData.value.find(item => item.id === parseInt(id));
+ };
+
+ const getAsnafByCategory = (category) => {
+ return mockData.value.filter(item => item.category === category);
+ };
+
+ const updateAsnaf = (id, updatedData) => {
+ const index = mockData.value.findIndex(item => item.id === parseInt(id));
+ if (index !== -1) {
+ mockData.value[index] = { ...mockData.value[index], ...updatedData };
+ return mockData.value[index];
+ }
+ return null;
+ };
+
+ const addAsnaf = (newData) => {
+ const newId = Math.max(...mockData.value.map(item => item.id)) + 1;
+ const newAsnaf = { id: newId, ...newData };
+ mockData.value.push(newAsnaf);
+ return newAsnaf;
+ };
+
+ const deleteAsnaf = (id) => {
+ const index = mockData.value.findIndex(item => item.id === parseInt(id));
+ if (index !== -1) {
+ return mockData.value.splice(index, 1)[0];
+ }
+ return null;
+ };
+
+ return {
+ mockData,
+ categories,
+ statuses,
+ getAsnafById,
+ getAsnafByCategory,
+ updateAsnaf,
+ addAsnaf,
+ deleteAsnaf
+ };
+};
\ No newline at end of file
diff --git a/pages/dms/index.vue b/pages/dms/index.vue
index 3aa9f57..09dc6e6 100644
--- a/pages/dms/index.vue
+++ b/pages/dms/index.vue
@@ -2,6 +2,7 @@
import { ref, computed, onMounted } from 'vue';
import { useDmsStore } from '~/stores/dms';
import DMSNavigation from '~/components/dms/navigation/DMSNavigation.vue';
+import DMSExplorer from '~/components/dms/explorer/DMSExplorer.vue';
// Define page metadata
definePageMeta({
@@ -30,6 +31,8 @@ const searchQuery = ref('');
const isSearching = ref(false);
const currentPath = ref('JKR Cawangan Kota Bharu, Kelantan');
const viewMode = ref('explorer'); // explorer, cabinets, list
+const selectedItem = ref(null);
+const activeTab = ref('all');
// File selection state
const selectedFiles = ref([]);
@@ -123,57 +126,41 @@ const formatFileSize = (size) => {
return `${size.toFixed(2)} ${units[i]}`;
};
-// Mock data for the example
-const mockFiles = [
- {
- id: 'file1',
- name: 'Pembangunan_Sistem_IT_2021.pdf',
- type: 'file',
- extension: 'pdf',
- size: '4MB',
- modified: '2021-05-20',
- status: 'locked',
- info: {
- title: 'Projek Pembangunan Sistem IT',
- subject: 'Dokumen spesifikasi sistem',
- state: 'Kelantan',
- date: '2021-05-20',
- user: 'Mohd Faizal bin Abdullah',
- storeDate: '2021-05-25'
- }
- },
- {
- id: 'file2',
- name: 'Projek_Jalan_Raya_Kota_Bharu.pdf',
- type: 'file',
- extension: 'pdf',
- size: '5MB',
- modified: '2021-06-15',
- status: 'unlocked'
- },
- {
- id: 'file3',
- name: 'Anggaran_Kos_Projek_MRT3.xlsx',
- type: 'file',
- extension: 'xlsx',
- size: '3MB',
- modified: '2021-07-10',
- status: 'locked'
- },
- {
- id: 'file4',
- name: 'EIA_Empangan_Nenggiri.pdf',
- type: 'file',
- extension: 'pdf',
- size: '15MB',
- modified: '2021-04-18',
- status: 'locked'
- }
+// Document category tabs
+const documentTabs = [
+ { id: 'all', label: 'All Documents', icon: 'folder' },
+ { id: 'public', label: 'Public', icon: 'unlock' },
+ { id: 'private', label: 'Private', icon: 'lock' },
+ { id: 'personal', label: 'Personal', icon: 'user' }
];
+// Handle events from explorer
+const handleItemSelected = (item) => {
+ selectedItem.value = item;
+};
+
+const handleViewModeChanged = (mode) => {
+ console.log('View mode changed to:', mode);
+};
+
+const handlePathChanged = (path) => {
+ currentPath.value = path;
+};
+
+// Get SVG icon
+const getSvgIcon = (iconType, size = 16) => {
+ const icons = {
+ folder: ``,
+ unlock: ``,
+ lock: ``,
+ user: ``
+ };
+ return icons[iconType] || icons.folder;
+};
+
// Lifecycle hooks
onMounted(() => {
- // In a real app, we would load the initial data here
+ // Any initialization logic
});
@@ -183,270 +170,34 @@ onMounted(() => {
-
-
-
-
- {{ documentType.charAt(0).toUpperCase() + documentType.slice(1) }} Viewer
-{{ props.document.name }}
+ + +
+
-
+
+
+
+
+
+
+
+
+
+
+ {{ document.name }}
+PDF Document Preview
+Page {{ currentPage }} of {{ totalPages }}
+
+ ![]()
+
+
+
+
+
+
+
+
+ {{ document.name }}
+{{ document.extension?.toUpperCase() }} Document Preview
+Preview not available for this file type
+
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor ligula nec nisl consectetur, nec tincidunt nisl tincidunt. Duis vitae urna euismod, volutpat nisl ac, malesuada nunc.
-Sed vel lectus vel orci ultrices tincidunt. Nulla facilisi. Donec vitae nisi vel elit elementum tincidunt. Sed vel justo vel nisi volutpat tincidunt. Duis vitae urna euismod, volutpat nisl ac, malesuada nunc.
+ + +
+
+
+
+
+ Download to view
+
+
Preview not available
+This file type cannot be previewed
+
-
-
-
- Download File
-
-
Preview not available
-This file type cannot be previewed
-
-
-