@amirjalili1374/ui-kit 1.2.0

package/src/scss/layout/_topbar.scss

@@ -0,0 +1,39 @@
+.profileBtn {
+  height: 50px !important;
+  margin: 0 0 0 10px !important;
+}
+
+.search-sheet {
+  position: absolute;
+  z-index: 9;
+}
+
+.circle {
+  position: relative;
+  overflow: hidden;
+  &.sm-circle {
+    &::before {
+      content: '';
+      position: absolute;
+      width: 200px;
+      height: 200px;
+      border: 3px solid rgb(var(--v-theme-warning));
+      border-radius: 50%;
+      top: 125px;
+      right: -70px;
+    }
+  }
+
+  &.lg-circle {
+    &::after {
+      content: '';
+      position: absolute;
+      width: 200px;
+      height: 200px;
+      border: 19px solid rgb(var(--v-theme-warning));
+      border-radius: 50%;
+      top: 65px;
+      right: -150px;
+    }
+  }
+}

package/src/scss/pages/_dashboards.scss

@@ -0,0 +1,97 @@
+.bubble-shape {
+  position: relative;
+  &:before {
+    content: '';
+    position: absolute;
+    width: 210px;
+    height: 210px;
+    border-radius: 50%;
+    top: -125px;
+    left: -15px;
+    opacity: 0.5;
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    width: 210px;
+    height: 210px;
+    border-radius: 50%;
+    top: -85px;
+    left: -95px;
+  }
+
+  &.bubble-primary-shape {
+    &::before {
+      background: rgb(var(--v-theme-darkprimary));
+    }
+    &::after {
+      background: rgb(var(--v-theme-darkprimary));
+    }
+  }
+
+  &.bubble-secondary-shape {
+    &::before {
+      background: rgb(var(--v-theme-darksecondary));
+    }
+    &::after {
+      background: rgb(var(--v-theme-darksecondary));
+    }
+  }
+
+  &.bubble-secondary {
+    &::before {
+      background: rgb(var(--v-theme-secondary));
+    }
+    &::after {
+      background: rgb(var(--v-theme-secondary));
+    }
+  }
+}
+
+.z-1 {
+  z-index: 1;
+  position: relative;
+}
+.bubble-shape-sm {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    width: 210px;
+    height: 210px;
+    border-radius: 50%;
+    top: -160px;
+    right: -130px;
+  }
+  &.bubble-primary {
+    &::before {
+      background: linear-gradient(140.9deg, rgb(var(--v-theme-lightprimary)) -14.02%, rgba(var(--v-theme-darkprimary), 0) 77.58%);
+    }
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    width: 210px;
+    height: 210px;
+    border-radius: 50%;
+    top: -30px;
+    right: -180px;
+  }
+  &.bubble-primary {
+    &::after {
+      background: linear-gradient(210.04deg, rgb(var(--v-theme-lightprimary)) -50.94%, rgba(var(--v-theme-darkprimary), 0) 83.49%);
+    }
+  }
+
+  &.bubble-warning {
+    &::before {
+      background: linear-gradient(140.9deg, rgb(var(--v-theme-secondary)) -14.02%, rgba(144, 202, 249, 0) 70.5%);
+    }
+  }
+
+  &.bubble-warning {
+    &::after {
+      background: linear-gradient(210.04deg, rgb(var(--v-theme-secondary)) -50.94%, rgba(144, 202, 249, 0) 83.49%);
+    }
+  }
+}

package/src/scss/style.scss

@@ -0,0 +1,21 @@
+@import './variables';
+@import 'vuetify/styles/main.sass';
+@import './override';
+@import './layout/container';
+@import './layout/sidebar';
+@import './layout/topbar';
+
+@import './components/VButtons';
+@import './components/VCard';
+@import './components/VField';
+@import './components/VInput';
+@import './components/VNavigationDrawer';
+@import './components/VShadow';
+@import './components/VTextField';
+@import './components/VTabs';
+@import './components/VCustomDataTable';
+@import './components/approval';
+
+@import './pages/dashboards';
+
+@import 'vue3-perfect-scrollbar/style.css';

package/src/services/apiService.ts

@@ -0,0 +1,59 @@
+/**
+ * API Service for making CRUD operations
+ * 
+ * This service provides a simple interface for common API operations.
+ * It works with any axios-compatible instance.
+ */
+import type { AxiosInstance } from 'axios';
+import axiosInstance from './axiosInstance';
+
+export interface ApiService {
+  fetch(params?: Record<string, any>): Promise<any>;
+  create(data: any): Promise<any>;
+  update(data: any): Promise<any>;
+  delete(id: string | number): Promise<any>;
+  get(id: string | number): Promise<any>;
+}
+
+/**
+ * Creates an API service instance for a given resource
+ * @param axiosInst - Axios instance to use (defaults to library's axiosInstance)
+ * @param resource - API resource path (e.g., '/api/users')
+ */
+export default function apiService(
+  axiosInst: AxiosInstance = axiosInstance,
+  resource: string
+): ApiService {
+  const baseUrl = resource.startsWith('/') ? resource : `/${resource}`;
+
+  return {
+    async fetch(params: Record<string, any> = {}) {
+      const response = await axiosInst.get(baseUrl, { params });
+      return response;
+    },
+
+    async create(data: any) {
+      const response = await axiosInst.post(baseUrl, data);
+      return response;
+    },
+
+    async update(data: any) {
+      if (!data.id) {
+        throw new Error('Update requires an id field');
+      }
+      const response = await axiosInst.put(`${baseUrl}/${data.id}`, data);
+      return response;
+    },
+
+    async delete(id: string | number) {
+      const response = await axiosInst.delete(`${baseUrl}/${id}`);
+      return response;
+    },
+
+    async get(id: string | number) {
+      const response = await axiosInst.get(`${baseUrl}/${id}`);
+      return response;
+    }
+  };
+}
+

package/src/services/axiosInstance.ts

@@ -0,0 +1,14 @@
+/**
+ * Axios instance for the UI Kit library
+ * 
+ * This is a minimal wrapper around axios. In your consuming app,
+ * you can configure axios globally and this will use the default instance.
+ * 
+ * For custom configuration, you can import and set your own axios instance.
+ */
+import axios from 'axios';
+
+// Export the default axios instance or a configured instance
+// Consuming apps can configure axios globally before importing the library
+export default axios;
+

package/src/stores/customizer.ts

@@ -0,0 +1,55 @@
+import { defineStore } from 'pinia';
+
+export const useCustomizerStore = defineStore({
+  id: 'customizer',
+  state: () => ({
+    Sidebar_drawer: false,
+    Customizer_drawer: false,
+    mini_sidebar: false,
+    fontTheme: 'inter',
+    inputBg: 'default',
+    layoutType: 'full-width',
+    actTheme: 'modern',
+    loading: false,
+    themeMode: 'light', // 'light' or 'dark'
+    menuOrientation: 'vertical' // 'vertical' or 'horizontal'
+  }),
+
+  getters: {
+    getActTheme: (state) => state.actTheme,
+  },
+  actions: {
+    SET_SIDEBAR_DRAWER(payload?: boolean) {
+      if (payload !== undefined) {
+        this.Sidebar_drawer = payload;
+      } else {
+        this.Sidebar_drawer = !this.Sidebar_drawer;
+      }
+    },
+    SET_MINI_SIDEBAR(payload: boolean) {
+      this.mini_sidebar = payload;
+    },
+    SET_CUSTOMIZER_DRAWER(payload: boolean) {
+      this.Customizer_drawer = payload;
+    },
+    SET_FONT(payload: string) {
+      this.fontTheme = payload;
+    },
+    SET_THEME(payload: string) {
+      this.actTheme = payload;
+    },
+    SET_LOADING(payload: boolean) {
+      this.loading = payload;
+    },
+    SET_LAYOUT_TYPE(payload: string) {
+      this.layoutType = payload;
+    },
+    SET_THEME_MODE(payload: string) {
+      this.themeMode = payload;
+    },
+    SET_MENU_ORIENTATION(payload: string) {
+      this.menuOrientation = payload;
+    }
+  }
+
+});

package/src/stores/permissions.ts

@@ -0,0 +1,237 @@
+import { defineStore } from 'pinia';
+
+// Minimal customer info interface for permissions store
+interface CustomerInfo {
+  isUserInfoLoaded: boolean;
+  getUserRoles: string[];
+  getUserLotusRoles: string[];
+  hasRole: (role: string) => boolean;
+  hasLotusRole: (role: string) => boolean;
+}
+
+// Simple stub - consuming apps should provide their own customer info store
+// or configure permissions store with their own user info
+let customerInfoStore: CustomerInfo | null = null;
+
+export function setCustomerInfoStore(store: CustomerInfo) {
+  customerInfoStore = store;
+}
+
+function useCustomerInfoStore(): CustomerInfo {
+  if (!customerInfoStore) {
+    // Return default empty store if not configured
+    return {
+      isUserInfoLoaded: false,
+      getUserRoles: [],
+      getUserLotusRoles: [],
+      hasRole: () => false,
+      hasLotusRole: () => false
+    };
+  }
+  return customerInfoStore;
+}
+
+export interface MenuPermission {
+  menuKey: string;
+  requiredRoles: string[];
+  requiredLotusRoles?: string[];
+}
+
+export const usePermissionsStore = defineStore({
+  id: 'permissions',
+  state: () => ({
+    menuPermissions: [
+      {
+        menuKey: 'approval_new',
+        requiredRoles: ['SMP_CREATE_APPROVAL']
+      },
+      {
+        menuKey: 'approval_edit',
+        requiredRoles: ['SMP_EDIT_APPROVAL']
+      },
+      {
+        menuKey: 'cartable',
+        requiredRoles: ['SMP_VIEW_CARTABLE']
+      },
+      {
+        menuKey: 'cartable_operation',
+        requiredRoles: ['SMP_CARTABLE_OPERATION']
+      },
+      {
+        menuKey: 'cartable_history',
+        requiredRoles: ['SMP_CARTABLE_HIST']
+      },
+      {
+        menuKey: 'approval_history',
+        requiredRoles: ['SMP_APPROVAL_HIST']
+      },
+      {
+        menuKey: 'flow_management',
+        requiredRoles: ['SMP_CREATE_FLOW_MNG']
+      },
+      {
+        menuKey: 'basic_info',
+        requiredRoles: ['SMP_BASIC_INFO']
+      },
+      {
+        menuKey: 'report',
+        requiredRoles: ['SMP_REPORT']
+      },
+      {
+        menuKey: 'flowManagement',
+        requiredRoles: ['SMP_CREATE_FLOW_MNG']
+      },
+      {
+        menuKey: 'preApprovalReport',
+        requiredRoles: ['SMP_PRE_APPROVAL_RPT']
+      },
+      {
+        menuKey: 'cartableReport',
+        requiredRoles: ['SMP_CARTABLE_RPT']
+      },
+      {
+        menuKey: 'addFile',
+        requiredRoles: ['SMP_ADD_FILE']
+      },
+      {
+        menuKey: 'download1016',
+        requiredRoles: ['SMP_DOWNLOAD_1016']
+      },
+      {
+        menuKey: 'reviewExpertReport',
+        requiredRoles: ['SMP_REVIEW_EXPERT_RPT']
+      },
+      {
+        menuKey: 'downloadExpertReport',
+        requiredRoles: ['SMP_DOWNLOAD_EXPERT_RPT_FILE']
+      },
+      {
+        menuKey: 'downloadDirectiveReport',
+        requiredRoles: ['SMP_DL_DIRECTIVE_RPT']
+      },
+      {
+        menuKey: 'regionPreApprovalReport',
+        requiredRoles: ['SMP_REGION_PRE_APPROVAL_RPT']
+      },
+      {
+        menuKey: 'directiveReport',
+        requiredRoles: ['SMP_DIRECTIVE_RPT']
+      },
+      {
+        menuKey: 'uploadExpertReport',
+        requiredRoles: ['SMP_UPLOAD_EXPERT_RPT_FILE']
+      },
+      {
+        menuKey: 'changeSigner',
+        requiredRoles: ['SMP_CHANGE_SIGNER']
+      },
+      {
+        menuKey: 'regenerate1016',
+        requiredRoles: ['SMP_REGEN_1016']
+      },
+      {
+        menuKey: 'regenerateRegionApproval',
+        requiredRoles: ['SMP_REGEN_REGION_RPT']
+      },
+      {
+        menuKey: 'regeneratePreApproval',
+        requiredRoles: ['SMP_REGEN_PRE_APPROVAL_RPT']
+      },
+      {
+        menuKey: 'regenerateDirective',
+        requiredRoles: ['SMP_REGEN_DIRECTIVE_RPT']
+      },
+      {
+        menuKey: 'approvalSignerReport',
+        requiredRoles: ['SMP_APPROVAL_SIGNER_RPT']
+      },
+      {
+        menuKey: 'downloadApprovalReport',
+        requiredRoles: ['SMP_DL_APPROVAL_RPT']
+      }
+    ] as MenuPermission[]
+  }),
+
+  getters: {
+    // Check if user has permission for a specific menu
+    hasMenuPermission: (state) => (menuKey: string) => {
+      const customerInfo = useCustomerInfoStore();
+      const permission = state.menuPermissions.find((p) => p.menuKey === menuKey);
+
+      if (!permission) return true; // If no permission defined, allow access
+
+      // If user info is not loaded, allow access to prevent sidebar from being empty
+      if (!customerInfo.isUserInfoLoaded) return true;
+
+      const userRoles = customerInfo.getUserRoles || [];
+      const userLotusRoles = customerInfo.getUserLotusRoles || [];
+
+      // If user has no roles at all, allow access to prevent sidebar from being empty
+      if (userRoles.length === 0 && userLotusRoles.length === 0) return true;
+
+      // Check required roles
+      const hasRequiredRole = permission.requiredRoles.some((role) => userRoles.includes(role));
+
+      // Check required lotus roles if defined
+      const hasRequiredLotusRole = permission.requiredLotusRoles
+        ? permission.requiredLotusRoles.some((role) => userLotusRoles.includes(role))
+        : true;
+
+      return hasRequiredRole && hasRequiredLotusRole;
+    },
+
+    // Get all available menu permissions for current user
+    getAvailableMenus: (state) => {
+      const customerInfo = useCustomerInfoStore();
+      if (!customerInfo.isUserInfoLoaded) return [];
+
+      return state.menuPermissions.filter((permission) => {
+        const userRoles = customerInfo.getUserRoles;
+        const userLotusRoles = customerInfo.getUserLotusRoles;
+
+        const hasRequiredRole = permission.requiredRoles.some((role) => userRoles.includes(role));
+
+        const hasRequiredLotusRole = permission.requiredLotusRoles
+          ? permission.requiredLotusRoles.some((role) => userLotusRoles.includes(role))
+          : true;
+
+        return hasRequiredRole && hasRequiredLotusRole;
+      });
+    },
+
+    // Check if user has any of the specified roles
+    hasAnyRole: () => (roles: string[]) => {
+      const customerInfo = useCustomerInfoStore();
+      return roles.some((role) => customerInfo.hasRole(role));
+    },
+
+    // Check if user has any of the specified lotus roles
+    hasAnyLotusRole: () => (roles: string[]) => {
+      const customerInfo = useCustomerInfoStore();
+      return roles.some((role) => customerInfo.hasLotusRole(role));
+    }
+  },
+
+  actions: {
+    // Add new menu permission
+    addMenuPermission(permission: MenuPermission) {
+      this.menuPermissions.push(permission);
+    },
+
+    // Remove menu permission
+    removeMenuPermission(menuKey: string) {
+      const index = this.menuPermissions.findIndex((p) => p.menuKey === menuKey);
+      if (index !== -1) {
+        this.menuPermissions.splice(index, 1);
+      }
+    },
+
+    // Update menu permission
+    updateMenuPermission(menuKey: string, permission: Partial<MenuPermission>) {
+      const index = this.menuPermissions.findIndex((p) => p.menuKey === menuKey);
+      if (index !== -1) {
+        this.menuPermissions[index] = { ...this.menuPermissions[index], ...permission };
+      }
+    }
+  }
+}); 

package/src/theme/darkThemes/DarkModernTheme.ts

@@ -0,0 +1,54 @@
+import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
+
+const DarkModernTheme: ThemeTypes = {
+  name: 'DarkModernTheme',
+  dark: true,
+  variables: {
+    'border-color': '#6366f1',
+    'carousel-control-size': 10
+  },
+  colors: {
+    primary: '#6366f1', // Modern indigo
+    secondary: '#8b5cf6', // Purple
+    info: '#06b6d4', // Cyan
+    success: '#10b981', // Emerald
+    accent: '#f59e0b', // Amber
+    warning: '#f59e0b', // Amber
+    error: '#ef4444', // Red
+    lightprimary: '#1e1b4b', // Indigo 900
+    lightsecondary: '#1e1b4b', // Indigo 900
+    lightsuccess: '#064e3b', // Green 900
+    lighterror: '#7f1d1d', // Red 900
+    lightwarning: '#78350f', // Amber 900
+    darkText: '#f9fafb', // Gray 50
+    lightText: '#d1d5db', // Gray 300
+    darkprimary: '#818cf8', // Indigo 400
+    darksecondary: '#a78bfa', // Purple 400
+    borderLight: '#374151', // Gray 700
+    inputBorder: '#4b5563', // Gray 600
+    containerBg: '#111827', // Gray 900
+    surface: '#0f172a', // Slate 900
+    'on-surface-variant': '#e2e8f0', // Slate 200
+    facebook: '#4267b2',
+    twitter: '#1da1f2',
+    linkedin: '#0e76a8',
+    gray100: '#1f2937', // Gray 800
+    primary200: '#312e81', // Indigo 800
+    secondary200: '#5b21b6', // Purple 800
+    white: '#FFFFFF',
+    // Additional color variations  
+    primary300: '#c7d2fe',
+    primary400: '#7590f1',
+    primary500: '#5a4fe4',
+    primary600: '#483bc5',
+    primary700: '#22215e',
+    primary800: '#0b0b5a',
+    primary900: '#03031b',
+
+    secondary400: '#581c87', // Purple 800
+    secondary600: '#6b21a8', // Purple 700
+    secondary800: '#4c1d95' // Purple 900
+  }
+};
+
+export { DarkModernTheme };

package/src/theme/darkThemes/DarkOrangeTheme.ts

@@ -0,0 +1,53 @@
+import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
+
+const DarkOrangeTheme: ThemeTypes = {
+  name: 'DarkOrangeTheme',
+  dark: true,
+  variables: {
+    'border-color': '#C77E23',
+    'carousel-control-size': 10
+  },
+  colors: {
+    primary: '#C77E23',
+    secondary: '#16595A',
+    info: '#03c9d7',
+    success: '#00c853',
+    accent: '#FFAB91',
+    warning: '#ffc107',
+    error: '#f44336',
+    lightprimary: '#2D1B0A',
+    lightsecondary: '#1A2A2A',
+    lightsuccess: '#1B3A1B',
+    lighterror: '#3A1B1B',
+    lightwarning: '#3A2F1B',
+    darkText: '#FFFFFF',
+    lightText: '#B0B0B0',
+    darkprimary: '#E89B4A',
+    darksecondary: '#1F7A7A',
+    borderLight: '#404040',
+    inputBorder: '#606060',
+    containerBg: '#1A1A1A',
+    surface: '#121212',
+    'on-surface-variant': '#E0E0E0',
+    facebook: '#4267b2',
+    twitter: '#1da1f2',
+    linkedin: '#0e76a8',
+    gray100: '#2A2A2A',
+    primary200: '#2D1B0A',
+    secondary200: '#1A2A2A',
+    white: '#FFFFFF',
+    // Additional color variations
+    primary300: '#F4E6D3',
+    primary400: '#edb27e',
+    primary500: '#efa168',
+    primary600: '#dc823a',
+    primary700: '#884a17',
+    primary800: '#603210',
+    primary900: '#351b09',
+    secondary400: '#2A4040',
+    secondary600: '#1F7A7A',
+    secondary800: '#0F4748'
+  }
+};
+
+export { DarkOrangeTheme };

package/src/theme/darkThemes/DarkPurpleTheme.ts

@@ -0,0 +1,54 @@
+import type { ThemeTypes } from '@/types/themeTypes/ThemeType';
+
+const DarkPurpleTheme: ThemeTypes = {
+  name: 'DarkPurpleTheme',
+  dark: true,
+  variables: {
+    'border-color': '#1e88e5',
+    'carousel-control-size': 10
+  },
+  colors: {
+    primary: '#1e88e5',
+    secondary: '#5e35b1',
+    info: '#03c9d7',
+    success: '#00c853',
+    accent: '#FFAB91',
+    warning: '#ffc107',
+    error: '#f44336',
+    lightprimary: '#1B2A3A',
+    lightsecondary: '#2A1B3A',
+    lightsuccess: '#1B3A1B',
+    lighterror: '#3A1B1B',
+    lightwarning: '#3A2F1B',
+    darkText: '#FFFFFF',
+    lightText: '#B0B0B0',
+    darkprimary: '#42A5F5',
+    darksecondary: '#7B1FA2',
+    borderLight: '#404040',
+    inputBorder: '#606060',
+    containerBg: '#1A1A1A',
+    surface: '#121212',
+    'on-surface-variant': '#E0E0E0',
+    facebook: '#4267b2',
+    twitter: '#1da1f2',
+    linkedin: '#0e76a8',
+    gray100: '#2A2A2A',
+    primary200: '#1B2A3A',
+    secondary200: '#2A1B3A',
+    white: '#FFFFFF',
+    // Additional color variations
+    primary300: '#9fd0f3',
+    primary400: '#87bbef',
+    primary500: '#5c9fed',
+    primary600: '#2567af',
+    primary700: '#144a8f',
+    primary800: '#093260',
+    primary900: '#051832',
+
+    secondary400: '#4A2A5A',
+    secondary600: '#7B1FA2',
+    secondary800: '#512DA8'
+  }
+};
+
+export { DarkPurpleTheme };