feat: redesign halaman pengumuman dan pindahkan styles ke announcement.styles.ts

- Redesign list, detail, create, dan edit pengumuman menggunakan pola sectionCard
- Buat constants/styles/announcement.styles.ts untuk class announcementList* dan announcementDetail*
- Hapus local StyleSheet S dari index.tsx dan [id].tsx, ganti dengan Styles global
- Tambah getFileIcon/getFileColor helper dan fileGrid berwarna per tipe file
- Sesuaikan edit/[id].tsx dengan pola design create.tsx

constants/styles/announcement.styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from "react-native";
+
+const AnnouncementStyles = StyleSheet.create({
+   // list (index.tsx)
+   announcementListContainer:     { padding: 15, paddingBottom: 0 },
+   announcementListInner:         { marginTop: 10 },
+   announcementListCard:          { borderRadius: 10, borderWidth: 1, padding: 12 },
+   announcementListCardHeader:    { marginBottom: 6 },
+   announcementListTitleRow:      { flex: 1, gap: 8, marginRight: 8, flexDirection: 'row', alignItems: 'center' },
+   announcementListIconBox:       { width: 28, height: 28, borderRadius: 8, alignItems: 'center', justifyContent: 'center' },
+   announcementListTitleText:     { flex: 1 },
+   announcementListDateText:      { flexShrink: 0 },
+   announcementListDescText:      { lineHeight: 20 },
+   announcementListSeparator:     { height: 8 },
+   announcementListSkeletonCard:  { gap: 8 },
+   announcementListSkeletonHeader: { marginBottom: 4 },
+   announcementListSkeletonTitleRow: { gap: 8, flex: 1, flexDirection: 'row', alignItems: 'center' },
+
+   // detail ([id].tsx)
+   announcementDetailContainer:         { padding: 15, paddingBottom: 50, gap: 12 },
+   announcementDetailCard:              { borderRadius: 10 },
+   announcementDetailSkeletonGap:       { gap: 8 },
+   announcementDetailSkeletonIconRow:   { gap: 10, marginBottom: 2 },
+   announcementDetailTitleRow:          { gap: 10, marginBottom: 10 },
+   announcementDetailIconBox:           { width: 38, height: 38, borderRadius: 10 },
+   announcementDetailTitleText:         { fontSize: 17, lineHeight: 24, flex: 1 },
+   announcementDetailSectionLabelRow:   { marginBottom: 8, gap: 6 },
+   announcementDetailFileCardPadding:   { padding: 10 },
+   announcementDetailFileChipList:      { gap: 8 },
+   announcementDetailFileChip:          { flexDirection: 'row', alignItems: 'center', gap: 6, paddingHorizontal: 12, paddingVertical: 8, borderRadius: 20, borderWidth: 1 },
+   announcementDetailFileChipText:      { maxWidth: 120 },
+   announcementDetailRecipientGap:      { gap: 10 },
+   announcementDetailGroupSeparator:    { marginTop: 12, paddingTop: 12, borderTopWidth: 1 },
+   announcementDetailGroupLabel:        { marginBottom: 6 },
+   announcementDetailDivisionRow:       { gap: 8, paddingVertical: 6 },
+   announcementDetailDivisionIconCircle: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },
+});
+
+export default AnnouncementStyles;

constants/styles/button.styles.ts

@@ -37,8 +37,8 @@ const ButtonStyles = StyleSheet.create({
       padding: 5,
       borderWidth: 1,
    },
-   labelStatus: { paddingHorizontal: 15, borderRadius: 10 },
-   labelStatusSmall: { paddingHorizontal: 10, borderRadius: 10 },
+   labelStatus: { paddingHorizontal: 15, paddingVertical: 4, borderRadius: 10 },
+   labelStatusSmall: { paddingHorizontal: 10, paddingVertical: 3, borderRadius: 10 },
 });
 
 export default ButtonStyles;

constants/styles/index.ts

@@ -11,6 +11,7 @@ import HeaderStyles from './header.styles';
 import ComponentStyles from './component.styles';
 import NotificationStyles from './notification.styles';
 import ApprovalStyles from './approval.styles';
+import AnnouncementStyles from './announcement.styles';
 
 const Styles = StyleSheet.create({
    ...SpacingStyles,
@@ -25,6 +26,7 @@ const Styles = StyleSheet.create({
    ...ComponentStyles,
    ...NotificationStyles,
    ...ApprovalStyles,
+   ...AnnouncementStyles,
 });
 
 export default Styles;