@licklist/design 0.72.72-stage.0 → 0.72.72-stage.2

package/dist/header/BookeditHeader.d.ts

@@ -1,8 +1,5 @@
 import { ReactNode } from 'react';
-interface NavigationItem {
-    href: string;
-    label: string;
-}
+import { NavigationItem } from './Header';
 interface Props {
     children?: ReactNode | ReactNode[];
     href?: string;

package/dist/header/BookeditHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BookeditHeader.d.ts","sourceRoot":"","sources":["../../src/header/BookeditHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKjC,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AACD,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;IAC3B,sBAAsB,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,SAAS,CAAA;CAC1E;AAED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,sBAAsB,GACvB,EAAE,KAAK,2CAYP;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"BookeditHeader.d.ts","sourceRoot":"","sources":["../../src/header/BookeditHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,OAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAEjD,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;IAC3B,sBAAsB,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,SAAS,CAAA;CAC1E;AAED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,sBAAsB,GACvB,EAAE,KAAK,2CAYP;AAED,eAAe,cAAc,CAAA"}

package/dist/header/Header.d.ts

@@ -1,8 +1,16 @@
 import { ReactNode } from 'react';
-interface NavigationItem {
+export type NavigationItem = {
     href: string;
     label: string;
-}
+    pathname: string[];
+} | {
+    label: string;
+    links: {
+        href: string;
+        label: string;
+        pathname: string[];
+    }[];
+};
 type Props = {
     children?: ReactNode | ReactNode[];
     href?: string;

package/dist/header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AAED,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;IAC3B,sBAAsB,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,SAAS,CAAA;CAC1E,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,sBAAsB,GACvB,EAAE,KAAK,2CAyCP;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKjC,MAAM,MAAM,cAAc,GACtB;IACE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB,GACD;IACE,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,MAAM,EAAE,CAAA;KACnB,EAAE,CAAA;CACJ,CAAA;AAEL,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IAClC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;IAC3B,sBAAsB,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,SAAS,CAAA;CAC1E,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,sBAAsB,GACvB,EAAE,KAAK,2CAmEP;AAED,eAAe,MAAM,CAAA"}

package/dist/header/Header.js

@@ -1,6 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Accordion } from '@mantine/core';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
+import { NavLink } from 'react-router-dom';
 
 function Header(param) {
     var children = param.children, href = param.href, logo = param.logo, leftNavs = param.leftNavs, navItems = param.navItems, renderMobileNavigation = param.renderMobileNavigation;
@@ -39,12 +41,36 @@ function Header(param) {
                 id: "header-navbar-nav",
                 children: renderMobileNavigation ? renderMobileNavigation(navItems) : /*#__PURE__*/ jsx(Nav, {
                     className: "mr-auto",
-                    children: navItems.map(function(param) {
-                        var label = param.label, href = param.href;
+                    children: navItems.map(function(item) {
+                        if ('links' in item) {
+                            return /*#__PURE__*/ jsx(Accordion, {
+                                defaultValue: "Apples",
+                                children: /*#__PURE__*/ jsxs(Accordion.Item, {
+                                    value: item.label,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Accordion.Control, {
+                                            children: item.label
+                                        }),
+                                        item.links.map(function(subItem) {
+                                            return /*#__PURE__*/ jsx(Accordion.Panel, {
+                                                children: /*#__PURE__*/ jsx(Nav.Item, {
+                                                    children: /*#__PURE__*/ jsx(NavLink, {
+                                                        exact: true,
+                                                        to: subItem.href,
+                                                        className: "nav-link",
+                                                        children: subItem.label
+                                                    })
+                                                }, "".concat(subItem.label, "-").concat(subItem.href))
+                                            }, subItem.href + subItem.label);
+                                        })
+                                    ]
+                                })
+                            });
+                        }
                         return /*#__PURE__*/ jsx(Nav.Link, {
-                            href: href,
-                            children: label
-                        }, "".concat(href).concat(label));
+                            href: item.href,
+                            children: item.label
+                        }, "".concat(item.href).concat(item.label));
                     })
                 })
             })

package/dist/header/index.d.ts

@@ -1,6 +1,6 @@
 import BookeditHeader from './BookeditHeader';
-import LicklistHeader from './LicklistHeader';
 import Header from './Header';
 export * from './elements';
-export { LicklistHeader, BookeditHeader, Header };
+export { BookeditHeader, Header };
+export type { NavigationItem } from './Header';
 //# sourceMappingURL=index.d.ts.map

package/dist/header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/header/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/header/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,CAAA;AACjC,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA"}

package/dist/index.js

@@ -30,7 +30,6 @@ export { EventStatisticModal } from './events/event-statistic-modal/EventStatist
 export { EventVenueMap } from './events/event-venue-map/EventVenueMap.js';
 export { FileUpload } from './file-upload/FileUpload.js';
 export { default as BookeditHeader } from './header/BookeditHeader.js';
-export { default as LicklistHeader } from './header/LicklistHeader.js';
 export { default as Header } from './header/Header.js';
 export { default as CompanySelector } from './header/elements/CompanySelector.js';
 export { Example, ExampleContent, ExampleToggle } from './help/example/Example.js';
@@ -137,8 +136,6 @@ export { RyftPayment } from './sales/payment-form/components/RyftPayment/RyftPay
 export { BookingResults } from './sales/booking/results/BookingResults.js';
 export { BACKGROUND_COLOR_CLASSNAMES } from './sales/booking/results/constants.js';
 export { NotesTable } from './sales/notes/NotesTable.js';
-export { SystemSettingForm } from './setting/system/SystemSettingForm.js';
-export { AdminSettingForm } from './setting/admin/AdminSettingForm.js';
 export { DashboardSettingForm } from './setting/dashboard/DashboardSettingForm.js';
 export { SnippetCard } from './setting/dashboard/snippets/card/SnippetCard.js';
 export { SnippetTemplateCard } from './setting/dashboard/snippet-templates/card/SnippetTemplateCard.js';

package/dist/sales/coupon/form/CouponFrom.d.ts

@@ -23,9 +23,10 @@ export interface CouponFormProps {
     productGroups?: ProductGroup[];
     defaultValues?: CouponFormValues;
     onSubmit: (values: CouponFormValues) => void;
+    onCancel: () => void;
     isLoading?: boolean;
     hasPermission: boolean;
     serverErrors?: ServerError;
 }
-export declare const CouponForm: ({ onSubmit, defaultValues, isLoading, productGroups, hasPermission, serverErrors, }: CouponFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CouponForm: ({ onSubmit, onCancel, defaultValues, isLoading, productGroups, hasPermission, serverErrors, }: CouponFormProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CouponFrom.d.ts.map

package/dist/sales/coupon/form/CouponFrom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CouponFrom.d.ts","sourceRoot":"","sources":["../../../../src/sales/coupon/form/CouponFrom.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EACZ,eAAe,EAChB,MAAM,+DAA+D,CAAA;AACtE,OAAO,EACL,eAAe,EACf,UAAU,EACX,MAAM,yDAAyD,CAAA;AAIhE,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAK3E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,UAAU,CAAA;IACxB,eAAe,EAAE,eAAe,EAAE,CAAA;IAClC,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,eAAe,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B,aAAa,CAAC,EAAE,gBAAgB,CAAA;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B;AAED,eAAO,MAAM,UAAU,wFAOpB,eAAe,4CAkCjB,CAAA"}
+{"version":3,"file":"CouponFrom.d.ts","sourceRoot":"","sources":["../../../../src/sales/coupon/form/CouponFrom.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EACZ,eAAe,EAChB,MAAM,+DAA+D,CAAA;AACtE,OAAO,EACL,eAAe,EACf,UAAU,EACX,MAAM,yDAAyD,CAAA;AAIhE,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAI3E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,UAAU,CAAA;IACxB,eAAe,EAAE,eAAe,EAAE,CAAA;IAClC,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,eAAe,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B,aAAa,CAAC,EAAE,gBAAgB,CAAA;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B;AAED,eAAO,MAAM,UAAU,kGAQpB,eAAe,4CA6CjB,CAAA"}

package/dist/sales/coupon/form/CouponFrom.js

@@ -59,7 +59,7 @@ function _object_spread_props(target, source) {
     return target;
 }
 var CouponForm = function(param) {
-    var onSubmit = param.onSubmit, defaultValues = param.defaultValues, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, productGroups = param.productGroups, _param_hasPermission = param.hasPermission, hasPermission = _param_hasPermission === void 0 ? false : _param_hasPermission, serverErrors = param.serverErrors;
+    var onSubmit = param.onSubmit, onCancel = param.onCancel, defaultValues = param.defaultValues, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, productGroups = param.productGroups, _param_hasPermission = param.hasPermission, hasPermission = _param_hasPermission === void 0 ? false : _param_hasPermission, serverErrors = param.serverErrors;
     var form = useForm({
         defaultValues: defaultValues
     });
@@ -85,11 +85,24 @@ var CouponForm = function(param) {
                     productGroups: productGroups,
                     isLoading: isLoading
                 }),
-                hasPermission && /*#__PURE__*/ jsx(Button, {
-                    className: "mt-5 d-no dne d-md-block",
-                    type: "submit",
-                    disabled: isLoading,
-                    children: t('save')
+                hasPermission && /*#__PURE__*/ jsxs("div", {
+                    className: "tw-flex tw-gap-4",
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            className: "d-md-block mt-5",
+                            type: "submit",
+                            disabled: isLoading,
+                            children: t('save')
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            className: "mt-5 d-md-block",
+                            variant: "outline-primary",
+                            type: "reset",
+                            onClick: onCancel,
+                            disabled: isLoading,
+                            children: t('cancel')
+                        })
+                    ]
                 })
             ]
         })

package/dist/setting/index.d.ts

@@ -1,4 +1,2 @@
-export * from './system';
-export * from './admin';
 export * from './dashboard';
 //# sourceMappingURL=index.d.ts.map

package/dist/setting/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/setting/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/setting/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.72.72-stage.0",
+  "version": "0.72.72-stage.2",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -94,7 +94,7 @@
     "@wojtekmaj/react-daterange-picker": "4.1.0",
     "bootstrap": "4.6.0",
     "bootstrap-social": "5.1.1",
-    "clsx": "1.1.1",
+    "clsx": "2.1.1",
     "date-fns": "2.29.3",
     "emojibase": "6.1.0",
     "emojibase-data": "7.0.1",

package/src/header/BookeditHeader.tsx

@@ -1,12 +1,8 @@
 import { ReactNode } from 'react'
 import { ReactComponent as LogoSvg } from '../assets/logo/bookedit.svg'
 import Logo from '../logo/Logo'
-import Header from './Header'
+import Header, { NavigationItem } from './Header'
 
-interface NavigationItem {
-  href: string
-  label: string
-}
 interface Props {
   children?: ReactNode | ReactNode[]
   href?: string

package/src/header/Header.stories.tsx

@@ -1,87 +1,38 @@
-import Nav from 'react-bootstrap/Nav'
+import React from 'react'
 import StyledButton from '../static/StyledButton'
 import BookeditHeader from './BookeditHeader'
 import CompanySelector from './elements/CompanySelector'
-import LicklistHeader from './LicklistHeader'
+import { NavigationItem } from './Header'
 
-const providerNavItems = [
-  { href: `/profile`, label: 'profile' },
-  { href: `/events`, label: 'events' },
-  { href: `/sales`, label: 'salesAndEnquiries' },
-  { href: `/product-sets`, label: 'productSets' },
-  { href: `/affiliates`, label: 'affiliates' },
-  { href: `/product-groups`, label: 'productGroups' },
-  { href: '/#', label: 'loyalty' },
-  { href: '/#', label: 'emailAndSms' },
-  { href: '/#', label: 'followersAndProfiles' },
+const providerNavItems: NavigationItem[] = [
+  { href: `/profile`, label: 'profile', pathname: [] },
+  { href: `/events`, label: 'events', pathname: [] },
+  { href: `/sales`, label: 'salesAndEnquiries', pathname: [] },
+  { href: `/product-sets`, label: 'productSets', pathname: [] },
+  { href: `/affiliates`, label: 'affiliates', pathname: [] },
+  { href: `/product-groups`, label: 'productGroups', pathname: [] },
+  { href: '/#', label: 'loyalty', pathname: [] },
+  { href: '/#', label: 'emailAndSms', pathname: [] },
+  { href: '/#', label: 'followersAndProfiles', pathname: [] },
 ]
 
 export default {
   title: 'Header',
 }
 
-export const Licklist = () => (
-  <>
-    <LicklistHeader
-      leftNavs={
-        <>
-          <ul className='navbar-nav bd-navbar-nav flex-row navbar-nav-primary'>
-            <li className='nav-item px-3 px-sm-3 px-lg-4'>
-              <Nav.Link href='#'>
-                <FaSearch />
-              </Nav.Link>
-            </li>
-            <li className='nav-item px-3 px-sm-4 d-none d-sm-inline'>
-              <Nav.Link href='#' className='nav-link-light-grey'>
-                Explore
-              </Nav.Link>
-            </li>
-            <li className='nav-item px-3 px-sm-4 d-none d-sm-inline'>
-              <Nav.Link href='#' className=''>
-                Galleries
-              </Nav.Link>
-            </li>
-          </ul>
-        </>
-      }
-    >
-      <StyledButton size='sm' className='rounded-pill mr-2'>
-        Login
-      </StyledButton>
-      <StyledButton
-        size='sm'
-        className='rounded-pill'
-        variant='outline-secondary'
-      >
-        Sign up
-      </StyledButton>
-    </LicklistHeader>
-  </>
-)
-
-Licklist.story = {
-  parameters: {
-    info: `
-      Licklist header component
-    `,
-  },
-}
-
 export const Bookedit = () => (
-  <>
-    <BookeditHeader navItems={providerNavItems}>
-      <StyledButton size='sm' className='rounded-pill mr-2'>
-        Login
-      </StyledButton>
-      <StyledButton
-        size='sm'
-        className='rounded-pill'
-        variant='outline-secondary'
-      >
-        Sign up
-      </StyledButton>
-    </BookeditHeader>
-  </>
+  <BookeditHeader navItems={providerNavItems}>
+    <StyledButton size='sm' className='rounded-pill mr-2'>
+      Login
+    </StyledButton>
+    <StyledButton
+      size='sm'
+      className='rounded-pill'
+      variant='outline-secondary'
+    >
+      Sign up
+    </StyledButton>
+  </BookeditHeader>
 )
 
 Bookedit.story = {
@@ -93,23 +44,21 @@ Bookedit.story = {
 }
 
 export const BookeditWithElements = () => (
-  <>
-    <BookeditHeader
-      leftNavs={
-        <div className='header-elements'>
-          <CompanySelector
-            value={1}
-            list={[
-              { id: 1, title: 'Company #1' },
-              { id: 2, title: 'Company #2' },
-            ]}
-            onChange={() => null}
-          />
-        </div>
-      }
-      navItems={providerNavItems}
-    />
-  </>
+  <BookeditHeader
+    leftNavs={
+      <div className='header-elements'>
+        <CompanySelector
+          value={1}
+          list={[
+            { id: 1, title: 'Company #1' },
+            { id: 2, title: 'Company #2' },
+          ]}
+          onChange={() => null}
+        />
+      </div>
+    }
+    navItems={providerNavItems}
+  />
 )
 
 BookeditWithElements.story = {

package/src/header/Header.tsx

@@ -1,11 +1,23 @@
+import { Accordion } from '@mantine/core'
 import { ReactNode } from 'react'
 import Nav from 'react-bootstrap/Nav'
 import Navbar from 'react-bootstrap/Navbar'
+import { NavLink } from 'react-router-dom'
 
-interface NavigationItem {
-  href: string
-  label: string
-}
+export type NavigationItem =
+  | {
+      href: string
+      label: string
+      pathname: string[]
+    }
+  | {
+      label: string
+      links: {
+        href: string
+        label: string
+        pathname: string[]
+      }[]
+    }
 
 type Props = {
   children?: ReactNode | ReactNode[]
@@ -53,11 +65,37 @@ function Header({
             renderMobileNavigation(navItems)
           ) : (
             <Nav className='mr-auto'>
-              {navItems.map(({ label, href }) => (
-                <Nav.Link href={href} key={`${href}${label}`}>
-                  {label}
-                </Nav.Link>
-              ))}
+              {navItems.map((item) => {
+                if ('links' in item) {
+                  return (
+                    <Accordion defaultValue='Apples'>
+                      <Accordion.Item value={item.label}>
+                        <Accordion.Control>{item.label}</Accordion.Control>
+                        {item.links.map((subItem) => (
+                          <Accordion.Panel key={subItem.href + subItem.label}>
+                            <Nav.Item key={`${subItem.label}-${subItem.href}`}>
+                              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                              {/* @ts-ignore */}
+                              <NavLink
+                                exact
+                                to={subItem.href}
+                                className='nav-link'
+                              >
+                                {subItem.label}
+                              </NavLink>
+                            </Nav.Item>
+                          </Accordion.Panel>
+                        ))}
+                      </Accordion.Item>
+                    </Accordion>
+                  )
+                }
+                return (
+                  <Nav.Link href={item.href} key={`${item.href}${item.label}`}>
+                    {item.label}
+                  </Nav.Link>
+                )
+              })}
             </Nav>
           )}
         </Navbar.Collapse>

package/src/header/index.ts

@@ -1,7 +1,7 @@
 import BookeditHeader from './BookeditHeader'
-import LicklistHeader from './LicklistHeader'
 import Header from './Header'
 
 export * from './elements'
 
-export { LicklistHeader, BookeditHeader, Header }
+export { BookeditHeader, Header }
+export type { NavigationItem } from './Header'

package/src/sales/coupon/form/CouponFrom.tsx

@@ -12,7 +12,6 @@ import { useForm, FormProvider } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
 import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
-
 import { CouponFormControl } from '../control'
 
 export interface CouponFormValues {
@@ -38,6 +37,7 @@ export interface CouponFormProps {
   productGroups?: ProductGroup[]
   defaultValues?: CouponFormValues
   onSubmit: (values: CouponFormValues) => void
+  onCancel: () => void
   isLoading?: boolean
   hasPermission: boolean
   serverErrors?: ServerError
@@ -45,6 +45,7 @@ export interface CouponFormProps {
 
 export const CouponForm = ({
   onSubmit,
+  onCancel,
   defaultValues,
   isLoading = false,
   productGroups,
@@ -73,13 +74,24 @@ export const CouponForm = ({
           isLoading={isLoading}
         />
         {hasPermission && (
-          <Button
-            className='mt-5 d-no dne d-md-block'
-            type='submit'
-            disabled={isLoading}
-          >
-            {t('save')}
-          </Button>
+          <div className='tw-flex tw-gap-4'>
+            <Button
+              className='d-md-block mt-5'
+              type='submit'
+              disabled={isLoading}
+            >
+              {t('save')}
+            </Button>
+            <Button
+              className='mt-5 d-md-block'
+              variant='outline-primary'
+              type='reset'
+              onClick={onCancel}
+              disabled={isLoading}
+            >
+              {t('cancel')}
+            </Button>
+          </div>
         )}
       </Form>
     </FormProvider>

package/src/setting/index.ts

@@ -1,3 +1 @@
-export * from './system'
-export * from './admin'
 export * from './dashboard'