Fix database pages to use camelCase field names

- Update database grid navigation to use granblueId
- Update column definitions to use granblueId
- Fix all detail pages to use camelCase field names from transformed API responses
- Fix field names for HP/ATK stats, abilities, and metadata

src/lib/components/database/DatabaseGridWithProvider.svelte

@@ -72,11 +72,11 @@
 			console.log('Row selected:', ev)
 			const rowId = ev.id
 			if (rowId) {
-				// Find the row data to get the granblue_id
+				// Find the row data to get the granblueId
 				const rowData = data.find((item: any) => item.id === rowId)
-				if (rowData && rowData.granblue_id) {
-					console.log(`Navigating to: /database/${resource}/${rowData.granblue_id}`)
-					goto(`/database/${resource}/${rowData.granblue_id}`)
+				if (rowData && rowData.granblueId) {
+					console.log(`Navigating to: /database/${resource}/${rowData.granblueId}`)
+					goto(`/database/${resource}/${rowData.granblueId}`)
 				}
 			}
 		})

src/routes/database/characters/+page.svelte

@@ -13,7 +13,7 @@
 
 	const columns = [
 		{
-			id: 'granblue_id',
+			id: 'granblueId',
 			header: 'Image',
 			width: 80,
 			cell: CharacterImageCell

src/routes/database/characters/[id]/+page.svelte

@@ -38,7 +38,7 @@
 	// Editable fields - create reactive state for each field
 	let editData = $state({
 		name: character?.name || '',
-		granblue_id: character?.granblue_id || '',
+		granblueId: character?.granblueId || '',
 		rarity: character?.rarity || 1,
 		element: character?.element || 0,
 		race1: character?.race?.[0] ?? null,
@@ -46,12 +46,12 @@
 		gender: character?.gender || 0,
 		proficiency1: character?.proficiency?.[0] || 0,
 		proficiency2: character?.proficiency?.[1] || 0,
-		min_hp: character?.hp?.min_hp || 0,
-		max_hp: character?.hp?.max_hp || 0,
-		max_hp_flb: character?.hp?.max_hp_flb || 0,
-		min_atk: character?.atk?.min_atk || 0,
-		max_atk: character?.atk?.max_atk || 0,
-		max_atk_flb: character?.atk?.max_atk_flb || 0,
+		minHp: character?.hp?.minHp || 0,
+		maxHp: character?.hp?.maxHp || 0,
+		maxHpFlb: character?.hp?.maxHpFlb || 0,
+		minAtk: character?.atk?.minAtk || 0,
+		maxAtk: character?.atk?.maxAtk || 0,
+		maxAtkFlb: character?.atk?.maxAtkFlb || 0,
 		flb: character?.uncap?.flb || false,
 		ulb: character?.uncap?.ulb || false,
 		transcendence: character?.uncap?.transcendence || false,
@@ -63,7 +63,7 @@
 		if (character) {
 			editData = {
 				name: character.name || '',
-				granblue_id: character.granblue_id || '',
+				granblueId: character.granblueId || '',
 				rarity: character.rarity || 1,
 				element: character.element || 0,
 				race1: character.race?.[0] ?? null,
@@ -71,12 +71,12 @@
 				gender: character.gender || 0,
 				proficiency1: character.proficiency?.[0] || 0,
 				proficiency2: character.proficiency?.[1] || 0,
-				min_hp: character.hp?.min_hp || 0,
-				max_hp: character.hp?.max_hp || 0,
-				max_hp_flb: character.hp?.max_hp_flb || 0,
-				min_atk: character.atk?.min_atk || 0,
-				max_atk: character.atk?.max_atk || 0,
-				max_atk_flb: character.atk?.max_atk_flb || 0,
+				minHp: character.hp?.minHp || 0,
+				maxHp: character.hp?.maxHp || 0,
+				maxHpFlb: character.hp?.maxHpFlb || 0,
+				minAtk: character.atk?.minAtk || 0,
+				maxAtk: character.atk?.maxAtk || 0,
+				maxAtkFlb: character.atk?.maxAtkFlb || 0,
 				flb: character.uncap?.flb || false,
 				ulb: character.uncap?.ulb || false,
 				transcendence: character.uncap?.transcendence || false,
@@ -101,7 +101,7 @@
 		if (!editMode && character) {
 			editData = {
 				name: character.name || '',
-				granblue_id: character.granblue_id || '',
+				granblueId: character.granblueId || '',
 				rarity: character.rarity || 1,
 				element: character.element || 0,
 				race1: character.race?.[0] ?? null,
@@ -109,12 +109,12 @@
 				gender: character.gender || 0,
 				proficiency1: character.proficiency?.[0] || 0,
 				proficiency2: character.proficiency?.[1] || 0,
-				min_hp: character.hp?.min_hp || 0,
-				max_hp: character.hp?.max_hp || 0,
-				max_hp_flb: character.hp?.max_hp_flb || 0,
-				min_atk: character.atk?.min_atk || 0,
-				max_atk: character.atk?.max_atk || 0,
-				max_atk_flb: character.atk?.max_atk_flb || 0,
+				minHp: character.hp?.minHp || 0,
+				maxHp: character.hp?.maxHp || 0,
+				maxHpFlb: character.hp?.maxHpFlb || 0,
+				minAtk: character.atk?.minAtk || 0,
+				maxAtk: character.atk?.maxAtk || 0,
+				maxAtkFlb: character.atk?.maxAtkFlb || 0,
 				flb: character.uncap?.flb || false,
 				ulb: character.uncap?.ulb || false,
 				transcendence: character.uncap?.transcendence || false,
@@ -132,21 +132,21 @@
 			// Prepare the data for API
 			const payload = {
 				name: editData.name,
-				granblue_id: editData.granblue_id,
+				granblue_id: editData.granblueId,
 				rarity: editData.rarity,
 				element: editData.element,
 				race: [editData.race1, editData.race2].filter(r => r !== null && r !== undefined),
 				gender: editData.gender,
 				proficiency: [editData.proficiency1, editData.proficiency2],
 				hp: {
-					min_hp: editData.min_hp,
-					max_hp: editData.max_hp,
-					max_hp_flb: editData.max_hp_flb
+					min_hp: editData.minHp,
+					max_hp: editData.maxHp,
+					max_hp_flb: editData.maxHpFlb
 				},
 				atk: {
-					min_atk: editData.min_atk,
-					max_atk: editData.max_atk,
-					max_atk_flb: editData.max_atk_flb
+					min_atk: editData.minAtk,
+					max_atk: editData.maxAtk,
+					max_atk_flb: editData.maxAtkFlb
 				},
 				uncap: {
 					flb: editData.flb,
@@ -183,8 +183,8 @@
 
 	// Helper function to get character image
 	function getCharacterImage(character: any): string {
-		if (!character?.granblue_id) return '/images/placeholders/placeholder-character-main.png'
-		return `/images/character-grid/${character.granblue_id}_01.jpg`
+		if (!character?.granblueId) return '/images/placeholders/placeholder-character-main.png'
+		return `/images/character-grid/${character.granblueId}_01.jpg`
 	}
 
 	// Calculate uncap properties for the indicator
@@ -240,13 +240,13 @@
 					/>
 					<DetailItem
 						label="Granblue ID"
-						bind:value={editData.granblue_id}
+						bind:value={editData.granblueId}
 						editable={true}
 						type="text"
 					/>
 				{:else}
 					<DetailItem label="Rarity" value={getRarityLabel(character.rarity)} />
-					<DetailItem label="Granblue ID" value={character.granblue_id} />
+					<DetailItem label="Granblue ID" value={character.granblueId} />
 				{/if}
 			</DetailsContainer>
 			<DetailsContainer title="Details">
@@ -341,30 +341,30 @@
 				{#if editMode}
 					<DetailItem
 						label="Base HP"
-						bind:value={editData.min_hp}
+						bind:value={editData.minHp}
 						editable={true}
 						type="number"
 						placeholder="0"
 					/>
 					<DetailItem
 						label="Max HP"
-						bind:value={editData.max_hp}
+						bind:value={editData.maxHp}
 						editable={true}
 						type="number"
 						placeholder="0"
 					/>
 					<DetailItem
 						label="Max HP (FLB)"
-						bind:value={editData.max_hp_flb}
+						bind:value={editData.maxHpFlb}
 						editable={true}
 						type="number"
 						placeholder="0"
 					/>
 				{:else}
-					<DetailItem label="Base HP" value={character.hp?.min_hp} />
-					<DetailItem label="Max HP" value={character.hp?.max_hp} />
+					<DetailItem label="Base HP" value={character.hp?.minHp} />
+					<DetailItem label="Max HP" value={character.hp?.maxHp} />
 					{#if flb}
-						<DetailItem label="Max HP (FLB)" value={character.hp?.max_hp_flb} />
+						<DetailItem label="Max HP (FLB)" value={character.hp?.maxHpFlb} />
 					{/if}
 				{/if}
 			</DetailsContainer>
@@ -373,30 +373,30 @@
 				{#if editMode}
 					<DetailItem
 						label="Base Attack"
-						bind:value={editData.min_atk}
+						bind:value={editData.minAtk}
 						editable={true}
 						type="number"
 						placeholder="0"
 					/>
 					<DetailItem
 						label="Max Attack"
-						bind:value={editData.max_atk}
+						bind:value={editData.maxAtk}
 						editable={true}
 						type="number"
 						placeholder="0"
 					/>
 					<DetailItem
 						label="Max Attack (FLB)"
-						bind:value={editData.max_atk_flb}
+						bind:value={editData.maxAtkFlb}
 						editable={true}
 						type="number"
 						placeholder="0"
 					/>
 				{:else}
-					<DetailItem label="Base Attack" value={character.atk?.min_atk} />
-					<DetailItem label="Max Attack" value={character.atk?.max_atk} />
+					<DetailItem label="Base Attack" value={character.atk?.minAtk} />
+					<DetailItem label="Max Attack" value={character.atk?.maxAtk} />
 					{#if flb}
-						<DetailItem label="Max Attack (FLB)" value={character.atk?.max_atk_flb} />
+						<DetailItem label="Max Attack (FLB)" value={character.atk?.maxAtkFlb} />
 					{/if}
 				{/if}
 			</DetailsContainer>

src/routes/database/summons/+page.svelte

@@ -12,7 +12,7 @@
 	// Column configuration for summons
 	const columns: IColumn[] = [
 		{
-			id: 'granblue_id',
+			id: 'granblueId',
 			header: 'Image',
 			width: 80,
 			cell: SummonImageCell

src/routes/database/summons/[id]/+page.svelte

@@ -17,8 +17,8 @@
 
 	// Helper function to get summon image
 	function getSummonImage(summon: any): string {
-		if (!summon?.granblue_id) return '/images/placeholders/placeholder-summon-main.png'
-		return `/images/summon-grid/${summon.granblue_id}.jpg`
+		if (!summon?.granblueId) return '/images/placeholders/placeholder-summon-main.png'
+		return `/images/summon-grid/${summon.granblueId}.jpg`
 	}
 
 	// Calculate uncap properties for the indicator
@@ -44,30 +44,30 @@
 			<DetailsHeader type="summon" item={summon} image={getSummonImage(summon)} />
 
 			<DetailsContainer title="HP Stats">
-				<DetailItem label="Base HP" value={summon.hp?.min_hp} />
-				<DetailItem label="Max HP" value={summon.hp?.max_hp} />
+				<DetailItem label="Base HP" value={summon.hp?.minHp} />
+				<DetailItem label="Max HP" value={summon.hp?.maxHp} />
 				{#if flb}
-					<DetailItem label="Max HP (FLB)" value={summon.hp?.max_hp_flb} />
+					<DetailItem label="Max HP (FLB)" value={summon.hp?.maxHpFlb} />
 				{/if}
 				{#if ulb}
-					<DetailItem label="Max HP (ULB)" value={summon.hp?.max_hp_ulb} />
+					<DetailItem label="Max HP (ULB)" value={summon.hp?.maxHpUlb} />
 				{/if}
 				{#if transcendence}
-					<DetailItem label="Max HP (XLB)" value={summon.hp?.max_hp_xlb} />
+					<DetailItem label="Max HP (XLB)" value={summon.hp?.maxHpXlb} />
 				{/if}
 			</DetailsContainer>
 
 			<DetailsContainer title="Attack Stats">
-				<DetailItem label="Base Attack" value={summon.atk?.min_atk} />
-				<DetailItem label="Max Attack" value={summon.atk?.max_atk} />
+				<DetailItem label="Base Attack" value={summon.atk?.minAtk} />
+				<DetailItem label="Max Attack" value={summon.atk?.maxAtk} />
 				{#if flb}
-					<DetailItem label="Max Attack (FLB)" value={summon.atk?.max_atk_flb} />
+					<DetailItem label="Max Attack (FLB)" value={summon.atk?.maxAtkFlb} />
 				{/if}
 				{#if ulb}
-					<DetailItem label="Max Attack (ULB)" value={summon.atk?.max_atk_ulb} />
+					<DetailItem label="Max Attack (ULB)" value={summon.atk?.maxAtkUlb} />
 				{/if}
 				{#if transcendence}
-					<DetailItem label="Max Attack (XLB)" value={summon.atk?.max_atk_xlb} />
+					<DetailItem label="Max Attack (XLB)" value={summon.atk?.maxAtkXlb} />
 				{/if}
 			</DetailsContainer>
 
@@ -91,11 +91,11 @@
 			<div class="summon-abilities">
 				<h3>Call Effect</h3>
 				<div class="abilities-section">
-					{#if summon.call_name || summon.call_description}
+					{#if summon.callName || summon.callDescription}
 						<div class="ability-item">
-							<h4 class="ability-name">{summon.call_name || 'Call Effect'}</h4>
+							<h4 class="ability-name">{summon.callName || 'Call Effect'}</h4>
 							<p class="ability-description">
-								{summon.call_description || 'No description available'}
+								{summon.callDescription || 'No description available'}
 							</p>
 						</div>
 					{:else}
@@ -105,11 +105,11 @@
 
 				<h3>Aura Effect</h3>
 				<div class="abilities-section">
-					{#if summon.aura_name || summon.aura_description}
+					{#if summon.auraName || summon.auraDescription}
 						<div class="ability-item">
-							<h4 class="ability-name">{summon.aura_name || 'Aura Effect'}</h4>
+							<h4 class="ability-name">{summon.auraName || 'Aura Effect'}</h4>
 							<p class="ability-description">
-								{summon.aura_description || 'No description available'}
+								{summon.auraDescription || 'No description available'}
 							</p>
 						</div>
 					{:else}
@@ -117,13 +117,13 @@
 					{/if}
 				</div>
 
-				{#if summon.sub_aura_name || summon.sub_aura_description}
+				{#if summon.subAuraName || summon.subAuraDescription}
 					<h3>Sub Aura Effect</h3>
 					<div class="abilities-section">
 						<div class="ability-item">
-							<h4 class="ability-name">{summon.sub_aura_name || 'Sub Aura Effect'}</h4>
+							<h4 class="ability-name">{summon.subAuraName || 'Sub Aura Effect'}</h4>
 							<p class="ability-description">
-								{summon.sub_aura_description || 'No description available'}
+								{summon.subAuraDescription || 'No description available'}
 							</p>
 						</div>
 					</div>

src/routes/database/weapons/+page.svelte

@@ -13,7 +13,7 @@
 	// Column configuration for weapons
 	const columns: IColumn[] = [
 		{
-			id: 'granblue_id',
+			id: 'granblueId',
 			header: 'Image',
 			width: 80,
 			cell: WeaponImageCell

src/routes/database/weapons/[id]/+page.svelte

@@ -18,13 +18,13 @@
 
 	// Helper function to get weapon image
 	function getWeaponImage(weapon: any): string {
-		if (!weapon?.granblue_id) return '/images/placeholders/placeholder-weapon-main.png'
+		if (!weapon?.granblueId) return '/images/placeholders/placeholder-weapon-main.png'
 
 		// Handle element-specific weapons (primal weapons)
-		if (weapon.element === 0 && weapon.instance_element) {
-			return `/images/weapon-grid/${weapon.granblue_id}_${weapon.instance_element}.jpg`
+		if (weapon.element === 0 && weapon.instanceElement) {
+			return `/images/weapon-grid/${weapon.granblueId}_${weapon.instanceElement}.jpg`
 		}
-		return `/images/weapon-grid/${weapon.granblue_id}.jpg`
+		return `/images/weapon-grid/${weapon.granblueId}.jpg`
 	}
 
 	// Calculate uncap properties for the indicator
@@ -50,8 +50,8 @@
 			<DetailsHeader type="weapon" item={weapon} image={getWeaponImage(weapon)} />
 
 			<DetailsContainer title="Level & Skill">
-				<DetailItem label="Max Level" value={weapon.max_level} />
-				<DetailItem label="Max Skill Level" value={weapon.skill_level_cap} />
+				<DetailItem label="Max Level" value={weapon.maxLevel} />
+				<DetailItem label="Max Skill Level" value={weapon.skillLevelCap} />
 				{#if weapon.uncap}
 					<DetailItem label="Uncap">
 						<UncapIndicator
@@ -68,24 +68,24 @@
 			</DetailsContainer>
 
 			<DetailsContainer title="HP Stats">
-				<DetailItem label="Base HP" value={weapon.hp?.min_hp} />
-				<DetailItem label="Max HP" value={weapon.hp?.max_hp} />
+				<DetailItem label="Base HP" value={weapon.hp?.minHp} />
+				<DetailItem label="Max HP" value={weapon.hp?.maxHp} />
 				{#if flb}
-					<DetailItem label="Max HP (FLB)" value={weapon.hp?.max_hp_flb} />
+					<DetailItem label="Max HP (FLB)" value={weapon.hp?.maxHpFlb} />
 				{/if}
 				{#if ulb}
-					<DetailItem label="Max HP (ULB)" value={weapon.hp?.max_hp_ulb} />
+					<DetailItem label="Max HP (ULB)" value={weapon.hp?.maxHpUlb} />
 				{/if}
 			</DetailsContainer>
 
 			<DetailsContainer title="Attack Stats">
-				<DetailItem label="Base Attack" value={weapon.atk?.min_atk} />
-				<DetailItem label="Max Attack" value={weapon.atk?.max_atk} />
+				<DetailItem label="Base Attack" value={weapon.atk?.minAtk} />
+				<DetailItem label="Max Attack" value={weapon.atk?.maxAtk} />
 				{#if flb}
-					<DetailItem label="Max Attack (FLB)" value={weapon.atk?.max_atk_flb} />
+					<DetailItem label="Max Attack (FLB)" value={weapon.atk?.maxAtkFlb} />
 				{/if}
 				{#if ulb}
-					<DetailItem label="Max Attack (ULB)" value={weapon.atk?.max_atk_ulb} />
+					<DetailItem label="Max Attack (ULB)" value={weapon.atk?.maxAtkUlb} />
 				{/if}
 			</DetailsContainer>