# src/admin/components/base/BaseProgress.vue
<template>
  <div class="progress-container">
    <div class="progress-bar-bg">
      <div 
        class="progress-bar"
        :class="{ 'bg-primary': value >= warningThreshold }"
        :style="{ width: `${value}%` }"
      >
      </div>
      <span class="progress-label">{{ value }}%</span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  value: {
    type: Number,
    required: true
  },
  warningThreshold: {
    type: Number,
    default: 80
  }
});
</script>

<style scoped>
.toggle-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.toggle-switch {
  width: 5rem;
  height: 2.5rem;
  background-color: #e2e8f0;
  border-radius: 9999px;
  transition: background-color 0.3s;
}
</style>