feat: redesign section progress, report, link, file, dan cancel pada project & division/task

- SectionProgress: progress bar animated, badge persentase, label status, task count
- SectionReport: header ikon, left accent border, TextExpandable dengan label Indonesia
- SectionLink: tap langsung buka URL, ikon per domain, long press untuk hapus
- SectionFile: icon container konsisten 30×30 di semua section
- SectionCancel: card subtle dengan warna error, konsisten dengan visual language baru
- TextExpandable: fix bug show/hide tidak muncul setelah content diupdate
- Tambah 14 style class baru di Styles.ts untuk menggantikan inline style
- Terapkan semua perubahan ke fitur division/task
- Fix menu "Edit Tugas" di sectionTanggalTugasTask yang terpotong karena overflow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/sectionProgress.tsx

@@ -1,27 +1,87 @@
 import Styles from "@/constants/Styles";
 import { useTheme } from "@/providers/ThemeProvider";
-import { AntDesign } from "@expo/vector-icons";
-import { View } from "react-native";
-import ProgressBar from "./progressBar";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useEffect, useRef } from "react";
+import { Animated, View } from "react-native";
 import Text from "./Text";
 
 type Props = {
-   text: string,
    progress: number
+   doneCount?: number
+   totalCount?: number
 }
 
-export default function SectionProgress({ text, progress }: Props) {
+export default function SectionProgress({ progress, doneCount, totalCount }: Props) {
    const { colors } = useTheme();
+   const animatedWidth = useRef(new Animated.Value(0)).current;
+
+   const progressColor = colors.tabActive;
+
+   const statusLabel = progress === 100
+      ? 'Selesai'
+      : progress > 0
+         ? 'Sedang berlangsung'
+         : 'Belum dimulai';
+
+   useEffect(() => {
+      animatedWidth.setValue(0);
+      Animated.timing(animatedWidth, {
+         toValue: progress,
+         duration: 900,
+         useNativeDriver: false,
+      }).start();
+   }, [progress]);
 
    return (
-      <View style={[Styles.wrapPaper, Styles.rowItemsCenter, { backgroundColor: colors.card }]}>
-         <View style={[Styles.iconContent]}>
-            <AntDesign name="areachart" size={30} color={'black'} />
+      <View style={[
+         Styles.wrapPaper,
+         Styles.mb15,
+         Styles.sectionCard,
+         { backgroundColor: colors.card, borderColor: progressColor + '30' },
+      ]}>
+         <View style={Styles.sectionHeaderRow}>
+            <View style={Styles.flex1}>
+               <View style={Styles.rowItemsCenter}>
+                  <View style={[Styles.sectionIconBox, Styles.mr10, { backgroundColor: progressColor + '22' }]}>
+                     <MaterialCommunityIcons name="chart-line" size={18} color={progressColor} />
+                  </View>
+                  <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>
+                     Kemajuan Kegiatan
+                  </Text>
+               </View>
+               <Text style={[Styles.textMediumNormal, { color: colors.dimmed, marginLeft: 42 }]}>
+                  {statusLabel}
+               </Text>
+            </View>
+
+            <View style={Styles.badgeCol}>
+               <View style={[Styles.progressBadge, { backgroundColor: progressColor + '18', borderColor: progressColor + '45' }]}>
+                  <Text style={[Styles.textProgressPercent, { color: progressColor }]}>
+                     {progress}%
+                  </Text>
+               </View>
+               {totalCount !== undefined && doneCount !== undefined && (
+                  <View style={[Styles.taskCountBadge, { backgroundColor: progressColor + '18' }]}>
+                     <Text style={[Styles.textSmallSemiBold, { color: progressColor }]}>
+                        {doneCount}/{totalCount} tugas
+                     </Text>
+                  </View>
+               )}
+            </View>
          </View>
-         <View style={[Styles.ml10, { flex: 1 }]}>
-            <Text style={[Styles.mb05]}>{text}</Text>
-            <ProgressBar margin={0} category="page" value={progress} />
+
+         <View style={[Styles.progressTrack, { backgroundColor: colors.icon + '20' }]}>
+            <Animated.View style={[
+               Styles.progressFill,
+               {
+                  backgroundColor: progressColor,
+                  width: animatedWidth.interpolate({
+                     inputRange: [0, 100],
+                     outputRange: ['0%', '100%'],
+                  }),
+               },
+            ]} />
          </View>
       </View>
-   )
-}
+   );
+}