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/textExpandable.tsx

@@ -1,32 +1,38 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useRef, useState, useEffect } from "react";
 import { Animated, Pressable, View } from "react-native";
 import Text from "./Text";
 
 export default function TextExpandable({ content, maxLines }: { content: string, maxLines: number }) {
+   const { colors } = useTheme();
    const [isExpanded, setIsExpanded] = useState(false);
    const [shouldShowMore, setShouldShowMore] = useState(false);
    const [collapsedHeight, setCollapsedHeight] = useState(0);
    const [fullHeight, setFullHeight] = useState(0);
    const animatedHeight = useRef(new Animated.Value(0)).current;
 
+   useEffect(() => {
+      setCollapsedHeight(0);
+      setFullHeight(0);
+      setShouldShowMore(false);
+      setIsExpanded(false);
+   }, [content]);
+
    const measureCollapsed = (e: any) => {
-      if (collapsedHeight === 0) {
-         setCollapsedHeight(e.nativeEvent.layout.height);
-         animatedHeight.setValue(e.nativeEvent.layout.height);
-      }
+      const h = e.nativeEvent.layout.height;
+      setCollapsedHeight(h);
+      animatedHeight.setValue(h);
    };
 
    const measureFull = (e: any) => {
-      if (fullHeight === 0) {
-         setFullHeight(e.nativeEvent.layout.height);
-      }
+      setFullHeight(e.nativeEvent.layout.height);
    };
 
-   // Cek apakah memang perlu "View More"
    useEffect(() => {
       if (collapsedHeight > 0 && fullHeight > 0) {
-         setShouldShowMore(fullHeight > collapsedHeight + 1); // +1 untuk toleransi float
+         setShouldShowMore(fullHeight > collapsedHeight + 1);
       }
    }, [collapsedHeight, fullHeight]);
 
@@ -41,41 +47,34 @@ export default function TextExpandable({ content, maxLines }: { content: string,
 
    return (
       <View>
-         {/* Hidden full text for measurement */}
          <View style={Styles.hidden}>
             <Text style={Styles.textDefault} onLayout={measureFull}>
                {content}
             </Text>
          </View>
 
-         {/* Collapsed text for measurement */}
          <View style={Styles.hidden}>
-            <Text
-               numberOfLines={maxLines}
-               style={Styles.textDefault}
-               onLayout={measureCollapsed}
-               ellipsizeMode="tail"
-            >
+            <Text numberOfLines={maxLines} style={Styles.textDefault} onLayout={measureCollapsed} ellipsizeMode="tail">
                {content}
             </Text>
          </View>
 
-         {/* Animated visible text */}
          <Animated.View style={{ height: animatedHeight, overflow: 'hidden' }}>
-            <Text
-               style={Styles.textDefault}
-               numberOfLines={isExpanded ? undefined : maxLines}
-               ellipsizeMode="tail"
-            >
+            <Text style={Styles.textDefault} numberOfLines={isExpanded ? undefined : maxLines} ellipsizeMode="tail">
                {content}
             </Text>
          </Animated.View>
 
          {shouldShowMore && (
-            <Pressable onPress={toggleExpand}>
-               <Text style={Styles.textLink}>
-                  {isExpanded ? 'View Less' : 'View More'}
+            <Pressable onPress={toggleExpand} style={Styles.expandBtn}>
+               <Text style={[Styles.textMediumSemiBold, { color: colors.tabActive }]}>
+                  {isExpanded ? 'Sembunyikan' : 'Lihat selengkapnya'}
                </Text>
+               <MaterialCommunityIcons
+                  name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                  size={16}
+                  color={colors.tabActive}
+               />
             </Pressable>
          )}
       </View>