@starasia/admin 1.2.4 → 1.3.0

package/dist/components/AdvanceFilterBar/AdvanceFilterBar.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { AdvanceFilterBarProps } from './types';
+
+export declare const AdvanceFilterBar: ({ searchKey, statusKey, searchPlaceholder, searchHighlightPlaceholder, extendedFilter, showSearchFilter, showStatusFilter, filterKey, pageKey, customWidthSearch, handleOnReset, filterConfigs, buttonToggleProps, position, titleSearchLabel, withTitleLabels }: AdvanceFilterBarProps) => React.JSX.Element;

package/dist/components/AdvanceFilterBar/FilterDrawer.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { IDateProps } from '@starasia/date';
+import { IDropdown } from '@starasia/dropdown';
+
+interface RadioFilterConfig {
+    type: 'radio';
+    title: string;
+    name: string;
+    radioList: {
+        id: number;
+        label: string;
+        value: string;
+        icon?: React.ReactNode;
+    }[];
+    show?: boolean;
+}
+interface DropdownFilterConfig {
+    type: 'dropdown';
+    title: string;
+    name: string;
+    dropdownLists?: IDropdown['dropdownLists'];
+    isLoading?: boolean;
+    onSearch?: (v: string) => void;
+    search?: string;
+    searchable?: boolean;
+    onClickContainer?: () => void;
+    show?: boolean;
+}
+interface DropdownMultipleFilterConfig {
+    type: 'dropdown-multiple';
+    title: string;
+    name: string;
+    dropdownLists?: {
+        label: string;
+        value: string;
+    }[];
+    isLoading?: boolean;
+    onClickContainer?: () => void;
+    show?: boolean;
+}
+interface DateRangeFilterConfig {
+    type: 'date-range';
+    title: string;
+    name: string;
+}
+interface DateFilterConfig {
+    type: 'date';
+    title: string;
+    name: string;
+    filter: IDateProps['filter'];
+}
+export type FilterConfig = RadioFilterConfig | DropdownFilterConfig | DropdownMultipleFilterConfig | DateRangeFilterConfig | DateFilterConfig;
+interface FilterDrawerProps {
+    isOpen?: boolean;
+    onClose: () => void;
+    filterKey?: string;
+    pageKey?: string;
+    filters?: FilterConfig[];
+}
+export declare const FilterDrawer: ({ isOpen, onClose, filterKey, pageKey, filters }: FilterDrawerProps) => React.JSX.Element;
+export {};

package/dist/components/AdvanceFilterBar/index.d.ts

@@ -0,0 +1,5 @@
+export { AdvanceFilterBar } from './AdvanceFilterBar';
+export { FilterDrawer } from './FilterDrawer';
+export type { FilterConfig } from './FilterDrawer';
+export type { AdvanceFilterBarProps, TableFilterBarProps, ChangeHandler, ExtendedFilter, GetValuesFilterProps } from './types';
+export { handleChangeFilter, getValueSearch, getValuesFilter, getValueDropdownMultipleFilter, getValueRadioFilter, getDateRangeFilterValue, getDateFilterValue, isFilterActive, resolveDropdownValueToString, resolveRadioValueToString, resolveDateRangeValueToString, resolveDateValueToString } from './utils';

package/dist/components/AdvanceFilterBar/types.d.ts

@@ -0,0 +1,53 @@
+import { SetURLSearchParams } from 'react-router';
+import { FilterConfig } from './FilterDrawer';
+import { IconName } from '@starasia/icon';
+
+export interface TableFilterBarProps {
+    titleSearchLabel?: string;
+    searchKey?: string;
+    statusKey?: string;
+    searchPlaceholder?: string;
+    searchHighlightPlaceholder?: string;
+    withSearchParam?: boolean;
+    extendedFilter?: ExtendedFilter[];
+    showStatusFilter?: boolean;
+    showSearchFilter?: boolean;
+    filterKey?: string;
+    pageKey?: string;
+    handleOnReset?: () => void;
+    customWidthSearch?: string;
+    withTitleLabels?: boolean;
+    position?: 'left' | 'right';
+}
+export interface AdvanceFilterBarProps extends Omit<TableFilterBarProps, 'withSearchParam'> {
+    filterConfigs?: FilterConfig[];
+    buttonToggleProps?: {
+        isShowLabel?: boolean;
+        icon?: IconName;
+    };
+}
+type InputType = 'search' | 'dropdown' | 'date-range' | 'advanced-date-range' | 'radio' | 'dropdown-multiple' | 'date';
+export type ChangeHandler = (params: {
+    value: any;
+    name?: string;
+    type?: InputType;
+    withSearchParam?: boolean;
+    setSearchParams: SetURLSearchParams;
+    searchQueries: Record<string, string>;
+    dropdownSearchKey?: string;
+    filterKey?: string;
+    pageKey?: string;
+}) => void;
+export type ExtendedFilter = {
+    minWidth?: string;
+    title: string;
+    content: React.ReactNode;
+    onClickContainer?: () => void;
+};
+export type GetValuesFilterProps = {
+    searchParams: URLSearchParams;
+    filterKey?: string;
+    name: string;
+    get: 'value' | 'label';
+};
+export {};

package/dist/components/AdvanceFilterBar/utils.d.ts

@@ -0,0 +1,31 @@
+import { IDateRange } from '@starasia/date';
+import { IDropdown } from '@starasia/dropdown';
+import { ChangeHandler, GetValuesFilterProps } from './types';
+
+export declare const resolveDropdownValueToString: (value: IDropdown["defaultValue"]) => string;
+export declare const resolveRadioValueToString: (value: {
+    id: number;
+    label: string;
+    value: string;
+}) => string;
+export declare const resolveDateRangeValueToString: (value: IDateRange) => string;
+export declare const resolveDateValueToString: (value: Date) => string;
+export declare const handleChangeFilter: ChangeHandler;
+export declare const getValuesFilter: ({ name, filterKey, searchParams, get }: GetValuesFilterProps) => any;
+export declare const getValueDropdownMultipleFilter: ({ name, filterKey, searchParams, get }: Omit<GetValuesFilterProps, "get"> & {
+    get: "value" | "label" | "array";
+}) => any;
+export declare const getValueRadioFilter: ({ name, filterKey, searchParams, get }: Omit<GetValuesFilterProps, "get"> & {
+    get: "value" | "label" | "id";
+}) => any;
+export declare const getValueSearch: (name: string, searchParams: URLSearchParams, filterKey?: string) => any;
+export declare const getDateRangeFilterValue: ({ name, filterKey, searchParams }: GetValuesFilterProps) => {
+    start: string;
+    end: string;
+};
+export declare const getDateFilterValue: ({ name, filterKey, searchParams }: GetValuesFilterProps) => Date | undefined;
+export declare const isFilterActive: (searchParams: URLSearchParams, { filterKey, perPageKey, pageKey }: {
+    filterKey?: string;
+    perPageKey?: string;
+    pageKey?: string;
+}) => boolean;

package/dist/components/AppLayout/index.d.ts

@@ -0,0 +1,38 @@
+import { default as React, ReactNode } from 'react';
+
+interface AppLayoutProps {
+    children?: ReactNode;
+    profile?: {
+        name: string;
+        email: string;
+    };
+    isLoadingProfile?: boolean;
+    onLogout: () => void;
+    headerRight?: ReactNode;
+    isLoggingOut?: boolean;
+    loadingComponent?: ReactNode;
+    /**
+     * Content untuk sidebar header slot (dibawah logo)
+     * Dapat berupa: Organization Menu, User Switcher, Custom Component, atau kombinasinya
+     */
+    sidebarHeaderContent?: ReactNode;
+    /**
+     * Show/hide module switcher control in header (and its modal)
+     */
+    showModuleSwitcher?: boolean;
+}
+/**
+ * AppLayout - Main application layout component based on workspace pattern
+ * Features:
+ * - Responsive sidebar with collapse/expand (mobile: full-width + overlay)
+ * - Accordion menu items with auto-expansion
+ * - Sidebar scroll position persistence
+ * - Module switcher modal with localStorage
+ * - Settings shortcuts dropdown
+ * - User profile & logout dialog
+ * - Mobile hamburger menu
+ * - Loading overlay support
+ * - Embed mode for iframes
+ */
+export declare function AppLayout({ children, headerRight, profile, isLoadingProfile, onLogout, isLoggingOut, loadingComponent, sidebarHeaderContent, showModuleSwitcher, }: AppLayoutProps): React.JSX.Element;
+export {};

package/dist/components/ModuleSwitcherModal/index.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { SidebarMenus } from '../../types';
+
+export interface ModuleSwitcherModalProps {
+    isShow: boolean;
+    onHide: () => void;
+    menus: SidebarMenus;
+    selectedGroupId: number | null;
+    onSelect: (id: number | null) => void;
+}
+/**
+ * ModuleSwitcherModal - Module/namespace selector for the application
+ * Shows grid of available modules that can be selected to filter sidebar menus
+ */
+export declare function ModuleSwitcherModal({ isShow, onHide, menus, selectedGroupId, onSelect, }: ModuleSwitcherModalProps): React.JSX.Element;

package/dist/components/SidebarHeaderSlot/index.d.ts

@@ -0,0 +1,31 @@
+import { default as React, ReactNode } from 'react';
+
+export interface SidebarHeaderSlotProps {
+    /**
+     * Collapsed state from sidebar
+     */
+    collapsed?: boolean;
+    /**
+     * Content to display below logo - dapat berupa:
+     * - Organization menu
+     * - User switcher
+     * - Custom component
+     * - Atau kombinasi dari beberapa komponen
+     */
+    children?: ReactNode;
+}
+/**
+ * SidebarHeaderSlot - Flexible slot area dibawah logo sidebar
+ * Digunakan untuk menempatkan komponen apapun yang relevan dengan sidebar header
+ *
+ * Contoh penggunaan:
+ * <SidebarHeaderSlot collapsed={sidebarCollapsed}>
+ *   <OrganizationMenu />
+ * </SidebarHeaderSlot>
+ *
+ * atau:
+ * <SidebarHeaderSlot collapsed={sidebarCollapsed}>
+ *   <UserSwitcher />
+ * </SidebarHeaderSlot>
+ */
+export declare function SidebarHeaderSlot({ collapsed, children, }: SidebarHeaderSlotProps): React.JSX.Element | null;

package/dist/components/TableSection/components/ColumnFilterDropdown.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ColumnFilter } from '../types';
+
+interface Props {
+    filter: ColumnFilter;
+    columnTitle: string;
+}
+export declare const ColumnFilterDropdown: ({ filter, columnTitle }: Props) => React.JSX.Element;
+export {};

package/dist/components/TableSection/components/DataTable.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { BaseRecord, DataTableProps } from '../types';
+
+export declare const DataTable: <T extends BaseRecord>({ columns, records, handleDetail, handleUpdate, handleDelete, isLoading, visibleHandleDelete, visibleHandleUpdate, visibleHandleDetail, showHeadBorder, scrollParentRef, frozenCount, onFrozenCountChange, customActions, actionsOrder, customEmptyState }: DataTableProps<T>) => React.JSX.Element;

package/dist/components/TableSection/components/Footer.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TableFooterProps } from '../types';
+
+export declare const TableFooter: ({ pagination, pageKey, perPageKey, defaultPerPage, showPagination, totalData }: TableFooterProps) => React.JSX.Element;

package/dist/components/TableSection/components/Header.d.ts

@@ -0,0 +1,19 @@
+import { default as React, ReactNode } from 'react';
+import { AdvanceFilterBarProps } from '../../AdvanceFilterBar/types';
+import { ButtonProps } from '@starasia/button';
+import { IconName } from '@starasia/icon';
+
+interface ActionProps {
+    title?: string | ReactNode;
+    icon?: IconName;
+    buttonProps?: ButtonProps;
+    onClick?: () => void;
+}
+export type TableHeaderProps = {
+    action?: ActionProps[] | React.ReactNode;
+    advanceFilter?: AdvanceFilterBarProps;
+    show?: boolean;
+    showFilter?: boolean;
+};
+export declare const TableHeader: ({ action, advanceFilter, showFilter }: TableHeaderProps) => React.JSX.Element;
+export {};

package/dist/components/TableSection/components/TableSection.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { BaseRecord, TableSectionProps } from '../types';
+
+export declare const TableSection: <T extends BaseRecord>({ wrapperProps, dataTableProps, headerProps, footerProps }: TableSectionProps<T>) => React.JSX.Element;

package/dist/components/TableSection/components/Wrapper.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { WrapperProps } from '../types';
+
+export declare const TableWrapper: ({ children, borderRadius }: WrapperProps) => React.JSX.Element;

package/dist/components/TableSection/index.d.ts

@@ -0,0 +1,7 @@
+export { TableSection } from './components/TableSection';
+export { TableWrapper } from './components/Wrapper';
+export { TableHeader } from './components/Header';
+export { TableFooter } from './components/Footer';
+export { DataTable } from './components/DataTable';
+export { ColumnFilterDropdown } from './components/ColumnFilterDropdown';
+export type { TableSectionProps, BaseRecord, Column, ColumnFilter, DataTableProps, WrapperProps, TableHeaderProps, TableFooterProps } from './types';

package/dist/components/TableSection/types.d.ts

@@ -0,0 +1,90 @@
+import { BoxProps } from '@starasia/box';
+import { ButtonProps } from '@starasia/button';
+import { IconName } from '@starasia/icon';
+import { AdvanceFilterBarProps } from '../AdvanceFilterBar';
+import { ReactNode } from 'react';
+
+export interface BaseRecord {
+    id: number | string;
+}
+type Accessor<T> = keyof T | ((record: T) => React.ReactNode) | string;
+export interface ColumnFilter {
+    options: {
+        label: string;
+        value: string;
+    }[];
+    selectedValues: string[];
+    onFilterChange: (values: string[]) => void;
+    isLoadingOptions?: boolean;
+    position?: 'left' | 'right';
+    hideSearch?: boolean;
+    onOpen?: () => void;
+}
+export interface Column<T> {
+    accessor?: Accessor<T>;
+    title: string;
+    textAlign?: 'text-left' | 'text-center' | 'text-right';
+    render?: (record: T, colIndex: number, records: T[]) => React.ReactNode;
+    bgColor?: (record: T, colIndex: number, records: T[]) => string;
+    showBorderLeft?: boolean;
+    showBorderRight?: boolean;
+    width?: string;
+    filter?: ColumnFilter;
+}
+export interface DataTableProps<T extends BaseRecord> {
+    columns: Column<T>[];
+    records?: T[];
+    handleDetail?: (id: number | string, item: T) => void;
+    handleUpdate?: (item: T) => void;
+    handleDelete?: (id: number | string, record: T) => void;
+    visibleHandleDelete?: (item: T) => boolean;
+    visibleHandleUpdate?: (item: T) => boolean;
+    visibleHandleDetail?: (item: T) => boolean;
+    pagination?: Pagination;
+    showHeadBorder?: boolean;
+    perPageKey?: string;
+    pageKey?: string;
+    isLoading?: boolean;
+    scrollParentRef?: React.RefObject<HTMLDivElement>;
+    defaultPerPage?: number;
+    showPagination?: boolean;
+    customEmptyState?: React.ReactNode;
+    enableFreezeColumns?: boolean;
+    defaultFrozenCount?: number;
+    frozenCount?: number;
+    onFrozenCountChange?: (count: number) => void;
+    customActions?: (record: T) => React.ReactNode;
+    actionsOrder?: Array<'detail' | 'update' | 'delete' | 'custom'>;
+}
+export type WrapperProps = {
+    children: React.ReactNode;
+    borderRadius?: BoxProps['borderRadius'];
+};
+interface ActionProps {
+    title?: string | ReactNode;
+    icon?: IconName;
+    buttonProps?: ButtonProps;
+    onClick?: () => void;
+}
+export type TableHeaderProps = {
+    action?: ActionProps[] | React.ReactNode;
+    advanceFilter?: AdvanceFilterBarProps;
+    show?: boolean;
+    showFilter?: boolean;
+};
+export type TableFooterProps = {
+    pageKey?: string;
+    perPageKey?: string;
+    pagination?: Pagination;
+    defaultPerPage?: number;
+    showPagination?: boolean;
+    showFooter?: boolean;
+    totalData?: number;
+};
+export type TableSectionProps<T extends BaseRecord> = {
+    headerProps?: TableHeaderProps;
+    wrapperProps?: Omit<WrapperProps, 'children'>;
+    dataTableProps?: DataTableProps<T>;
+    footerProps?: Pick<TableFooterProps, 'showFooter' | 'totalData'>;
+};
+export {};

package/dist/components/index.d.ts

@@ -1,16 +1,17 @@
+export * from './AppLayout';
+export * from './SidebarHeaderSlot';
+export * from './ModuleSwitcherModal';
 export * from './AuthLayout';
-export * from './ContentLayout';
-export * from './DashboardLayout';
-export * from './Header';
 export * from './HorizontalField';
 export * from './ModalDialog';
 export * from './PageLayout';
 export * from './Pressable';
 export * from './RightDrawer';
 export * from './Section';
-export * from './Sidebar';
 export * from './ActionMenu';
 export * from './AdvanceFilter';
+export * from './AdvanceFilterBar';
+export * from './TableSection';
 export * from './EachUtils';
 export * from './DecisionWrapper';
 export * from './SwitchApps';

package/dist/entries/App/context.d.ts

@@ -1,17 +1,19 @@
-import { HeaderButtonProps, SidebarMenuItem, SidebarMenus, HeaderUserData } from '../../components';
-import { MenuSelectButtonProps } from '../../components/Header/MenuSelectButton';
+import { SidebarMenuItem, SidebarMenus } from '../../types';
 
 export interface AppContextValue {
     menus: SidebarMenus;
     menuBottom?: SidebarMenuItem[];
-    userData: HeaderUserData | null;
-    setUserData: (value: HeaderUserData) => void;
+    userData: {
+        name: string;
+        email: string;
+        photoURL?: string;
+    } | null;
+    setUserData: (value: {
+        name: string;
+        email: string;
+        photoURL?: string;
+    }) => void;
     logo: string;
-    headerButtons?: HeaderButtonProps[];
-    headerButtonsLeft?: HeaderButtonProps[];
-    menuSelectButtons?: MenuSelectButtonProps[];
-    menuSelectCustom?: React.ReactNode;
-    bottomDrawerContent?: React.ReactNode;
-    variant?: "default" | "simple";
+    appName: string;
 }
 export declare const AppContext: import('react').Context<AppContextValue>;

package/dist/entries/App/hooks.d.ts

@@ -1,4 +1,4 @@
-import { HeaderUserData } from '../../components';
+import { HeaderUserData } from '../../types';
 
 export declare const useApp: () => import('./context').AppContextValue;
 export interface UseAppStateProps {

package/dist/entries/App/index.d.ts

@@ -1,23 +1,21 @@
 import { default as React, PropsWithChildren } from 'react';
-import { HeaderButtonProps, HeaderUserData, SidebarMenuItem, SidebarMenus } from '../../components';
+import { SidebarMenuItem, SidebarMenus } from '../../types';
 import { ThemeObject } from '@starasia/theme';
-import { MenuSelectButtonProps } from '../../components/Header/MenuSelectButton';
 
 interface AppProps extends PropsWithChildren {
     router: React.ReactNode;
     menus: SidebarMenus;
     menuBottom?: SidebarMenuItem[];
     logo: string;
+    appName?: string;
     theme?: ThemeObject;
-    headerButtons?: HeaderButtonProps[];
-    initialUserData?: HeaderUserData | null;
-    headerButtonsLeft?: HeaderButtonProps[];
-    menuSelectButtons?: MenuSelectButtonProps[];
-    menuSelectCustom?: React.ReactNode;
-    bottomDrawerContent?: React.ReactNode;
-    variant?: "default" | "simple";
+    initialUserData?: {
+        name: string;
+        email: string;
+        photoURL?: string;
+    } | null;
 }
-export declare const AppComponent: ({ router, menus, menuBottom, logo, initialUserData, theme, headerButtons, headerButtonsLeft, menuSelectButtons, menuSelectCustom, bottomDrawerContent, variant, }: AppProps) => React.JSX.Element;
-export declare const App: React.MemoExoticComponent<({ router, menus, menuBottom, logo, initialUserData, theme, headerButtons, headerButtonsLeft, menuSelectButtons, menuSelectCustom, bottomDrawerContent, variant, }: AppProps) => React.JSX.Element>;
+export declare const AppComponent: ({ router, menus, menuBottom, logo, appName, initialUserData, theme, }: AppProps) => React.JSX.Element;
+export declare const App: React.MemoExoticComponent<({ router, menus, menuBottom, logo, appName, initialUserData, theme, }: AppProps) => React.JSX.Element>;
 export * from './hooks';
 export * from './context';

package/dist/hooks/useDynamicTitle.d.ts

@@ -1,4 +1,4 @@
-import { SidebarMenus } from '../components';
+import { SidebarMenus } from '../types';
 
 export declare function useDynamicTitle({ appName, menuConfig, formatTitle, }: {
     menuConfig: SidebarMenus;