Use correct field display order in mobile app (#1473)

apps/mobile-app/app/(tabs)/items/[id].tsx

@@ -13,6 +13,7 @@ import { useColors } from '@/hooks/useColorScheme';
 
 import { AliasDetails } from '@/components/items/details/AliasDetails';
 import { AttachmentSection } from '@/components/items/details/AttachmentSection';
+import { CardDetails } from '@/components/items/details/CardDetails';
 import { CustomFieldsSection } from '@/components/items/details/CustomFieldsSection';
 import { EmailPreview } from '@/components/items/details/EmailPreview';
 import { LoginFields } from '@/components/items/details/LoginFields';
@@ -186,6 +187,7 @@ export default function ItemDetailsScreen() : React.ReactNode {
         <EmailPreview email={email} />
         <TotpSection item={item} />
         <LoginFields item={item} />
+        <CardDetails item={item} />
         <AliasDetails item={item} />
         <CustomFieldsSection item={item} />
         <NotesSection item={item} />

apps/mobile-app/components/items/details/CardDetails.tsx

@@ -0,0 +1,55 @@
+import { useTranslation } from 'react-i18next';
+
+import type { Item, ItemField } from '@/utils/dist/core/models/vault';
+import { FieldCategories, groupFieldsByCategory, ItemTypes } from '@/utils/dist/core/models/vault';
+
+import FieldBlock from '@/components/items/details/FieldBlock';
+import { ThemedText } from '@/components/themed/ThemedText';
+import { ThemedView } from '@/components/themed/ThemedView';
+
+type CardDetailsProps = {
+  item: Item;
+};
+
+/**
+ * Card details component for credit card items.
+ * Uses FieldBlock for automatic field type handling.
+ */
+export const CardDetails: React.FC<CardDetailsProps> = ({ item }): React.ReactNode => {
+  const { t } = useTranslation();
+
+  // Only show for CreditCard type
+  if (item.ItemType !== ItemTypes.CreditCard) {
+    return null;
+  }
+
+  // Group fields by category and get card fields (already sorted by DisplayOrder)
+  const groupedFields = groupFieldsByCategory(item);
+  const cardFields = groupedFields[FieldCategories.Card] ?? [];
+
+  if (cardFields.length === 0) {
+    return null;
+  }
+
+  return (
+    <ThemedView style={styles.section}>
+      <ThemedText type="subtitle">{t('items.cardInformation')}</ThemedText>
+
+      {/* Render card fields using FieldBlock */}
+      {cardFields.map((field: ItemField) => (
+        <FieldBlock
+          key={field.FieldKey}
+          field={field}
+          itemId={item.Id}
+        />
+      ))}
+    </ThemedView>
+  );
+};
+
+const styles = {
+  section: {
+    paddingTop: 16,
+    gap: 8,
+  },
+};

apps/mobile-app/i18n/locales/en.json

@@ -387,6 +387,7 @@
     "serviceName": "Service Name",
     "serviceUrl": "Service URL",
     "loginCredentials": "Login credentials",
+    "cardInformation": "Card Information",
     "username": "Username",
     "email": "Email",
     "alias": "Alias",

apps/mobile-app/utils/db/mappers/FieldMapper.ts

@@ -116,7 +116,7 @@ export class FieldMapper {
         FieldType: systemField?.FieldType || FieldTypes.Text,
         IsHidden: systemField?.IsHidden ? 1 : 0,
         Value: row.Value,
-        DisplayOrder: row.DisplayOrder,
+        DisplayOrder: systemField?.DefaultDisplayOrder ?? row.DisplayOrder,
         IsCustomField: false,
         EnableHistory: systemField?.EnableHistory ?? false
       };
@@ -173,7 +173,7 @@ export class FieldMapper {
             Label: row.FieldKey, // Use FieldKey as label; UI layer translates via fieldLabels.*
             FieldType: systemField?.FieldType || FieldTypes.Text,
             IsHidden: systemField?.IsHidden ? 1 : 0,
-            DisplayOrder: row.DisplayOrder,
+            DisplayOrder: systemField?.DefaultDisplayOrder ?? row.DisplayOrder,
             IsCustomField: false,
             EnableHistory: systemField?.EnableHistory ?? false
           });