@orbe-agro/client-core 5.3.67 → 5.3.69

package/lib/@ecme/assets/markdown/shared/DataTableDoc/Checkable.md

@@ -0,0 +1,169 @@
+```jsx
+import { useState, useEffect, useMemo } from 'react'
+import Button from '@/components/ui/Button'
+import DataTable from '@/components/shared/DataTable'
+import { apiGetCustomersList } from '@/services/CustomersService'
+import type {
+    ColumnDef,
+    OnSortParam,
+    CellContext,
+    Row,
+} from '@/components/shared/DataTable'
+
+type Customer = {
+    id: string
+    name: string
+    email: string
+}
+
+const Checkable = () => {
+    const [data, setData] = useState<Customer[]>([])
+    const [loading, setLoading] = useState(false)
+    const [selectedRows, setSelectedRows] = useState<string[]>([])
+    const [tableData, setTableData] = useState<{
+        pageIndex: number
+        pageSize: number
+        sort: {
+            order: '' | 'asc' | 'desc'
+            key: string | number
+        }
+        query: string
+        total: number
+    }>({
+        total: 0,
+        pageIndex: 1,
+        pageSize: 10,
+        query: '',
+        sort: {
+            order: '',
+            key: '',
+        },
+    })
+
+    const handleAction = (cellProps: CellContext<Customer, unknown>) => {
+        console.log('Action clicked', cellProps)
+    }
+
+    const handleBatchAction = () => {
+        console.log('selectedRows', selectedRows)
+    }
+
+    const columns: ColumnDef<Customer>[] = useMemo(
+        () => [
+            {
+                header: 'Name',
+                accessorKey: 'name',
+            },
+            {
+                header: 'Email',
+                accessorKey: 'email',
+            },
+            {
+                header: '',
+                id: 'action',
+                cell: (props) => (
+                    <Button size="xs" onClick={() => handleAction(props)}>
+                        Action
+                    </Button>
+                ),
+            },
+        ],
+        []
+    )
+
+    const handlePaginationChange = (pageIndex: number) => {
+        setTableData((prevData) => ({ ...prevData, ...{ pageIndex } }))
+    }
+
+    const handleSelectChange = (pageSize: number) => {
+        setTableData((prevData) => ({ ...prevData, ...{ pageSize } }))
+    }
+
+    const handleSort = ({ order, key }: OnSortParam) => {
+        setTableData((prevData) => ({
+            ...prevData,
+            ...{ sort: { order, key } },
+        }))
+    }
+
+    const handleRowSelect = (checked: boolean, row: Customer) => {
+        console.log('row', row)
+        if (checked) {
+            setSelectedRows((prevData) => {
+                if (!prevData.includes(row.name)) {
+                    return [...prevData, ...[row.name]]
+                }
+                return prevData
+            })
+        } else {
+            setSelectedRows((prevData) => {
+                if (prevData.includes(row.name)) {
+                    return prevData.filter((id) => id !== row.name)
+                }
+                return prevData
+            })
+        }
+    }
+
+    const handleAllRowSelect = (checked: boolean, rows: Row<Customer>[]) => {
+        console.log('rows', rows)
+        if (checked) {
+            const originalRows = rows.map((row) => row.original)
+            const selectedIds: string[] = []
+            originalRows.forEach((row) => {
+                selectedIds.push(row.name)
+            })
+            setSelectedRows(selectedIds)
+        } else {
+            setSelectedRows([])
+        }
+    }
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setLoading(true)
+            const response = await apiGetCustomersList<{list: Customer[], total: number}, {}>(tableData)
+            if (response.list) {
+                setData(response.list)
+                setLoading(false)
+                setTableData((prevData) => ({
+                    ...prevData,
+                    ...{ total: response.total },
+                }))
+            }
+        }
+        fetchData()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tableData.pageIndex, tableData.sort, tableData.pageSize])
+
+    return (
+        <>
+            {selectedRows.length > 0 && (
+                <div className="flex justify-end mb-4">
+                    <Button
+                        size="sm"
+                        variant="solid"
+                        onClick={handleBatchAction}
+                    >
+                        Batch Action
+                    </Button>
+                </div>
+            )}
+            <DataTable<Customer>
+                selectable
+                columns={columns}
+                data={data}
+                loading={loading}
+                pagingData={tableData}
+                onPaginationChange={handlePaginationChange}
+                onSelectChange={handleSelectChange}
+                onSort={handleSort}
+                onCheckBoxChange={handleRowSelect}
+                onIndeterminateCheckBoxChange={handleAllRowSelect}
+            />
+        </>
+    )
+}
+
+export default Checkable
+```

package/lib/@ecme/assets/markdown/shared/DataTableDoc/Query.md

@@ -0,0 +1,147 @@
+```jsx
+import { useState, useEffect, useRef, ChangeEvent } from 'react'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+import DataTable from '@/components/shared/DataTable'
+import debounce from 'lodash/debounce'
+import { apiGetCustomersList } from '@/services/CustomersService'
+import type {
+    ColumnDef,
+    OnSortParam,
+    CellContext,
+} from '@/components/shared/DataTable'
+
+type Customer = {
+    id: string
+    name: string
+    email: string
+}
+
+const Query = () => {
+    const [data, setData] = useState<Customer[]>([])
+    const [loading, setLoading] = useState(false)
+    const [tableData, setTableData] = useState<{
+        pageIndex: number
+        pageSize: number
+        sort: {
+            order: '' | 'asc' | 'desc'
+            key: string | number
+        }
+        query: string
+        total: number
+    }>({
+        total: 0,
+        pageIndex: 1,
+        pageSize: 10,
+        query: '',
+        sort: {
+            order: '',
+            key: '',
+        },
+    })
+
+    const inputRef = useRef(null)
+
+    const debounceFn = debounce(handleDebounceFn, 500)
+
+    function handleDebounceFn(val: string) {
+        if (typeof val === 'string' && (val.length > 1 || val.length === 0)) {
+            setTableData((prevData) => ({
+                ...prevData,
+                ...{ query: val, pageIndex: 1 },
+            }))
+        }
+    }
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        debounceFn(e.target.value)
+    }
+
+    const handleAction = (cellProps: CellContext<Customer, unknown>) => {
+        console.log('Action clicked', cellProps)
+    }
+
+    const columns: ColumnDef<Customer>[] = [
+        {
+            header: 'Name',
+            accessorKey: 'name',
+        },
+        {
+            header: 'Email',
+            accessorKey: 'email',
+        },
+        {
+            header: '',
+            id: 'action',
+            cell: (props) => (
+                <Button size="xs" onClick={() => handleAction(props)}>
+                    Action
+                </Button>
+            ),
+        },
+    ]
+
+    const handlePaginationChange = (pageIndex: number) => {
+        setTableData((prevData) => ({ ...prevData, ...{ pageIndex } }))
+    }
+
+    const handleSelectChange = (pageSize: number) => {
+        setTableData((prevData) => ({ ...prevData, ...{ pageSize } }))
+    }
+
+    const handleSort = ({ order, key }: OnSortParam) => {
+        console.log({ order, key })
+        setTableData((prevData) => ({
+            ...prevData,
+            ...{ sort: { order, key } },
+        }))
+    }
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setLoading(true)
+            const response = await apiGetCustomersList<{list: Customer[], total: number}, {}>(tableData)
+            if (response) {
+                setData(response.list)
+                setLoading(false)
+                setTableData((prevData) => ({
+                    ...prevData,
+                    ...{ total: response.total },
+                }))
+            }
+        }
+        fetchData()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        tableData.pageIndex,
+        tableData.sort,
+        tableData.pageSize,
+        tableData.query,
+    ])
+
+    return (
+        <>
+            <div className="flex justify-end mb-4">
+                <Input
+                    ref={inputRef}
+                    placeholder="Search..."
+                    size="sm"
+                    className="lg:w-52"
+                    onChange={handleChange}
+                />
+            </div>
+            <DataTable
+                columns={columns}
+                data={data}
+                loading={loading}
+                pagingData={tableData}
+                onPaginationChange={handlePaginationChange}
+                onSelectChange={handleSelectChange}
+                onSort={handleSort}
+            />
+        </>
+    )
+}
+
+export default Query
+```

package/lib/@ecme/assets/markdown/shared/DebounceInputDoc/Example.md

@@ -0,0 +1,19 @@
+```jsx
+import DebounceInput from '@/components/shared/DebouceInput';
+
+function Example() {
+    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+        window.alert(e.target.value);
+    };
+
+    return (
+        <DebounceInput
+            placeholder="Search..."
+            onChange={handleSearch}
+            wait={1000}
+        />
+    );
+}
+
+export default Example
+```

package/lib/@ecme/assets/markdown/shared/DoubleSidedImageDoc/Example.md

@@ -0,0 +1,15 @@
+```jsx
+import DoubleSidedImage from '@/components/shared/DoubleSidedImage'
+
+const Example = () => {
+    return (
+        <DoubleSidedImage
+            src="/img/logo/logo-light-full.png"
+            darkModeSrc="/img/logo/logo-dark-full.png"
+            alt="elstar"
+        />
+    )
+}
+
+export default Example
+```

package/lib/@ecme/assets/markdown/shared/EllipsisButtonDoc/Example.md

@@ -0,0 +1,24 @@
+```jsx
+import Dropdown from '@/components/ui/Dropdown'
+import EllipsisButton from '@/components/shared/EllipsisButton'
+
+const dropdownList = [
+    { label: 'Add Flag', value: 'addFlag' },
+    { label: 'Move', value: 'move' },
+    { label: 'Setting', value: 'projectSetting' },
+]
+
+const Example = () => {
+    return (
+        <Dropdown renderTitle={<EllipsisButton />}>
+            {dropdownList.map((item) => (
+                <Dropdown.Item eventKey={item.value} key={item.value}>
+                    <span>{item.label}</span>
+                </Dropdown.Item>
+            ))}
+        </Dropdown>
+    )
+}
+
+export default Example
+```

package/lib/@ecme/assets/markdown/shared/GanttChartDoc/Example.md

@@ -0,0 +1,179 @@
+```jsx
+import { useState } from 'react'
+import GanttChart, {
+    ViewMode,
+} from '@/components/shared/GanttChart'
+import getStartEndDateForProject from '@/components/shared/GanttChart/getStartEndDateForProject'
+import type { ExtendedTask } from '@/components/shared/GanttChart'
+
+const colorsMap = {
+    color1: '#fbbf24',
+    color2: '#fdba74',
+    color3: '#6ee7b7',
+    color4: '#7dd3fc',
+}
+
+const currentDate = new Date()
+
+const data: ExtendedTask[] = [
+    {
+        start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
+        end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
+        name: 'Some Project',
+        id: 'ProjectSample',
+        progress: 25,
+        type: 'project',
+        hideChildren: false,
+        displayOrder: 1,
+    },
+    {
+        start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
+        end: new Date(
+            currentDate.getFullYear(),
+            currentDate.getMonth(),
+            2,
+            12,
+            28,
+        ),
+        name: 'Idea',
+        id: 'Task 0',
+        progress: 45,
+        type: 'task',
+        project: 'ProjectSample',
+        displayOrder: 2,
+        barVariant: 'color2',
+    },
+    {
+        start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
+        end: new Date(
+            currentDate.getFullYear(),
+            currentDate.getMonth(),
+            4,
+            0,
+            0,
+        ),
+        name: 'Research',
+        id: 'Task 1',
+        progress: 25,
+        dependencies: ['Task 0'],
+        type: 'task',
+        project: 'ProjectSample',
+        displayOrder: 3,
+    },
+    {
+        start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
+        end: new Date(
+            currentDate.getFullYear(),
+            currentDate.getMonth(),
+            8,
+            0,
+            0,
+        ),
+        name: 'Discussion with team',
+        id: 'Task 2',
+        progress: 10,
+        dependencies: ['Task 1'],
+        type: 'task',
+        project: 'ProjectSample',
+        displayOrder: 4,
+        barVariant: 'color2',
+    },
+    {
+        start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
+        end: new Date(
+            currentDate.getFullYear(),
+            currentDate.getMonth(),
+            9,
+            0,
+            0,
+        ),
+        name: 'Developing',
+        id: 'Task 3',
+        progress: 27,
+        dependencies: ['Task 2'],
+        type: 'task',
+        project: 'ProjectSample',
+        displayOrder: 5,
+    },
+    {
+        start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
+        end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
+        name: 'Review',
+        id: 'Task 4',
+        type: 'task',
+        progress: 70,
+        dependencies: ['Task 2'],
+        project: 'ProjectSample',
+        displayOrder: 6,
+        barVariant: 'color3',
+    },
+    {
+        start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
+        end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
+        name: 'Release',
+        id: 'Task 6',
+        progress: currentDate.getMonth(),
+        type: 'milestone',
+        dependencies: ['Task 4'],
+        project: 'ProjectSample',
+        displayOrder: 7,
+        barVariant: 'color4',
+    },
+    {
+        start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 18),
+        end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 19),
+        name: 'Party Time',
+        id: 'Task 9',
+        progress: 0,
+        isDisabled: true,
+        type: 'task',
+    },
+]
+
+const Example = () => {
+    const [tasks, setTasks] = useState<ExtendedTask[]>(data)
+
+    const handleTaskChange = (task: ExtendedTask) => {
+        let newTasks = tasks.map((t) => (t.id === task.id ? task : t))
+        if (task.project) {
+            const [start, end] = getStartEndDateForProject(
+                newTasks,
+                task.project,
+            )
+            const project =
+                newTasks[newTasks.findIndex((t) => t.id === task.project)]
+            if (
+                project.start.getTime() !== start.getTime() ||
+                project.end.getTime() !== end.getTime()
+            ) {
+                const changedProject = { ...project, start, end }
+                newTasks = newTasks.map((t) =>
+                    t.id === task.project ? changedProject : t,
+                )
+            }
+        }
+        setTasks(newTasks)
+    }
+
+    const handleProgressChange = async (task: ExtendedTask) => {
+        setTasks(tasks.map((t) => (t.id === task.id ? task : t)))
+    }
+
+    const handleExpanderClick = (task: ExtendedTask) => {
+        setTasks(tasks.map((t) => (t.id === task.id ? task : t)))
+    }
+
+    return (
+        <GanttChart
+            tasks={tasks}
+            viewMode={ViewMode.Day}
+            onDateChange={handleTaskChange}
+            onProgressChange={handleProgressChange}
+            onExpanderClick={handleExpanderClick}
+            colorsMap={colorsMap}
+        />
+    )
+}
+
+export default Example
+```

package/lib/@ecme/assets/markdown/shared/GrowShrinkValueDoc/Basic.md

@@ -0,0 +1,14 @@
+```jsx
+import GrowShrinkValue from '@/components/shared/GrowShrinkValue'
+
+const Basic = () => {
+    return (
+        <div className="flex gap-4">
+            <GrowShrinkValue value={21.12} suffix="%" />
+            <GrowShrinkValue value={-0.48} prefix="$" />
+        </div>
+    )
+}
+
+export default Basic
+```

package/lib/@ecme/assets/markdown/shared/GrowShrinkValueDoc/CustomClass.md

@@ -0,0 +1,14 @@
+```jsx
+import GrowShrinkValue from '@/components/shared/GrowShrinkValue'
+
+const CustomClass = () => {
+    return (
+        <div className="flex gap-4">
+            <GrowShrinkValue value={1.68} positiveClass="text-indigo-500" />
+            <GrowShrinkValue value={-1.68} negativeClass="text-sky-500" />
+        </div>
+    )
+}
+
+export default CustomClass
+```

package/lib/@ecme/assets/markdown/shared/GrowShrinkValueDoc/Icon.md

@@ -0,0 +1,24 @@
+```jsx
+import GrowShrinkValue from '@/components/shared/GrowShrinkValue'
+
+const Icon = () => {
+    return (
+        <div className="flex gap-4">
+            <GrowShrinkValue
+                value={21.12}
+                suffix="%"
+                positiveIcon="+"
+                negativeIcon=""
+            />
+            <GrowShrinkValue
+                value={-21.12}
+                suffix="%"
+                positiveIcon="+"
+                negativeIcon=""
+            />
+        </div>
+    )
+}
+
+export default Icon
+```

package/lib/@ecme/assets/markdown/shared/IconTextDoc/Example.md

@@ -0,0 +1,17 @@
+```jsx
+import IconText from '@/components/shared/IconText'
+import { HiClock } from 'react-icons/hi'
+
+const Example = () => {
+    return (
+        <IconText
+            className="text-emerald-500 text-sm font-semibold"
+            icon={<HiClock className="text-lg" />}
+        >
+            In Progress
+        </IconText>
+    )
+}
+
+export default Example
+```

package/lib/@ecme/assets/markdown/shared/ImageGalleryDoc/Example.md

@@ -0,0 +1,44 @@
+```jsx
+import ImageGallery from '@/components/shared/ImageGallery'
+import { useState } from 'react'
+
+const slides = [
+    { src: '/img/others/gallery/img-25.webp', title: 'Image 1' },
+    { src: '/img/others/gallery/img-26.webp', title: 'Image 2' },
+    { src: '/img/others/gallery/img-27.webp', title: 'Image 3' },
+]
+
+const Example = () => {
+    const [currentIndex, setCurrentIndex] = useState(-1)
+
+    return (
+        <ImageGallery
+            index={currentIndex}
+            slides={
+                slides?.map((img) => {
+                    return {
+                        src: img.src,
+                    }
+                }) || []
+            }
+            onClose={() => setCurrentIndex(-1)}
+        >
+            <div className="grid grid-cols-3 gap-2">
+                {slides?.map((img, index) => (
+                    <div
+                        key={img.title}
+                        data-src={img.src}
+                        className="cursor-pointer"
+                        onClick={() => setCurrentIndex(index)}
+                        role="button"
+                    >
+                        <img className="rounded-xl" src={img.src} />
+                    </div>
+                ))}
+            </div>
+        </ImageGallery>
+    )
+}
+
+export default Example
+```

package/lib/@ecme/assets/markdown/shared/LoadingDoc/Basic.md

@@ -0,0 +1,26 @@
+```jsx
+import { useState } from 'react'
+import Switcher from '@/components/ui/Switcher'
+import Loading from '@/components/shared/Loading'
+
+const Basic = () => {
+    const [isLoading, setIsLoading] = useState(true)
+
+    return (
+        <>
+            <div className="flex items-center mb-4 gap-2">
+                <span>Loading State: </span>
+                <Switcher
+                    checked={isLoading}
+                    onChange={(checked) => setIsLoading(checked)}
+                />
+            </div>
+            <Loading loading={isLoading}>
+                <div className="text-center">Finish loading</div>
+            </Loading>
+        </>
+    )
+}
+
+export default Basic
+```