diff --git a/dashboard/src/components/copy-button/index.tsx b/dashboard/src/components/copy-button/index.tsx
@@ -1,8 +1,8 @@
import {
- Button,
- Tooltip,
- TooltipContent,
- TooltipTrigger,
+ Button,
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
} from "@marzneshin/components";
import CopyToClipboard from "react-copy-to-clipboard";
import { useEffect, useState } from "react";
@@ -12,78 +12,70 @@ import { toast } from "sonner";
import { cn } from "@marzneshin/utils";
interface CopyToClipboardButtonProps {
- text: string;
- disabled?: boolean;
- successMessage: string;
- copyIcon?: LucideIcon;
- copyLabel?: string;
- errorLabel?: string;
- className?: string;
- tooltipMsg?: string;
+ text: string;
+ disabled?: boolean;
+ successMessage: string;
+ copyIcon?: LucideIcon;
+ copyLabel?: string;
+ errorLabel?: string;
+ className?: string;
+ tooltipMsg?: string;
}
export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
- text,
- disabled = false,
- successMessage,
- copyIcon,
- copyLabel,
- errorLabel,
- className,
- tooltipMsg,
+ text,
+ disabled = false,
+ successMessage,
+ copyIcon,
+ copyLabel,
+ errorLabel,
+ className,
+ tooltipMsg,
}) => {
- const { t } = useTranslation();
- const [copied, setCopied] = useState(false);
- const [healthy, setHealthy] = useState(false);
+ const { t } = useTranslation();
+ const [copied, setCopied] = useState(false);
+ const [healthy, setHealthy] = useState(false);
- useEffect(() => {
- if (copied) {
- toast.success(t(successMessage));
- setTimeout(() => {
- setCopied(false);
- }, 1000);
- }
- }, [copied, successMessage, t]);
+ useEffect(() => {
+ if (copied) {
+ toast.success(t(successMessage));
+ setTimeout(() => {
+ setCopied(false);
+ }, 1000);
+ }
+ }, [copied, successMessage, t]);
- useEffect(() => {
- setHealthy(text !== "");
- }, [text]);
+ useEffect(() => {
+ setHealthy(text !== "");
+ }, [text]);
- const handleClick = () => {
- if (!disabled) {
- setCopied(true);
- }
- };
+ const handleClick = () => {
+ if (!disabled) {
+ setCopied(true);
+ }
+ };
- const tooltip = tooltipMsg ? tooltipMsg : copyLabel ? copyLabel : undefined;
+ const tooltip = tooltipMsg ? tooltipMsg : copyLabel ? copyLabel : undefined;
- const Icon = copied
- ? CopyCheck
- : healthy
- ? copyIcon
- ? copyIcon
- : ClipboardCopy
- : CopyX;
- const isWithLabel = successMessage && copyLabel && errorLabel;
+ const Icon = copied ? CopyCheck : healthy ? copyIcon || ClipboardCopy : CopyX;
+ const isWithLabel = successMessage && copyLabel && errorLabel;
- return (
- <Tooltip>
- <TooltipTrigger
- className={cn(className, "flex flex-row items-center gap-2")}
- >
- <CopyToClipboard text={text}>
- <Button
- className="w-full"
- disabled={disabled || !healthy}
- onClick={handleClick}
- >
- <Icon />
- {isWithLabel &&
- t(copied ? successMessage : healthy ? copyLabel : errorLabel)}
- </Button>
- </CopyToClipboard>
- </TooltipTrigger>
- {tooltip && <TooltipContent>{tooltip}</TooltipContent>}
- </Tooltip>
- );
+ return (
+ <Tooltip>
+ <TooltipTrigger>
+ <CopyToClipboard text={text}>
+ <Button
+ className={cn(className, "p-2 flex flex-row items-center gap-2")}
+ disabled={disabled || !healthy}
+ onClick={handleClick}
+ >
+ <Icon />
+ {isWithLabel &&
+ t(copied ? successMessage : healthy ? copyLabel : errorLabel)}
+ </Button>
+ </CopyToClipboard>
+ </TooltipTrigger>
+ {tooltip && <TooltipContent>{tooltip}</TooltipContent>}
+ </Tooltip>
+ );
};
diff --git a/dashboard/src/features/users/tables/users/columns.tsx b/dashboard/src/features/users/tables/users/columns.tsx
@@ -1,22 +1,21 @@
-
-import { ColumnDef } from "@tanstack/react-table"
+import type { ColumnDef } from "@tanstack/react-table";
+import type { UserType } from "@marzneshin/features/users";
import {
UsersStatusBadge,
- UserType,
UsersStatus,
OnlineStatus,
- UserUsedTraffic
-} from "@marzneshin/features/users"
-import { DataTableColumnHeader } from "@marzneshin/components/data-table/column-header"
-import i18n from "@marzneshin/features/i18n"
+ UserUsedTraffic,
+} from "@marzneshin/features/users";
+import { DataTableColumnHeader } from "@marzneshin/components/data-table/column-header";
+import i18n from "@marzneshin/features/i18n";
import {
CopyToClipboardButton,
DataTableActionsCell,
- buttonVariants
-} from "@marzneshin/components"
-import { LinkIcon } from "lucide-react"
-import { getSubscriptionLink } from "@marzneshin/utils"
-import { format } from "date-fns"
+ buttonVariants,
+} from "@marzneshin/components";
+import { LinkIcon } from "lucide-react";
+import { getSubscriptionLink } from "@marzneshin/utils";
+import { format } from "date-fns";
interface ColumnAction {
onDelete: (user: UserType) => void;
@@ -24,45 +23,74 @@ interface ColumnAction {
onEdit: (user: UserType) => void;
}
-export const columns = (actions: ColumnAction): ColumnDef<UserType>[] => ([
+export const columns = (actions: ColumnAction): ColumnDef<UserType>[] => [
{
accessorKey: "username",
- header: ({ column }) => <DataTableColumnHeader title={i18n.t('username')} column={column} />,
- cell: ({ row }) => (<div className="flex flex-row gap-2 items-center">
- <OnlineStatus user={row.original} /> {row.original.username}
- </div>)
+ header: ({ column }) => (
+ <DataTableColumnHeader title={i18n.t("username")} column={column} />
+ ),
+ cell: ({ row }) => (
+ <div className="flex flex-row gap-2 items-center">
+ <OnlineStatus user={row.original} /> {row.original.username}
+ </div>
+ ),
},
{
accessorKey: "status",
- header: ({ column }) => <DataTableColumnHeader title={i18n.t('status')} column={column} />,
- cell: ({ row }) => <UsersStatusBadge status={UsersStatus[row.original.status]} />,
+ header: ({ column }) => (
+ <DataTableColumnHeader title={i18n.t("status")} column={column} />
+ ),
+ cell: ({ row }) => (
+ <UsersStatusBadge status={UsersStatus[row.original.status]} />
+ ),
enableSorting: false,
},
{
accessorKey: "used_traffic",
- header: ({ column }) => <DataTableColumnHeader title={i18n.t('page.users.used_traffic')} column={column} />,
- cell: ({ row }) => <UserUsedTraffic user={row.original} />
+ header: ({ column }) => (
+ <DataTableColumnHeader
+ title={i18n.t("page.users.used_traffic")}
+ column={column}
+ />
+ ),
+ cell: ({ row }) => <UserUsedTraffic user={row.original} />,
},
{
accessorKey: "expire",
- header: ({ column }) => <DataTableColumnHeader title={i18n.t('page.users.expire_date')} column={column} />,
- cell: ({ row }) => row.original.expire ? format(row.original.expire.toLocaleString(), "PPP") : "Unlimited"
+ header: ({ column }) => (
+ <DataTableColumnHeader
+ title={i18n.t("page.users.expire_date")}
+ column={column}
+ />
+ ),
+ cell: ({ row }) =>
+ row.original.expire
+ ? format(row.original.expire.toLocaleString(), "PPP")
+ : "Unlimited",
},
{
id: "actions",
cell: ({ row }) => {
return (
- <div className="flex flex-row gap-2 items-center" onClick={(e) => e.stopPropagation()}>
+ <div
+ className="flex flex-row gap-2 items-center"
+ onClick={(e) => e.stopPropagation()}
+ >
<CopyToClipboardButton
text={getSubscriptionLink(row.original.subscription_url)}
- successMessage={i18n.t('page.users.settings.subscription_link.copied')}
+ successMessage={i18n.t(
+ "page.users.settings.subscription_link.copied",
+ )}
copyIcon={LinkIcon}
- className={buttonVariants({ variant: "ghost", className: "h-8 w-8" })}
- tooltipMsg={i18n.t('page.users.settings.subscription_link.copy')}
+ className={buttonVariants({
+ variant: "secondary",
+ className: "size-8",
+ })}
+ tooltipMsg={i18n.t("page.users.settings.subscription_link.copy")}
/>
<DataTableActionsCell {...actions} row={row} />
</div>
- )
- }
+ );
+ },
},
-]);
+];