aq-fe-framework 0.1.155 → 0.1.156

package/dist/components/DataDisplay/StatCard/AQStatCard1.tsx

@@ -0,0 +1,68 @@
+import { Box, Button, Flex, Group, Paper, Text } from "@mantine/core";
+import { IconArrowDownRight, IconArrowUpRight } from "@tabler/icons-react";
+import { ReactNode } from "react";
+
+export function AQStatCard1(
+    { title, value, unit = "", description, icons, diff }: { title: string, value: string, unit?: string, description: string, icons: ReactNode, diff: number }
+) {
+    return (
+        <>
+            <Paper withBorder
+                p="md"
+                radius="md"
+                key={title}>
+                <Group justify="space-between">
+                    <Flex direction={"column"}>
+                        <Text
+                            tt="uppercase"
+                            size="lg"
+                            c="dimmed"
+                        >
+                            {title}
+                        </Text>
+                        {unit == "" ?
+                            <Text size="xs" style={{ visibility: 'hidden' }}>Đơn vị: <strong>{unit}</strong></Text>
+                            :
+                            <Text size="xs">Đơn vị: <strong>{unit}</strong></Text>
+                        }
+                    </Flex>
+                    <Box>
+                        {icons}
+                    </Box>
+                </Group>
+
+                <Group
+                    mt={"5"}
+                    align="flex-end"
+                    gap={"xs"}
+                >
+                    <Text
+                        fw={700}
+                        fz="h1"
+                    >{value}
+                    </Text>
+                    <Text
+                        mb={"2"}
+                        c={diff > 0 ? 'teal' : 'red'}
+                        fz="h2"
+                        fw={500}
+                    >
+                        <span>{diff}%</span>{diff > 0 ? <IconArrowUpRight /> : <IconArrowDownRight />}
+                    </Text>
+                </Group>
+
+                <Group justify="space-between">
+                    <Text tt="uppercase" fz="xs" c="dimmed">
+                        {description}
+                    </Text>
+                    <Button
+                        variant="light"
+                        size="xs"
+                    >
+                        Xem chi tiết
+                    </Button>
+                </Group>
+            </Paper>
+        </>
+    );
+}

package/dist/components/FaviconSetter/FaviconSetter.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useS_BasicAppShell } from '../Layouts/BasicAppShell/useS_BasicAppShell';
+
+export function FaviconSetter() {
+    const store = useS_BasicAppShell()
+    useEffect(() => {
+        if (!store.state.faviconFileDetail?.fileBase64String) return
+        try {
+            // Get base64 icon from localStorage
+            const base64Icon = `data:image/${store.state.faviconFileDetail.fileExtension?.replaceAll(".", "")};base64,${store.state.faviconFileDetail?.fileBase64String}`
+
+            if (base64Icon) {
+                // Find existing favicon or create a new link element
+                let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
+                if (!link) {
+                    link = document.createElement('link');
+                    link.rel = 'icon';
+                    document.head.appendChild(link);
+                }
+
+                // Set the href to the base64 data
+                link.href = base64Icon;
+            }
+        } catch (error) {
+            console.error('Error setting favicon from localStorage:', error);
+        }
+    }, [store.state.faviconFileDetail?.fileBase64String]);
+
+    // This component doesn't render anything visible
+    return null;
+}

package/dist/components/Inputs/DateInput/MyDateInput.tsx

@@ -0,0 +1,11 @@
+import { DateInput, DateInputProps } from '@mantine/dates';
+
+interface IDateInput extends DateInputProps {
+    label?: string
+}
+
+export function MyDateInput({ label, ...rest }: IDateInput) {
+    return (
+        <DateInput label={label} placeholder={label ? `Chọn ${label?.toLowerCase()}` : ""}  {...rest} />
+    )
+}

package/dist/components/Inputs/Fieldset/MyFieldset.tsx

@@ -0,0 +1,32 @@
+import { Box, Fieldset, FieldsetProps, Text } from '@mantine/core'
+import { ReactNode } from 'react'
+
+interface MyFieldsetProps extends FieldsetProps {
+    chilren?: ReactNode,
+    title?: string
+}
+
+export function MyFieldset({
+    children,
+    title,
+    ...rest
+}: MyFieldsetProps) {
+    return (
+        <Fieldset
+            {...rest}
+            legend={(
+                <Box
+                    bg="blue.4"
+                    px="xs"
+                    py={2}
+                    style={{ borderRadius: 4 }}
+                >
+                    <Text c="white" fw={500}>
+                        {title}
+                    </Text>
+                </Box>
+            )}>
+            {children}
+        </Fieldset>
+    )
+}

package/dist/components/Inputs/FileInput/MyFileInput.tsx

@@ -0,0 +1,12 @@
+import { FileInput, FileInputProps } from '@mantine/core'
+
+interface IFileInput extends FileInputProps {
+    label?: string
+}
+
+
+export function MyFileInput({ label, ...rest }: IFileInput) {
+    return (
+        <FileInput label={label} placeholder={label ? `Chọn ${label?.toLowerCase()}` : ""}{...rest} />
+    )
+}

package/dist/components/Inputs/NumberInput/MyNumberInput.tsx

@@ -0,0 +1,12 @@
+import { NumberInput, NumberInputProps } from '@mantine/core'
+
+interface INumberInput extends NumberInputProps {
+    label?: string
+}
+
+
+export function MyNumberInput({ label, ...rest }: INumberInput) {
+    return (
+        <NumberInput label={label} placeholder={label ? `Nhập ${label?.toLowerCase()}` : ""}{...rest} />
+    )
+}

package/dist/components/Inputs/TextArea/MyTextArea.tsx

@@ -0,0 +1,11 @@
+import { Textarea, TextareaProps } from '@mantine/core';
+
+interface IMyTextArea extends TextareaProps {
+    label?: string
+}
+
+export function MyTextArea({ label, ...rest }: IMyTextArea) {
+    return (
+        <Textarea label={label} placeholder={label ? `Nhập ${label?.toLowerCase()}` : ""}{...rest} />
+    )
+}

package/dist/components/Inputs/TextEditor/MyTextEditor.tsx

@@ -0,0 +1,191 @@
+'use client'
+import { Input, MantineSize, ScrollArea } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import FileHandler from '@tiptap-pro/extension-file-handler';
+import Highlight from '@tiptap/extension-highlight';
+import Image from '@tiptap/extension-image';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { EditorOptions, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { useEffect, useState } from 'react';
+export interface IMyTextEditor extends Partial<EditorOptions> {
+    label?: string,
+    error?: string,
+    value?: string,
+    onChange?: any,
+    contentHeight?: MantineSize | string,
+    autoHiddenToolBar?: boolean
+    withAsterisk?: boolean
+}
+
+
+export function MyTextEditor({
+    autoHiddenToolBar = false,
+    contentHeight = "400px",
+    onChange,
+    value,
+    error,
+    label,
+    withAsterisk,
+    ...rest
+}:
+    IMyTextEditor) {
+    const [hiddenToolBar, setHiddenToolBar] = useState(autoHiddenToolBar)
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Underline,
+            Link,
+            Superscript,
+            SubScript,
+            Highlight,
+            Image.extend({
+                addAttributes() {
+                    return {
+                        src: {
+                            default: null,
+                        },
+                        alt: {
+                            default: null,
+                        },
+                    };
+                },
+                parseHTML() {
+                    return [
+                        {
+                            tag: 'img[src]',
+                        },
+                    ];
+                },
+                renderHTML({ HTMLAttributes }) {
+                    return ['img', HTMLAttributes];
+                },
+            }),
+            TextAlign.configure({ types: ['heading', 'paragraph'] }),
+            FileHandler.configure({
+                allowedMimeTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
+                onDrop: (currentEditor, files, pos) => {
+                    files.forEach(file => {
+                        const fileReader = new FileReader()
+
+                        fileReader.readAsDataURL(file)
+                        fileReader.onload = () => {
+                            currentEditor.chain().insertContentAt(pos, {
+                                type: 'image',
+                                attrs: {
+                                    src: fileReader.result,
+                                },
+                            }).focus().run()
+                        }
+                    })
+                },
+                onPaste: (currentEditor, files, htmlContent) => {
+                    files.forEach(file => {
+                        if (htmlContent) {
+                            console.log(htmlContent)
+                            return false
+                        }
+                        const fileReader = new FileReader()
+                        fileReader.readAsDataURL(file)
+                        fileReader.onload = () => {
+                            currentEditor.chain().insertContentAt(currentEditor.state.selection.anchor, {
+                                type: 'image',
+                                attrs: {
+                                    src: fileReader.result,
+                                },
+                            }).focus().run()
+                        }
+                    })
+                },
+            }),
+        ],
+        content: value,
+        onUpdate: ({ editor }) => {
+            const content = editor.getHTML();
+            if (content === '<p></p>') {
+                onChange('');
+            } else {
+                onChange(content);
+            }
+        },
+        ...rest,
+
+    });
+    useEffect(() => {
+        if (editor && value !== editor.getHTML()) {
+            editor.commands.setContent(value!);
+        }
+    }, [value, editor]);
+    return (
+
+        <Input.Wrapper label={label} flex={1} error={error} withAsterisk={withAsterisk}>
+            <RichTextEditor editor={editor} style={{ border: error && '1px solid #e03131', }}>
+                <RichTextEditor.Toolbar hidden={hiddenToolBar} sticky stickyOffset={60}>
+                    <RichTextEditor.ControlsGroup>
+                        <RichTextEditor.Bold />
+                        <RichTextEditor.Italic />
+                        <RichTextEditor.Underline />
+                        <RichTextEditor.Strikethrough />
+                        <RichTextEditor.ClearFormatting />
+                        <RichTextEditor.Highlight />
+                        <RichTextEditor.Code />
+                    </RichTextEditor.ControlsGroup>
+
+                    <RichTextEditor.ControlsGroup>
+                        <RichTextEditor.H1 />
+                        <RichTextEditor.H2 />
+                        <RichTextEditor.H3 />
+                        <RichTextEditor.H4 />
+                    </RichTextEditor.ControlsGroup>
+
+                    <RichTextEditor.ControlsGroup>
+                        <RichTextEditor.Blockquote />
+                        <RichTextEditor.Hr />
+                        <RichTextEditor.BulletList />
+                        <RichTextEditor.OrderedList />
+                        <RichTextEditor.Subscript />
+                        <RichTextEditor.Superscript />
+                    </RichTextEditor.ControlsGroup>
+
+                    <RichTextEditor.ControlsGroup>
+                        <RichTextEditor.Link />
+                        <RichTextEditor.Unlink />
+                    </RichTextEditor.ControlsGroup>
+
+                    <RichTextEditor.ControlsGroup>
+                        <RichTextEditor.AlignLeft />
+                        <RichTextEditor.AlignCenter />
+                        <RichTextEditor.AlignJustify />
+                        <RichTextEditor.AlignRight />
+                    </RichTextEditor.ControlsGroup>
+
+                    {/* <RichTextEditor.ControlsGroup>
+                        <RichTextEditor.Undo />
+                        <RichTextEditor.Redo />
+                    </RichTextEditor.ControlsGroup> */}
+                </RichTextEditor.Toolbar>
+
+                <ScrollArea.Autosize
+                    onMouseDown={() => {
+                        editor?.commands.focus();
+                    }}
+                    onBlur={() => {
+                        if (autoHiddenToolBar == false) return
+                        setHiddenToolBar(true);
+                    }}
+                    onFocus={() => {
+                        if (autoHiddenToolBar == false) return
+                        setHiddenToolBar(false);
+                    }}
+                    style={{ cursor: "text", maxHeight: "400px" }}
+                >
+                    <RichTextEditor.Content mih={contentHeight} />
+                </ScrollArea.Autosize>
+
+            </RichTextEditor>
+        </Input.Wrapper>
+    );
+}

package/dist/components/Inputs/TextInput/MyTextInput.tsx

@@ -0,0 +1,30 @@
+import { TextInput, TextInputProps } from '@mantine/core';
+
+interface IMyTextInput extends TextInputProps {
+    label?: string; defaultValue?: string,
+    isPhoneNumber?: boolean
+}
+
+export function MyTextInput({ label, defaultValue, isPhoneNumber, ...rest }: IMyTextInput) {
+    return (
+        <TextInput
+            onKeyDown={(e) => {
+                if (!isPhoneNumber) return
+                const allowedKeys = [
+                    "Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete",
+                    "+", "-", "(", ")", " ", // các ký tự đặc biệt cho số điện thoại
+                ]
+                if (
+                    !/[0-9]/.test(e.key) &&
+                    !allowedKeys.includes(e.key)
+                ) {
+                    e.preventDefault()
+                }
+            }}
+            label={label}
+            defaultValue={defaultValue}
+            placeholder={label ? `Nhập ${label?.toLowerCase()}` : ""}
+            {...rest}
+        />
+    )
+}