@star-insure/sdk 3.0.3 → 3.1.0

package/dist/components/filter/Action.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TPageHeaderAction } from "../../types";
+export default function Action({ title, href, as, target, type, onClick }: TPageHeaderAction): JSX.Element;

package/dist/components/filter/Back.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function BackButton({ back }: {
+    back?: string | boolean;
+}): JSX.Element;

package/dist/components/filter/Dropdown.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare type Props = {
+    children: React.ReactNode;
+    onClose: Function;
+    active: boolean;
+};
+declare function Dropdown({ children, onClose, active }: Props): JSX.Element;
+declare namespace Dropdown {
+    var Title: "button";
+    var Content: "form";
+}
+export default Dropdown;

package/dist/components/filter/FilterItem.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FilterOption } from "../../types";
+export declare function FilterItem({ filter }: {
+    filter: FilterOption;
+    path?: string;
+}): JSX.Element;

package/dist/components/filter/FilterOptions.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { FilterOption } from "../../types";
+export declare function FilterOptions({ filterOptions }: {
+    filterOptions: FilterOption[];
+}): JSX.Element;

package/dist/components/filter/PageHeader.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { FilterOption, TPageHeaderAction } from '../../types';
+interface Props {
+    title: string;
+    search?: string;
+    className?: string;
+    innerClassName?: string;
+    back?: boolean | string;
+    actions?: TPageHeaderAction[];
+    backText?: string;
+    filterOptions?: FilterOption[];
+}
+export default function PageHeader({ title, search, className, innerClassName, back, actions, filterOptions, }: Props): JSX.Element;
+export {};

package/dist/components/filter/SearchBar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export default function SearchBar({ search, active, onActive, placeholder }: {
+    search?: string;
+    active: boolean;
+    onActive: Function;
+    placeholder?: string;
+}): JSX.Element;

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

@@ -0,0 +1 @@
+export { default as PageHeader } from './PageHeader';

package/dist/lib/page.d.ts

@@ -0,0 +1,19 @@
+import { Page, PageProps } from '@inertiajs/core';
+import { AuthContext, Breadcrumb, Environment } from '../types';
+/**
+ * Add custom props here, that are defined in `app/Http/Middleware/HandleInertiaRequests.php`
+ */
+declare type CustomPageProps = {
+    env: Environment;
+    breadcrumbs: Breadcrumb[];
+    links: Record<string, string>;
+    access_token?: string;
+    impersonate_id?: number;
+    csrf_token?: string;
+    auth: AuthContext;
+} & PageProps;
+/**
+ * A wrapper around Inertia's usePage function that gives better type-safety
+ */
+export declare function usePage<T>(): Page<CustomPageProps & T>;
+export {};

package/dist/types/misc/index.d.ts

@@ -5,3 +5,30 @@ export interface Toast {
     status?: 'success' | 'error' | 'default' | 'warning';
     timeout?: number;
 }
+export interface FilterOption {
+    label: string;
+    name: string;
+    options?: FilterValue[];
+    type?: 'options' | 'date' | 'greaterThan' | 'scope' | 'select';
+}
+export interface FilterValue {
+    label: string;
+    value: string | number;
+}
+export interface Filter {
+    [key: string]: (string | number)[];
+}
+export declare type TPageHeaderAction = {
+    title: string;
+    as?: 'button' | 'a' | 'Link';
+    href?: string;
+    target?: '_self' | '_blank';
+    onClick?: Function;
+    type?: 'button' | 'submit';
+};
+export declare type Environment = 'production' | 'staging' | 'testing' | 'local';
+export declare type Breadcrumb = {
+    current?: boolean;
+    title: string;
+    url?: string;
+};

package/package.json

@@ -2,7 +2,7 @@
     "name": "@star-insure/sdk",
     "description": "The SDK for Star Insure client apps with shared helper functions and TypeScript definitions.",
     "author": "alexclark_nz",
-    "version": "3.0.3",
+    "version": "3.1.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -66,10 +66,13 @@
         "@headlessui/react": "^1.6.3",
         "@inertiajs/react": "^1.0.0",
         "classnames": "^2.3.2",
+        "create-slots": "^0.6.1",
         "date-fns": "^2.28.0",
         "lodash-es": "^4.17.21",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.11.0",
+        "react-select": "^5.8.0",
         "uuid": "^9.0.0"
     }
 }

package/src/components/filter/Action.tsx

@@ -0,0 +1,30 @@
+import { Link } from "@inertiajs/react";
+import { TPageHeaderAction } from "../../types";
+import React from "react";
+
+export default function Action({ title, href, as = 'Link', target = '_self', type, onClick = () => {} }: TPageHeaderAction) {
+    const className =
+        'bg-white rounded-full font-bold px-3 py-1.5 text-xs whitespace-nowrap hover:bg-gray-100 hover:border-gray-300 transition-colors border border-gray-200';
+
+    if (as === 'Link' && href) {
+        return (
+            <Link className={className} href={href}>
+                {title}
+            </Link>
+        );
+    }
+
+    if (as === 'a' && href) {
+        return (
+            <a className={className} target={target} href={href}>
+                {title}
+            </a>
+        );
+    }
+
+    return (
+        <button className={className} type={type} onClick={() => onClick()}>
+            {title}
+        </button>
+    );
+}

package/src/components/filter/Back.tsx

@@ -0,0 +1,35 @@
+import { Link } from "@inertiajs/react";
+import React from "react";
+import { HiArrowLeft } from "react-icons/hi2";
+import { usePage } from "../../lib/page";
+
+export function BackButton({ back }: { back?: string | boolean }) {
+    const [backUrl, setBackUrl] = React.useState<string | undefined>(typeof back === 'string' ? back : undefined);
+    const { breadcrumbs } = usePage().props;
+
+    /**
+     * Set the back URL on mount
+     */
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            // Set back button URL
+            if (back && typeof back === 'boolean') {
+                // If we haven't provided a path as a prop, use the last breadcrumb that's not the current one
+                const crumb = breadcrumbs.slice(breadcrumbs.length - 2, breadcrumbs.length - 1);
+                if (crumb && crumb.length === 1) {
+                    // Strip off everything but the path so the <Link> component works
+                    const url = crumb[0].url;
+                    if (url) {
+                        setBackUrl(new URL(url).pathname);
+                    }
+                }
+            }
+        }
+    }, [breadcrumbs]);
+
+    return (
+        <Link href={backUrl || '/'} className="hover:text-teal transition-all p-1 -mr-1">
+            <HiArrowLeft className="h-5 w-5 stroke-[1.25]" />
+        </Link>
+    );
+}

package/src/components/filter/Dropdown.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+import { createHost, createSlot } from 'create-slots';
+import { useClickOutside } from "../../lib";
+
+const DropdownTitle = createSlot('button');
+const DropdownContent = createSlot('form');
+
+type Props = {
+    children: React.ReactNode;
+    onClose: Function;
+    active: boolean;
+}
+
+function Dropdown({ children, onClose, active }: Props) {
+    const ref = React.useRef<HTMLDivElement | null>(null);
+    const innerRef = React.useRef<HTMLDivElement | null>(null);
+
+    useClickOutside(ref, () => onClose(false));
+
+    React.useEffect(() => {
+        const current = ref?.current;
+        const innerCurrent = innerRef.current;
+
+        current?.classList.toggle('active', active)
+
+        if (!current || !innerCurrent) return;
+
+        const pos = current?.getBoundingClientRect();
+        innerCurrent.style.setProperty('left', `${pos?.left}px`)
+    }, [active, ref.current, innerRef.current]);
+
+    return createHost(children, (Slots) => {
+        return (
+            <div ref={ref} className="static inline-block">
+                {Slots.get(DropdownTitle)}
+
+                {active && (
+                    <div ref={innerRef} className="absolute children z-10 flex flex-col">
+                        {Slots.get(DropdownContent)}
+                    </div>
+                )}
+            </div>
+        )
+    });
+};
+
+Dropdown.Title = DropdownTitle;
+Dropdown.Content = DropdownContent;
+
+export default Dropdown;

package/src/components/filter/FilterItem.tsx

@@ -0,0 +1,318 @@
+import { router } from "@inertiajs/react";
+import { format, subYears } from "date-fns";
+import React from "react";
+import { FilterOption, FilterValue } from "../../types";
+import Select from 'react-select';
+import { HiChevronDown } from "react-icons/hi2";
+import Dropdown from "./Dropdown";
+import cn from 'classnames';
+import { Button } from "../common";
+
+export function FilterItem({ filter }: { filter: FilterOption, path?: string }) {
+    const [isOpen, setOpen] = React.useState<boolean>(false);
+    const [selected, setSelected] = React.useState<string[]>([]);
+
+    const [selectedOptions, setSelectedOptions] = React.useState<FilterValue[]>([]); // Filter type: select
+    const hasFilters = selected.length > 0;
+
+    // Populate values on load
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const search = new URLSearchParams(window.location.search);
+
+            if (filter.type === 'date') {
+                const fromDate = search.get(`${filter.name}[from]`);
+                const toDate = search.get(`${filter.name}[to]`);
+                if (fromDate && toDate) {
+                    setSelected([fromDate, toDate]);
+                }
+            } else if (filter.type === 'greaterThan') {
+                const selectedFromUrl = search.getAll(`${filter.name}-GTE`);
+                if (selectedFromUrl) {
+                    setSelected(selectedFromUrl);
+                }
+            } else if (filter.type === 'scope') {
+                const selectedFromUrl = search.getAll(`scope${filter.name}`);
+                if (selectedFromUrl) {
+                    setSelected(selectedFromUrl);
+                }
+            } else if (filter.type === 'select') {
+                const selectedFromUrl = search.getAll(`${filter.name}[]`);
+                if (selectedFromUrl) {
+                    setSelected(selectedFromUrl);
+                    const selectedOptions = filter.options && filter.options.filter(item => selectedFromUrl.includes(item.value.toString()));
+                    selectedOptions && setSelectedOptions(selectedOptions);
+                }
+            } else {
+                const selectedFromUrl = search.getAll(`${filter.name}[]`);
+                if (selectedFromUrl) {
+                    setSelected(selectedFromUrl);
+                }
+            }
+        }
+    }, []);
+
+    function handleInput(e: React.SyntheticEvent<HTMLInputElement>) {
+        const { value, checked } = e.currentTarget;
+
+        if (checked) {
+            setSelected((curr) => [...curr, value]);
+        } else {
+            setSelected(selected.filter((f) => f !== value));
+        }
+    }
+
+    function handleDateSelect(e: React.SyntheticEvent<HTMLInputElement>) {
+        const { name, value } = e.currentTarget;
+
+        // First value in "selected" will be the "from", second will be the "to"
+        if (name.includes('from')) {
+            return setSelected([value]);
+        }
+
+        if (name.includes('to')) {
+            // Make sure we have a "from" value first
+            if (selected.length === 0) {
+                // We'll default to a year ago if nothing entered
+                return setSelected([format(subYears(new Date(), 1), 'yyyy-MM-dd'), value]);
+            }
+            return setSelected([selected[0], value]);
+        }
+
+        return setSelected([]);
+    }
+
+    /**
+     * Handle Select for FilterType: Select
+     */
+    const handleSelectedOptions = (options: FilterValue[] | any) => {
+        setSelectedOptions(options);
+        const selectedValues = options.map((option : FilterValue) => option.value.toString());
+
+        if (selectedValues.length > 0) {
+            setSelected(selectedValues);
+        } else {
+            setSelected([]);
+        }
+    };
+
+    /**
+     * For Filter Select
+     * Removes the Clear Button
+     */
+    function NullComponent() {
+        return null;
+    }
+
+    function handleSelect(e: React.SyntheticEvent<HTMLSelectElement>) {
+        const { value } = e.currentTarget;
+
+        if (value) {
+            setSelected([value]);
+        } else {
+            setSelected([]);
+        }
+    }
+
+    function handleApply(e: React.FormEvent) {
+        e.preventDefault();
+
+        const search = new URLSearchParams(window.location.search);
+
+        // Reset the page in the query
+        search.set('page', '1');
+
+        if (filter.type === 'date') {
+            const [from, to] = selected;
+
+            search.set(`${filter.name}[from]`, from ?? format(new Date(), 'yyyy-MM-dd'));
+            search.set(`${filter.name}[to]`, to ?? format(new Date(), 'yyyy-MM-dd'));
+        } else if (filter.type === 'greaterThan') {
+            search.delete(`${filter.name}-GTE`);
+
+            if (selected.length > 0) {
+                search.set(`${filter.name}-GTE`, selected[0]);
+            }
+        } else if (filter.type === 'scope') {
+            search.delete(`${filter.name}`);
+            if (selected.length > 0) {
+                search.set(`scope${filter.name}`, selected[0]);
+            }
+        } else {
+            // Clear this filter first
+            search.delete(`${filter.name}[]`);
+
+            // Apply the filters to the query string
+            selected.forEach((selectedValue, i) => {
+                // Fall back to option equality filters
+                search.append(`${filter.name}[]`, selectedValue);
+            });
+        }
+
+        // Fetch new data
+        router.get(`${window.location.pathname}?${search.toString()}`);
+    }
+
+    function handleClear() {
+        const search = new URLSearchParams(window.location.search);
+
+        // Reset the page in the query
+        search.set('page', '1');
+
+        // Clear this filter
+        if (filter.type === 'date') {
+            search.delete(`${filter.name}[from]`);
+            search.delete(`${filter.name}[to]`);
+        } else if (filter.type === 'greaterThan') {
+            search.delete(`${filter.name}-GTE`);
+        } else if (filter.type === 'scope') {
+            search.delete(`scope${filter.name}`);
+        } else {
+            search.delete(`${filter.name}[]`);
+        }
+
+        // Fetch new data
+        router.get(`${window.location.pathname}?${search.toString()}`);
+    }
+
+    function handleClick(force?: boolean) {
+        if (typeof force === 'boolean') {
+            return setOpen(force);
+        }
+
+        setOpen(!isOpen);
+    }
+
+    return (
+        <Dropdown onClose={() => setOpen(!open)} active={isOpen}>
+            <Dropdown.Title
+                onClick={() => handleClick()}
+                className={cn(
+                    'flex rounded-2xl border hover:border-teal bg-gray-600 min-w-[90px] px-2 py-1 items-center justify-between shrink-0 gap-2 text-xs text-white hover:bg-teal transition-colors',
+                    {
+                        '!bg-teal border-teal': hasFilters,
+                    }
+                )}
+            >
+                <p className="whitespace-nowrap">{filter.label}</p>
+                <HiChevronDown />
+            </Dropdown.Title>
+
+            <Dropdown.Content
+                className={`mt-2 flex max-h-[350px] min-w-[200px] flex-col gap-2 rounded-md border border-gray-300 bg-white p-4 shadow-lg ${ filter.type && filter.type === 'select' ? '' : 'overflow-y-scroll'}`}
+                onSubmit={handleApply}
+            >
+                <div className="flex flex-col items-start gap-1">
+                    {(!filter.type || filter.type === 'options') &&
+                        filter.options?.map((option, i) => (
+                            <div className="checkbox text-sm " key={`${option.label}-${i}`}>
+                                <input
+                                    type="checkbox"
+                                    name={filter.name}
+                                    id={option.label}
+                                    value={option.value.toString()}
+                                    checked={selected.includes(option.value.toString())}
+                                    onChange={handleInput}
+                                />
+                                <label className="whitespace-nowrap" htmlFor={option.label}>
+                                    {option.label}
+                                </label>
+                            </div>
+                        ))}
+                    {filter.type === 'greaterThan' && filter.options && (
+                        <label className="mb-2 w-full">
+                            <div className="text-sm">Greater than or equal to</div>
+                            <select
+                                name={filter.name}
+                                id={filter.label}
+                                value={selected[0]}
+                                onChange={handleSelect}
+                                className="w-full"
+                            >
+                                <option value="">Select option</option>
+                                {filter.options?.map((option) => (
+                                    <option key={option.value} value={option.value}>
+                                        {option.label}
+                                    </option>
+                                ))}
+                            </select>
+                        </label>
+                    )}
+                    {filter.type === 'scope' && filter.options && (
+                        <label className="mb-2 w-full">
+                            <select
+                                name={filter.name}
+                                id={filter.label}
+                                value={selected[0]}
+                                onChange={handleSelect}
+                                className="w-full"
+                            >
+                                <option value="">Select option</option>
+                                {filter.options?.map((option) => (
+                                    <option key={option.value} value={option.value}>
+                                        {option.label}
+                                    </option>
+                                ))}
+                            </select>
+                        </label>
+                    )}
+                    {filter.type === 'date' && (
+                        <div className="mb-2 flex flex-col gap-4">
+                            <label className="text-xs">
+                                From
+                                <input
+                                    type="date"
+                                    name={`${filter.name}[from]`}
+                                    id={`${filter.name}[from]`}
+                                    onChange={handleDateSelect}
+                                    value={selected[0] ?? ''}
+                                />
+                            </label>
+                            <label className="text-xs">
+                                To
+                                <input
+                                    type="date"
+                                    name={`${filter.name}[to]`}
+                                    id={`${filter.name}[to]`}
+                                    onChange={handleDateSelect}
+                                    value={selected[1] ?? ''}
+                                />
+                            </label>
+                        </div>
+                    )}
+                    {filter.type === 'select' && filter.options && (
+                        <div className="w-full">
+                            <Select
+                                isMulti
+                                options={filter.options}
+                                className="basic-multi-select text-sm w-64 !transition-none"
+                                classNamePrefix="select"
+                                onChange={handleSelectedOptions}
+                                components={{
+                                    ClearIndicator: NullComponent, // Hide the ClearIndicator (X button) -> exits filter when clicked
+                                }}
+                                value={selectedOptions}
+                                theme={(theme) => ({
+                                    ...theme,
+                                    colors: {
+                                        ...theme.colors,
+                                        primary25: 'rgb(111, 199, 182)',
+                                        primary: 'rgb(111, 199, 182)',
+                                    },
+                                })}
+                            />
+                        </div>
+                    )}
+                </div>
+                <div className="flex items-center gap-2">
+                    <Button type="button" className="!min-w-[0px] flex-grow !px-2 text-sm !transition-none" onClick={handleClear}>
+                        Clear
+                    </Button>
+                    <Button type="submit" status="primary" className="!min-w-[0px] flex-grow !px-2 text-sm !transition-none">
+                        Apply
+                    </Button>
+                </div>
+            </Dropdown.Content>
+        </Dropdown>
+    );
+}

package/src/components/filter/FilterOptions.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { FilterOption } from "../../types";
+import Button from "../common/Button"
+import { FilterItem } from "./FilterItem";
+import { router } from "@inertiajs/react";
+
+export function FilterOptions({ filterOptions }: { filterOptions: FilterOption[] }) {    
+    function handleClear() {
+        router.get(`${window.location.pathname}`);
+    }
+
+    return (
+        <div className="flex items-center">
+            {filterOptions.map(filter => (
+                <FilterItem filter={filter} key={filter.name} />
+            ))}
+            <Button onClick={handleClear}>Clear filters</Button>
+        </div>
+    );
+}
+

package/src/components/filter/PageHeader.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import cn from 'classnames';
+import { FilterOption, TPageHeaderAction } from '../../types';
+import { BackButton } from './Back';
+import SearchBar from './SearchBar';
+import Action from './Action';
+import { FilterItem } from './FilterItem';
+import { HiChevronLeft, HiChevronRight, HiXMark } from 'react-icons/hi2';
+import { router } from '@inertiajs/core';
+
+interface Props {
+    title: string;
+    search?: string;
+    className?: string;
+    innerClassName?: string;
+    back?: boolean | string;
+    actions?: TPageHeaderAction[];
+    backText?: string;
+    filterOptions?: FilterOption[];
+}
+
+export default function PageHeader({
+    title,
+    search,
+    className = '',
+    innerClassName = '',
+    back = true,
+    actions = [],
+    filterOptions = [],
+}: Props) {
+    const [isSearchActive, setSearchActive] = React.useState<boolean>(false);
+    const scrollContainerRef = React.useRef<HTMLDivElement | null>(null);
+
+    const [overScroll, setOverScroll] = React.useState<boolean>(false);
+
+    React.useEffect(() => {
+        const current = scrollContainerRef.current;
+        if (!current) return;
+
+        const listener = function() {
+            const activeDropdown = current.querySelector('.active');
+            if (!activeDropdown) return;
+
+            const childrenContainer = activeDropdown.querySelector('.children');
+            if (!childrenContainer) return;
+
+            const pos = activeDropdown.getBoundingClientRect();
+
+            const posChild = childrenContainer.getBoundingClientRect();
+            const posContainer = current.getBoundingClientRect();
+
+            // if the dropdown content moves outside the scroll container to the left, make it disappear
+            if (posChild.left <= posContainer.left - 50) {
+                // @ts-ignore
+                childrenContainer.style.visibility = 'hidden';
+            } else if (posChild.left >= posContainer.right - 50) {
+                // @ts-ignore
+                childrenContainer.style.visibility = 'hidden';
+            } else {
+                // @ts-ignore
+                childrenContainer.style.visibility = 'visible';
+            }
+
+            // @ts-ignore
+            childrenContainer.style.left = `${pos.left}px`;
+        }
+
+        const mouseListener = function(e: MouseEvent) {
+            const pos = current.getBoundingClientRect();
+            if (e.clientX > pos.left && e.clientX < pos.right && e.clientY > pos.top && e.clientY < pos.bottom) {
+                setOverScroll(true);
+            } else {
+                setOverScroll(false);
+            }
+        };
+
+        current.addEventListener('scroll', listener);
+        document.addEventListener('mousemove', mouseListener)
+        
+        return () => {
+            current.removeEventListener('scroll', listener);
+            document.removeEventListener('mousemove', mouseListener)
+        }
+    }, []);
+
+    React.useEffect(() => {
+        const scrollListener = function(e: WheelEvent) {
+            if (overScroll) {
+                e.preventDefault();
+                scrollContainerRef.current?.scrollBy({ left: e.deltaY, behavior: 'auto' });
+            }
+        }
+
+        document.addEventListener('wheel', scrollListener, { passive: false });
+
+        return () => {
+            document.removeEventListener('wheel', scrollListener);
+        }
+    }, [overScroll])
+
+    function handleClear() {
+        router.get(`${window.location.pathname}`);
+    }
+
+    const [hasScroll, setHasScroll] = React.useState<boolean>(false);
+
+    const checkScroll = React.useCallback(() => {
+        const current = scrollContainerRef.current;
+        if (!current) return;
+
+        const pos = current.getBoundingClientRect();
+
+        setHasScroll(current.scrollWidth > (pos.width + 11));
+    }, [scrollContainerRef.current]);
+
+    React.useEffect(() => {
+        checkScroll();
+
+        window.addEventListener('resize', checkScroll)
+
+        return () => {
+            window.removeEventListener('resize', checkScroll);
+        }
+    }, [checkScroll]);
+
+    function clickRight() {
+        scrollContainerRef.current?.scrollBy({ left: 100, behavior: 'auto' });
+        checkScroll();
+    }
+
+    function clickLeft() {
+        scrollContainerRef.current?.scrollBy({ left: -100, behavior: 'auto' });
+        checkScroll();
+    }
+
+    return (
+        <section className={cn('col-span-full max-w-full rounded-lg bg-white p-2 shadow', className)}>
+            <div className={cn('grid grid-cols-[auto_1fr_auto] min-h-[60px] rounded gap-4 bg-gray-100 p-3', innerClassName)}>
+                <div className="mr-auto flex items-center gap-4">
+                    {back && <BackButton back={back} />}
+
+                    {search && <SearchBar search={search} active={isSearchActive} onActive={setSearchActive} placeholder={`Search ${title}...`} />}
+
+                    {!isSearchActive && <h1 className="text-base font-bold">{title}</h1>}
+                </div>
+
+                <div className="flex ml-auto items-center max-w-sm md:max-w-md lg:max-w-lg xl:max-w-2xl gap-2 h-full min-w-0">
+                    {filterOptions.length > 0 && (
+                        <>
+                            <button onClick={handleClear} className="p-1.5 hover:text-red-500"><HiXMark className="w-5 h-5 stroke-[1.25]" /></button>
+                            
+                            {hasScroll && <HiChevronLeft onClick={clickLeft} className="w-5 h-5 text-gray-400 stroke-[1.25]" />}
+                            <div ref={scrollContainerRef} className="flex items-center h-full w-full gap-3 overflow-x-scroll hide-scroll">
+                                {filterOptions.map(filter => (
+                                    <FilterItem key={filter.name} filter={filter} />
+                                ))}
+                            </div>
+                            {hasScroll && <HiChevronRight onClick={clickRight} className="w-5 h-5 text-gray-400 stroke-[1.25]" />}
+                        </>
+                    )}
+                </div>
+
+                {actions.length > 0 && (
+                    <div className="flex items-center gap-3">
+                        {filterOptions.length > 0 && <div className="w-[1px] h-full bg-gray-300" />}
+                        <nav className="flex items-center gap-2">
+                            {actions.map((action) => (
+                                <Action key={`${action.title}-${action.as}-${action.href}`} {...action} />
+                            ))}
+                        </nav>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+}

package/src/components/filter/SearchBar.tsx

@@ -0,0 +1,105 @@
+import { router } from "@inertiajs/react";
+import React from "react";
+import { HiMagnifyingGlass, HiXMark } from "react-icons/hi2";
+import { useClickOutside } from "../../lib";
+
+
+export default function SearchBar({ search, active, onActive, placeholder }: { search?: string, active: boolean, onActive: Function, placeholder?: string }) {
+    const [query, setQuery] = React.useState<string>('');
+
+    const searchRef = React.useRef<HTMLDivElement | null>(null);
+
+    /**
+     * Populate search input on load
+     */
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            // Populate search
+            const search = new URLSearchParams(window.location.search);
+
+            const q = search.get('search') as string;
+
+            if (q) {
+                setQuery(q);
+                onActive(true);
+            }
+        }
+    }, []);
+
+    /**
+     * Minimise the search bar on click outside if there's no search query
+     */
+    useClickOutside(searchRef, () => {
+        if (!query) {
+            onActive(false);
+        }
+    });
+
+    /**
+     * Handle the search function
+     */
+    function handleSearch(e?: React.FormEvent, queryOverride?: string) {
+        e?.preventDefault();
+
+        if (typeof search !== 'string') return;
+
+        let path: string = search;
+        if (path[0] !== '/') {
+            path = `/${path}`;
+        }
+
+        const params = new URLSearchParams(window?.location.search);
+        params.set('search', queryOverride ?? query);
+        params.set('page', '1');
+
+        router.get(`${path}?${params.toString()}`);
+    }
+
+    return (
+        <div ref={searchRef} className="">
+            {!active && (
+                <button
+                    title="Open Search Bar"
+                    type="button"
+                    onClick={() => onActive(true)}
+                    className="flex items-center justify-center rounded-full hover:text-teal p-1 transition-colors hover:bg-gray-100"
+                >
+                    <HiMagnifyingGlass className="h-5 w-5 stroke-[1.25]" />
+                </button>
+            )}
+            {active && (
+                <form
+                    onSubmit={handleSearch}
+                    className="group flex items-center gap-2 rounded-full bg-white pr-4 pl-1 shadow transition-all focus-within:outline-none focus-within:ring-1 focus-within:ring-teal"
+                >
+                    <input
+                        type="text"
+                        name="search"
+                        id="search"
+                        value={query}
+                        onChange={(e) => setQuery(e.currentTarget.value || '')}
+                        className="!focus:border-0 !border-0 !bg-transparent !shadow-none !ring-opacity-0 !transition-none placeholder:text-gray-400 !py-1.5 text-sm"
+                        autoFocus
+                        placeholder={placeholder}
+                    />
+                    {query && (
+                        <button
+                            type="button"
+                            title="Clear Search"
+                            onClick={() => {
+                                setQuery('');
+                                handleSearch(undefined, '');
+                            }}
+                        >
+                            <HiXMark className="h-5 w-5" />
+                        </button>
+                    )}
+                    <button type="submit">
+                        <HiMagnifyingGlass className="h-5 w-5" />
+                    </button>
+                </form>
+            )}
+        </div>
+    );
+}
+

package/src/components/filter/index.ts

@@ -0,0 +1 @@
+export { default as PageHeader } from './PageHeader';

package/src/lib/page.tsx

@@ -0,0 +1,24 @@
+import { Page, PageProps } from '@inertiajs/core';
+import { usePage as inertiaUsePage } from '@inertiajs/react';
+import { AuthContext, Breadcrumb, Environment } from '../types';
+
+/**
+ * Add custom props here, that are defined in `app/Http/Middleware/HandleInertiaRequests.php`
+ */
+type CustomPageProps = {
+    env: Environment;
+    breadcrumbs: Breadcrumb[];
+    links: Record<string, string>;
+    access_token?: string;
+    impersonate_id?: number;
+    csrf_token?: string;
+    auth: AuthContext;
+} & PageProps;
+
+/**
+ * A wrapper around Inertia's usePage function that gives better type-safety
+ */
+export function usePage<T>(): Page<CustomPageProps & T> {
+    // @ts-ignore
+    return inertiaUsePage();
+}

package/src/types/misc/index.ts

@@ -6,3 +6,36 @@ export interface Toast {
     status?: 'success' | 'error' | 'default' | 'warning';
     timeout?: number;
 }
+
+export interface FilterOption {
+    label: string;
+    name: string;
+    options?: FilterValue[];
+    type?: 'options' | 'date' | 'greaterThan' | 'scope' | 'select';
+}
+
+export interface FilterValue {
+    label: string;
+    value: string | number;
+}
+
+export interface Filter {
+    [key: string]: (string | number)[];
+}
+
+export type TPageHeaderAction = {
+    title: string;
+    as?: 'button' | 'a' | 'Link';
+    href?: string;
+    target?: '_self' | '_blank';
+    onClick?: Function;
+    type?: 'button' | 'submit';
+};
+
+export type Environment = 'production' | 'staging' | 'testing' | 'local';
+
+export type Breadcrumb = {
+    current?: boolean;
+    title: string;
+    url?: string;
+};