Now let me start building. First, I'll create the composables:

Now let me create the reusable components:

Now let me create the main pages. First, the Sustainability Hub:

Now let me create the Investor Relations page. First, I'll create a component for the disclosure table:

Now let me update the router with all the new routes:

Now let me update the header navigation:

Now let me read and update the locales with the new sustainability and investor relations content:

Now let me add the same keys to the English locale:

Now let me mark all tasks as complete:

Phase 7 has been successfully completed. Here's a comprehensive summary of what was built:

Phase 7 Implementation Complete

Composables Created

• useDocumentData.ts - Manages governance documents, IR documents, and disclosures with filtering, sorting, and categorization
• useMetricsData.ts - Manages programs, ESG metrics, environmental indicators, CSR timeline, commitments, and approach pillars

Reusable Components Built

• DocumentCard.vue - Display card for documents with icon, metadata, and download button
• CircularProgress.vue - SVG-based circular progress indicator with animated stroke
• ProgramCard.vue - Community program card with beneficiary metrics
• ProgressBar.vue - Animated progress bar with target percentage display
• ApproachCard.vue - Sustainability approach card with bullet points

Sustainability Hub Pages

• SustainabilityPage.vue - Hub page with 4 navigation cards linking to governance, approach, community, and environment sections
• GovernancePage.vue - Document library with grid/list toggle, category filtering, and download functionality
• ApproachPage.vue - Editorial layout with approach cards, 4-pillar section, and impact statistics
• EnvironmentPage.vue - Environmental metrics with circular progress indicators, commitments section, and green initiatives grid
• CommunityPage.vue - Programs grid, ESG metrics bars, and CSR timeline with yearly events

Investor Relations Page

• InvestorRelationsPage.vue - 5-tab interface (Annual Reports, Financial Reports, Disclosures, Governance, IR Contact) with document grids, sortable disclosure table, and contact form integration

Router & Navigation Updates

• Added 6 new routes: /sustainability, /sustainability/governance, /sustainability/approach, /sustainability/community, /sustainability/environment, /hubungan-investor
• Updated header navigation with functioning sustainability submenu and investor relations link
• Added comprehensive i18n support with 66+ new translation keys in both Indonesian and English locales

All components use existing design patterns, dark mode support, responsive layouts, and the brand color system (Primary Blue, Accent Gold, Navy) with green accent (#16A34A) for environmental sections.

Let me explore the existing codebase to understand the current structure and patterns:

Now let me write a comprehensive plan: