feat: update tenant - user level

This commit is contained in:
hanif salafi 2025-10-03 07:53:19 +07:00
parent f7475d16fd
commit 957d3c4e98
7 changed files with 413 additions and 60 deletions

View File

@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { PlusIcon, SettingsIcon, UsersIcon, WorkflowIcon } from "@/components/icons";
import { PlusIcon, SettingsIcon, UsersIcon, WorkflowIcon, DotsIcon, DeleteIcon } from "@/components/icons";
import { ApprovalWorkflowForm } from "@/components/form/ApprovalWorkflowForm";
import { UserLevelsForm } from "@/components/form/UserLevelsForm";
import { useWorkflowModal } from "@/components/modals/WorkflowModalProvider";
@ -26,6 +26,7 @@ function TenantSettingsContent() {
const [userLevels, setUserLevels] = useState<UserLevel[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [isEditingWorkflow, setIsEditingWorkflow] = useState(false);
const [editingUserLevel, setEditingUserLevel] = useState<UserLevel | null>(null);
const { checkWorkflowStatus } = useWorkflowStatusCheck();
const { showWorkflowModal } = useWorkflowModal();
@ -79,9 +80,27 @@ function TenantSettingsContent() {
}
setIsUserLevelDialogOpen(false);
setEditingUserLevel(null);
await loadData(); // Reload data after saving
};
const handleEditUserLevel = (userLevel: UserLevel) => {
setEditingUserLevel(userLevel);
setIsUserLevelDialogOpen(true);
};
const handleDeleteUserLevel = async (userLevel: UserLevel) => {
if (window.confirm(`Are you sure you want to delete "${userLevel.name}"? This action cannot be undone.`)) {
try {
// TODO: Implement delete API call
console.log("Delete user level:", userLevel.id);
await loadData(); // Reload data after deletion
} catch (error) {
console.error("Error deleting user level:", error);
}
}
};
const handleBulkUserLevelSave = async (data: UserLevelsCreateRequest[]) => {
setIsUserLevelDialogOpen(false);
await loadData(); // Reload data after saving
@ -186,6 +205,7 @@ function TenantSettingsContent() {
skipApprovalFor: workflow.clientSettings.skipApprovalFor || []
}
} : undefined}
workflowId={workflow?.workflow.id}
onSave={handleWorkflowSave}
onCancel={() => setIsEditingWorkflow(false)}
/>
@ -428,12 +448,27 @@ function TenantSettingsContent() {
</DialogTrigger>
<DialogContent className="md:max-w-6xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Create New User Level</DialogTitle>
<DialogTitle>
{editingUserLevel ? `Edit User Level: ${editingUserLevel.name}` : "Create New User Level"}
</DialogTitle>
</DialogHeader>
<UserLevelsForm
mode="single"
initialData={editingUserLevel ? {
name: editingUserLevel.name,
aliasName: editingUserLevel.aliasName,
levelNumber: editingUserLevel.levelNumber,
parentLevelId: editingUserLevel.parentLevelId || 0,
provinceId: editingUserLevel.provinceId,
group: editingUserLevel.group || "",
isApprovalActive: editingUserLevel.isApprovalActive,
isActive: editingUserLevel.isActive,
} : undefined}
onSave={handleUserLevelSave}
onCancel={() => setIsUserLevelDialogOpen(false)}
onCancel={() => {
setIsUserLevelDialogOpen(false);
setEditingUserLevel(null);
}}
/>
</DialogContent>
</Dialog>
@ -509,6 +544,26 @@ function TenantSettingsContent() {
</span>
)}
</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
onClick={() => handleEditUserLevel(rootLevel)}
className="h-8 w-8 p-0 border-gray-300 hover:border-blue-500 hover:bg-blue-50"
title="Edit User Level"
>
<DotsIcon className="h-4 w-4 text-gray-600 hover:text-blue-600" />
</Button>
<Button
variant="outline"
size="sm"
onClick={() => handleDeleteUserLevel(rootLevel)}
className="h-8 w-8 p-0 border-gray-300 hover:border-red-500 hover:bg-red-50"
title="Delete User Level"
>
<DeleteIcon className="h-4 w-4 text-gray-600 hover:text-red-600" />
</Button>
</div>
</div>
{/* Child Levels */}
@ -538,6 +593,26 @@ function TenantSettingsContent() {
</span>
)}
</div>
<div className="flex items-center gap-1">
<Button
variant="outline"
size="sm"
onClick={() => handleEditUserLevel(childLevel)}
className="h-7 w-7 p-0 border-gray-300 hover:border-blue-500 hover:bg-blue-50"
title="Edit User Level"
>
<DotsIcon className="h-3.5 w-3.5 text-gray-600 hover:text-blue-600" />
</Button>
<Button
variant="outline"
size="sm"
onClick={() => handleDeleteUserLevel(childLevel)}
className="h-7 w-7 p-0 border-gray-300 hover:border-red-500 hover:bg-red-50"
title="Delete User Level"
>
<DeleteIcon className="h-3.5 w-3.5 text-gray-600 hover:text-red-600" />
</Button>
</div>
</div>
))}
</div>
@ -547,7 +622,7 @@ function TenantSettingsContent() {
</Card>
)}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{userLevels.length > 0 ? userLevels.map((userLevel) => (
<Card key={userLevel.id} className="hover:shadow-lg transition-shadow">
<CardHeader>
@ -627,7 +702,7 @@ function TenantSettingsContent() {
</CardContent>
</Card>
)) : ''}
</div>
</div> */}
{userLevels.length === 0 && !isLoading && (
<Card>

View File

@ -1,6 +1,11 @@
@import "tailwindcss";
@import "tw-animate-css";
/* SweetAlert2 z-index fix */
.swal-z-index-9999 {
z-index: 9999 !important;
}
@custom-variant dark (&:is(.dark *));
@theme inline {

View File

@ -9,6 +9,7 @@ import { DynamicArray } from "./common/DynamicArray";
import { MultiSelect } from "./common/MultiSelect";
import {
CreateApprovalWorkflowWithClientSettingsRequest,
UpdateApprovalWorkflowWithClientSettingsRequest,
ApprovalWorkflowStepRequest,
ClientApprovalSettingsRequest,
UserLevel,
@ -16,6 +17,7 @@ import {
UserRole,
ArticleCategory,
createApprovalWorkflowWithClientSettings,
updateApprovalWorkflowWithClientSettings,
getUserLevels,
getUsers,
getUserRoles,
@ -25,6 +27,7 @@ import Swal from "sweetalert2";
interface ApprovalWorkflowFormProps {
initialData?: CreateApprovalWorkflowWithClientSettingsRequest;
workflowId?: number; // For update mode
onSave?: (data: CreateApprovalWorkflowWithClientSettingsRequest) => void;
onCancel?: () => void;
isLoading?: boolean;
@ -32,6 +35,7 @@ interface ApprovalWorkflowFormProps {
export const ApprovalWorkflowForm: React.FC<ApprovalWorkflowFormProps> = ({
initialData,
workflowId,
onSave,
onCancel,
isLoading = false,
@ -137,8 +141,8 @@ export const ApprovalWorkflowForm: React.FC<ApprovalWorkflowFormProps> = ({
if (!formData.description.trim()) {
newErrors.description = "Description is required";
} else if (formData.description.trim().length < 10) {
newErrors.description = "Description must be at least 10 characters";
} else if (formData.description.trim().length < 3) {
newErrors.description = "Description must be at least 3 characters";
}
if (formData.steps.length === 0) {
@ -338,7 +342,10 @@ export const ApprovalWorkflowForm: React.FC<ApprovalWorkflowFormProps> = ({
title: "Validation Error",
text: "Please fix the errors before submitting",
icon: "error",
confirmButtonText: "OK"
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
});
return;
}
@ -358,31 +365,92 @@ export const ApprovalWorkflowForm: React.FC<ApprovalWorkflowFormProps> = ({
skipApprovalFor: []
};
const submitData = {
...formData,
clientApprovalSettings: hardcodedClientSettings
};
if (workflowId) {
// Update mode
const updateData: UpdateApprovalWorkflowWithClientSettingsRequest = {
workflowId,
name: formData.name,
description: formData.description,
isActive: formData.isActive || false,
isDefault: formData.isDefault || false,
steps: formData.steps.map(step => ({
...step,
branchName: step.stepName, // branchName should be same as stepName
})),
clientSettings: hardcodedClientSettings
};
console.log("Submit Data: ", submitData);
console.log("Update Data: ", updateData);
const response = await createApprovalWorkflowWithClientSettings(submitData);
console.log("Response: ", response);
const response = await updateApprovalWorkflowWithClientSettings(updateData);
console.log("Update Response: ", response);
if (response?.error) {
Swal.fire({
title: "Error",
text: response?.message?.messages[0] || "Failed to create approval workflow",
icon: "error",
confirmButtonText: "OK"
});
if (response?.error) {
Swal.fire({
title: "Error",
text: response?.message?.messages?.[0] || "Failed to update approval workflow",
icon: "error",
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
});
} else {
Swal.fire({
title: "Success",
text: "Approval workflow updated successfully",
icon: "success",
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
}).then(() => {
// Call onSave to trigger parent refresh
if (onSave) {
onSave(formData);
}
});
}
} else {
Swal.fire({
title: "Success",
text: "Approval workflow created successfully",
icon: "success",
confirmButtonText: "OK"
});
// Create mode
const submitData = {
...formData,
clientApprovalSettings: hardcodedClientSettings
};
console.log("Create Data: ", submitData);
const response = await createApprovalWorkflowWithClientSettings(submitData);
console.log("Create Response: ", response);
if (response?.error) {
Swal.fire({
title: "Error",
text: response?.message?.messages?.[0] || "Failed to create approval workflow",
icon: "error",
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
});
} else {
Swal.fire({
title: "Success",
text: "Approval workflow created successfully",
icon: "success",
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
}).then(() => {
// Call onSave to trigger parent refresh
if (onSave) {
onSave(submitData);
}
});
}
}
} catch (error) {
console.error("Error submitting form:", error);
@ -390,7 +458,10 @@ export const ApprovalWorkflowForm: React.FC<ApprovalWorkflowFormProps> = ({
title: "Error",
text: "An unexpected error occurred",
icon: "error",
confirmButtonText: "OK"
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
});
} finally {
setIsSubmitting(false);
@ -404,7 +475,10 @@ export const ApprovalWorkflowForm: React.FC<ApprovalWorkflowFormProps> = ({
icon: "warning",
showCancelButton: true,
confirmButtonText: "Yes, reset",
cancelButtonText: "Cancel"
cancelButtonText: "Cancel",
customClass: {
popup: 'swal-z-index-9999'
}
}).then((result) => {
if (result.isConfirmed) {
setFormData({
@ -617,7 +691,7 @@ export const ApprovalWorkflowForm: React.FC<ApprovalWorkflowFormProps> = ({
className="flex items-center gap-2"
>
<SaveIcon className="h-4 w-4" />
{isSubmitting ? "Saving..." : isLoadingData ? "Loading..." : "Save Workflow"}
{isSubmitting ? "Saving..." : isLoadingData ? "Loading..." : workflowId ? "Update Workflow" : "Save Workflow"}
</Button>
</div>
</div>

View File

@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { ChevronDownIcon, ChevronUpIcon, SaveIcon, EyeIcon, RotateCcwIcon, UsersIcon, HierarchyIcon } from "@/components/icons";
import { ChevronDownIcon, ChevronUpIcon, SaveIcon, EyeIcon, RotateCcwIcon, UsersIcon, HierarchyIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { FormField } from "./common/FormField";
import { DynamicArray } from "./common/DynamicArray";
import {
@ -56,6 +56,7 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
const [isSubmitting, setIsSubmitting] = useState(false);
const [expandedHierarchy, setExpandedHierarchy] = useState(false);
const [isLoadingData, setIsLoadingData] = useState(true);
const [activeTab, setActiveTab] = useState(mode === "single" ? "basic" : "bulk");
// Load initial data
useEffect(() => {
@ -148,8 +149,28 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
});
};
const handleBulkItemsChange = (items: UserLevelsCreateRequest[]) => {
setBulkFormData(items);
const handleTabChange = (value: string) => {
setActiveTab(value);
// Update mode based on active tab
if (value === "bulk") {
// Mode will be determined by activeTab in handleSubmit
} else {
// Mode will be determined by activeTab in handleSubmit
}
};
const addBulkItem = () => {
const newItem: UserLevelsCreateRequest = {
name: "",
aliasName: "",
levelNumber: 1,
parentLevelId: undefined,
provinceId: undefined,
group: "",
isApprovalActive: true,
isActive: true,
};
setBulkFormData(prev => [...prev, newItem]);
};
const renderBulkItemForm = (item: UserLevelsCreateRequest, index: number, onUpdate: (item: UserLevelsCreateRequest) => void, onDelete: () => void) => {
@ -264,9 +285,13 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (mode === "single") {
// Determine current mode based on active tab
const currentMode = activeTab === "bulk" ? "bulk" : "single";
if (currentMode === "single") {
const validationErrors = validateForm(formData);
console.log(validationErrors);
console.log("Form mode: ", currentMode);
console.log("Error single ", validationErrors);
if (Object.keys(validationErrors).length > 0) {
setErrors(validationErrors);
@ -274,7 +299,10 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
title: "Validation Error",
text: "Please fix the errors before submitting",
icon: "error",
confirmButtonText: "OK"
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
});
return;
}
@ -284,7 +312,10 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
title: "Validation Error",
text: "Please fix the errors before submitting",
icon: "error",
confirmButtonText: "OK"
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
});
return;
}
@ -294,31 +325,75 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
try {
if (onSave) {
if (mode === "single") {
if (currentMode === "single") {
onSave(formData);
} else {
// For bulk mode, save each item individually
let hasErrors = false;
let successCount = 0;
for (const item of bulkFormData) {
await createUserLevel(item);
const response = await createUserLevel(item);
if (response?.error) {
hasErrors = true;
Swal.fire({
title: "Error",
text: `Failed to create user level "${item.name}": ${response?.message || "Unknown error"}`,
icon: "error",
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
});
} else {
successCount++;
Swal.fire({
title: "Success",
text: `User level "${item.name}" created successfully`,
icon: "success",
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
});
}
}
// Refresh page if at least one item was created successfully
if (successCount > 0) {
setTimeout(() => {
window.location.reload();
}, 1000); // Small delay to let user see the success message
}
}
} else {
if (mode === "single") {
if (currentMode === "single") {
const response = await createUserLevel(formData);
console.log("Create Response: ", response);
if (response?.error) {
Swal.fire({
title: "Error",
text: response?.message || "Failed to create user level",
icon: "error",
confirmButtonText: "OK"
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
});
} else {
Swal.fire({
title: "Success",
text: "User level created successfully",
icon: "success",
confirmButtonText: "OK"
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
}).then(() => {
// Refresh page after successful creation
window.location.reload();
});
}
} else {
@ -326,6 +401,8 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
const promises = bulkFormData.map(item => createUserLevel(item));
const responses = await Promise.all(promises);
console.log("Create Responses: ", responses);
const failedCount = responses.filter((r: any) => r.error).length;
const successCount = responses.length - failedCount;
@ -334,14 +411,20 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
title: "Success",
text: `All ${successCount} user levels created successfully`,
icon: "success",
confirmButtonText: "OK"
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
});
} else {
Swal.fire({
title: "Partial Success",
text: `${successCount} user levels created successfully, ${failedCount} failed`,
icon: "warning",
confirmButtonText: "OK"
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
});
}
}
@ -352,7 +435,10 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
title: "Error",
text: "An unexpected error occurred",
icon: "error",
confirmButtonText: "OK"
confirmButtonText: "OK",
customClass: {
popup: 'swal-z-index-9999'
}
});
} finally {
setIsSubmitting(false);
@ -366,7 +452,10 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
icon: "warning",
showCancelButton: true,
confirmButtonText: "Yes, reset",
cancelButtonText: "Cancel"
cancelButtonText: "Cancel",
customClass: {
popup: 'swal-z-index-9999'
}
}).then((result) => {
if (result.isConfirmed) {
if (mode === "single") {
@ -429,7 +518,7 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
</div>
)}
<Tabs defaultValue={mode === "single" ? "basic" : "bulk"} className="w-full">
<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="basic" disabled={isLoadingData}>Basic Information</TabsTrigger>
{/* <TabsTrigger value="hierarchy" disabled={isLoadingData}>Hierarchy</TabsTrigger> */}
@ -590,15 +679,68 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
</CardTitle>
</CardHeader>
<CardContent>
<DynamicArray
items={bulkFormData}
onItemsChange={handleBulkItemsChange}
renderItem={renderBulkItemForm}
addItemLabel="Add User Level"
emptyStateMessage="No user levels added yet. Add multiple levels to create them in bulk."
allowReorder={true}
allowDuplicate={true}
/>
<div className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-lg font-medium">User Levels</h3>
<Button
type="button"
variant="outline"
onClick={addBulkItem}
className="flex items-center gap-2"
>
<PlusIcon className="h-4 w-4" />
Add User Level
</Button>
</div>
{bulkFormData.length === 0 ? (
<div className="text-center py-8 text-gray-500">
<UsersIcon className="h-12 w-12 mx-auto mb-4 text-gray-400" />
<p>No user levels added yet. Add multiple levels to create them in bulk.</p>
</div>
) : (
<div className="space-y-4">
{bulkFormData.map((item, index) => (
<Card key={index} className="border-l-4 border-l-blue-500">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-base">
User Level #{index + 1}
</CardTitle>
<Button
type="button"
variant="outline"
size="sm"
onClick={() => {
const newItems = bulkFormData.filter((_, i) => i !== index);
setBulkFormData(newItems);
}}
className="text-red-600 hover:text-red-700"
>
<TrashIcon className="h-4 w-4" />
</Button>
</div>
</CardHeader>
<CardContent>
{renderBulkItemForm(
item,
index,
(updatedItem) => {
const newItems = [...bulkFormData];
newItems[index] = updatedItem;
setBulkFormData(newItems);
},
() => {
const newItems = bulkFormData.filter((_, i) => i !== index);
setBulkFormData(newItems);
}
)}
</CardContent>
</Card>
))}
</div>
)}
</div>
</CardContent>
</Card>
</TabsContent>
@ -636,7 +778,7 @@ export const UserLevelsForm: React.FC<UserLevelsFormProps> = ({
className="flex items-center gap-2"
>
<SaveIcon className="h-4 w-4" />
{isSubmitting ? "Saving..." : isLoadingData ? "Loading..." : `Save ${mode === "single" ? "User Level" : "User Levels"}`}
{isSubmitting ? "Saving..." : isLoadingData ? "Loading..." : `Save ${activeTab === "bulk" ? "User Levels" : "User Level"}`}
</Button>
</div>
</div>

View File

@ -2995,4 +2995,35 @@ export const RotateCcwIcon = ({ size = 24, width, height, ...props }: IconSvgPro
<path d="M1 4v6h6" />
<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
</svg>
);
export const EditIcon = ({
size = 24,
width,
height,
...props
}: IconSvgProps) => (
<svg
width={size || width}
height={size || height}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

View File

@ -24,6 +24,25 @@ export interface ClientApprovalSettingsRequest {
isActive?: boolean;
}
export interface UpdateApprovalWorkflowWithClientSettingsRequest {
workflowId: number;
name: string;
description: string;
isActive: boolean;
isDefault: boolean;
steps: ApprovalWorkflowStepRequest[];
clientSettings: {
approvalExemptCategories: any[];
approvalExemptRoles: any[];
approvalExemptUsers: any[];
autoPublishArticles: boolean;
isActive: boolean;
requireApprovalFor: any[];
requiresApproval: boolean;
skipApprovalFor: any[];
};
}
export interface CreateApprovalWorkflowWithClientSettingsRequest {
name: string;
description: string;
@ -208,6 +227,11 @@ export async function createApprovalWorkflowWithClientSettings(data: CreateAppro
return httpPostInterceptor(url, data);
}
export async function updateApprovalWorkflowWithClientSettings(data: any) {
const url = "approval-workflows/with-client-settings";
return httpPutInterceptor(url, data);
}
export async function getUserLevels() {
const url = "user-levels";
return httpGetInterceptor(url);

View File

@ -39,11 +39,13 @@ export async function doLogin(data: any) {
// }
export async function getCsrfToken() {
const pathUrl = "csrf";
const pathUrl = "csrf-token";
const headers = {
"content-type": "application/json",
};
return httpGet(pathUrl, headers);
// const url = 'https://kontenhumas.com/api/csrf';
// try {
// const response = await fetch(url, {