zelda
/
bid-tool
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'update view admin' (#35) from zelda.by-pass-langtons-prev-code into main 

Reviewed-on: #35
This commit is contained in:
zelda 2025-05-12 18:16:20 +10:00
parent c33aab0d5e 7cc30dc142
commit 7f4f7569e5
6 changed files with 427 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
auto-bid-admin/src/components/bid/delete-row-action.tsx Normal file
View File

@ -0,0 +1,22 @@
import { ActionIcon } from "@mantine/core";
import { IconTrash } from "@tabler/icons-react";
import { useChoosesStore } from "../../lib/zustand/use-chooses-store";
import { IBid } from "../../system/type";
export interface IDeleteRowActionProps {
onClick?: () => void;
data: IBid
}
export default function DeleteRowAction({ data,onClick }: IDeleteRowActionProps) {
const {chooses} = useChoosesStore()
return (
<ActionIcon disabled={!chooses.some(item => item.id === data.id)} onClick={onClick} size={"sm"} color="red">
<IconTrash size={14} />
</ActionIcon>
);
}

45
auto-bid-admin/src/components/dashboard/working-page.tsx
View File

@ -6,8 +6,16 @@ import { Socket } from "socket.io-client";
import { getImagesWorking } from "../../apis/bid";
import { useStatusToolStore } from "../../lib/zustand/use-status-tool-store";
import { IBid, IWebBid } from "../../system/type";
import { cn, extractDomainSmart, findNearestClosingChild, isTimeReached, stringToColor, subtractSeconds } from "../../utils";
import {
cn,
extractDomainSmart,
findNearestClosingChild,
isTimeReached,
stringToColor,
subtractSeconds,
} from "../../utils";
import ShowImageModal from "./show-image-modal";
import { IconExternalLink, IconImageInPicture } from "@tabler/icons-react";
export interface IWorkingPageProps {
data: (IBid | IWebBid) & { type: string };
socket: Socket;
@ -110,9 +118,8 @@ export default function WorkingPage({ data, socket }: IWorkingPageProps) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if(!isIBid(data)){
console.log(data)
if (!isIBid(data)) {
console.log(data);
}
return (
@ -144,20 +151,24 @@ export default function WorkingPage({ data, socket }: IWorkingPageProps) {
<Text className="text-xs tracking-wide">{`Current price: $${data.current_price}`}</Text>
)}
<Text className="text-sm italic opacity-80">
{moment(lastUpdate).format("HH:mm:ss DD/MM/YYYY")}
</Text>
{!isIBid(data) && <Tooltip label={'Time to tracking'}><Text>{`TT: ${moment(subtractSeconds(findNearestClosingChild(data)?.close_time || '', data.early_tracking_seconds)).format(
"HH:mm:ss DD/MM/YYYY"
)}`}</Text></Tooltip>}
{!isIBid(data) && (
<Tooltip label={"Time to tracking"}>
<Text>{`TT: ${moment(
subtractSeconds(
findNearestClosingChild(data)?.close_time || "",
data.early_tracking_seconds
)
).format("HH:mm:ss DD/MM/YYYY")}`}</Text>
</Tooltip>
)}
<Box className="flex items-center gap-3">
{isIBid(data) && (
<Tooltip label={'Close time'}>
<Tooltip label={"Close time"}>
<Text
style={{ fontSize: "12px" }}
className="tracking-wide"
@ -174,7 +185,7 @@ export default function WorkingPage({ data, socket }: IWorkingPageProps) {
data.web_bid?.early_tracking_seconds || 0
)
) && (
<Tooltip label={'Time to tracking'}>
<Tooltip label={"Time to tracking"}>
<Text
style={{ fontSize: "12px" }}
className="tracking-wide"
@ -189,6 +200,7 @@ export default function WorkingPage({ data, socket }: IWorkingPageProps) {
</Box>
<Box className="flex items-center gap-4">
<Button
rightSection={<IconImageInPicture size={14}/>}
size="xs"
color="green"
onClick={open}
@ -197,6 +209,7 @@ export default function WorkingPage({ data, socket }: IWorkingPageProps) {
Show
</Button>
<Button
rightSection={<IconExternalLink size={14} />}
target="_blank"
component="a"
size="xs"
@ -218,11 +231,15 @@ export default function WorkingPage({ data, socket }: IWorkingPageProps) {
<Badge
color={stringToColor(
isIBid(data) ? extractDomainSmart(data.web_bid.origin_url) : extractDomainSmart(data.origin_url)
isIBid(data)
? extractDomainSmart(data.web_bid.origin_url)
: extractDomainSmart(data.origin_url)
)}
size="xs"
>
{isIBid(data) ? extractDomainSmart(data.web_bid.origin_url) : extractDomainSmart(data.origin_url)}
{isIBid(data)
? extractDomainSmart(data.web_bid.origin_url)
: extractDomainSmart(data.origin_url)}
</Badge>
</Box>
</Box>

98
auto-bid-admin/src/lib/table/action.tsx
View File

@ -1,11 +1,28 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { Box, Button, ComboboxItem, Dialog, Select, SelectProps, Text, TextInput, TextInputProps } from '@mantine/core';
import { useForm } from '@mantine/form';
import { useDisclosure } from '@mantine/hooks';
import { IconSearch, IconX } from '@tabler/icons-react';
import { ReactNode, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
import { IActionData, ITableFilter, TRefTableActionFn } from './type';
import { searchKey } from './ultils';
import {
Box,
Button,
ComboboxItem,
Dialog,
Select,
SelectProps,
Text,
TextInput,
TextInputProps,
} from "@mantine/core";
import { useForm } from "@mantine/form";
import { useDisclosure } from "@mantine/hooks";
import { IconSearch, IconX } from "@tabler/icons-react";
import {
ReactNode,
useCallback,
useEffect,
useImperativeHandle,
useMemo,
useState,
} from "react";
import { IActionData, ITableFilter, TRefTableActionFn } from "./type";
import { searchKey } from "./ultils";
export interface ITableActionsProps<R extends Record<string, string | number>> {
actions?: IActionData[];
@ -20,12 +37,15 @@ export interface ITableActionsProps<R extends Record<string, string | number>> {
};
refAction?: TRefTableActionFn;
selectProps?: SelectProps;
leftActionSession?: ReactNode;
onSearch?: (data: ITableFilter<R>[]) => void;
renderComfirm?: (data: IActionData) => ReactNode;
onCloseComfirm?: () => void;
}
export default function TableActions<R extends Record<string, string | number>>({
export default function TableActions<
R extends Record<string, string | number>
>({
showSearch = true,
showAction = true,
loading,
@ -37,6 +57,7 @@ export default function TableActions<R extends Record<string, string | number>>(
refAction,
onSearch,
renderComfirm,
leftActionSession,
onCloseComfirm,
}: ITableActionsProps<R>) {
const [opened, { toggle, close }] = useDisclosure(false);
@ -49,12 +70,15 @@ export default function TableActions<R extends Record<string, string | number>>(
const form = useForm<{ [searchKey]: string }>({
initialValues: {
[searchKey]: '',
[searchKey]: "",
},
});
const handleSubmit = (data: { [searchKey]: string }) => {
const filter = { type: data[searchKey].trim(), key: searchKey } as ITableFilter<R>;
const filter = {
type: data[searchKey].trim(),
key: searchKey,
} as ITableFilter<R>;
if (onSearch) {
onSearch(data[searchKey]?.length ? [filter] : []);
@ -91,7 +115,7 @@ export default function TableActions<R extends Record<string, string | number>>(
const handleCallBack = useCallback(
async (callback: (chooses: R[]) => void) => {
if (callback.constructor.name === 'AsyncFunction') {
if (callback.constructor.name === "AsyncFunction") {
try {
setIsLoading(true);
await callback((chooses || []) as R[]);
@ -105,12 +129,16 @@ export default function TableActions<R extends Record<string, string | number>>(
handleClose();
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[chooses],
[chooses]
);
const actionDataMemo = useMemo(() => {
const newActions = actions?.reduce((prev, cur) => {
prev.push({ value: String(cur.key), label: cur.title, disabled: cur?.disabled ? cur.disabled(chooses || []) : false });
prev.push({
value: String(cur.key),
label: cur.title,
disabled: cur?.disabled ? cur.disabled(chooses || []) : false,
});
return prev;
}, [] as { value: string; label: string; disabled: boolean }[]);
@ -138,20 +166,38 @@ export default function TableActions<R extends Record<string, string | number>>(
return renderComfirm ? (
renderComfirm(action)
) : (
<Dialog opened={opened} withCloseButton onClose={handleClose} size="lg" radius="md">
<Dialog
opened={opened}
withCloseButton
onClose={handleClose}
size="lg"
radius="md"
>
<Text size="sm" mb="xs" fw={500}>
{action?.comfirmOption && action?.comfirmOption(action)?.title ? action.comfirmOption(action).title : 'Are you sure to execute this action'}
{action?.comfirmOption && action?.comfirmOption(action)?.title
? action.comfirmOption(action).title
: "Are you sure to execute this action"}
</Text>
<div className="flex items-center justify-end w-full gap-3">
<Button size="xs" disabled={isLoading} onClick={() => handleCallBack(action.callback)}>
<Button
size="xs"
disabled={isLoading}
onClick={() => handleCallBack(action.callback)}
>
Ok
</Button>
<Button size="xs" disabled={isLoading} color="red" onClick={handleClose}>
<Button
size="xs"
disabled={isLoading}
color="red"
onClick={handleClose}
>
Close
</Button>
</div>
</Dialog>
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [action, opened, close, renderComfirm]);
useEffect(() => {
@ -180,7 +226,7 @@ export default function TableActions<R extends Record<string, string | number>>(
clearAction: handleClearAction,
};
},
[],
[]
);
return (
@ -192,18 +238,27 @@ export default function TableActions<R extends Record<string, string | number>>(
<TextInput
{...form.getInputProps(searchKey)}
className="min-w-[260px]"
leftSection={<IconSearch size={'14px'} />}
leftSection={<IconSearch size={"14px"} />}
rightSection={
form.getValues()[searchKey].length ? <IconX onClick={handleClear} className="cursor-pointer hover:text-red-400 select-none" size={'14px'} /> : undefined
form.getValues()[searchKey].length ? (
<IconX
onClick={handleClear}
className="cursor-pointer hover:text-red-400 select-none"
size={"14px"}
/>
) : undefined
}
placeholder="Search by keyword"
size="xs"
label={'Search'}
label={"Search"}
{...searchOptions?.props}
/>
</form>
)}
{showAction && (
<Box className="flex items-end gap-4">
{leftActionSession}
<Select
size="xs"
value={selectValue}
@ -214,6 +269,7 @@ export default function TableActions<R extends Record<string, string | number>>(
data={actionDataMemo}
{...selectProps}
/>
</Box>
)}
{comfirmViewMemo}

18
auto-bid-admin/src/lib/zustand/use-chooses-store.ts Normal file
View File

@ -0,0 +1,18 @@
// stores/useChooseStore.ts
import { create } from "zustand";
import { IBid } from "../../system/type";
interface ChoosesStore {
chooses: IBid[];
setChooses: (items: IBid[]) => void;
addChoose: (item: IBid) => void;
}
export const useChoosesStore = create<ChoosesStore>((set) => ({
chooses: [],
setChooses: (items) => set({ chooses: items }),
addChoose: (item) =>
set((state) => ({
chooses: [...state.chooses, item],
})),
}));

59
auto-bid-admin/src/pages/bids.tsx
View File

@ -1,4 +1,13 @@
import { ActionIcon, Anchor, Badge, Box, Menu, Text, Tooltip } from "@mantine/core";
import {
ActionIcon,
Anchor,
Badge,
Box,
Button,
Menu,
Text,
Tooltip,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import {
IconAd,
@ -7,7 +16,7 @@ import {
IconHammer,
IconHistory,
IconMenu,
IconTrash
IconPlus
} from "@tabler/icons-react";
import _ from "lodash";
import { useMemo, useRef, useState } from "react";
@ -18,9 +27,11 @@ import {
ShowHistoriesBidPicklesApiModal,
ShowHistoriesModal,
} from "../components/bid";
import DeleteRowAction from "../components/bid/delete-row-action";
import constants, { haveHistories } from "../constant";
import Table from "../lib/table/table";
import { IColumn, TRefTableFn } from "../lib/table/type";
import { useChoosesStore } from "../lib/zustand/use-chooses-store";
import { useConfirmStore } from "../lib/zustand/use-confirm";
import { mappingStatusColors } from "../system/constants";
import { IBid } from "../system/type";
@ -31,6 +42,8 @@ export default function Bids() {
const [clickData, setClickData] = useState<IBid | null>(null);
const {setChooses} = useChoosesStore()
const { setConfirm } = useConfirmStore();
const [openedHistories, historiesModel] = useDisclosure(false);
@ -52,9 +65,16 @@ export default function Bids() {
title: "Name",
typeFilter: "text",
renderRow(row) {
return <Anchor className="text-[14px]" href={row.url} size="sm" style={{color: 'inherit'}}>{row.name}</Anchor>
return (
<Anchor
className="text-[14px]"
href={row.url}
size="sm"
style={{ color: "inherit" }}
>
{row.name}
</Anchor>
);
},
},
{
@ -157,7 +177,7 @@ export default function Bids() {
const handleDelete = (bid: IBid) => {
setConfirm({
title: "Delete ?",
message: "This bid will be delete",
message: `This bid will be delete: ${bid.name || bid.model}`,
handleOk: async () => {
await deleteBid(bid);
@ -192,7 +212,7 @@ export default function Bids() {
const table = useMemo(() => {
return (
<Table
onChooses={setChooses}
tableChildProps={{
trbody: {
className: "cursor-pointer",
@ -200,13 +220,13 @@ export default function Bids() {
}}
actionsOptions={{
actions: [
{
key: "add",
title: "Add",
callback: () => {
bidModal.open();
},
},
// {
// key: "add",
// title: "Add",
// callback: () => {
// bidModal.open();
// },
// },
{
key: "delete",
title: "Delete",
@ -228,6 +248,9 @@ export default function Bids() {
disabled: (data) => data.length <= 0,
},
],
leftActionSession: (
<Button onClick={bidModal.open} size="xs" rightSection={<IconPlus size={14}/>}>Add</Button>
)
}}
refTableFn={refTableFn}
striped
@ -257,6 +280,7 @@ export default function Bids() {
title: <Box className="w-full text-center">Action</Box>,
body: (row) => {
return (
<Box className="flex items-center gap-2">
<Menu shadow="md" width={200}>
<Menu.Target>
<Box
@ -327,14 +351,17 @@ export default function Bids() {
{row.status === "biding" ? "Disable" : "Enable"}
</Menu.Item>
<Menu.Item
{/* <Menu.Item
onClick={() => handleDelete(row)}
leftSection={<IconTrash color="red" size={14} />}
>
Delete
</Menu.Item>
</Menu.Item> */}
</Menu.Dropdown>
</Menu>
<DeleteRowAction data={row} onClick={() => handleDelete(row)} />
</Box>
);
},
}}

6
auto-bid-tool/index.js
View File

@ -419,12 +419,6 @@ const trackingLoginStatus = async () => {
login_status,
});
console.log(
"%cindex.js:422 ehehehehehe",
"color: #007acc;",
"ehehehehehe"
);
// Set time to update login sau 1 phút
const now = new Date();
const oneMinuteLater = new Date(now.getTime() + 60 * 1000);