Refactor user management components to use selectedUser instead of user
- Updated UserLogsTab to fetch logs for selectedUser and adjusted related state and props. - Refactored UserOverviewTab to utilize selectedUser, including permission checks and user actions. - Modified user-management component to pass selectedUser to UserInformationSheet. - Enhanced use-detail-sheet handler to operate with selectedUser for user actions. - Implemented useCheckPermissionsHandler to manage user permissions based on current user. - Added new components: ActionRow, DangerAction, InfoRow, ProviderInfo, Section for better UI structure. - Introduced constants for user roles and updated role model to include IUserRoles type. - Updated global styles to include new color variables for better theming. - Improved utility function getFullName to handle null or undefined values.
This commit is contained in:
vergiLgood1
parent
0c663753f6
commit
e8acbf1645
|
|
@ -1,4 +1,4 @@
|
|||
// components/user-management/sheet/user-information-sheet.tsx
|
||||
// components/selectedUser-management/sheet/selectedUser-information-sheet.tsx
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Sheet,
|
||||
|
|
@ -19,26 +19,26 @@ import { UserOverviewTab } from "../tabs/user-overview-tab";
|
|||
|
||||
interface UserInformationSheetProps {
|
||||
open: boolean;
|
||||
user: IUserSchema;
|
||||
selectedUser: IUserSchema;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function UserInformationSheet({
|
||||
open,
|
||||
onOpenChange,
|
||||
user,
|
||||
selectedUser,
|
||||
}: UserInformationSheetProps) {
|
||||
const [activeTab, setActiveTab] = useState("overview");
|
||||
|
||||
const {
|
||||
handleCopyItem,
|
||||
} = useUserDetailSheetHandlers({ open, user, onOpenChange });
|
||||
} = useUserDetailSheetHandlers({ open, selectedUser, onOpenChange });
|
||||
|
||||
const getUserStatusBadge = () => {
|
||||
if (user.banned_until) {
|
||||
if (selectedUser.banned_until) {
|
||||
return <Badge variant="destructive">Banned</Badge>;
|
||||
}
|
||||
if (!user.email_confirmed_at) {
|
||||
if (!selectedUser.email_confirmed_at) {
|
||||
return <Badge variant="outline">Unconfirmed</Badge>;
|
||||
}
|
||||
return <Badge variant="default">Active</Badge>;
|
||||
|
|
@ -49,12 +49,12 @@ export function UserInformationSheet({
|
|||
<SheetContent className="sm:max-w-md md:max-w-xl overflow-y-auto">
|
||||
<SheetHeader className="space-y-1">
|
||||
<SheetTitle className="text-xl flex items-center gap-2">
|
||||
{user.email}
|
||||
{selectedUser.email}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-4 w-4"
|
||||
onClick={() => handleCopyItem(user.email ?? "", "Email")}
|
||||
onClick={() => handleCopyItem(selectedUser.email ?? "", "Email")}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
|
|
@ -76,17 +76,17 @@ export function UserInformationSheet({
|
|||
|
||||
<TabsContent value="overview">
|
||||
<UserOverviewTab
|
||||
user={user}
|
||||
selectedUser={selectedUser}
|
||||
handleCopyItem={handleCopyItem}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="logs">
|
||||
<UserLogsTab user={user} />
|
||||
<UserLogsTab selectedUser={selectedUser} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="details">
|
||||
<UserDetailsTab user={user} />
|
||||
<UserDetailsTab selectedUser={selectedUser} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</SheetContent>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { ActionsCell } from "../cells/actions-cell"
|
|||
export const createActionsColumn = (
|
||||
handleUserUpdate: (user: IUserSchema) => void
|
||||
) => {
|
||||
|
||||
return {
|
||||
id: "actions",
|
||||
header: () => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// columns/index.ts
|
||||
|
||||
|
||||
import type { ColumnDef } from "@tanstack/react-table"
|
||||
import { IUserSchema, IUserFilterOptionsSchema } from "@/src/entities/models/users/users.model"
|
||||
import { createEmailColumn } from "./email-column"
|
||||
|
|
@ -9,6 +8,9 @@ import { createCreatedAtColumn } from "./created-at-column"
|
|||
import { createStatusColumn } from "./status-column"
|
||||
import { createActionsColumn } from "./actions-column"
|
||||
import { createLastSignInColumn } from "./last-sign-in-column"
|
||||
import { useGetCurrentUserQuery } from "../../../_queries/queries"
|
||||
import { USER_ROLES } from "@/app/_utils/const/roles"
|
||||
import { AuthenticationError } from "@/src/entities/errors/auth"
|
||||
|
||||
export type UserTableColumn = ColumnDef<IUserSchema, IUserSchema>
|
||||
|
||||
|
|
@ -16,13 +18,36 @@ export const createUserColumns = (
|
|||
filters: IUserFilterOptionsSchema,
|
||||
setFilters: (filters: IUserFilterOptionsSchema) => void,
|
||||
handleUserUpdate: (user: IUserSchema) => void,
|
||||
currentUser?: IUserSchema,
|
||||
): UserTableColumn[] => {
|
||||
|
||||
// Check if the user is an admin
|
||||
// const { data: user, isLoading, isError, error } = useGetCurrentUserQuery();
|
||||
|
||||
// console.log("Query Status:", { isLoading, isError, error, user });
|
||||
|
||||
if (!currentUser || !currentUser.role) {
|
||||
return [
|
||||
createEmailColumn(filters, setFilters),
|
||||
createPhoneColumn(filters, setFilters),
|
||||
createLastSignInColumn(filters, setFilters),
|
||||
createCreatedAtColumn(filters, setFilters),
|
||||
createStatusColumn(filters, setFilters),
|
||||
// Kolom actions tidak disertakan karena memerlukan role
|
||||
]
|
||||
}
|
||||
|
||||
const allowedRoles = USER_ROLES.ALLOWED_ROLES_TO_ACTIONS
|
||||
let isAllowed = allowedRoles.includes(currentUser.role.name)
|
||||
|
||||
console.log("User Role:", currentUser.role.name, "Allowed Roles:", allowedRoles, "Is Allowed:", isAllowed)
|
||||
|
||||
return [
|
||||
createEmailColumn(filters, setFilters),
|
||||
createPhoneColumn(filters, setFilters),
|
||||
createLastSignInColumn(filters, setFilters),
|
||||
createCreatedAtColumn(filters, setFilters),
|
||||
createStatusColumn(filters, setFilters),
|
||||
createActionsColumn(handleUserUpdate),
|
||||
...(isAllowed ? [createActionsColumn(handleUserUpdate)] : []),
|
||||
]
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
// components/user-management/sheet/tabs/user-details-tab.tsx
|
||||
// components/selectedUser-management/sheet/tabs/selectedUser-details-tab.tsx
|
||||
import { IUserSchema } from "@/src/entities/models/users/users.model";
|
||||
import { formatDate } from "@/app/_utils/common";
|
||||
import { Separator } from "@/app/_components/ui/separator";
|
||||
|
|
@ -8,10 +8,10 @@ import { Edit2, Eye, EyeOff } from "lucide-react";
|
|||
import { useState } from "react";
|
||||
|
||||
interface UserDetailsTabProps {
|
||||
user: IUserSchema;
|
||||
selectedUser: IUserSchema;
|
||||
}
|
||||
|
||||
export function UserDetailsTab({ user }: UserDetailsTabProps) {
|
||||
export function UserDetailsTab({ selectedUser }: UserDetailsTabProps) {
|
||||
const [showSensitiveInfo, setShowSensitiveInfo] = useState(false);
|
||||
|
||||
const toggleSensitiveInfo = () => {
|
||||
|
|
@ -23,7 +23,7 @@ export function UserDetailsTab({ user }: UserDetailsTabProps) {
|
|||
{/* Basic Information */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-semibold">User Details</h3>
|
||||
<h3 className="text-lg font-semibold">SelectedUser Details</h3>
|
||||
<Button variant="outline" size="sm" onClick={() => { /* Implement edit functionality */ }}>
|
||||
<Edit2 className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
|
|
@ -36,24 +36,24 @@ export function UserDetailsTab({ user }: UserDetailsTabProps) {
|
|||
<div className="border rounded-md p-4 space-y-3">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Email</p>
|
||||
<p className="text-sm font-medium">{user.email || "—"}</p>
|
||||
<p className="text-sm font-medium">{selectedUser.email || "—"}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Phone</p>
|
||||
<p className="text-sm font-medium">{user.phone || "—"}</p>
|
||||
<p className="text-sm font-medium">{selectedUser.phone || "—"}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Role</p>
|
||||
<p className="text-sm font-medium">{user.role || "—"}</p>
|
||||
<p className="text-sm font-medium">{selectedUser.role?.name || "—"}</p>
|
||||
</div>
|
||||
|
||||
{user.is_anonymous !== undefined && (
|
||||
{selectedUser.is_anonymous !== undefined && (
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Anonymous</p>
|
||||
<Badge variant={user.is_anonymous ? "default" : "outline"}>
|
||||
{user.is_anonymous ? "Yes" : "No"}
|
||||
<Badge variant={selectedUser.is_anonymous ? "default" : "outline"}>
|
||||
{selectedUser.is_anonymous ? "Yes" : "No"}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -65,23 +65,23 @@ export function UserDetailsTab({ user }: UserDetailsTabProps) {
|
|||
<div className="border rounded-md p-4 space-y-3">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Username</p>
|
||||
<p className="text-sm font-medium">{user.profile?.username || "—"}</p>
|
||||
<p className="text-sm font-medium">{selectedUser.profile?.username || "—"}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">First Name</p>
|
||||
<p className="text-sm font-medium">{user.profile?.first_name || "—"}</p>
|
||||
<p className="text-sm font-medium">{selectedUser.profile?.first_name || "—"}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Last Name</p>
|
||||
<p className="text-sm font-medium">{user.profile?.last_name || "—"}</p>
|
||||
<p className="text-sm font-medium">{selectedUser.profile?.last_name || "—"}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Birth Date</p>
|
||||
<p className="text-sm font-medium">
|
||||
{user.profile?.birth_date ? formatDate(user.profile.birth_date) : "—"}
|
||||
{selectedUser.profile?.birth_date ? formatDate(selectedUser.profile.birth_date) : "—"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,27 +98,27 @@ export function UserDetailsTab({ user }: UserDetailsTabProps) {
|
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Street</p>
|
||||
<p className="text-sm font-medium">{user.profile?.address?.street || "—"}</p>
|
||||
<p className="text-sm font-medium">{selectedUser.profile?.address?.street || "—"}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">City</p>
|
||||
<p className="text-sm font-medium">{user.profile?.address?.city || "—"}</p>
|
||||
<p className="text-sm font-medium">{selectedUser.profile?.address?.city || "—"}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">State</p>
|
||||
<p className="text-sm font-medium">{user.profile?.address?.state || "—"}</p>
|
||||
<p className="text-sm font-medium">{selectedUser.profile?.address?.state || "—"}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Country</p>
|
||||
<p className="text-sm font-medium">{user.profile?.address?.country || "—"}</p>
|
||||
<p className="text-sm font-medium">{selectedUser.profile?.address?.country || "—"}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Postal Code</p>
|
||||
<p className="text-sm font-medium">{user.profile?.address?.postal_code || "—"}</p>
|
||||
<p className="text-sm font-medium">{selectedUser.profile?.address?.postal_code || "—"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -152,15 +152,15 @@ export function UserDetailsTab({ user }: UserDetailsTabProps) {
|
|||
<div className="border rounded-md p-4 space-y-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">User ID</p>
|
||||
<p className="text-sm font-medium font-mono">{user.id}</p>
|
||||
<p className="text-xs text-muted-foreground">SelectedUser ID</p>
|
||||
<p className="text-sm font-medium font-mono">{selectedUser.id}</p>
|
||||
</div>
|
||||
|
||||
{showSensitiveInfo && user.encrypted_password && (
|
||||
{showSensitiveInfo && selectedUser.encrypted_password && (
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Password Status</p>
|
||||
<Badge variant="outline">
|
||||
{user.encrypted_password ? "Set" : "Not Set"}
|
||||
{selectedUser.encrypted_password ? "Set" : "Not Set"}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -172,52 +172,52 @@ export function UserDetailsTab({ user }: UserDetailsTabProps) {
|
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Created At</p>
|
||||
<p className="text-sm">{formatDate(user.created_at)}</p>
|
||||
<p className="text-sm">{formatDate(selectedUser.created_at)}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Updated At</p>
|
||||
<p className="text-sm">{formatDate(user.updated_at)}</p>
|
||||
<p className="text-sm">{formatDate(selectedUser.updated_at)}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Last Sign In</p>
|
||||
<p className="text-sm">{formatDate(user.last_sign_in_at)}</p>
|
||||
<p className="text-sm">{formatDate(selectedUser.last_sign_in_at)}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Email Confirmed At</p>
|
||||
<p className="text-sm">{formatDate(user.email_confirmed_at)}</p>
|
||||
<p className="text-sm">{formatDate(selectedUser.email_confirmed_at)}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Invited At</p>
|
||||
<p className="text-sm">{formatDate(user.invited_at)}</p>
|
||||
<p className="text-sm">{formatDate(selectedUser.invited_at)}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Recovery Sent At</p>
|
||||
<p className="text-sm">{formatDate(user.recovery_sent_at)}</p>
|
||||
<p className="text-sm">{formatDate(selectedUser.recovery_sent_at)}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Confirmed At</p>
|
||||
<p className="text-sm">{formatDate(user.confirmed_at)}</p>
|
||||
<p className="text-sm">{formatDate(selectedUser.confirmed_at)}</p>
|
||||
</div>
|
||||
|
||||
{user.banned_until && (
|
||||
{selectedUser.banned_until && (
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Banned Until</p>
|
||||
<p className="text-sm text-destructive">{formatDate(user.banned_until)}</p>
|
||||
<p className="text-sm text-destructive">{formatDate(selectedUser.banned_until)}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{user.profile?.bio && (
|
||||
{selectedUser.profile?.bio && (
|
||||
<div className="border rounded-md p-4">
|
||||
<h4 className="text-sm font-medium mb-2">Bio</h4>
|
||||
<p className="text-sm whitespace-pre-wrap">{user.profile.bio}</p>
|
||||
<p className="text-sm whitespace-pre-wrap">{selectedUser.profile.bio}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { ScrollArea } from "@/app/_components/ui/scroll-area";
|
|||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/app/_components/ui/tabs";
|
||||
import { Skeleton } from "@/app/_components/ui/skeleton";
|
||||
|
||||
// Extended interface for user logs with more types
|
||||
// Extended interface for selectedUser logs with more types
|
||||
interface UserLog {
|
||||
id: string;
|
||||
type: 'login' | 'logout' | 'password_reset' | 'email_change' | 'profile_update' | 'account_creation' |
|
||||
|
|
@ -23,16 +23,16 @@ interface UserLog {
|
|||
}
|
||||
|
||||
interface UserLogsTabProps {
|
||||
user: IUserSchema;
|
||||
selectedUser: IUserSchema;
|
||||
}
|
||||
|
||||
export function UserLogsTab({ user }: UserLogsTabProps) {
|
||||
export function UserLogsTab({ selectedUser }: UserLogsTabProps) {
|
||||
const [logs, setLogs] = useState<UserLog[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState<string>("all");
|
||||
const [showErrorOnly, setShowErrorOnly] = useState(false);
|
||||
|
||||
// Mock function to fetch user logs - replace with actual implementation
|
||||
// Mock function to fetch selectedUser logs - replace with actual implementation
|
||||
const fetchUserLogs = async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ export function UserLogsTab({ user }: UserLogsTabProps) {
|
|||
type: 'logout',
|
||||
timestamp: new Date(2025, 3, 2, 13, 30, 0),
|
||||
status_code: '200',
|
||||
details: 'User logged out',
|
||||
details: 'SelectedUser logged out',
|
||||
ip_address: '192.168.1.5'
|
||||
},
|
||||
{
|
||||
|
|
@ -169,7 +169,7 @@ export function UserLogsTab({ user }: UserLogsTabProps) {
|
|||
|
||||
setLogs(allLogs);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch user logs:", error);
|
||||
console.error("Failed to fetch selectedUser logs:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
|
@ -177,7 +177,7 @@ export function UserLogsTab({ user }: UserLogsTabProps) {
|
|||
|
||||
useEffect(() => {
|
||||
fetchUserLogs();
|
||||
}, [user.id]);
|
||||
}, [selectedUser.id]);
|
||||
|
||||
const getLogIcon = (type: UserLog['type']) => {
|
||||
switch (type) {
|
||||
|
|
@ -280,8 +280,8 @@ export function UserLogsTab({ user }: UserLogsTabProps) {
|
|||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex flex-col">
|
||||
<h3 className="text-lg font-semibold">User Activity Logs</h3>
|
||||
<p className="text-sm text-muted-foreground">Latest logs from activity for this user in the past hour</p>
|
||||
<h3 className="text-lg font-semibold">SelectedUser Activity Logs</h3>
|
||||
<p className="text-sm text-muted-foreground">Latest logs from activity for this selectedUser in the past hour</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
// components/user-management/sheet/tabs/user-overview-tab.tsx
|
||||
import { Button } from "@/app/_components/ui/button";
|
||||
|
||||
import { Badge } from "@/app/_components/ui/badge";
|
||||
import { Separator } from "@/app/_components/ui/separator";
|
||||
import {
|
||||
|
|
@ -16,13 +15,30 @@ import { IUserSchema } from "@/src/entities/models/users/users.model";
|
|||
import { formatDate } from "@/app/_utils/common";
|
||||
import { CAlertDialog } from "@/app/_components/alert-dialog";
|
||||
import { useUserDetailSheetHandlers } from "../../_handlers/use-detail-sheet";
|
||||
import { useGetCurrentUserQuery } from "../../_queries/queries";
|
||||
import { AuthenticationError } from "@/src/entities/errors/auth";
|
||||
import { useCheckPermissionsHandler } from "@/app/(pages)/(auth)/_handlers/use-check-permissions";
|
||||
import { useCallback } from "react";
|
||||
import { cn } from "@/app/_lib/utils";
|
||||
import { Section } from "@/app/_components/Section";
|
||||
import { InfoRow } from "@/app/_components/info-row";
|
||||
import { ProviderInfo } from "@/app/_components/provider-info";
|
||||
import { ActionRow } from "@/app/_components/action-row";
|
||||
import { DangerAction } from "@/app/_components/danger-action";
|
||||
|
||||
|
||||
interface UserOverviewTabProps {
|
||||
user: IUserSchema;
|
||||
selectedUser: IUserSchema;
|
||||
handleCopyItem: (text: string, label: string) => void;
|
||||
}
|
||||
|
||||
export function UserOverviewTab({ user, handleCopyItem }: UserOverviewTabProps) {
|
||||
export function UserOverviewTab({ selectedUser, handleCopyItem }: UserOverviewTabProps) {
|
||||
const { data: currentUser } = useGetCurrentUserQuery();
|
||||
|
||||
if (!currentUser) {
|
||||
throw new AuthenticationError("Authentication error. Please log in again.");
|
||||
}
|
||||
|
||||
const {
|
||||
handleDeleteUser,
|
||||
handleSendPasswordRecovery,
|
||||
|
|
@ -33,196 +49,160 @@ export function UserOverviewTab({ user, handleCopyItem }: UserOverviewTabProps)
|
|||
isDeletePending,
|
||||
isSendPasswordRecoveryPending,
|
||||
isSendMagicLinkPending,
|
||||
} = useUserDetailSheetHandlers({ open: true, user, onOpenChange: () => { } });
|
||||
} = useUserDetailSheetHandlers({ open: true, selectedUser, onOpenChange: () => { } });
|
||||
|
||||
const {
|
||||
isAllowedToDelete,
|
||||
isAllowedToBan,
|
||||
isAllowedToSendPasswordRecovery,
|
||||
isAllowedToSendMagicLink,
|
||||
isAllowedToSendEmail,
|
||||
} = useCheckPermissionsHandler(currentUser.email);
|
||||
|
||||
const memoizedHandleCopyItem = useCallback(
|
||||
(text: string, label: string) => handleCopyItem(text, label),
|
||||
[handleCopyItem]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* User Information Section */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">User Information</h3>
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between items-center py-1">
|
||||
<span className="text-muted-foreground">User UID</span>
|
||||
<div className="flex items-center">
|
||||
<span className="font-mono">{user.id}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-4 w-4 ml-2"
|
||||
onClick={() => handleCopyItem(user.id, "UID")}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center py-1">
|
||||
<span className="text-muted-foreground">Created at</span>
|
||||
<span>{formatDate(user.created_at)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center py-1">
|
||||
<span className="text-muted-foreground">Last signed in</span>
|
||||
<span>{formatDate(user.last_sign_in_at)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center py-1">
|
||||
<span className="text-muted-foreground">SSO</span>
|
||||
<XCircle className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Section title="User Information">
|
||||
<InfoRow
|
||||
label="User UID"
|
||||
value={selectedUser.id}
|
||||
onCopy={() => memoizedHandleCopyItem(selectedUser.id, "UID")}
|
||||
/>
|
||||
<InfoRow label="Created at" value={formatDate(selectedUser.created_at)} />
|
||||
<InfoRow label="Last signed in" value={formatDate(selectedUser.last_sign_in_at)} />
|
||||
<InfoRow
|
||||
label="SSO"
|
||||
value={<XCircle className="h-4 w-4 text-muted-foreground" />}
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Provider Information Section */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Provider Information</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
The user has the following providers
|
||||
</p>
|
||||
|
||||
<div className="border rounded-md p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="h-5 w-5" />
|
||||
<div>
|
||||
<div className="font-medium">Email</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Signed in with a email account
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Section title="Provider Information" description="The user has the following providers">
|
||||
<ProviderInfo
|
||||
icon={<Mail className="h-5 w-5" />}
|
||||
title="Email"
|
||||
description="Signed in with an email account"
|
||||
badge={
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-green-500/10 text-green-500 border-green-500/20"
|
||||
>
|
||||
<CheckCircle className="h-3 w-3 mr-1" /> Enabled
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="border rounded-md p-4 space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h4 className="font-medium">Reset password</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Send a password recovery email to the user
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleSendPasswordRecovery}
|
||||
disabled={isSendPasswordRecoveryPending}
|
||||
>
|
||||
{isSendPasswordRecoveryPending ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Mail className="h-4 w-4 mr-2" />
|
||||
Send password recovery
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
{isAllowedToSendEmail && (
|
||||
<Separator className="my-4" />
|
||||
)}
|
||||
|
||||
<Separator />
|
||||
{isAllowedToSendEmail && (
|
||||
<div className="border rounded-md p-4 space-y-4 bg-secondary/80">
|
||||
{isAllowedToSendPasswordRecovery && (
|
||||
<ActionRow
|
||||
title="Reset password"
|
||||
description="Send a password recovery email to the user"
|
||||
onClick={handleSendPasswordRecovery}
|
||||
isPending={isSendPasswordRecoveryPending}
|
||||
pendingText="Sending..."
|
||||
icon={<Mail className="h-4 w-4 mr-2" />}
|
||||
actionText="Send password recovery"
|
||||
buttonVariant="outline"
|
||||
buttonClassName="bg-secondary/80 border-secondary-foreground/20 hover:border-secondary-foreground/30"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h4 className="font-medium">Send magic link</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Passwordless login via email for the user
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleSendMagicLink}
|
||||
disabled={isSendMagicLinkPending}
|
||||
>
|
||||
{isSendMagicLinkPending ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SendHorizonal className="h-4 w-4 mr-2" />
|
||||
Send magic link
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{!isAllowedToSendMagicLink && <Separator />}
|
||||
|
||||
{!isAllowedToSendMagicLink && (
|
||||
<ActionRow
|
||||
title="Send magic link"
|
||||
description="Passwordless login via email for the user"
|
||||
onClick={handleSendMagicLink}
|
||||
isPending={isSendMagicLinkPending}
|
||||
pendingText="Sending..."
|
||||
icon={<SendHorizonal className="h-4 w-4 mr-2" />}
|
||||
actionText="Send magic link"
|
||||
buttonVariant="outline"
|
||||
buttonClassName="bg-secondary/80 border-secondary-foreground/20 hover:border-secondary-foreground/30"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Danger Zone Section */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-destructive">
|
||||
Danger zone
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Be wary of the following features as they cannot be undone.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="border border-destructive/20 rounded-md p-4 flex justify-between items-center">
|
||||
<div>
|
||||
<h4 className="font-medium">Ban user</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Revoke access to the project for a set duration
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant={user.banned_until ? "outline" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => handleToggleBan()}
|
||||
disabled={isBanPending || isUnbanPending}
|
||||
>
|
||||
{isBanPending || isUnbanPending ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
{user.banned_until ? "Unbanning..." : "Banning..."}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Ban className="h-4 w-4 mr-2" />
|
||||
{user.banned_until ? "Unban user" : "Ban user"}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="border border-destructive/20 rounded-md p-4 flex justify-between items-center">
|
||||
<div>
|
||||
<h4 className="font-medium">Delete user</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
User will no longer have access to the project
|
||||
</p>
|
||||
</div>
|
||||
<CAlertDialog
|
||||
triggerText="Delete user"
|
||||
triggerIcon={<Trash2 className="h-4 w-4" />}
|
||||
title="Are you absolutely sure?"
|
||||
description="This action cannot be undone. This will permanently delete the user account and remove their data from our servers."
|
||||
confirmText="Delete"
|
||||
onConfirm={handleDeleteUser}
|
||||
isPending={isDeletePending}
|
||||
pendingText="Deleting..."
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
{isAllowedToDelete && (
|
||||
<Section
|
||||
title="Danger zone"
|
||||
titleClassName="text-destructive"
|
||||
description="Be wary of the following features as they cannot be undone."
|
||||
contentClassName="space-y-0"
|
||||
>
|
||||
{selectedUser.banned_until ? (
|
||||
<DangerAction
|
||||
title="Unban user"
|
||||
description="Revoke access to the project for a set duration"
|
||||
onClick={handleToggleBan}
|
||||
isPending={isUnbanPending}
|
||||
pendingText="Unbanning..."
|
||||
icon={<Ban className="h-4 w-4" />}
|
||||
actionText="Unban user"
|
||||
className="rounded-b-none"
|
||||
buttonVariant="outline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<DangerAction
|
||||
title="Ban user"
|
||||
description="Revoke access to the project for a set duration"
|
||||
isDialog
|
||||
dialogProps={{
|
||||
triggerText: "Ban user",
|
||||
triggerIcon: <Ban className="h-4 w-4" />,
|
||||
title: "Select ban duration",
|
||||
description:
|
||||
"The user will not be able to access the project for the selected duration.",
|
||||
confirmText: "Ban",
|
||||
onConfirm: handleToggleBan,
|
||||
isPending: isBanPending,
|
||||
pendingText: "Banning...",
|
||||
variant: "outline",
|
||||
size: "sm",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<DangerAction
|
||||
className="rounded-t-none"
|
||||
title="Delete user"
|
||||
description="User will no longer have access to the project"
|
||||
isDialog
|
||||
dialogProps={{
|
||||
triggerText: "Delete user",
|
||||
triggerIcon: <Trash2 className="h-4 w-4" />,
|
||||
title: "Are you absolutely sure?",
|
||||
description:
|
||||
"This action cannot be undone. This will permanently delete the user account and remove their data from our servers.",
|
||||
confirmText: "Delete",
|
||||
onConfirm: handleDeleteUser,
|
||||
isPending: isDeletePending,
|
||||
pendingText: "Deleting...",
|
||||
variant: "destructive",
|
||||
size: "sm",
|
||||
}}
|
||||
/>
|
||||
</Section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { useState, useMemo, useEffect } from "react";
|
|||
|
||||
import { DataTable } from "../../../../../_components/data-table";
|
||||
import { UserInformationSheet } from "./sheets/user-information-sheet";
|
||||
import { useGetUsersQuery } from "../_queries/queries";
|
||||
import { useGetCurrentUserQuery, useGetUsersQuery } from "../_queries/queries";
|
||||
import { filterUsers, useUserManagementHandlers } from "../_handlers/use-user-management";
|
||||
|
||||
import { useAddUserDialogHandler } from "../_handlers/use-add-user-dialog";
|
||||
|
|
@ -26,6 +26,8 @@ export default function UserManagement() {
|
|||
refetch,
|
||||
} = useGetUsersQuery();
|
||||
|
||||
const { data: currentUser } = useGetCurrentUserQuery()
|
||||
|
||||
// User management handler
|
||||
const {
|
||||
searchQuery,
|
||||
|
|
@ -72,6 +74,7 @@ export default function UserManagement() {
|
|||
filters,
|
||||
setFilters,
|
||||
handleUserUpdate,
|
||||
currentUser
|
||||
)
|
||||
|
||||
// State untuk jumlah data di halaman saat ini
|
||||
|
|
@ -99,7 +102,7 @@ export default function UserManagement() {
|
|||
|
||||
{isDetailUser && (
|
||||
<UserInformationSheet
|
||||
user={isDetailUser}
|
||||
selectedUser={isDetailUser}
|
||||
open={isSheetOpen}
|
||||
onOpenChange={setIsSheetOpen}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ import { copyItem } from "@/app/_utils/common";
|
|||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useUserActionsHandler } from "./actions/use-user-actions";
|
||||
|
||||
export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
|
||||
export const useUserDetailSheetHandlers = ({ open, selectedUser, onOpenChange }: {
|
||||
open: boolean;
|
||||
user: IUserSchema;
|
||||
selectedUser: IUserSchema;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) => {
|
||||
|
||||
|
|
@ -22,10 +22,10 @@ export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
|
|||
const { mutateAsync: unbanUser, isPending: isUnbanPending } = useUnbanUserMutation();
|
||||
|
||||
const handleDeleteUser = async () => {
|
||||
await deleteUser(user.id, {
|
||||
await deleteUser(selectedUser.id, {
|
||||
onSuccess: () => {
|
||||
invalidateUsers();
|
||||
toast.success(`${user.email} has been deleted`);
|
||||
toast.success(`${selectedUser.email} has been deleted`);
|
||||
|
||||
onOpenChange(false);
|
||||
}
|
||||
|
|
@ -33,10 +33,10 @@ export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
|
|||
};
|
||||
|
||||
const handleSendPasswordRecovery = async () => {
|
||||
if (user.email) {
|
||||
await sendPasswordRecovery(user.email, {
|
||||
if (selectedUser.email) {
|
||||
await sendPasswordRecovery(selectedUser.email, {
|
||||
onSuccess: () => {
|
||||
toast.success(`Password recovery email sent to ${user.email}`);
|
||||
toast.success(`Password recovery email sent to ${selectedUser.email}`);
|
||||
|
||||
onOpenChange(false);
|
||||
},
|
||||
|
|
@ -50,10 +50,10 @@ export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
|
|||
}
|
||||
|
||||
const handleSendMagicLink = async () => {
|
||||
if (user.email) {
|
||||
await sendMagicLink(user.email, {
|
||||
if (selectedUser.email) {
|
||||
await sendMagicLink(selectedUser.email, {
|
||||
onSuccess: () => {
|
||||
toast.success(`Magic link sent to ${user.email}`);
|
||||
toast.success(`Magic link sent to ${selectedUser.email}`);
|
||||
|
||||
onOpenChange(false);
|
||||
},
|
||||
|
|
@ -67,10 +67,10 @@ export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
|
|||
};
|
||||
|
||||
const handleBanUser = async (ban_duration: ValidBanDuration = "24h") => {
|
||||
await banUser({ id: user.id, ban_duration: ban_duration }, {
|
||||
await banUser({ id: selectedUser.id, ban_duration: ban_duration }, {
|
||||
onSuccess: () => {
|
||||
invalidateUsers();
|
||||
toast(`${user.email} has been banned`);
|
||||
toast(`${selectedUser.email} has been banned`);
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -78,10 +78,10 @@ export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
|
|||
};
|
||||
|
||||
const handleUnbanUser = async () => {
|
||||
await unbanUser({ id: user.id }, {
|
||||
await unbanUser({ id: selectedUser.id }, {
|
||||
onSuccess: () => {
|
||||
invalidateUsers();
|
||||
toast(`${user.email} has been unbanned`);
|
||||
toast(`${selectedUser.email} has been unbanned`);
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -89,21 +89,21 @@ export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
|
|||
};
|
||||
|
||||
const handleToggleBan = async (ban_duration: ValidBanDuration = "24h") => {
|
||||
if (user.banned_until) {
|
||||
await unbanUser({ id: user.id }, {
|
||||
if (selectedUser.banned_until) {
|
||||
await unbanUser({ id: selectedUser.id }, {
|
||||
onSuccess: () => {
|
||||
invalidateUsers();
|
||||
|
||||
toast(`${user.email} has been unbanned`);
|
||||
toast(`${selectedUser.email} has been unbanned`);
|
||||
|
||||
}
|
||||
});
|
||||
} else {
|
||||
await banUser({ id: user.id, ban_duration: ban_duration }, {
|
||||
await banUser({ id: selectedUser.id, ban_duration: ban_duration }, {
|
||||
onSuccess: () => {
|
||||
invalidateUsers();
|
||||
|
||||
toast(`${user.email} has been banned`);
|
||||
toast(`${selectedUser.email} has been banned`);
|
||||
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
import { useCheckPermissionsQuery } from "../_queries/queries"
|
||||
|
||||
export const useCheckPermissionsHandler = (email: string) => {
|
||||
|
||||
const { data: isAllowedToCreate } = useCheckPermissionsQuery(email, "users", "create")
|
||||
const { data: isAllowedToUpdate } = useCheckPermissionsQuery(email, "users", "update")
|
||||
const { data: isAllowedToDelete } = useCheckPermissionsQuery(email, "users", "delete")
|
||||
|
||||
const { data: isAllowedToBan } = useCheckPermissionsQuery(email, "users", "ban")
|
||||
const { data: isAllowedToSendPasswordRecovery } = useCheckPermissionsQuery(email, "users", "send_password_recovery",)
|
||||
const { data: isAllowedToSendMagicLink } = useCheckPermissionsQuery(email, "users", "send_magic_link")
|
||||
|
||||
return {
|
||||
isAllowedToCreate,
|
||||
isAllowedToUpdate,
|
||||
isAllowedToDelete,
|
||||
isAllowedToBan,
|
||||
isAllowedToSendPasswordRecovery,
|
||||
isAllowedToSendMagicLink,
|
||||
isAllowedToSendEmail: isAllowedToSendPasswordRecovery || isAllowedToSendMagicLink,
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import { ReactNode } from "react";
|
||||
import { Button } from "@/app/_components/ui/button";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { cn } from "@/app/_lib/utils";
|
||||
|
||||
interface ActionRowProps {
|
||||
title: string;
|
||||
description: string;
|
||||
onClick: () => void;
|
||||
isPending?: boolean;
|
||||
pendingText?: string;
|
||||
icon?: ReactNode;
|
||||
actionText: string;
|
||||
className?: string;
|
||||
contentClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
|
||||
buttonSize?: "default" | "sm" | "lg" | "icon";
|
||||
}
|
||||
|
||||
export function ActionRow({
|
||||
title,
|
||||
description,
|
||||
onClick,
|
||||
isPending = false,
|
||||
pendingText = "Loading...",
|
||||
icon,
|
||||
actionText,
|
||||
className,
|
||||
contentClassName,
|
||||
titleClassName,
|
||||
descriptionClassName,
|
||||
buttonClassName,
|
||||
buttonVariant = "outline",
|
||||
buttonSize = "sm"
|
||||
}: ActionRowProps) {
|
||||
return (
|
||||
<div className={cn("flex justify-between items-center", className)}>
|
||||
<div className={cn(contentClassName)}>
|
||||
<h4 className={cn("font-medium", titleClassName)}>{title}</h4>
|
||||
<p className={cn("text-xs text-muted-foreground", descriptionClassName)}>{description}</p>
|
||||
</div>
|
||||
<Button
|
||||
variant={buttonVariant}
|
||||
size={buttonSize}
|
||||
onClick={onClick}
|
||||
disabled={isPending}
|
||||
className={cn(buttonClassName)}
|
||||
>
|
||||
{isPending ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
{pendingText}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{icon}
|
||||
{actionText}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
import { ReactNode } from "react";
|
||||
import { Button } from "@/app/_components/ui/button";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { CAlertDialog } from "@/app/_components/alert-dialog";
|
||||
import { cn } from "@/app/_lib/utils";
|
||||
|
||||
interface DangerActionProps {
|
||||
title: string;
|
||||
description: string;
|
||||
onClick?: () => void;
|
||||
isPending?: boolean;
|
||||
pendingText?: string;
|
||||
icon?: ReactNode;
|
||||
actionText?: string;
|
||||
isDialog?: boolean;
|
||||
dialogProps?: any;
|
||||
className?: string;
|
||||
contentClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
buttonClassName?: string;
|
||||
containerClassName?: string;
|
||||
buttonVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
|
||||
buttonSize?: "default" | "sm" | "lg" | "icon";
|
||||
}
|
||||
|
||||
export function DangerAction({
|
||||
title,
|
||||
description,
|
||||
onClick,
|
||||
isPending = false,
|
||||
pendingText = "Loading...",
|
||||
icon,
|
||||
actionText,
|
||||
isDialog,
|
||||
dialogProps,
|
||||
className,
|
||||
contentClassName,
|
||||
titleClassName,
|
||||
descriptionClassName,
|
||||
buttonClassName,
|
||||
containerClassName,
|
||||
buttonVariant = "outline",
|
||||
buttonSize = "sm"
|
||||
}: DangerActionProps) {
|
||||
return (
|
||||
<div className={cn("border border-destructive rounded-md p-4 flex justify-between items-center", containerClassName, className)}>
|
||||
<div className={cn(contentClassName)}>
|
||||
<h4 className={cn("font-medium", titleClassName)}>{title}</h4>
|
||||
<p className={cn("text-xs text-muted-foreground", descriptionClassName)}>{description}</p>
|
||||
</div>
|
||||
{isDialog ? (
|
||||
<div className={cn(buttonClassName)}>
|
||||
<CAlertDialog {...dialogProps} />
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant={buttonVariant}
|
||||
size={buttonSize}
|
||||
onClick={onClick}
|
||||
disabled={isPending}
|
||||
className={cn(buttonClassName)}
|
||||
>
|
||||
{isPending ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
{pendingText}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{icon}
|
||||
{actionText}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { ReactNode } from "react";
|
||||
import { Button } from "@/app/_components/ui/button";
|
||||
import { Copy } from "lucide-react";
|
||||
import { cn } from "@/app/_lib/utils";
|
||||
|
||||
interface InfoRowProps {
|
||||
label: string;
|
||||
value: ReactNode;
|
||||
onCopy?: () => void;
|
||||
className?: string;
|
||||
labelClassName?: string;
|
||||
valueClassName?: string;
|
||||
copyButtonClassName?: string;
|
||||
}
|
||||
|
||||
export function InfoRow({
|
||||
label,
|
||||
value,
|
||||
onCopy,
|
||||
className,
|
||||
labelClassName,
|
||||
valueClassName,
|
||||
copyButtonClassName
|
||||
}: InfoRowProps) {
|
||||
return (
|
||||
<div className={cn("flex justify-between items-center py-1", className)}>
|
||||
<span className={cn("text-muted-foreground", labelClassName)}>{label}</span>
|
||||
<div className="flex items-center">
|
||||
{typeof value === "string" ? (
|
||||
<span className={cn("font-mono", valueClassName)}>{value}</span>
|
||||
) : value}
|
||||
{onCopy && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn("h-4 w-4 ml-2", copyButtonClassName)}
|
||||
onClick={onCopy}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import { ReactNode } from "react";
|
||||
import { cn } from "@/app/_lib/utils";
|
||||
|
||||
interface ProviderInfoProps {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
badge: ReactNode;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
headerClassName?: string;
|
||||
titleContainerClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
badgeClassName?: string;
|
||||
}
|
||||
|
||||
export function ProviderInfo({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
badge,
|
||||
className,
|
||||
containerClassName,
|
||||
headerClassName,
|
||||
titleContainerClassName,
|
||||
titleClassName,
|
||||
descriptionClassName,
|
||||
badgeClassName
|
||||
}: ProviderInfoProps) {
|
||||
return (
|
||||
<div className={cn("border rounded-md p-4 space-y-3 bg-secondary/80", containerClassName, className)}>
|
||||
<div className={cn("flex items-center justify-between", headerClassName)}>
|
||||
<div className={cn("flex items-center gap-2", titleContainerClassName)}>
|
||||
{icon}
|
||||
<div>
|
||||
<div className={cn("font-medium", titleClassName)}>{title}</div>
|
||||
<div className={cn("text-xs text-muted-foreground", descriptionClassName)}>{description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn(badgeClassName)}>
|
||||
{badge}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { ReactNode } from "react";
|
||||
import { cn } from "@/app/_lib/utils";
|
||||
|
||||
interface SectionProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
contentClassName?: string;
|
||||
}
|
||||
|
||||
export function Section({
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
className,
|
||||
titleClassName,
|
||||
descriptionClassName,
|
||||
contentClassName
|
||||
}: SectionProps) {
|
||||
return (
|
||||
<div className={cn("space-y-4", className)}>
|
||||
<div className={cn("flex flex-col gap-1")}>
|
||||
<h3 className={cn("text-lg font-semibold", titleClassName)}>{title}</h3>
|
||||
{description && <p className={cn("text-sm text-muted-foreground", descriptionClassName)}>{description}</p>}
|
||||
</div>
|
||||
<div className={cn(contentClassName)}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -84,6 +84,13 @@
|
|||
/* Sekunder: abu-abu gelap untuk elemen pendukung */
|
||||
--secondary: 0 0% 15%; /* #262626 */
|
||||
--secondary-foreground: 0 0% 85%; /* #d9d9d9 */
|
||||
--secondary-tertiary: #242424; /* #242424 */
|
||||
|
||||
/* Third */
|
||||
--tertiary: 0 0% 12%; /* #1F1F1F1 */
|
||||
--tertiary-foreground: 0 0% 85%; /* #d9d9d9 */
|
||||
--tertiary-border: 0 0% 20%; /* #333333 */
|
||||
|
||||
|
||||
/* Muted: abu-abu gelap untuk teks pendukung */
|
||||
--muted: 0 0% 20%; /* #333333 */
|
||||
|
|
|
|||
|
|
@ -278,8 +278,8 @@ export const formatDateWithLocaleAndFallback = (
|
|||
* @param lastName - The last name.
|
||||
* @returns The full name or "User" if both names are empty.
|
||||
*/
|
||||
export const getFullName = (firstName: string, lastName: string): string => {
|
||||
return `${firstName} ${lastName}`.trim() || "User";
|
||||
export const getFullName = (firstName: string | null | undefined, lastName: string | null | undefined): string => {
|
||||
return `${firstName || ""} ${lastName || ""}`.trim() || "User";
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import { IUserRoles } from "@/src/entities/models/roles/roles.model";
|
||||
|
||||
export const USER_ROLES = {
|
||||
|
||||
TYPES: {
|
||||
ADMIN: 'admin',
|
||||
STAFF: 'staff',
|
||||
VIEWER: 'viewer',
|
||||
},
|
||||
|
||||
ALLOWED_ROLES_TO_ACTIONS: [
|
||||
"admin",
|
||||
"staff"
|
||||
]
|
||||
|
||||
};
|
||||
|
|
@ -1,5 +1,18 @@
|
|||
import { z } from "zod";
|
||||
|
||||
export type IUserRoles = {
|
||||
TYPES: {
|
||||
ADMIN: 'admin';
|
||||
STAFF: 'staff';
|
||||
VIEWER: 'viewer';
|
||||
};
|
||||
|
||||
ALLOWED_ROLES_TO_ACTIONS: [
|
||||
'admin',
|
||||
'staff'
|
||||
];
|
||||
};
|
||||
|
||||
export const RoleSchema = z.object({
|
||||
id: z.string(),
|
||||
name: z.string(),
|
||||
|
|
|
|||
Loading…
Reference in New Issue