From fc10a44d5d8e4f4e21a3a0b0e23d32d4b6dc97fa Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Thu, 13 Jun 2024 12:09:22 +0700 Subject: [PATCH] penyesuaian UI cost management --- .../breadcrumb/breadcrumb.component.css | 8 + .../breadcrumb/breadcrumb.component.html | 30 +- .../_layout/settings/menu-settings.config.ts | 1432 ++++++++--------- .../cost-management.component.css | 62 +- .../cost-management.component.html | 114 +- .../cost-management.component.ts | 51 +- 6 files changed, 896 insertions(+), 801 deletions(-) diff --git a/src/app/_layout/breadcrumb/breadcrumb.component.css b/src/app/_layout/breadcrumb/breadcrumb.component.css index 54851f7..f63f069 100644 --- a/src/app/_layout/breadcrumb/breadcrumb.component.css +++ b/src/app/_layout/breadcrumb/breadcrumb.component.css @@ -19,3 +19,11 @@ } } +.breadcrumb-item::before { + content: none !important; /* Removes any default content, such as "-" */ +} + +.breadcrumb-item + .breadcrumb-item::before { + content: none !important; /* Removes any default content, such as "-" */ +} + diff --git a/src/app/_layout/breadcrumb/breadcrumb.component.html b/src/app/_layout/breadcrumb/breadcrumb.component.html index c58fc34..f123e5b 100644 --- a/src/app/_layout/breadcrumb/breadcrumb.component.html +++ b/src/app/_layout/breadcrumb/breadcrumb.component.html @@ -3,21 +3,33 @@ class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new" *ngIf="breadcrumb" > - -

+

{{ breadcrumb.mainlabel }}

    -
  1. - {{ - link.name - }} - {{ link.name }} -
    2. + +
  2. + + {{ link.name }} + + + {{ link.name }} + + + + +
    3. +
diff --git a/src/app/_layout/settings/menu-settings.config.ts b/src/app/_layout/settings/menu-settings.config.ts index 0f1c490..b2bb914 100644 --- a/src/app/_layout/settings/menu-settings.config.ts +++ b/src/app/_layout/settings/menu-settings.config.ts @@ -1067,736 +1067,736 @@ export const MenuSettingsConfig: MenuConfig = { } }, - // { section: 'APPS', icon: 'la-ellipsis-h' }, - // { - // title: 'Dashboard', - // icon: 'la-home', - // page: 'null', - // badge: { type: 'badge-info', value: '3' }, - // submenu: { - // items: [ - // { - // title: 'Sales', - // page: '/dashboard/sales' - // }, - // { - // title: 'Ecommerce', - // page: '/dashboard/ecommerce' - // }, - // { - // title: 'Hospital', - // page: '/dashboard/hospital' - // } - // ] - // } - // }, - // { - // title: 'Templates', - // icon: 'la-television', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Horizontal', - // page: 'null' - // }, - // { - // title: 'Vertical', - // page: 'null' - // }, - // ] - // } - // }, - // { - // title: 'To Do', - // icon: 'la-edit', - // page: '/todo-app' - // }, - // { - // title: 'Contacts', - // icon: 'la-users', - // page: '/contacts' - // }, - // { - // title: 'Email Application', - // icon: 'la-envelope', - // page: '/email' - // }, - // { - // title: 'Chat Application', - // icon: 'la-comments', - // page: '/chats' - // }, - // { - // title: 'Calenders', - // icon: 'la-calendar', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Basic', - // page: '/calender/basic' - // }, - // { - // title: 'Events', - // page: '/calender/events' - // }, + { section: 'APPS', icon: 'la-ellipsis-h' }, + { + title: 'Dashboard', + icon: 'la-home', + page: 'null', + badge: { type: 'badge-info', value: '3' }, + submenu: { + items: [ + { + title: 'Sales', + page: '/dashboard/sales' + }, + { + title: 'Ecommerce', + page: '/dashboard/ecommerce' + }, + { + title: 'Hospital', + page: '/dashboard/hospital' + } + ] + } + }, + { + title: 'Templates', + icon: 'la-television', + page: 'null', + submenu: { + items: [ + { + title: 'Horizontal', + page: 'null' + }, + { + title: 'Vertical', + page: 'null' + }, + ] + } + }, + { + title: 'To Do', + icon: 'la-edit', + page: '/todo-app' + }, + { + title: 'Contacts', + icon: 'la-users', + page: '/contacts' + }, + { + title: 'Email Application', + icon: 'la-envelope', + page: '/email' + }, + { + title: 'Chat Application', + icon: 'la-comments', + page: '/chats' + }, + { + title: 'Calenders', + icon: 'la-calendar', + page: 'null', + submenu: { + items: [ + { + title: 'Basic', + page: '/calender/basic' + }, + { + title: 'Events', + page: '/calender/events' + }, - // { - // title: 'Addevent', - // page: '/calender/addevent' - // }, - // ] - // } - // }, - // { - // title: 'KanBan', - // icon: 'la-comments', - // page: '/kanban' - // }, - // { section: 'PAGES', icon: 'la-ellipsis-h' }, - // { - // title: 'News Feed', - // icon: 'la-newspaper-o', - // page: '/news-feed/news-feed' - // }, - // { - // title: 'Social Feed', - // icon: 'la-share-alt', - // page: '/social-feed/social-feed' - // }, - // { - // title: 'Invoice', - // icon: 'la-clipboard', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Invoice Summary', - // page: '/invoice/invoice-summary', - // }, - // { - // title: 'Invoice Template', - // page: '/invoice/invoice-template', - // }, - // { - // title: 'Invoice List', - // page: '/invoice/invoice-list', - // }, - // ] - // } - // }, - // { - // title: 'Timelines', - // icon: 'la-film', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Timelines Center', - // page: '/timelines/timelines-center', - // }, - // { - // title: 'Timelines Left ', - // page: '/timelines/timelines-left', - // }, - // { - // title: 'Timelines Right ', - // page: '/timelines/timelines-right', - // }, - // { - // title: 'Timelines Horizontal', - // page: '/timelines/timelines-horizontal', - // } - // ] - // } - // }, - // { - // title: 'User', - // icon: 'la-user', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'User Profile', - // page: '/user/user-profile', - // }, - // { - // title: 'User Cards', - // page: '/user/user-cards', - // }, - // ] - // } - // }, - // { - // title: 'Gallery', - // icon: 'la-image', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Gallery Grid', - // page: '/gallery/gallery-grid', - // }, - // { - // title: 'Gallery Grid with Desc', - // page: '/gallery/gallery-grid-desc', - // }, - // { - // title: 'Masonry Gallery', - // page: '/gallery/masonry-gallery', - // }, - // { - // title: 'Hover Effect', - // page: '/gallery/hover-effect', - // }, - // ] - // } - // }, - // { - // title: 'File Uploader', - // icon: 'la la-cloud-upload', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Dropzone', - // page: '/dropzone/dropzone', - // } - // ] - // } - // }, - // { - // title: 'Search', - // icon: 'la-search', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Search Page', - // page: '/others/searchPage', - // }, - // { - // title: 'Search Website', - // page: '/search/searchWebsite', - // }, - // { - // title: 'Search Images', - // page: '/search/searchImages', - // }, - // { - // title: 'Search Videos', - // page: '/search/searchVideos', - // }, - // ] - // } - // }, - // { - // title: 'Authentication', - // icon: 'la-unlock', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Login Simple', - // page: '/authentication/loginSimple', - // }, - // { - // title: 'Login With Bg', - // page: '/authentication/loginWithBg', - // }, - // { - // title: 'Login With Bg Image', - // page: '/authentication/loginWithBgImage', - // }, - // { - // title: 'Login With Navbar', - // page: '/authentication/loginWithNavbar', - // }, - // { - // title: 'Login Advanced', - // page: '/authentication/loginAdvanced', - // }, - // { - // title: 'Register Simple', - // page: '/authentication/registerSimple', - // }, - // { - // title: 'Register With Bg', - // page: '/authentication/registerWithBg', - // }, - // { - // title: 'Register With Bg Image', - // page: '/authentication/registerWithBgImage', - // }, - // { - // title: 'Register With Navbar', - // page: '/authentication/registerWithNavbar', - // }, - // { - // title: 'Register Advanced', - // page: '/authentication/registerAdvanced', - // }, - // { - // title: 'Unlock User', - // page: '/authentication/unlockUser', - // }, - // { - // title: 'recover-password', - // page: '/authentication/recoverPassword', - // }, - // ] - // } - // }, - // { - // title: 'Error', - // icon: 'la-warning', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Error 400', - // page: '/error/error400', - // }, - // { - // title: 'Error 400 with Navbar', - // page: '/error/error400WithNavbar', - // }, - // { - // title: 'Error 401', - // page: '/error/error401', - // }, - // { - // title: 'Error 401 with Navbar', - // page: '/error/error401WithNavbar', - // }, - // { - // title: 'Error 403', - // page: '/error/error403', - // }, - // { - // title: 'Error 403 with Navbar', - // page: '/error/error403WithNavbar', - // }, - // { - // title: 'Error 404', - // page: '/error/error404', - // }, - // { - // title: 'Error 404 with Navbar', - // page: '/error/error404WithNavbar', - // }, - // { - // title: 'Error 500', - // page: '/error/error500', - // }, - // { - // title: 'Error 500 with Navbar', - // page: '/error/error500WithNavbar', - // }, - // ] - // } - // }, - // { - // title: 'Others', - // icon: 'la-file-text', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Coming Soon', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Flat', - // page: '/others/flat' - // }, - // { - // title: 'Bg image', - // page: '/others/bgImage' - // }, - // // { - // // title: 'Bg video', - // // page: '/others/bgVideo' - // // }, - // ] - // } - // }, - // { - // title: 'Maintenance', - // page: '/others/maintenance' - // }, - // ] - // } - // }, - // { section: 'USER INTERFACE', icon: 'la-ellipsis-h' }, - // { - // title: 'Cards', - // page: '/cards/bootstrap', - // icon: 'la-tablet' - // }, - // { - // title: 'Advance Cards', - // icon: 'la-fire', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Statistics', - // page: '/advanceCards/statistics' - // }, - // { - // title: 'Social', - // page: '/advanceCards/social' - // }, - // { - // title: 'Charts', - // page: '/advanceCards/charts' - // }, - // ] - // } - // }, - // { - // title: 'Components', - // icon: 'la-server', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Alerts', - // page: '/components/alerts' - // }, - // { - // title: 'Callout', - // page: '/components/callout' - // }, - // { - // title: 'Buttons', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Basic Buttons', - // page: '/components/basic-buttons' - // }, - // { - // title: 'Extended Buttons', - // page: '/components/extended-buttons' - // } - // ] - // } - // }, - // { - // title: 'Carousel', - // page: '/components/carousel' - // }, - // { - // title: 'Collapse', - // page: '/components/collapse' - // }, - // { - // title: 'Dropdowns', - // page: '/components/dropdowns' - // }, - // { - // title: 'List Group', - // page: '/components/list-group' - // }, - // { - // title: 'Modals', - // page: '/components/modals' - // }, - // { - // title: 'Pagination', - // page: '/components/pagination' - // }, - // { - // title: 'Navs Component', - // page: '/components/navs' - // }, - // { - // title: 'Pills Component', - // page: '/components/pills' - // }, - // { - // title: 'Tooltips', - // page: '/components/tooltips' - // }, - // { - // title: 'Popovers', - // page: '/components/popovers' - // }, - // { - // title: 'Badges', - // page: '/components/badges' - // }, - // { - // title: 'Pill Badges', - // page: '/components/pill-badges' - // }, - // { - // title: 'Progress', - // page: '/components/progress' - // }, - // { - // title: 'Media Objects', - // page: '/components/mediaobjects' - // }, - // { - // title: 'Scrollable', - // page: '/components/scrollable' - // }, - // { - // title: 'Spinners', - // page: '/components/spinners' - // }, - // ] - // } - // }, - // { - // title: 'Extra Components', - // icon: 'la-diamond', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Date Time Picker', - // page: '/extraComponents/dateTimePicker' - // }, - // { - // title: 'TypeAhead', - // page: '/extraComponents/typeAhead' - // }, - // { - // title: 'Text Editer', - // page: '/extraComponents/text-editor' - // } - // ] - // } - // }, - // { - // title: 'Icons', + { + title: 'Addevent', + page: '/calender/addevent' + }, + ] + } + }, + { + title: 'KanBan', + icon: 'la-comments', + page: '/kanban' + }, + { section: 'PAGES', icon: 'la-ellipsis-h' }, + { + title: 'News Feed', + icon: 'la-newspaper-o', + page: '/news-feed/news-feed' + }, + { + title: 'Social Feed', + icon: 'la-share-alt', + page: '/social-feed/social-feed' + }, + { + title: 'Invoice', + icon: 'la-clipboard', + page: 'null', + submenu: { + items: [ + { + title: 'Invoice Summary', + page: '/invoice/invoice-summary', + }, + { + title: 'Invoice Template', + page: '/invoice/invoice-template', + }, + { + title: 'Invoice List', + page: '/invoice/invoice-list', + }, + ] + } + }, + { + title: 'Timelines', + icon: 'la-film', + page: 'null', + submenu: { + items: [ + { + title: 'Timelines Center', + page: '/timelines/timelines-center', + }, + { + title: 'Timelines Left ', + page: '/timelines/timelines-left', + }, + { + title: 'Timelines Right ', + page: '/timelines/timelines-right', + }, + { + title: 'Timelines Horizontal', + page: '/timelines/timelines-horizontal', + } + ] + } + }, + { + title: 'User', + icon: 'la-user', + page: 'null', + submenu: { + items: [ + { + title: 'User Profile', + page: '/user/user-profile', + }, + { + title: 'User Cards', + page: '/user/user-cards', + }, + ] + } + }, + { + title: 'Gallery', + icon: 'la-image', + page: 'null', + submenu: { + items: [ + { + title: 'Gallery Grid', + page: '/gallery/gallery-grid', + }, + { + title: 'Gallery Grid with Desc', + page: '/gallery/gallery-grid-desc', + }, + { + title: 'Masonry Gallery', + page: '/gallery/masonry-gallery', + }, + { + title: 'Hover Effect', + page: '/gallery/hover-effect', + }, + ] + } + }, + { + title: 'File Uploader', + icon: 'la la-cloud-upload', + page: 'null', + submenu: { + items: [ + { + title: 'Dropzone', + page: '/dropzone/dropzone', + } + ] + } + }, + { + title: 'Search', + icon: 'la-search', + page: 'null', + submenu: { + items: [ + { + title: 'Search Page', + page: '/others/searchPage', + }, + { + title: 'Search Website', + page: '/search/searchWebsite', + }, + { + title: 'Search Images', + page: '/search/searchImages', + }, + { + title: 'Search Videos', + page: '/search/searchVideos', + }, + ] + } + }, + { + title: 'Authentication', + icon: 'la-unlock', + page: 'null', + submenu: { + items: [ + { + title: 'Login Simple', + page: '/authentication/loginSimple', + }, + { + title: 'Login With Bg', + page: '/authentication/loginWithBg', + }, + { + title: 'Login With Bg Image', + page: '/authentication/loginWithBgImage', + }, + { + title: 'Login With Navbar', + page: '/authentication/loginWithNavbar', + }, + { + title: 'Login Advanced', + page: '/authentication/loginAdvanced', + }, + { + title: 'Register Simple', + page: '/authentication/registerSimple', + }, + { + title: 'Register With Bg', + page: '/authentication/registerWithBg', + }, + { + title: 'Register With Bg Image', + page: '/authentication/registerWithBgImage', + }, + { + title: 'Register With Navbar', + page: '/authentication/registerWithNavbar', + }, + { + title: 'Register Advanced', + page: '/authentication/registerAdvanced', + }, + { + title: 'Unlock User', + page: '/authentication/unlockUser', + }, + { + title: 'recover-password', + page: '/authentication/recoverPassword', + }, + ] + } + }, + { + title: 'Error', + icon: 'la-warning', + page: 'null', + submenu: { + items: [ + { + title: 'Error 400', + page: '/error/error400', + }, + { + title: 'Error 400 with Navbar', + page: '/error/error400WithNavbar', + }, + { + title: 'Error 401', + page: '/error/error401', + }, + { + title: 'Error 401 with Navbar', + page: '/error/error401WithNavbar', + }, + { + title: 'Error 403', + page: '/error/error403', + }, + { + title: 'Error 403 with Navbar', + page: '/error/error403WithNavbar', + }, + { + title: 'Error 404', + page: '/error/error404', + }, + { + title: 'Error 404 with Navbar', + page: '/error/error404WithNavbar', + }, + { + title: 'Error 500', + page: '/error/error500', + }, + { + title: 'Error 500 with Navbar', + page: '/error/error500WithNavbar', + }, + ] + } + }, + { + title: 'Others', + icon: 'la-file-text', + page: 'null', + submenu: { + items: [ + { + title: 'Coming Soon', + page: 'null', + submenu: { + items: [ + { + title: 'Flat', + page: '/others/flat' + }, + { + title: 'Bg image', + page: '/others/bgImage' + }, + // { + // title: 'Bg video', + // page: '/others/bgVideo' + // }, + ] + } + }, + { + title: 'Maintenance', + page: '/others/maintenance' + }, + ] + } + }, + { section: 'USER INTERFACE', icon: 'la-ellipsis-h' }, + { + title: 'Cards', + page: '/cards/bootstrap', + icon: 'la-tablet' + }, + { + title: 'Advance Cards', + icon: 'la-fire', + page: 'null', + submenu: { + items: [ + { + title: 'Statistics', + page: '/advanceCards/statistics' + }, + { + title: 'Social', + page: '/advanceCards/social' + }, + { + title: 'Charts', + page: '/advanceCards/charts' + }, + ] + } + }, + { + title: 'Components', + icon: 'la-server', + page: 'null', + submenu: { + items: [ + { + title: 'Alerts', + page: '/components/alerts' + }, + { + title: 'Callout', + page: '/components/callout' + }, + { + title: 'Buttons', + page: 'null', + submenu: { + items: [ + { + title: 'Basic Buttons', + page: '/components/basic-buttons' + }, + { + title: 'Extended Buttons', + page: '/components/extended-buttons' + } + ] + } + }, + { + title: 'Carousel', + page: '/components/carousel' + }, + { + title: 'Collapse', + page: '/components/collapse' + }, + { + title: 'Dropdowns', + page: '/components/dropdowns' + }, + { + title: 'List Group', + page: '/components/list-group' + }, + { + title: 'Modals', + page: '/components/modals' + }, + { + title: 'Pagination', + page: '/components/pagination' + }, + { + title: 'Navs Component', + page: '/components/navs' + }, + { + title: 'Pills Component', + page: '/components/pills' + }, + { + title: 'Tooltips', + page: '/components/tooltips' + }, + { + title: 'Popovers', + page: '/components/popovers' + }, + { + title: 'Badges', + page: '/components/badges' + }, + { + title: 'Pill Badges', + page: '/components/pill-badges' + }, + { + title: 'Progress', + page: '/components/progress' + }, + { + title: 'Media Objects', + page: '/components/mediaobjects' + }, + { + title: 'Scrollable', + page: '/components/scrollable' + }, + { + title: 'Spinners', + page: '/components/spinners' + }, + ] + } + }, + { + title: 'Extra Components', + icon: 'la-diamond', + page: 'null', + submenu: { + items: [ + { + title: 'Date Time Picker', + page: '/extraComponents/dateTimePicker' + }, + { + title: 'TypeAhead', + page: '/extraComponents/typeAhead' + }, + { + title: 'Text Editer', + page: '/extraComponents/text-editor' + } + ] + } + }, + { + title: 'Icons', - // icon: 'la-eye', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Feather', - // page: '/icons/feather' - // }, - // { - // title: 'Line Awesome', - // page: '/icons/line-awesome' - // }, - // { - // title: 'Meteocons', - // page: '/icons/meteocons' - // }, - // { - // title: 'Simple Line Icons', - // page: '/icons/simple-line-icons' - // } - // ] - // } - // }, - // { section: 'FORMS', icon: 'la-ellipsis-h' }, - // { - // title: 'Form Elements', + icon: 'la-eye', + page: 'null', + submenu: { + items: [ + { + title: 'Feather', + page: '/icons/feather' + }, + { + title: 'Line Awesome', + page: '/icons/line-awesome' + }, + { + title: 'Meteocons', + page: '/icons/meteocons' + }, + { + title: 'Simple Line Icons', + page: '/icons/simple-line-icons' + } + ] + } + }, + { section: 'FORMS', icon: 'la-ellipsis-h' }, + { + title: 'Form Elements', - // icon: 'la-terminal', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Form Inputs', - // page: '/form-elements/form-inputs' - // }, - // { - // title: 'Input Groups', - // page: '/form-elements/input-groups' - // }, - // { - // title: 'Input Grid', - // page: '/form-elements/input-grid' - // }, - // { - // title: 'Checkboxes & Radios', - // page: '/form-elements/checkboxes-radios' - // }, - // { - // title: 'Switch', - // page: '/form-elements/switch' - // }, - // { - // title: 'Select', - // page: '/form-elements/select' - // }, - // { - // title: 'Extended Inputs', - // page: '/form-elements/extendedinputs' - // }, - // ] - // } - // }, - // { - // title: 'Form Layouts', + icon: 'la-terminal', + page: 'null', + submenu: { + items: [ + { + title: 'Form Inputs', + page: '/form-elements/form-inputs' + }, + { + title: 'Input Groups', + page: '/form-elements/input-groups' + }, + { + title: 'Input Grid', + page: '/form-elements/input-grid' + }, + { + title: 'Checkboxes & Radios', + page: '/form-elements/checkboxes-radios' + }, + { + title: 'Switch', + page: '/form-elements/switch' + }, + { + title: 'Select', + page: '/form-elements/select' + }, + { + title: 'Extended Inputs', + page: '/form-elements/extendedinputs' + }, + ] + } + }, + { + title: 'Form Layouts', - // icon: 'la-file-text', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Basic Forms', - // page: '/form-layouts/basic-forms' - // }, - // { - // title: 'Horizontal Forms', - // page: '/form-layouts/horizontal-forms' - // }, - // { - // title: 'Hidden Labels', - // page: '/form-layouts/hidden-labels' - // }, - // { - // title: 'Form Actions', - // page: '/form-layouts/form-actions' - // }, - // { - // title: 'Row Separator', - // page: '/form-layouts/row-separator' - // }, - // { - // title: 'Bordered', - // page: '/form-layouts/bordered' - // }, - // { - // title: 'Striped Rows', - // page: '/form-layouts/striped-rows' - // }, - // { - // title: 'Striped Labels', - // page: '/form-layouts/striped-labels' - // }, - // ] - // } - // }, - // { - // title: 'Form Wizard', + icon: 'la-file-text', + page: 'null', + submenu: { + items: [ + { + title: 'Basic Forms', + page: '/form-layouts/basic-forms' + }, + { + title: 'Horizontal Forms', + page: '/form-layouts/horizontal-forms' + }, + { + title: 'Hidden Labels', + page: '/form-layouts/hidden-labels' + }, + { + title: 'Form Actions', + page: '/form-layouts/form-actions' + }, + { + title: 'Row Separator', + page: '/form-layouts/row-separator' + }, + { + title: 'Bordered', + page: '/form-layouts/bordered' + }, + { + title: 'Striped Rows', + page: '/form-layouts/striped-rows' + }, + { + title: 'Striped Labels', + page: '/form-layouts/striped-labels' + }, + ] + } + }, + { + title: 'Form Wizard', - // icon: 'la-paste', - // page: '/form-wizard', - // // submenu: { - // // items: [ - // // { - // // title: 'Circle Style', - // // page: '/form-wizard/circle-style' - // // }, - // // ] - // // } - // }, - // { - // title: 'Form Repeater', + icon: 'la-paste', + page: '/form-wizard', + // submenu: { + // items: [ + // { + // title: 'Circle Style', + // page: '/form-wizard/circle-style' + // }, + // ] + // } + }, + { + title: 'Form Repeater', - // icon: 'la-repeat', - // page: '/form-repeater' - // }, - // { section: 'TABLE', icon: 'la-ellipsis-h' }, - // { - // title: 'Boostrap Tables', + icon: 'la-repeat', + page: '/form-repeater' + }, + { section: 'TABLE', icon: 'la-ellipsis-h' }, + { + title: 'Boostrap Tables', - // icon: 'la-table', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Basic Table', - // page: '/boostraptables/basictable' - // }, - // { - // title: 'Table Border', - // page: '/boostraptables/tableborder' - // }, - // { - // title: 'Table Sizing', - // page: '/boostraptables/tablesizing' - // }, - // { - // title: 'Table Styling', - // page: '/boostraptables/tablestyling' - // }, - // { - // title: 'Table Components', - // page: '/boostraptables/tablecomponents' - // }, - // { - // title: 'Ngx BoostrapTables', - // page: '/boostraptables/ngxboostraptables' - // }, - // ] - // } - // }, - // { - // title: 'Data Tables', + icon: 'la-table', + page: 'null', + submenu: { + items: [ + { + title: 'Basic Table', + page: '/boostraptables/basictable' + }, + { + title: 'Table Border', + page: '/boostraptables/tableborder' + }, + { + title: 'Table Sizing', + page: '/boostraptables/tablesizing' + }, + { + title: 'Table Styling', + page: '/boostraptables/tablestyling' + }, + { + title: 'Table Components', + page: '/boostraptables/tablecomponents' + }, + { + title: 'Ngx BoostrapTables', + page: '/boostraptables/ngxboostraptables' + }, + ] + } + }, + { + title: 'Data Tables', - // icon: 'la-th', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Basic Installation', - // page: '/datatables/basicinitialisation' + icon: 'la-th', + page: 'null', + submenu: { + items: [ + { + title: 'Basic Installation', + page: '/datatables/basicinitialisation' - // }, - // { - // title: 'Styling', - // page: '/datatables/styling' - // }, - // { - // title: 'API', - // page: '/datatables/api' + }, + { + title: 'Styling', + page: '/datatables/styling' + }, + { + title: 'API', + page: '/datatables/api' - // }, - // ] - // } - // }, - // { - // title: 'DataTables Ext', + }, + ] + } + }, + { + title: 'DataTables Ext', - // icon: 'la-th-large', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Buttons', - // page: '/datatablesext/buttons' + icon: 'la-th-large', + page: 'null', + submenu: { + items: [ + { + title: 'Buttons', + page: '/datatablesext/buttons' - // }, - // { - // title: 'HTML5 Data Export', - // page: '/datatablesext/html5dataexport' + }, + { + title: 'HTML5 Data Export', + page: '/datatablesext/html5dataexport' - // }, - // { - // title: 'Hidden On load', - // page: '/datatablesext/hiddentable' + }, + { + title: 'Hidden On load', + page: '/datatablesext/hiddentable' - // }, - // ] - // } - // }, - // { section: 'CHARTS', icon: 'la-ellipsis-h' }, - // { - // title: 'Chartjs', - // icon: 'la-bar-chart', - // page: '/chartjs/charts', - // }, - // { - // title: 'Chartist', - // icon: 'la-pie-chart', - // page: '/ngchartist/linecharts' - // }, + }, + ] + } + }, + { section: 'CHARTS', icon: 'la-ellipsis-h' }, + { + title: 'Chartjs', + icon: 'la-bar-chart', + page: '/chartjs/charts', + }, + { + title: 'Chartist', + icon: 'la-pie-chart', + page: '/ngchartist/linecharts' + }, // { // title: 'Starter Kit', // icon: 'la-puzzle-piece', diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.css b/src/app/content/hemat-app/cost-management/cost-management.component.css index 48719bd..0203786 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.css +++ b/src/app/content/hemat-app/cost-management/cost-management.component.css @@ -12,15 +12,10 @@ stroke-width: 20px !important; } -/* :host ::ng-deep .donut-chart2 { - -webkit-filter: drop-shadow(0px 10px 11px rgba(187, 187, 187)) !important; - filter: drop-shadow(0px 10px 11px rgba(187, 187, 187)); -} */ - :host ::ng-deep .donut-chart2 .ct-label { fill: #ffffff; color: rgb(255, 255, 255); - font-size: 1.75rem; + font-size: 12px; line-height: 1; } @@ -62,6 +57,61 @@ stroke-width: 30px; } +:host ::ng-deep .donut-chart3 .ct-label { + fill: #ffffff; + color: rgb(255, 255, 255); + font-size: 12px; + line-height: 1; + margin-right: 20px; +} + +:host ::ng-deep .ct-label.ct-horizontal { + font-size: 12px; /* Adjust font size */ + transform: rotate(-45deg); /* Rotate labels if needed for better fit */ + text-anchor: end; + margin-top: 10px; +} + +:host ::ng-deep .ct-chart-bar .ct-labels .ct-label.ct-horizontal { + margin-right: 20px; /* Adjust margin for labels */ +} + + +.chart-title { + font-size: 18px; + margin-bottom: 10px; + font-weight: bold; +} + + +/* Hide the default calendar icon */ +input[type="month"]::-webkit-calendar-picker-indicator { + background-color: #ffffff; +} + +/* styles.css atau styles.scss */ +.chartist-tooltip { + position: absolute; + display: inline-block; + opacity: 0; + transition: opacity 0.2s ease-in-out; + pointer-events: none; + z-index: 10; + background: rgba(0, 0, 0, 0.8); + color: white; + padding: 5px; + border-radius: 3px; + font-size: 12px; + white-space: nowrap; +} + +.ct-tooltip-visible { + opacity: 1; +} + + + + /* table */ :host ::ng-deep diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.html b/src/app/content/hemat-app/cost-management/cost-management.component.html index 8db5232..1933ec9 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.html +++ b/src/app/content/hemat-app/cost-management/cost-management.component.html @@ -8,16 +8,22 @@
-
-

+
+

Comparison of Water and Electricity Costs

+ style=" + border-top: 4px solid #ffffff; + border-color: #ffffff !important; + " + />
@@ -37,24 +43,28 @@
-
-

+
+

Comparison of Previous Month Costs

+ style=" + border-top: 4px solid #ffffff; + border-color: #ffffff !important; + " + />
-
+
-
-

+
+

Comparison of Actual Costs and Estimated Costs

+ style=" + border-top: 4px solid #ffffff; + border-color: #ffffff !important; + " + />
-
+
+
+ @@ -338,13 +359,14 @@ let-value="value" ngx-datatable-cell-template > - -

{{ - value.toLocaleString("id-ID", { - style: "currency", - currency: "IDR" - }) - }}

+

+ {{ + value.toLocaleString("id-ID", { + style: "currency", + currency: "IDR" + }) + }} +

-

{{ value }}

kWh +

{{ value }}

+ kWh -

{{ value | date : "MM/yyyy" }}

+

+ {{ value | date : "MM/yyyy" }} +

-

{{ value === 2 ? "Aktif" : "Tidak Aktif" }}

+

+ {{ value === 2 ? "Aktif" : "Tidak Aktif" }} +