pgo-uiux2 1.0.0

package/src/pgo-components/services/axios.js

@@ -0,0 +1,54 @@
+import axios from 'axios'
+
+// Create axios instance with default config
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api',
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  }
+})
+
+// Request interceptor
+api.interceptors.request.use(
+  (config) => {
+    // Add auth token if exists
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+// Response interceptor
+api.interceptors.response.use(
+  (response) => {
+    return response.data
+  },
+  (error) => {
+    // Handle errors globally
+    if (error.response) {
+      // Server responded with error
+      console.error('API Error:', error.response.data)
+      
+      // Handle specific status codes
+      if (error.response.status === 401) {
+        // Unauthorized - redirect to login
+        localStorage.removeItem('token')
+        // router.push('/login') // Uncomment if using vue-router
+      }
+    } else if (error.request) {
+      // Request made but no response
+      console.error('Network Error:', error.request)
+    } else {
+      console.error('Error:', error.message)
+    }
+    return Promise.reject(error)
+  }
+)
+
+export default api

package/src/pgo-components/services/data.json

@@ -0,0 +1,90 @@
+{
+    "data": [
+        {
+            "country_id": 1,
+            "id": 1,
+            "first_name_div": "\u07a2\u07a6\u078d\u07a9",
+            "gender": "F",
+            "is_in_custody": 0,
+            "date_of_birth": "1952-02-22"
+        },
+        {
+            "country_id": 1,
+            "id": 2,
+            "first_name_div": "\u0787\u07a7\u078b\u07a6\u0789\u07b0",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1986-03-08"
+        },
+        {
+            "country_id": 1,
+            "id": 3,
+            "first_name_div": "\u0799\u07a6\u0790\u07a6\u0782\u07b0",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1965-05-13"
+        },
+        {
+            "country_id": 1,
+            "id": 4,
+            "first_name_div": "\u0789\u07aa\u0799\u07a6\u0787\u07b0\u0789\u07a6\u078b\u07aa",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1951-03-16"
+        },
+        {
+            "country_id": 1,
+            "id": 5,
+            "first_name_div": "\u0799\u07aa\u0790\u07a6\u0787\u07a8\u0782\u07b0",
+            "gender": "F",
+            "is_in_custody": 0,
+            "date_of_birth": "1981-03-22"
+        },
+        {
+            "country_id": 1,
+            "id": 6,
+            "first_name_div": "\u079d\u07a7\u0782\u07aa",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1900-01-01"
+        },
+        {
+            "country_id": 1,
+            "id": 7,
+            "first_name_div": "\u0787\u07a6\u0799\u07b0\u0789\u07a6\u078b\u07aa",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1983-02-22"
+        },
+        {
+            "country_id": 49,
+            "id": 8,
+            "first_name_div": "\u0787\u07a6\u0799\u07aa\u0789\u07a6\u078b\u07aa",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1984-02-22"
+        },
+        {
+            "country_id": 1,
+            "id": 9,
+            "first_name_div": "\u0787\u07a6\u0799\u07b0\u0789\u07a6\u078b\u07aa",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1986-11-18"
+        },
+        {
+            "country_id": 1,
+            "id": 10,
+            "first_name_div": "\u07a2\u07a6\u078a\u07a9\u078a\u07a7",
+            "gender": "F",
+            "is_in_custody": 0,
+            "date_of_birth": "1978-02-22"
+        }
+    ],
+    "pagination": {
+        "current_page": 1,
+        "last_page": 5087,
+        "per_page": 10,
+        "total": 50868
+    }
+}

package/src/pgo-components/services/person.json

@@ -0,0 +1,260 @@
+{
+    "data": [
+        {
+            "country_id": 1,
+            "id": 1,
+            "first_name_div": "\u07a2\u07a6\u078d\u07a9",
+            "gender": "F",
+            "is_in_custody": 0,
+            "date_of_birth": "1952-02-22"
+        },
+        {
+            "country_id": 1,
+            "id": 2,
+            "first_name_div": "\u0787\u07a7\u078b\u07a6\u0789\u07b0",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1986-03-08"
+        },
+        {
+            "country_id": 1,
+            "id": 3,
+            "first_name_div": "\u0799\u07a6\u0790\u07a6\u0782\u07b0",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1965-05-13"
+        },
+        {
+            "country_id": 1,
+            "id": 4,
+            "first_name_div": "\u0789\u07aa\u0799\u07a6\u0787\u07b0\u0789\u07a6\u078b\u07aa",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1951-03-16"
+        },
+        {
+            "country_id": 1,
+            "id": 5,
+            "first_name_div": "\u0799\u07aa\u0790\u07a6\u0787\u07a8\u0782\u07b0",
+            "gender": "F",
+            "is_in_custody": 0,
+            "date_of_birth": "1981-03-22"
+        },
+        {
+            "country_id": 1,
+            "id": 6,
+            "first_name_div": "\u079d\u07a7\u0782\u07aa",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1900-01-01"
+        },
+        {
+            "country_id": 1,
+            "id": 7,
+            "first_name_div": "\u0787\u07a6\u0799\u07b0\u0789\u07a6\u078b\u07aa",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1983-02-22"
+        },
+        {
+            "country_id": 49,
+            "id": 8,
+            "first_name_div": "\u0787\u07a6\u0799\u07aa\u0789\u07a6\u078b\u07aa",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1984-02-22"
+        },
+        {
+            "country_id": 1,
+            "id": 9,
+            "first_name_div": "\u0787\u07a6\u0799\u07b0\u0789\u07a6\u078b\u07aa",
+            "gender": "M",
+            "is_in_custody": 0,
+            "date_of_birth": "1986-11-18"
+        },
+        {
+            "country_id": 1,
+            "id": 10,
+            "first_name_div": "\u07a2\u07a6\u078a\u07a9\u078a\u07a7",
+            "gender": "F",
+            "is_in_custody": 0,
+            "date_of_birth": "1978-02-22"
+        }
+    ],
+    "component": "listView",
+    "componentSettings": {
+        "dataSource": "/var/www/uiux/src/services/data.json",
+        "table": {
+            "pagination": {
+                "current_page": 1,
+                "last_page": 5087,
+                "per_page": 10,
+                "total": 50868
+            },
+            "headers": [
+                {
+                    "title": "\u078a\u07aa\u0783\u07a6\u078c\u07a6\u0789\u07a6 \u0782\u07a6\u0782\u07b0",
+                    "value": "first_name_div",
+                    "sortable": true,
+                    "hidden": false,
+                    "type": "string",
+                    "displayType": "text"
+                },
+                {
+                    "title": "\u0796\u07a8\u0782\u07b0\u0790\u07aa",
+                    "value": "gender",
+                    "sortable": false,
+                    "hidden": false,
+                    "type": "string",
+                    "displayType": "select",
+                    "displayProps": {
+                        "items": [
+                            {
+                                "title": "Male",
+                                "value": "M"
+                            },
+                            {
+                                "title": "Female",
+                                "value": "F"
+                            }
+                        ]
+                    },
+                    "inlineEditable": true,
+                    "lang": "en"
+                },
+                {
+                    "title": "\u0789\u07a8\u0788\u07a6\u078e\u07aa\u078c\u07aa\u0784\u07a6\u0782\u07b0\u078b\u07aa\u078e\u07a6\u0787\u07a8",
+                    "value": "is_in_custody",
+                    "sortable": true,
+                    "hidden": false,
+                    "type": "boolean",
+                    "displayType": "checkbox",
+                    "displayProps": {
+                        "color": "primary"
+                    },
+                    "lang": "en",
+                    "inlineEditable": true
+                },
+                {
+                    "title": "\u0787\u07aa\u078a\u07a6\u0782\u07b0 \u078b\u07aa\u0788\u07a6\u0790\u07b0",
+                    "value": "date_of_birth",
+                    "sortable": true,
+                    "hidden": false,
+                    "type": "date",
+                    "displayType": "text",
+                    "lang": "en"
+                }
+            ]
+        },
+        "FilterSection": {
+            "settings": {
+                "type": "submit"
+            },
+            "buttons": [
+                {
+                    "type": "submit",
+                    "color": "primary",
+                    "prependIcon": "magnifying-glass",
+                    "variant": "contained"
+                },
+                {
+                    "type": "Clear",
+                    "label": "Clear",
+                    "color": "secondary"
+                },
+                {
+                    "type": "Close",
+                    "label": "Close",
+                    "color": "gray"
+                }
+            ],
+            "filters": [
+                {
+                    "type": "Select",
+                    "key": "gender",
+                    "label": "\u0796\u07a8\u0782\u07b0\u0790\u07aa",
+                    "itemTitle": "itemTitleDv",
+                    "itemValue": "itemValue",
+                    "items": [
+                        {
+                            "itemTitleDv": "-\u0782\u07ac\u078c\u07b0-",
+                            "itemValue": ""
+                        },
+                        {
+                            "itemTitleDv": "\u078a\u07a8\u0783\u07a8\u0780\u07ac\u0782\u07b0",
+                            "itemValue": "M"
+                        },
+                        {
+                            "itemTitleDv": "\u0787\u07a6\u0782\u07b0\u0780\u07ac\u0782\u07ac",
+                            "itemValue": "F"
+                        }
+                    ]
+                },
+                {
+                    "type": "Select",
+                    "key": "country_id",
+                    "label": "\u07a4\u07a6\u0787\u07aa\u0789\u07aa",
+                    "itemTitle": "name_div",
+                    "itemValue": "id",
+                    "url": "https:\/\/uiapi.pgo.mv\/api\/Country\/options\/id?itemTitle=name_div&itemValue=id&lang=dv"
+                }
+            ]
+        },
+        "Searchbar": {
+            "title": "މީހުންގެ ލިސްޓް",
+            "quickFilters": [
+            {
+                "type": "ChipGroup",
+                "key": "status",
+                "chips": [
+                { "value": "all", "label": "All" },
+                { "value": "active", "label": "Active" },
+                { "value": "pending", "label": "Pending" },
+                { "value": "completed", "label": "Completed" }
+                ],
+                "color": "primary",
+                "size": "small",
+                "clickable": true
+            },
+            {
+                "type": "ChipGroup",
+                "key": "priority",
+                "chips": [
+                { "value": "all", "label": "All Priority" },
+                { "value": "high", "label": "High" },
+                { "value": "medium", "label": "Medium" },
+                { "value": "low", "label": "Low" }
+                ],
+                "color": "secondary",
+                "size": "small",
+                "clickable": true
+            },
+            {
+                "type": "InputSearch",
+                "key": "search",
+                "placeholder": "Search...",
+                "size": "md"
+            },
+            {
+                "type": "DatePicker",
+                "key": "dob",
+                "placeholder": "DoB...",
+                "size": "md"
+            }
+            ],
+            "buttons": [
+            {
+                "type": "search",
+                "color": "primary",
+                "icon": "magnifying-glass",
+                "variant": "contained"
+            },
+            {
+                "type": "Clear",
+                "label": "Clear",
+                "color": "secondary"
+            }
+            ]
+      }
+    }
+}

package/src/pgo-components/services/toast.ts

@@ -0,0 +1,44 @@
+import { reactive } from 'vue'
+
+export type ToastType = 'info' | 'success' | 'warning' | 'error'
+
+export interface ToastOptions {
+  message: string
+  type?: ToastType
+  duration?: number
+  closable?: boolean
+}
+
+export interface Toast extends Required<ToastOptions> {
+  id: number
+}
+
+const state = reactive({
+  toasts: [] as Toast[]
+})
+
+let id = 0
+
+function show(options: ToastOptions) {
+  state.toasts.unshift({
+    id: ++id,
+    message: options.message,
+    type: options.type ?? 'info',
+    duration: options.duration ?? 4000,
+    closable: options.closable ?? true
+  })
+}
+
+function remove(id: number) {
+  state.toasts = state.toasts.filter(t => t.id !== id)
+}
+
+export const toast = {
+  show,
+  success: (message: string, opts: Partial<ToastOptions> = {}) => show({ message, type: 'success', ...opts }),
+  error: (message: string, opts: Partial<ToastOptions> = {}) => show({ message, type: 'error', ...opts }),
+  warning: (message: string, opts: Partial<ToastOptions> = {}) => show({ message, type: 'warning', ...opts }),
+  info: (message: string, opts: Partial<ToastOptions> = {}) => show({ message, type: 'info', ...opts }),
+  remove,
+  state
+}

package/src/pgo-components/styles/global.css

@@ -0,0 +1,234 @@
+@import 'tailwindcss';
+@import './tokens.css';
+@import './utilities/index.css';
+
+@theme {
+
+    --color-primary: var(--color-primary);
+    --color-primary-text: var(--color-primary-text);
+    --color-background-color: var(--color-background);
+    --color-textcolor: var(--color-text);
+    --color-textsecondary: var(--color-text-secondary);
+    --color-background: var(--color-background);
+    --color-surface: var(--color-surface);
+    --color-surface-elevated: var(--color-surface-elevated);
+    --color-border: var(--color-border);
+    --color-border-light: var(--color-border-light);
+    --color-border-heavy: var(--color-border-heavy);
+    --color-success: var(--color-success);
+    --color-error: var(--color-error);
+    --color-muted: var(--color-muted);
+    --color-secondary: var(--color-secondary);
+    --color-secondary-text: var(--color-secondary-text);
+    --color-danger: var(--color-danger);
+    --color-divider: var(--color-divider);
+    --color-overlay: var(--color-overlay);
+    --color-warning: var(--color-warning);
+    --color-info: var(--color-info);
+    --color-focus: var(--color-focus);
+    --color-shadow: var(--color-shadow);
+    --color-disable: var(--color-disable);
+
+    --color-input-bg: var(--color-surface-elevated);
+    --color-input-text: var(--color-text-secondary);
+    --color-input-hover: var(--color-surface);
+    --color-input-border: var(--color-border);
+    --color-input-hover-border: var(--color-border-light);
+    --color-input-focus-border: var(--color-border-heavy);
+}
+
+:root {
+    /* fallbacks */
+    --vts-color-text: #18e929;
+    --vts-color-background: #22e910;
+    --vts-color-surface: #3ee913;
+    --vts-color-primary: #3b82f6;
+    --vts-color-primaryText: #09f3ad;
+    --vts-color-muted: #6b7280;
+    --vts-radius-md: 8px;
+    --vts-shadow-sm: 0 1px 3px rgba(2, 6, 23, 0.06);
+
+    --app-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
+}
+
+html[data-theme] {
+    /* nothing here — theme plugin writes variables programmatically */
+    /* Global theme for @vuepic/vue-datepicker */
+    --dp-background-color: var(--vts-color-surface);
+    --dp-text-color: var(--vts-color-text);
+    --dp-hover-color: var(--vts-color-surfaceElevated);
+    --dp-hover-text-color: var(--vts-color-text);
+    --dp-primary-color: var(--vts-color-primary);
+    --dp-primary-text-color: var(--vts-color-primaryText);
+    --dp-secondary-color: var(--vts-color-surfaceElevated);
+    --dp-border-color: var(--vts-color-border);
+    --dp-menu-border-color: var(--vts-color-border);
+    --dp-border-radius: var(--vts-radius-md);
+    --dp-shadow: var(--vts-elevation-2);
+    --dp-icon-color: var(--vts-color-text);
+    --dp-disabled-color: var(--vts-color-text-secondary);
+}
+
+body {
+    color: var(--vts-color-text);
+    background: var(--vts-color-background);
+    transition: background .18s ease, color .18s ease;
+    padding: 1.2rem;
+    font-family: var(--app-font);
+}
+
+
+* {
+    box-sizing: border-box;
+}
+
+/* Global font variable used by the app to allow theme switching (e.g., RTL font) */
+:root {
+    --app-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
+}
+
+html,
+body,
+#app {
+    height: 100%;
+    margin: 0;
+}
+
+/* body {
+    font-family: var(--app-font);
+} */
+
+/* When RTL is active, switch to a more appropriate font for RTL languages. */
+.rtl-font,
+[dir="rtl"],
+html[dir="rtl"],
+body[dir="rtl"],
+[lang="dv"],
+html[lang="dv"],
+body[lang="dv"] {
+    /* When RTL is active, prefer the local Faruma font if installed, then fall back to other system fonts. */
+    --app-font: "Faruma", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
+}
+
+@font-face {
+    font-family: 'Faruma';
+    /* Your chosen name for the font */
+    src: url('/src/pgo-components/assets/fonts/Faruma.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+.faruma {
+    /* When RTL is active, prefer the local Faruma font if installed, then fall back to other system fonts. */
+    font-family: "Faruma", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
+}
+.eng-font {
+    /* When RTL is active, prefer the local Faruma font if installed, then fall back to other system fonts. */
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
+}
+
+/* VueDatePicker Default Theme Overrides matching theme tokens */
+html .dp__theme_light {
+    /* Map VueDatePicker vars to app theme tokens */
+    --dp-background-color: var(--vts-color-surface);
+    --dp-text-color: var(--vts-color-text);
+    --dp-hover-color: var(--vts-color-surfaceElevated);
+    --dp-hover-text-color: var(--vts-color-text);
+    --dp-hover-icon-color: var(--vts-color-textSecondary);
+    --dp-primary-color: var(--vts-color-primary);
+    --dp-primary-disabled-color: var(--vts-color-borderLight);
+    --dp-primary-text-color: var(--vts-color-primaryText);
+    --dp-secondary-color: var(--vts-color-secondary);
+    --dp-border-color: var(--vts-color-border);
+    --dp-menu-border-color: var(--vts-color-border);
+    --dp-border-color-hover: var(--vts-color-borderLight);
+    --dp-border-color-focus: var(--vts-color-primary);
+    --dp-disabled-color: var(--vts-color-surface);
+    --dp-scroll-bar-background: var(--vts-color-surfaceElevated);
+    --dp-scroll-bar-color: var(--vts-color-muted);
+    --dp-success-color: var(--vts-color-success);
+    --dp-success-color-disabled: var(--vts-color-success);
+    --dp-icon-color: var(--vts-color-textSecondary);
+    --dp-danger-color: var(--vts-color-error);
+    --dp-marker-color: var(--vts-color-primary);
+    --dp-tooltip-color: var(--vts-color-surfaceElevated);
+    --dp-disabled-color-text: var(--vts-color-textSecondary);
+    /* If supported, use color-mix for a soft token-based highlight */
+    --dp-highlight-color: color-mix(in srgb, var(--vts-color-primary) 12%, transparent);
+    --dp-range-between-dates-background-color: var(--dp-hover-color);
+    --dp-range-between-dates-text-color: var(--dp-hover-text-color);
+    --dp-range-between-border-color: var(--dp-hover-color);
+
+
+}
+
+/* VueDatePicker Default Theme Overrides matching theme tokens */
+html .dp__theme_dark {
+        /* Map VueDatePicker dark theme vars to app tokens (will read dark values) */
+        --dp-background-color: var(--vts-color-surface);
+        --dp-text-color: var(--vts-color-text);
+        --dp-hover-color: var(--vts-color-surfaceElevated);
+        --dp-hover-text-color: var(--vts-color-text);
+        --dp-hover-icon-color: var(--vts-color-textSecondary);
+        --dp-primary-color: var(--vts-color-primary);
+        --dp-primary-disabled-color: var(--vts-color-borderLight);
+        --dp-primary-text-color: var(--vts-color-primaryText);
+        --dp-secondary-color: var(--vts-color-secondary);
+        --dp-border-color: var(--vts-color-border);
+        --dp-menu-border-color: var(--vts-color-border);
+        --dp-border-color-hover: var(--vts-color-borderLight);
+        --dp-border-color-focus: var(--vts-color-primary);
+        --dp-disabled-color: var(--vts-color-surface);
+        --dp-scroll-bar-background: var(--vts-color-surfaceElevated);
+        --dp-scroll-bar-color: var(--vts-color-muted);
+        --dp-success-color: var(--vts-color-success);
+        --dp-success-color-disabled: var(--vts-color-success);
+        --dp-icon-color: var(--vts-color-textSecondary);
+        --dp-danger-color: var(--vts-color-error);
+        --dp-marker-color: var(--vts-color-primary);
+        --dp-tooltip-color: var(--vts-color-surfaceElevated);
+        --dp-disabled-color-text: var(--vts-color-textSecondary);
+        --dp-highlight-color: color-mix(in srgb, var(--vts-color-primary) 12%, transparent);
+        --dp-range-between-dates-background-color: var(--dp-hover-color);
+        --dp-range-between-dates-text-color: var(--dp-hover-text-color);
+        --dp-range-between-border-color: var(--dp-hover-color);
+    }
+
+
+    /* Keep VueDatePicker LTR even when the page is RTL */
+    .dp__main,
+    .dp__main * {
+        direction: ltr !important;
+    }
+
+    /* Undo RTL arrow rotation applied by library when any ancestor has dir="rtl" */
+    .dp__main .dp__inner_nav {
+        transform: none !important;
+    }
+
+
+/* Global tooltip styles for v-tooltip directive */
+.vts-tooltip {
+    background-color: var(--vts-color-surfaceElevated);
+    color: var(--vts-color-text);
+    border: 1px solid var(--vts-color-border);
+    border-radius: var(--vts-radius-sm);
+    box-shadow: var(--vts-elevation-2, 0 4px 12px rgba(0, 0, 0, 0.12));
+    padding: 6px 10px;
+    max-width: 280px;
+    pointer-events: none; /* do not steal hover from activator */
+}
+
+.vts-tooltip-content {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+.vts-tooltip-arrow {
+    position: absolute;
+    background: var(--vts-color-surfaceElevated);
+    border-top: 1.5px solid var(--vts-color-border);
+    border-left: 1.5px solid var(--vts-color-border);
+    pointer-events: none;
+}