rebreak-monorepo/apps/rebreak-magic/app/components/UnknownIosDeviceCard.vue

<template>
  <div
    class="relative overflow-hidden rounded-2xl bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-800 p-5"
  >
    <div class="flex items-start gap-4">
      <div
        class="shrink-0 w-12 h-12 rounded-xl bg-amber-100 dark:bg-amber-800/50 flex items-center justify-center"
      >
        <UIcon
          name="i-heroicons-exclamation-triangle"
          class="w-6 h-6 text-amber-600 dark:text-amber-400"
        />
      </div>

      <div class="flex-1 min-w-0">
        <h3 class="text-base font-bold text-gray-900 dark:text-white">
          Dieses iPhone ist nicht erkennbar
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">
          Mit keinem ReBreak-Konto verbunden.
        </p>

        <div class="mt-3 text-sm text-gray-700 dark:text-gray-200 space-y-1">
          <p><span class="font-medium">Modell:</span> {{ displayModel(iphone.productType) }}</p>
          <p><span class="font-medium">iOS:</span> {{ iphone.productVersion }}</p>
          <p class="truncate"><span class="font-medium">UDID:</span> {{ iphone.udid }}</p>
        </div>

        <!-- MDM status for this UDID -->
        <div class="mt-4 rounded-xl bg-white/60 dark:bg-black/20 p-4">
          <div class="flex items-center justify-between mb-2">
            <p class="text-sm font-bold text-gray-900 dark:text-white">
              ReBreak Cloud-Status
            </p>
            <UBadge
              v-if="mdmLoading"
              color="neutral"
              variant="subtle"
              size="xs"
            >
              Lädt…
            </UBadge>
            <UBadge
              v-else-if="mdmStatus?.enrolled"
              color="success"
              variant="subtle"
              size="xs"
            >
              Enrolled
            </UBadge>
            <UBadge
              v-else
              color="warning"
              variant="subtle"
              size="xs"
            >
              Nicht enrolled
            </UBadge>
          </div>

          <p
            v-if="mdmError"
            class="text-xs text-red-600 dark:text-red-400"
          >
            {{ mdmError }}
          </p>

          <ul
            v-else-if="mdmStatus?.enrolled"
            class="space-y-1.5 text-sm text-gray-700 dark:text-gray-200"
          >
            <li class="flex items-center justify-between">
              <span class="text-gray-500 dark:text-gray-400">Enrollment</span>
              <span class="text-green-600 dark:text-green-400 font-medium">Ja</span>
            </li>
            <li class="flex items-center justify-between">
              <span class="text-gray-500 dark:text-gray-400">Supervised</span>
              <span :class="mdmStatus.supervised ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'" class="font-medium">
                {{ mdmStatus.supervised ? "Ja" : "Nein" }}
              </span>
            </li>
            <li class="flex items-center justify-between">
              <span class="text-gray-500 dark:text-gray-400">Organisation</span>
              <span class="font-medium">{{ mdmStatus.company ?? "—" }}</span>
            </li>
            <li class="flex items-center justify-between">
              <span class="text-gray-500 dark:text-gray-400">ReBreak App</span>
              <span :class="mdmStatus.lastAppPushAt ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'" class="font-medium">
                {{ mdmStatus.lastAppPushAt ? "Gepusht" : "Nicht gepusht" }}
              </span>
            </li>
          </ul>

          <div
            v-else-if="mdmStatus && !mdmStatus.enrolled && !mdmLoading"
            class="text-sm text-amber-800 dark:text-amber-300"
          >
            Dieses iPhone ist noch nicht in der ReBreak Cloud. Folge den Schritten unten, um es zu verwalten.
          </div>
        </div>

        <div class="mt-4 text-sm text-gray-600 dark:text-gray-300 bg-white/60 dark:bg-black/20 rounded-lg p-3">
          <p class="font-medium mb-1">So kannst du es verwalten:</p>
          <ol class="list-decimal list-inside space-y-0.5">
            <li>ReBreak-App auf diesem Gerät installieren</li>
            <li>Mit deinem Konto anmelden</li>
            <li>Das Gerät in der App registrieren</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useTauri, type IphoneDeviceState, type MdmStatusByUdidData } from "~/composables/useTauri";

const props = defineProps<{
  iphone: IphoneDeviceState;
}>();

const { getMdmStatusByUdid } = useTauri();

const mdmLoading = ref(false);
const mdmStatus = ref<MdmStatusByUdidData | null>(null);
const mdmError = ref<string | null>(null);

onMounted(async () => {
  mdmLoading.value = true;
  mdmError.value = null;
  try {
    mdmStatus.value = await getMdmStatusByUdid(props.iphone.udid);
  } catch (e: any) {
    mdmError.value = e?.message ?? "Cloud-Status konnte nicht geladen werden";
  } finally {
    mdmLoading.value = false;
  }
});

const productTypeMap: Record<string, string> = {
  "iPhone18,4": "iPhone Air",
  "iPhone17,1": "iPhone 16 Pro",
  "iPhone17,2": "iPhone 16 Pro Max",
  "iPhone17,3": "iPhone 16",
  "iPhone17,4": "iPhone 16 Plus",
  "iPhone16,1": "iPhone 15 Pro",
  "iPhone16,2": "iPhone 15 Pro Max",
  "iPhone15,4": "iPhone 15",
  "iPhone15,5": "iPhone 15 Plus",
};

function displayModel(productType: string): string {
  return productTypeMap[productType] ?? productType;
}
</script>