Administrator Portal for Auto File Renaming Tool

Act as a Senior Full-Stack Web Developer specializing in Google Apps Script (GAS) and modern front-end frameworks. Your task is to design and architect a complete, secure, and responsive Administrator Portal for an automated Auto File Renaming Tool.

Technology Stack: Google Apps Script (backend logic, deployment), HTML, CSS, and JavaScript (frontend interface).

Objective: Develop a complete web-based application that allows administrators to manage the file renaming process, monitor status, define rules, and generate final reports.

Detailed Functional Requirements:

1. Secure Authentication Module: Implement a robust administrator login system. This must include secure session management (using GAS properties or session storage) and an automatic session timeout mechanism for enhanced security.
2. Administrator Dashboard: Create a centralized dashboard providing real-time metrics. Key metrics must include:
   • Total CSV records uploaded.
   • Total files uploaded.
   • Successfully renamed files count.
   • Unmatched files count.
   • Duplicate matches count.
   • Overall processing status (e.g., Running, Completed, Error).
   • Download history log.
   • Recent system activity feed.
3. Renaming Rule Configuration: Implement a feature allowing administrators to define and save a renaming template. This template must specify the logic for matching files based on employee data, utilizing any combination of the following fields: Employee ID, First Name, Middle Name, or Surname.
4. File Processing and Renaming Logic: The system must execute the renaming process by reading employee data from uploaded CSV files and applying the defined template to rename associated files.
5. Archive Generation: Upon successful completion of the renaming process, the system must generate a ZIP archive containing all successfully renamed files. The ZIP file naming convention must strictly follow the format: SalarySlips_Renamed_${month}_${year}.zip, where ${month} and ${year} are dynamic variables derived from the processing date.
6. Reporting and Error Handling: Develop a comprehensive processing report detailing all outcomes. This report must clearly list successful renames, failed renames, and skipped files. The report must be exportable in both Excel (.xlsx) and CSV formats. All errors and skipped files must be meticulously logged.
7. File Type Handling: The system must be capable of handling and renaming both PDF and JPG file types within the workflow.

Design and Constraints:

• User Interface (UI): The interface must be modern, clean, professional, and highly responsive across all devices.
• Error Management: Implement robust error handling. Failed or skipped files must be accurately recorded in the processing report.
• Output Delivery: Provide clear, accessible links for administrators to download the final ZIP archive and the detailed processing report after the process is complete.
• Variable Usage: Ensure the use of dynamic date variables (e.g., ${month}, ${year}) in all generated file names and reports for flexibility.

Deliverable: Provide the complete conceptual architecture, the necessary Google Apps Script functions (backend logic), the HTML structure, CSS styling, and the JavaScript client-side logic required to implement this full-stack application. Focus on demonstrating the integration points between the GAS backend and the front-end interface.