Fix/acaptutorials 36

docs/pages/articles/provinces-municipalities.mdx

@@ -1,24 +1,43 @@
+import { useEffect, useState, useMemo } from 'react'
 import { Callout, FileTree, Steps } from 'nextra/components'
-
-export function FAQBox({ title, children, open=false }) {
-  return (
-    <details
-      open={open}
-      className="last-of-type:mb-0 rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2 mt-4"
-    >
-      <summary>
-        <strong className="text-md">{title}</strong>
-      </summary>
-      <div className="nx-p-2">{children}</div>
-    </details>
-  )
+import { useTheme } from 'next-themes'
+
+export function FAQBox({ title, children, open = false }) {
+  const [isClient, setIsClient] = useState(false)
+  const { theme, resolvedTheme } = useTheme()
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  const detailsBgStyle = useMemo(() => {
+    const bg = resolvedTheme === 'dark'
+    ? 'bg-neutral-800'
+    : 'bg-neutral-50'
+
+    return `last-of-type:mb-0 rounded-lg ${bg} p-2 mt-4`
+  }, [resolvedTheme])
+
+  return !isClient
+    ? <div>...</div>
+    : (
+      <details
+        open={open}
+        className={detailsBgStyle}
+      >
+        <summary>
+          <strong className="text-md">{title}</strong>
+        </summary>
+        <div className="nx-p-2">{children}</div>
+      </details>
+    )
 }
 
 # Provinces and Municipalities
 
 ## Data Source
 
-ACAP uses a combination of the [PAGASA 10-day weather forecast Excel files](https://www.pagasa.dost.gov.ph/climate/climate-prediction/10-day-climate-forecast) and the [PAGASA Seasonal Forecast- Rainfall Analysis Table](https://www.pagasa.dost.gov.ph/climate/climate-prediction/seasonal-forecast) as a data source for its region, provinces, and municipalities list.
+ACAP uses a combination of the [PAGASA 10-day weather forecast Excel files](https://www.pagasa.dost.gov.ph/climate/climate-prediction/10-day-climate-forecast) and the [PAGASA Seasonal Forecast- Forecast Rainfall Analysis Table](https://www.pagasa.dost.gov.ph/climate/climate-prediction/seasonal-forecast) as a data source for its region, provinces, and municipalities list.
 
 ## FAQs
 
@@ -27,17 +46,19 @@ ACAP uses the provinces and municipalities list defined in the [PAGASA 10-day we
 </FAQBox>
 
 <FAQBox title="The PAGASA 10-day weather forecast Excel files do not have region names. How does ACAP know which provinces belong to a region?">
-ACAP uses the region-province grouping from the [PAGASA Seasonal Forecast](https://www.pagasa.dost.gov.ph/climate/climate-prediction/seasonal-forecast) - Rainfall Analysis Table to determine which provinces belong to a region as a reference since it also processes provincial seasonal weather forecast information from the PAGASA Seasonal Forecast. ACAP expects province naming from the two (2) data sources (PAGASA 10-day and Seasonal weather forecasts) to match since both are data products produced by PAGASA.
+ACAP uses the region-province grouping from the [PAGASA Seasonal Forecast](https://www.pagasa.dost.gov.ph/climate/climate-prediction/seasonal-forecast) - Forecast Rainfall Analysis Table to determine which provinces belong to a region as a reference since it also processes provincial seasonal weather forecast information from the PAGASA Seasonal Forecast. ACAP expects province naming from the two (2) data sources (PAGASA 10-day and Seasonal weather forecasts) to match since both are data products produced by PAGASA.
+
+> Regions with a memorandum of agreement with PAGASA also receive Seasonal Weather Forecast data in an Excel file containing the Seasonal Forecast Rainfall Analysis Table through email.
 
 ACAP initializes its province list during the [Server Setup](/installation/server-setup/#initialize-provinces-and-municipalities) stage.
 </FAQBox>
 
 <FAQBox title="Do province names from the PAGASA Seasonal Forecast data always match with the province names in the PAGASA 10-day Excel files?">
-No. After more recent tests, it came to light that some province names defined in the <u>PAGASA Seasonal Forecast (Rainfall Table)</u> may not always match the province names defined in the <u>PAGASA 10-day Excel</u> files.
+No. After more recent tests, it came to light that some province names defined in the <u>PAGASA Seasonal Forecast (Forecast Rainfall Analysis Table)</u> may not always match the province names defined in the <u>PAGASA 10-day Excel</u> files.
 
-For example, as of _September 17, 2024_, the `"Davao Occidental"` province is present in the PAGASA Seasonal Forecast (Rainfall Table) under **Region XI (Davao Region)**. However, it is missing in the PAGASA 10-Day Excel files.
+For example, as of _September 17, 2024_, the `"Davao Occidental"` province is present in the PAGASA Seasonal Forecast (Forecast Rainfall Analysis Table) under **Region XI (Davao Region)**. However, it is missing in the PAGASA 10-Day Excel files.
 
-Similarly, the `"Shariff Kabunsuan"` province is available in the PAGASA 10-Day Excel files, but it is nowhere to be found in the PAGASA Seasonal Forecast (Rainfall Table).
+Similarly, the `"Shariff Kabunsuan"` province is available in the PAGASA 10-Day Excel files, but it is nowhere to be found in the PAGASA Seasonal Forecast (Forecast Rainfall Analysis Table).
 
 Refer to the [Regional Provinces / Municipalities Inconsistency](#regional-provinces--municipalities-inconsistency) section for more information about possible causes of region/province/municipality naming inconsistencies.
 </FAQBox>

docs/pages/changelog.mdx

@@ -135,7 +135,7 @@ _June 2023 onwards_
 
 #### Changed
 
-- Used `.env` variables to manage region-specific static text in the front end, ensuring the base model of the application can be extended and adapted for multiple regions with different (text content) requirements, allowing easier regional static text replacement.
+- Used `.env` variables to manage region-specific static text in the front end, ensuring the base model of the application can be easily adapted for multiple regions with different text content requirements, allowing easier regional static text replacement.
 
 - Use `nda` values for null/empty seasonal weather forecast data in the backend and front end, borrowed from the ongoing ACAP-RCMAS API development.
 

docs/pages/installation/server-setup.mdx

@@ -45,28 +45,35 @@ Create a `.env` file inside the **/server** directory. Copy the contents of the
 
 ### Initialize provinces and municipalities
 
-Run ACAP's `"pagasa:municipalities"` NPM script to get a list of the latest  PAGASA-updated municipalities and province names.
+<Callout>
+ACAP refers to the [PAGASA Seasonal Forecast - Forecast Rainfall Analysis Table](https://www.pagasa.dost.gov.ph/climate/climate-prediction/seasonal-forecast) for its regional provinces list, matching the province names with those listed in the [PAGASA 10-day Weather Forecast Excel](https://www.pagasa.dost.gov.ph/climate/climate-prediction/10-day-climate-forecast) files.
 
-1. First navigate to the server directory from the command line then run:
+ACAP expects province naming from the two (2) data sources to match since both are data products produced by PAGASA.
+</Callout>
+
+Run ACAP's `"pagasa:municipalities"` NPM script to get a list of the PAGASA municipalities and province names.
+
+1. First, navigate to the server directory from the command line, then run:
    ```bash copy
    npm run pagasa:municipalities
    ```
-2. Enter PAGASA's 10-day excel file URL when prompted.
-   - These files, updated daily around 8:00 AM are available on https://www.pagasa.dost.gov.ph/climate/climate-prediction/10-day-climate-forecast
-   - Enter a specific PAGASA's 10-day excel file URL when prompted:
+   > **INFO:** The `"pagasa:municipalities"` NPM script uses a static-encoded region/province mapping file, manually encoded in 2024 with reference from the <u>PAGASA Seasonal Forecast - Forecast Rainfall Analysis</u> table.
+2. Enter PAGASA's 10-day Excel file URL when prompted.
+   - These files, updated daily around 8:00 AM, are available on https://www.pagasa.dost.gov.ph/climate/climate-prediction/10-day-climate-forecast
+   - Enter a specific PAGASA's 10-day Excel file URL when prompted:
       ```bash copy
       https://pubfiles.pagasa.dost.gov.ph/pagasaweb/files/climate/tendayweatheroutlook/day1.xlsx
-      ```
-3. Replace the `PROVINCES` and `PROVINCES_ARCHIVE` variables with the comma-separated province names of your new target region resulting from **step #2**.
-4. Replace the `DEFAULT_PROVINCE` .env variable with any province name from the `PROVINCES` comma-separated province names.
+      `````
+3. Double-check the resulting province names from **step #2** with those listed in the latest [PAGASA Seasonal Forecast - Forecast Rainfall Analysis](https://www.pagasa.dost.gov.ph/climate/climate-prediction/seasonal-forecast) table. Take note of **new province(s)** not included in the generated list, or **remove** provinces no longer present in the Forecast Rainfall Analysis table.
+   <Callout type="warning">
+   The `"pagasa:municipalities"` NPM script may generate an outdated or incorrect list of provinces of a region depending on several factors.
 
-<Callout type="warning">
-The `"pagasa:municipalities"` NPM script may generate an outdated or incorrect list of provinces of a region depending on several factors.
+   - Visit the [Provinces and Municipalities FAQs](/articles/provinces-municipalities/#faqs) or the [Regional Provinces / Municipalities Inconsistency](/articles/provinces-municipalities/#regional-provinces--municipalities-inconsistency) sections for more information on why this may happen.
 
-- Visit the [Provinces and Municipalities FAQs](/articles/provinces-municipalities/#faqs) or the [Regional Provinces / Municipalities Inconsistency](/articles/provinces-municipalities/#regional-provinces--municipalities-inconsistency) sections for more information on why this may happen.
-
-- Refer to the [Updating Regional Provinces](/articles/provinces-municipalities/#updating-regional-provinces) guide for possible troubleshooting methods if you notice missing provinces or municipalities after running this script.
-</Callout>
+   - Refer to the [Updating Regional Provinces](/articles/provinces-municipalities/#updating-regional-provinces) guide for possible troubleshooting methods if you notice missing provinces or municipalities after running this script.
+   </Callout>
+4. Replace the `PROVINCES` and `PROVINCES_ARCHIVE` variables with the comma-separated province names of your new target region resulting from **steps #2 and #3**.
+5. Replace the `DEFAULT_PROVINCE` .env variable with any province name from the `PROVINCES` comma-separated province names.
 
 ### Create new superadmin password