إدارة استهلاك الطاقة: وضع التوفير وقياس التحسّن

import { View, Text, StyleSheet } from 'react-native';import { useBattery } from 'smartdevice'; export default function App() {  const bat = useBattery();  const eco = bat.saver || bat.level < 20;      // وضع التوفير نشط؟  return (    <View style={[styles.box, eco && styles.ecoBox]}>      <Text style={[styles.h, eco && { color: '#A5D6A7' }]}>        {eco ? '🍃 وضع التوفير' : '⚡ الوضع العاديّ'}      </Text>      <Text style={eco ? styles.ecoText : styles.text}>        {eco          ? 'قراءة المستشعرات كل 5 ثوانٍ، بلا حركات، ثيمٌ داكن.'          : 'تحديثٌ فوريّ، حركاتٌ كاملة، ثيمٌ فاتح.'}      </Text>      <Text style={styles.lvl}>البطارية: {bat.level}%</Text>    </View>  );} const styles = StyleSheet.create({  box: { padding: 22, borderRadius: 14, margin: 10, backgroundColor: '#FFF8E1' },  ecoBox: { backgroundColor: '#14241A' },  h: { fontSize: 20, fontWeight: 'bold', color: '#E8820C' },  text: { marginTop: 8, color: '#5D4037' },  ecoText: { marginTop: 8, color: '#C8E6C9' },  lvl: { marginTop: 10, color: '#888' },});

import { View, Text, StyleSheet } from 'react-native'; // وحدات طاقة تقديريّة لكل نشاط (في الدقيقة)const COST = { sensorHz: 2, animation: 3, refresh: 1, brightness: 4 }; function estimate({ sensorHz, animations, refreshes, brightness }) {  return sensorHz * COST.sensorHz + animations * COST.animation       + refreshes * COST.refresh + brightness * COST.brightness;} export default function App() {  const base = estimate({ sensorHz: 10, animations: 1, refreshes: 10, brightness: 8 });  const eco  = estimate({ sensorHz: 2,  animations: 0, refreshes: 3,  brightness: 3 });  const saved = Math.round((1 - eco / base) * 100);   return (    <View style={styles.box}>      <Row label="الوضع الأساسيّ" value={base + ' وحدة'} />      <Row label="وضع التوفير" value={eco + ' وحدة'} />      <Text testID="saved" style={[styles.saved, { color: saved >= 15 ? '#2E7D32' : '#C62828' }]}>        خفضٌ بنسبة {saved}% {saved >= 15 ? '✅ تجاوز الهدف (15%)' : '✗ دون الهدف'}      </Text>    </View>  );} function Row({ label, value }) {  return (    <View style={styles.row}>      <Text style={styles.l}>{label}</Text>      <Text style={styles.v}>{value}</Text>    </View>  );} const styles = StyleSheet.create({  box: { padding: 20, margin: 10 },  row: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 8, borderBottomWidth: 1, borderColor: '#eee' },  l: { color: '#555' }, v: { fontWeight: 'bold', color: '#E8820C' },  saved: { marginTop: 14, fontSize: 18, fontWeight: 'bold', textAlign: 'center' },});