From 99391c88bb5cc6ca429a49483575e149356f4986 Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Fri, 28 Jun 2024 06:42:42 +0700 Subject: [PATCH] penambahan export pada cost management dan summary detail --- .../_layout/settings/menu-settings.config.ts | 1432 ++++++++--------- src/app/_services/tableexcel.service.ts | 66 + .../cost-management.component.css | 1 + .../cost-management.component.html | 784 ++++----- .../cost-management.component.ts | 274 +++- .../cost-management/cost-management.module.ts | 4 + .../data/invoice-summary/invoice-summary.json | 87 +- 7 files changed, 1369 insertions(+), 1279 deletions(-) diff --git a/src/app/_layout/settings/menu-settings.config.ts b/src/app/_layout/settings/menu-settings.config.ts index a4c68b5..421ab01 100644 --- a/src/app/_layout/settings/menu-settings.config.ts +++ b/src/app/_layout/settings/menu-settings.config.ts @@ -1066,736 +1066,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/_services/tableexcel.service.ts b/src/app/_services/tableexcel.service.ts index cea1e5e..64c9a39 100644 --- a/src/app/_services/tableexcel.service.ts +++ b/src/app/_services/tableexcel.service.ts @@ -84,4 +84,70 @@ export class TableexcelService { }); this.saveAsExcelFile(excelBuffer, excelFileName); } + + public exportAsExcelFileCostManage( + json: any[], + excelFileName: string, + columns: string[] + ): void { + // Filter the json data based on the columns + const filteredJson = json.map((item) => { + const filteredItem = {}; + columns.forEach((column) => { + filteredItem[column] = item[column]; + }); + return filteredItem; + }); + + // Calculate totals for estimation_cost and total_use + const totalEstimationCost = filteredJson.reduce((sum, item) => sum + (item['estimation_cost'] || 0), 0); + const totalUse = filteredJson.reduce((sum, item) => sum + (item['total_use'] || 0), 0); + + // Create the worksheet + const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(filteredJson); + const columnWidths = [ + { wch: 40 }, + { wch: 30 }, + { wch: 20 }, + { wch: 30 }, + { wch: 30 }, + { wch: 30 }, + ]; + worksheet["!cols"] = columnWidths; + + // Add header + const header = [ + "Building", + "Room", + "Category", + "Total Use", + "Estimation Cost", + "Date", + ]; + XLSX.utils.sheet_add_aoa(worksheet, [header]); + + // Add totals row + const totalsRow = [ + "Totals", + "", + "", + `Total: ${totalUse} Kwh`, + `Total: ${totalEstimationCost}`, + "" + ]; + XLSX.utils.sheet_add_aoa(worksheet, [totalsRow], { origin: -1 }); + + // Create the workbook + const workbook: XLSX.WorkBook = { + Sheets: { data: worksheet }, + SheetNames: ["data"], + }; + + // Write the workbook and save it + const excelBuffer: any = XLSX.write(workbook, { + bookType: "xlsx", + type: "array", + }); + this.saveAsExcelFile(excelBuffer, excelFileName); + } } 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 990a0bc..3b51239 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 @@ -416,3 +416,4 @@ input[type="month"]::-webkit-calendar-picker-indicator { :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover { background-color: #1a1a1a; /* Darker black for hover effect */ } + 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 c81c066..d83d4aa 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 @@ -6,42 +6,7 @@
-
-
-
-

- Comparison of Water and Electricity Costs -

-
-
-
-
-
- -
-
-
-
-
-
+
-
-
- - -
-
+
-
+
- Comparison of Actual Costs and Estimated Costs + Comparison of Previous Month Actual Costs and Estimated Costs
-
-
-
- - -
-
- {{ - dataCompAct?.real_cost - }} -
-
-
-
- - -
-
- {{ - dataCompAct?.est_cost - }} -
-
-
+
-
-
-
-
-
-
-
-
- - -
-
-
-
- -
-
-
-
- - -
-
-
-
- -
-
-
- -
-
-
-
- -
- Kwh -
-
-
-
-
-
-
- -
- IDR -
-
-
-
- -
-
- - -
-
-
- -
- +
+
+
+
+
+ - - -

- {{ rowIndex + 1 }} -

- - - - - Building - - -

{{ value }}

- - - - - Category - - -

{{ value }}

- - - - - Room - - -

{{ value }}

- - - - - Estimation Cost - - -

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

- - - - - Total Use - - -

{{ value }}

- kWh - - - - - Tanggal - - -

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

- - - - - Status - - -

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

- - - - - Actions - - - - - - +
+
+
+ +
+
+
+
+ + +
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+ Kwh +
+
+
+
+
+
+
+ +
+ IDR +
+
+
+
+ +
+
+ + + +
+
+
+ +
+ + + +

+ {{ rowIndex + 1 }} +

+ + + + + Building + + +

{{ value }}

+ + + + + Category + + +

{{ value }}

+ + + + + Room + + +

{{ value }}

+ + + + + Estimation Cost + + +

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

+ + + + + Total Use + + +

{{ value }}

+ kWh + + + + + Tanggal + + +

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

+ + + + + Status + + +

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

+ + + + + Actions + + + + + +
diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.ts b/src/app/content/hemat-app/cost-management/cost-management.component.ts index cbe6e79..109c61e 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.ts +++ b/src/app/content/hemat-app/cost-management/cost-management.component.ts @@ -1,16 +1,11 @@ import { Component, OnInit } from "@angular/core"; -import { Router } from "@angular/router"; -import { TableApiService } from "src/app/_services/table-api.service"; import { BuildingService } from "../service/monitoring-api.service"; -import { DatePipe } from "@angular/common"; import { CostManagementService } from "../service/cost-management.service"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; import { ModalAddActualComponent } from "./modal-add-actual/modal-add-actual.component"; - -import { ChartEvent, ChartType } from "ng-chartist"; -import * as Chartist from "chartist"; import "chartist-plugin-tooltips"; import { ModalExportComponent } from "./modal-export/modal-export.component"; +import { TableexcelService } from "src/app/_services/tableexcel.service"; @Component({ selector: "app-cost-management", @@ -33,26 +28,25 @@ export class CostManagementComponent implements OnInit { spinnerActive = false; spinnerActiveActual = false; spinnerFilterActive = false; - - donutChart2: any; - barChart: any; dateSelected: any; buildingSelected: any; categorySelected: any; - dataComp: any; dataCompPrev: any; dataCompAct: any; storedData: any; + chartOption: any; + chartOption2: any; + + spinnerExportActive = false; + constructor( - private tableApiservice: TableApiService, - private router: Router, private monitoringApiService: BuildingService, private costService: CostManagementService, - private datePipe: DatePipe, - private modalService: NgbModal + private modalService: NgbModal, + private tableexcelService: TableexcelService ) {} ngOnInit() { @@ -82,7 +76,6 @@ export class CostManagementComponent implements OnInit { this.dataListMaster(); this.dataListBuilding(); - this.dataCompWaterElectCost(this.storedData.buildingId); this.dataCompPrevMonthCost(this.storedData.buildingId); this.dataCompActEstCost(this.storedData.buildingId); } @@ -125,80 +118,93 @@ export class CostManagementComponent implements OnInit { }); } - dataCompWaterElectCost(buildingId) { - this.costService.getCompWaterElectCost(buildingId).subscribe((data) => { - this.dataComp = data.data; - const dataChart2 = { - donut: { - series: [this.dataComp.elect, this.dataComp.water], - labels: ["Electricity", "Water"], - }, - }; - this.donutChart2 = { - type: "Pie", - data: dataChart2.donut, - options: { - chartPadding: 0, - fullwidth: true, - height: "150px", - donut: true, - showLabel: true, - startAngle: 0, - labelPosition: "outside", - labelOffset: 50, - labelInterpolationFnc: function (value) { - return value; - }, - }, - }; - }); - } - dataCompPrevMonthCost(buildingId) { this.costService.getCompPrevMonthCost(buildingId).subscribe((data) => { this.dataCompPrev = data.data; - const randomValue = Math.floor(Math.random() * (100 - 50 + 1)) + 50; - const dataBar = { - Bar: { - labels: [[this.dataCompPrev[0].name], [this.dataCompPrev[1].name]], - series: [[randomValue], [this.dataCompPrev[1].value]], + this.chartOption = { + grid: { + left: "25%", + right: "25%", + top: "20%", + bottom: "20%", }, - }; - this.barChart = { - type: "Bar", - data: dataBar.Bar, - options: { - fullwidth: true, - width: "100px", - height: "200px", - seriesBarDistance: 200, - chartPadding: {bottom: 40 }, - axisX: { - showGrid: false, - showLabel: true, - offset: 30, - }, - axisY: { - showGrid: false, - showLabel: false, // Hide labels on the y-axis - scaleMinSpace: 30, - }, - classNames: { - bar: "ct-bar", // Add custom class to the bar + + // Add tooltip + tooltip: { + trigger: "axis", + enterable: false, + formatter: function (params) { + return `${params[0].name}
${ + params[0].seriesName + }: Rp. ${params[0].value.toLocaleString()}`; }, }, - responsiveOptions: [ - [ - "screen and (max-width: 640px)", - { - seriesBarDistance: 10, - axisX: { - labelInterpolationFnc: function (value) { - return value[0]; // Return the first character of the label - }, + + // Add legend + legend: false, + + // Add custom colors + color: ["#BEF264"], + + // Horizontal axis + xAxis: [ + { + type: "category", + data: [this.dataCompPrev[0].name, this.dataCompPrev[1].name], + axisLine: { + show: true, + lineStyle: { + color: "#BEF264", + width: 4, }, }, - ], + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + }, + ], + + // Vertical axis + yAxis: [ + { + type: "value", + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + }, + ], + + // Add series + series: [ + { + name: "Cost", + type: "bar", + data: [this.dataCompPrev[0].value, this.dataCompPrev[1].value], + label: { + show: true, + position: "top", + color: "#ffffff", + formatter: function (params) { + return `Rp. ${params.value.toLocaleString()}`; + }, + }, + barWidth: "50%", + }, ], }; }); @@ -207,6 +213,92 @@ export class CostManagementComponent implements OnInit { dataCompActEstCost(buildingId) { this.costService.getCompActEstCost(buildingId).subscribe((data) => { this.dataCompAct = data.data[0]; + this.chartOption2 = { + grid: { + left: "25%", + right: "25%", + top: "20%", + bottom: "20%", + }, + + // Add tooltip + tooltip: { + trigger: "axis", + enterable: false, + formatter: function (params) { + return `${params[0].name}
${ + params[0].seriesName + }: Rp. ${params[0].value.toLocaleString()}`; + }, + }, + + // Add legend + legend: false, + + // Add custom colors + color: ["#BEF264"], + + // Horizontal axis + xAxis: [ + { + type: "category", + data: ["Estimation Cost", "Actual Cost"], + axisLine: { + show: true, + lineStyle: { + color: "#BEF264", + width: 4, + }, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + }, + ], + + // Vertical axis + yAxis: [ + { + type: "value", + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + }, + ], + + // Add series + series: [ + { + name: "Cost", + type: "bar", + data: [this.dataCompAct.est_cost, this.dataCompAct.real_cost], + label: { + show: true, + position: "top", + color: "#ffffff", + formatter: function (params) { + return `Rp. ${params.value.toLocaleString()}`; + }, + }, + barWidth: "50%", // Adjust bar width + }, + ], + }; }); } @@ -331,4 +423,24 @@ export class CostManagementComponent implements OnInit { } ); } + + export(){ + this.spinnerExportActive = true; + setTimeout(() => { + const columnsToExport = [ + "name", + "room_name", + "category_name", + "total_use", + "estimation_cost", + "end_date", + ]; + this.tableexcelService.exportAsExcelFileCostManage( + this.filteredRows, + "Smart_building_cost_management", + columnsToExport + ); + this.spinnerExportActive = false; + }, 3000); + } } diff --git a/src/app/content/hemat-app/cost-management/cost-management.module.ts b/src/app/content/hemat-app/cost-management/cost-management.module.ts index b46708f..8a9b7c7 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.module.ts +++ b/src/app/content/hemat-app/cost-management/cost-management.module.ts @@ -18,6 +18,7 @@ import { MatchHeightModule } from '../../partials/general/match-height/match-hei import { ModalAddActualComponent } from './modal-add-actual/modal-add-actual.component'; import { NgxMaskModule, IConfig } from 'ngx-mask'; import { ModalExportComponent } from './modal-export/modal-export.component' +import { NgxEchartsModule } from 'ngx-echarts'; export const options: Partial | (() => Partial) = null; @@ -41,6 +42,9 @@ export const options: Partial | (() => Partial) = null; NgChartsModule, ChartistModule, MatchHeightModule, + NgxEchartsModule.forRoot({ + echarts: () => import('echarts') + }), NgxMaskModule.forRoot(), BlockUIModule.forRoot({ template: BlockTemplateComponent diff --git a/src/assets/data/invoice-summary/invoice-summary.json b/src/assets/data/invoice-summary/invoice-summary.json index ec6db48..f251d84 100644 --- a/src/assets/data/invoice-summary/invoice-summary.json +++ b/src/assets/data/invoice-summary/invoice-summary.json @@ -1,48 +1,47 @@ { - "sales": - [ - { - "name": "Today", - "sales": "$250.00", - "receipts": "$200.00", - "due": "$50.00" + "sales": [ + { + "name": "Today", + "sales": "$250.00", + "receipts": "$200.00", + "due": "$50.00" + }, + { + "name": "This Week", + "sales": "$450.00", + "receipts": "$300.00", + "due": "$150.00" + }, + { + "name": "This Month", + "sales": "$800", + "receipts": "$600.00", + "due": "$200.00" + }, + { + "name": "This Quarter", + "sales": "$1200.00", + "receipts": "$950.00", + "due": "$250.00" + }, + { + "name": "This Year", + "sales": "$1500.00", + "receipts": "$1200.00", + "due": "$300.00" + } + ], + "TotalSales": { + "TotalSales": [ + [1000, 1800, 1200, 0, 2000, 1500, 700, 900, 1600, 1400, 1550, 1800] + ] }, - { - "name": "This Week", - "sales": "$450.00", - "receipts": "$300.00", - "due": "$150.00" + "TotalReceipts": { + "TotalReceipts": [ + [850, 1650, 1000, 0, 1850, 1350, 450, 0, 1500, 900, 1250, 1500] + ] }, - { - "name": "This Month", - "sales": "$800", - "receipts": "$600.00", - "due": "$200.00" - }, - { - "name": "This Quarter", - "sales": "$1200.00", - "receipts": "$950.00", - "due": "$250.00" - }, - { - "name": "This Year", - "sales": "$1500.00", - "receipts": "$1200.00", - "due": "$300.00" + "TotalExpenses": { + "TotalExpenses": [[50, 150, 100, 10, 850, 350, 0, 60, 250, 90, 120, 230]] } -], -"TotalSales":{ - "TotalSales":[ -[1000, 1800, 1200, 0, 2000, 1500, 700, 900, 1600, 1400, 1550, 1800] -]}, -"TotalReceipts":{ - "TotalReceipts":[ -[850, 1650, 1000, 0, 1850, 1350, 450, 0, 1500, 900, 1250, 1500] -]}, -"TotalExpenses":{ - "TotalExpenses":[ -[50, 150, 100, 10, 850, 350, 0, 60, 250, 90, 120, 230] -]} - } - \ No newline at end of file +}