refactor: enhance character data transformation and improve fetching logic in character-related scripts

src/routes/(admin)/admin/devil-fruits/+page.svelte

@@ -11,7 +11,6 @@
 	let searchQuery = $state('');
 	let filterType = $state<'all' | 'Paramecia' | 'Zoan' | 'Logia' | 'Unknown'>('all');
 	let isEditModalOpen = $state(false);
-	let selectedFruitId = $state<string | null>(null);
 	let isSaving = $state(false);
 	let saveMessage = $state<{ type: 'success' | 'error'; text: string } | null>(null);
 
@@ -33,14 +32,12 @@
 	});
 
 	const openEditModal = (fruit: any) => {
-		selectedFruitId = fruit.id;
 		editForm = { ...fruit };
 		isEditModalOpen = true;
 	};
 
 	const closeModal = () => {
 		isEditModalOpen = false;
-		selectedFruitId = null;
 		editForm = {
 			id: '',
 			name: '',
@@ -88,6 +85,7 @@
 				}, 3000);
 			}
 		} catch (error) {
+			console.error('Error deleting devil fruit:', error);
 			saveMessage = {
 				type: 'error',
 				text: 'Error deleting devil fruit'
@@ -150,7 +148,7 @@
 					</tr>
 				</thead>
 				<tbody>
-				{#each filteredFruits as fruit}
+				{#each filteredFruits as fruit (fruit.id)}
 					<tr class="border-b border-white/5 hover:bg-slate-800/50">
 						<td class="px-6 py-4 text-sm text-white">{fruit.name}</td>
 						<td class="px-6 py-4 text-sm">
@@ -233,7 +231,7 @@
 							bind:value={editForm.type}
 							class="mt-1 w-full rounded-lg bg-slate-700 px-4 py-2 text-sm text-white outline-none transition focus:ring-2 focus:ring-amber-600"
 						>
-							{#each fruitTypes as type}
+							{#each fruitTypes as type (type)}
 								<option value={type}>{type}</option>
 							{/each}
 						</select>