ProctoAct App

🔍

⏱

Pending

⚡

In Progress

✓

Completed

⚠

Overdue

🔥

Active Projects

🚫

Overdue Tasks

🏆

Completion Rate

📋

Open Issues

—

📄

Pending CRs

—

📈

Active Projects

—

📝

Total Notes

—

📈

My ProctoAct Calendar Pending & In Progress · Main tasks only

Mon

Tue

Wed

Thu

Fri

Sat

Sun

🗺

My ProctoAct Roadmap All Pending & In Progress · Main tasks

0 tasks

⚡ Set In Progress

✓ Mark Complete

No pending or in-progress tasks found.

Pending 0

▼

In Progress 0

▼

Completed 0

▼

Task Title *

Description

✚ Add Sub-Task

Sub-Task Title *

Description

Status

Start Date

End Date

∞ Open End Date / TBD

ProctoAct App

Official User Manual & Guideline

Version 1.45.5 | | Internal Use Only

⚠ Step 1 — Mandatory

INSTALLATION — Do This First

Make sure the very first thing you do is install the app by clicking the "⬇ Install App" button in the top-right header. This ensures full offline access and gives ProctoAct its own dedicated workspace — independent of your browser session. Once installed, the app is accessible from your desktop or taskbar and works without an internet connection.

1. Introduction

ProctoAct App is a self-contained, browser-based project and task management dashboard. It combines a Gantt-style calendar, a roadmap summary, and a Kanban board into a single Progressive Web App (PWA) that requires no server, no login, and works fully offline after installation. All data is stored locally in your browser.

2. Dashboard — KPI Tiles

The top row displays four real-time KPI tiles giving you an instant snapshot of your workload:

Pending — Tasks queued but not yet started.
In Progress — Tasks actively being worked on. These appear in the Calendar and Roadmap views.
Completed — Tasks marked Done. Archived from active views but retained for reporting.
Overdue — Tasks whose end date has passed without completion. Flagged with a red pulse animation across all views.

Clicking any tile filters the Kanban board to show only that status group.

3. My ProctoAct Calendar

A compact Gantt-style timeline that visualises all active Pending and In Progress tasks across a Monday-to-Sunday weekly grid. Each coloured bar represents one task, spanning from its Start Date to its End Date.

Reading the Grid

Each row is one week (Mon → Sun).
Bars spanning multiple weeks show a flat edge to indicate continuation.
The today column is highlighted with a blue top-border.
Hover a bar for a tooltip with status, urgency, category, and days remaining.
Click a bar to jump to that task on the Kanban board.

Month Navigation

Use ❮ / ❯ arrows to go to the previous or next month.
Use the Month / Year dropdowns to jump to any month directly.
Click "Today" to return to the current month. The nav bar glows blue when viewing the current month.
Click "Collapse" to hide the grid; click "Expand" to restore it.

Tip: Tasks are only visible in months they are scheduled in. Make sure all tasks have both a Start Date and an End Date for full Calendar visibility.

4. My ProctoAct Roadmap

A horizontally scrollable row of summary cards — one per active Pending or In Progress task. Unlike the Calendar, this section shows your full active pipeline regardless of selected month. Cards are sorted with overdue tasks first, then by nearest due date.

Large day number — Due date day. Overdue tasks pulse red.
Progress bar — How far through the task's scheduled window you are.
Days-left chip — Remaining days or overdue duration.
Click any card to jump to the matching Kanban task.

5. Task Management

Creating a New Task

Click "✚ New Task" (top-right header). Fill in Title, Description, Category, Urgency, Start Date, End Date, and Status, then click "Save Task". The task appears immediately across all views.

6. Task Categories

ProctoAct uses a three-tier category system:

Category	Colour	Intended Use
Project	Electric Blue	Formal milestones, deliverables, or initiatives with a defined scope and timeline. Use for work contributing to a named project or workstream.
Things to Do	Soft Amber	General to-do items, administrative tasks, reminders, or recurring responsibilities that are not part of a formal project.
Action Item	Emerald Green	Specific actions from meetings or decisions requiring follow-up. Typically short-lived and outcome-focused — e.g. "Send report to stakeholder by Friday."

Urgency Levels

Low — Complete when capacity allows.
Medium — Standard priority; complete within the scheduled window.
High — Requires focused attention; do not delay.
Critical — Must be resolved immediately. Solid red badge in all views.

7. Data & PWA

📥 Export — Download all tasks as a .json backup. Do this regularly.
📤 Import — Restore from a backup. Warning: overwrites all existing tasks.
📋 User Manual — Opens this document for print or "Save as PDF".
⬇ Install App — Installs ProctoAct as a PWA for offline use with a dedicated app window.

Important: Clearing browser site data erases all tasks. Keep regular JSON exports as your recovery point.

ProctoAct Note

🔍

✓ Saved

📝

No note selected

Create a new note or select one from the sidebar

Type

Accent Color

Created —

Book

Subject

Sub-Subject / Description

📝 New Note

Document Type

Accent Color

Subject

Sub-Subject / Description

Book (optional group)

📚 New Book

Book Name

Accent Color

🔗

My ProctoAct Issue Log

Bug & Issue Tracker

🔗Section 1 - Overview

What is the Issue Log?

The Issue Log is a structured tracker for logging, managing, and resolving bugs, defects, and operational issues. Every issue is assigned a unique number (ISS-001, ISS-002…), categorised by type and priority, and tracked through a defined status workflow from Open to Closed.

Accessing the Issue Log

Open the VIEWS panel on the right edge and select Issue Log. The header shows a search bar, the + New Issue button, and the Recycle Bin icon.

📊Section 2 - Dashboard Stats

Stat cards at a glance

Five cards at the top show: Total Issues, Open, In Progress, Resolved, and Closed. All counts update live as records change.

➕Section 3 - Creating an Issue

Opening the New Issue form

Click + New Issue in the header. A form opens with all fields. The issue number (e.g. ISS-001) is assigned automatically and cannot be edited manually.

Required vs optional fields

Issue Title, Status, Priority, and Owner are required. Description, Reporter, Date Logged, Affected Area, and Resolution/Remarks are optional but build a complete audit trail.

Issue categories

Choose from: Bug, Feature, Improvement, Task, or Question. Categories help filter and group issues for better visibility.

▶Section 4 - Status Workflow

Standard lifecycle

OpenNewly logged — acknowledged but not yet being worked on.

In ProgressActively being investigated or fixed by the owner.

ResolvedFix applied — awaiting verification or sign-off.

ClosedVerified and confirmed — no further action required.

Won't FixAcknowledged but intentionally not addressed — document the reason in Remarks.

👁Section 5 - Viewing & Editing Issues

View detail

Click anywhere on a row — or the 👁 View button — to open the read-only detail panel showing all fields, status badge, priority, and category.

Edit an issue

Click ✎ Edit in the row or ✎ Edit Issue inside the detail panel. Update any field and click Save Issue to commit.

Delete an issue

Click 🗑 Delete on the row. The issue moves to the Recycle Bin (soft delete) for 7 days before permanent auto-removal. Restore it any time within that window.

🔗Section 6 - Cross-section Actions

📄 Raise CR from an Issue

Inside any issue detail, click 📄 Raise CR to jump to the CR Log with a pre-filled Change Request linked to the current issue. This ensures traceability between issues and change requests.

📝 Add Note from an Issue

Click 📝 Add Note inside the detail panel to jump to My ProctoAct Note with the issue title and number pre-filled as a reference note.

📋 Linked Issue — in the CR Form

When creating or editing a CR, a Linked Issue dropdown appears in the form. Select an existing Issue to formally connect the CR to its originating issue. The linked issue number appears as a tag on the CR row in the table, making it easy to trace the origin of every change request.

📝 Add Note from a CR

Inside any CR detail panel, click 📝 Add Note to jump to My ProctoAct Note with the CR number and title pre-filled as a reference note. Useful for capturing decisions, stakeholder comments, or implementation notes tied to a specific change.

📈 Add to Gantt from a CR

Inside any CR detail panel, click 📈 Add to Gantt to link the CR to a Gantt project. A dropdown lets you select the target project, and the CR is then listed as a linked change under that project — enabling full traceability from change request to project delivery.

🔍Section 7 - Filtering & Search

Search bar

Filters across issue number, title, owner, and description in real time as you type.

Status, Priority & Category filters

Use the All Statuses, All Priorities, and All Categories dropdowns to narrow the table. Filters stack — combine all three with search text simultaneously.

🗑Section 8 - Recycle Bin

Soft delete & recovery

Deleted issues are held for 7 days. Click the 🗑 bin icon in the header to open it. Each entry shows a countdown timer. Click ↩ Restore to recover or 🗑 Delete to remove permanently.

Empty Bin

The 🔥 Empty Bin button permanently deletes all items at once. This cannot be undone — use with caution.

📷

Export as PDF

Download Issue Log as PDF

Click the 📷 PDF button in the section header to generate a formatted PDF — includes a branded header with your name and timestamp, and all current data in a clean print-ready layout.

Try it now

📅

My ProctoAct Daily Task

Daily Planner & Task Scheduler

📅Section 1 — Overview

What is My ProctoAct Daily Task?

My ProctoAct Daily Task is a visual weekly planner that lets you schedule tasks across a 7-day calendar grid with hourly time slots. Every task appears as a colour-coded card on the day and time you specify, giving you a clear at-a-glance view of your week.

Accessing Daily Task

Open the VIEWS panel on the right edge and select Daily Task. The header shows the ProctoAct logo, a search bar, + New Task, Copy From, and Bin buttons.

🗓Section 2 — Weekly Calendar View

The Time Grid

The main area is a 7-column grid (Mon – Sun) with hourly rows from 12 AM to 11 PM. Each cell represents a one-hour slot. The grid scrolls vertically and opens at 7 AM by default so your working hours are immediately visible.

Week Navigation

Use the ‹ and › arrows in the header to move backward or forward by one week. The current week range is displayed between the arrows. Click Today to jump back to the current week.

Type in the search bar to filter tasks across all weeks by title. Matching cards remain visible; non-matching cards are hidden in real time.

➕Section 3 — Creating a Task

New Task Modal

Click + New Task to open the creation form. Fill in the Title, select a Date, pick a Time * and End Time * (both required), choose a Priority, and optionally add notes. Click Save Task to add it to the grid.

Required Fields

Time and End Time are compulsory. If either is left blank when you try to save, the field is highlighted in red and saving is blocked until both are filled in.

Priority Colours

Each priority is colour-coded on the card: High (red), Medium (amber), Low (green), and None (grey).

🃏Section 4 — Task Cards

Card Layout

Each task card displays the title, the time range, and a left-border in the priority colour. Completed tasks show a strikethrough on the title.

Selecting a Card

Click any task card to select it. The selected card gets a cyan glow border and a floating action bar (Complete / Edit / Delete) appears near the card. Click elsewhere on the grid to deselect.

✅Section 5 — Complete, Edit & Delete

Complete

Click ✓ Complete in the action bar to toggle the task as done. The title gets a strikethrough and the card dims slightly. Click Complete again to mark it undone.

Edit

Click ✏ Edit to reopen the task form pre-filled with existing details. Change any field and click Save Task. Time and End Time remain required.

Delete

Click 🗑 Delete to move the task to the Recycle Bin. The card is removed from the grid immediately. Deleted tasks can be restored from the Bin within 7 days.

↕Section 6 — Resizing Tasks

Drag to Resize

Hover over the bottom edge of a task card — the cursor changes to a resize handle. Drag downward to extend the End Time or upward to shorten it. Time snaps to the nearest 30-minute interval. The card updates live as you drag and saves automatically on release.

📤Section 7 — Send to Daily Task

Sending Items from Other Sections

Every item in My ProctoAct App, Gantt Chart, CR Log, and Issue Log has a 📅 Send to Daily Task button. Click it to open a scheduling modal for that specific item.

Scheduling Modal

The modal pre-fills the item title. Select the Date *, Time *, and End Time * (all required), optionally set a Priority and add notes. Click Add to Daily Task to place it on the calendar.

Recurrence Option

Toggle Recurring Task in the modal to schedule the item on a repeating basis. Choose Weekly (select specific days) or Monthly (select specific dates), and set a date range. The task is automatically placed on every matching occurrence.

⇅Section 8 — Copy From Modules

How Copy From Works

Click ⇅ Copy From in the Daily Task header to open a list of items from App, Gantt, CR Log, and Issue Log. Select the item you want, then set its Date, Time, and End Time (required) in the scheduling prompt that follows.

Source Tags

Each item in the Copy From list shows a source tag (TASK, GANTT, CR, ISSUE) so you can quickly identify where it came from before importing it.

🔁Section 9 — Recurring Tasks

Setting Up Recurrence

In the New Task or Send to Daily Task modal, toggle Recurring Task to reveal recurrence options. Choose Weekly to pick which days of the week (Mon–Sun) the task repeats, or Monthly to choose which dates each month.

Date Range

Set a Start Date and End Date for the recurrence. The system generates individual task instances for every matching day within that range, each appearing on the correct date column in the weekly grid.

Recurring Task Indicator

Recurring task cards display a 🔁 icon to distinguish them from one-off tasks at a glance.

🗑Section 10 — Recycle Bin

Accessing the Bin

Click the Bin button in the Daily Task header to view all recently deleted tasks. A red badge on the button shows the count of items currently in the bin.

Restoring Tasks

Each item in the Bin has a Restore button. Click it to return the task to its original date and time slot on the weekly grid. Tasks are automatically purged from the Bin after 7 days.

📷

Export as PDF

Download Daily Tasks as PDF

Click the 📷 PDF button in the section header to generate a formatted PDF — includes a branded header with your name and timestamp, and all current data in a clean print-ready layout.

Try it now

⚙️ General Guide

🔒 Security PIN

Setting up your PIN

On first launch, you are prompted to create a 4 or 6-digit PIN. Choose a PIN length, enter it twice to confirm, then select a security question and provide an answer. This answer is used to recover access if you forget your PIN.

Unlocking the app

Each time you open ProctoAct in a new browser session, you will see the PIN entry screen. Enter your PIN — the app auto-submits once the correct length is reached. The unlock persists for the entire browser session so you won't be asked again on page refresh.

Forgot PIN?

On the unlock screen, tap Forgot PIN? → answer your security question → set a new PIN. You can also update your security question at this step.

Changing your PIN & auto-lock

Go to More Options → Change Security PIN. Enter your current PIN to verify, then set a new PIN and optionally a new security question. You can also configure an Auto-Lock timeout (5 / 15 / 30 min / 1 hour) — the app will lock itself after that period of inactivity.

Lock Now

Open the Workspace Switcher (VIEWS tab on the right edge) and click the 🔒 Lock button in the panel header to instantly lock the app and return to the PIN screen — useful when stepping away from your device.

🗂️ Workspace Switcher

Opening the workspace panel

Click the VIEWS tab on the right edge of the screen (or tap the handle icon) to open the workspace panel. It shows your profile, stats, and quick links to all four workspaces.

Switching between workspaces

Use the navigation buttons inside the panel to switch between: App (tasks & projects), Note (document hub), Flow Chart (process maps), and Gantt Chart (project timelines). A ✓ indicator shows the active workspace.

Daily streak & stats

The panel shows your current task counts (active, notes, projects) and a daily usage streak. The streak increments each day you open and use ProctoAct.

👤 Profile & Settings

Rename profile

Tap More Options → Rename Profile, or click your name in the workspace panel to edit it inline. Your name is stored locally and shown in greetings and reports.

Avatar

Click your avatar in the workspace panel to choose from the built-in avatar library. Your selection is saved locally.

Dark / Light theme

Toggle between dark and light mode via More Options → Switch Theme. Your preference is saved and restored on next visit.

Export & Import backup

Export Backup downloads all your tasks as a JSON file — keep this as a safety copy. Import Backup restores tasks from a previously exported file. All data is stored in your browser's localStorage — clearing browser data will erase it, so export regularly.

⌨️ Keyboard Shortcuts

Ctrl+K

Open command palette

N

New task (App view)

F

Focus search bar

Esc

Close any modal

Ctrl+S

Save active note

Ctrl+S

Save flow chart

🔐 Data & Privacy

All ProctoAct data — tasks, notes, flow charts, Gantt projects, your name, avatar, and PIN — is stored entirely in your browser's localStorage. Nothing is sent to any server. This means your data is private, works offline, but is tied to this browser. Use Export Backup regularly to avoid data loss.

📊 My ProctoAct Dashboard

Section 1 — What is the Dashboard?

The Dashboard is your Command Center — a single live screen showing real-time status across all four core sections: App, Gantt Chart, CR Log, and Issue Log. It opens automatically the moment you click Start, with no delay. All data is read directly from your local storage on every visit.

Section 2 — Command Overview (KPI Ribbon)

An Overall Completion ring sits above the ribbon, combining every done item across the App, Gantt, CR Log, and Issue Log into a single at-a-glance percentage. Below it, five large-number KPI cards run across the top of the screen:
• Active Tasks — pending + in-progress tasks from the App
• Critical Issues — open issues with High or Critical priority (turns red when > 0)
• Pending Approvals — CRs currently Submitted or Under Review
• In Progress Projects — Gantt projects currently in progress
• Overdue — tasks whose end date has passed and are not yet done (turns amber when > 0)

Click any KPI card to jump straight to that section. Hover for a tooltip explaining exactly what it counts — on touch devices, tap the small "i" button in the corner instead. When a number has changed since the last time you opened the Dashboard on a different day, a small ▲/▼ delta appears next to it.

Section 3 — Section Status Doughnut Charts

Each of the four sections is represented by an animated SVG ring chart that shows the status breakdown at a glance:
• App (green) — Pending / In Progress / Done / Overdue
• Gantt Chart (blue) — Not Started / In Progress / Delayed / Completed
• CR Log (purple) — Draft / Submitted / Under Review / Approved / Rejected / Implemented
• Issue Log (amber) — Open / In Progress / Resolved / Closed / Won't Fix

Each card also shows the exact count per status alongside the chart. Click View › on any card to jump directly to that section.

Section 4 — Roadmap

A scrollable list of all tasks and Gantt project sub-tasks with an end date falling within the selected window (including any already overdue). Use the 7d / 14d / 30d toggle in the header to widen or narrow the range — your choice is remembered. Each row shows:
• A colour-coded TASK or GANTT badge
• The item title
• A due-date label: Overdue Xd (red), Today (amber), Tomorrow / In Xd (blue/grey)

Click any roadmap row to jump straight to that specific task, project, or record. If nothing is due, the panel shows a clear-horizon message.

Section 5 — Needs Attention Feed

A prioritised action feed on the right column that automatically surfaces the most urgent items across all sections:
• Overdue tasks (highest urgency) — tasks past their deadline, shown with days overdue
• Critical / High issues — open issues that need immediate attention
• CRs Under Review — change requests awaiting a decision

The header shows a red item count. Click any row to navigate directly to that section. When everything is clear, the feed shows a “Nothing needs attention” confirmation.

Section 6 — Quick Add

The gradient ＋ Quick Add button in the top-right header opens a small dropdown menu with three shortcuts:
• New Task — switches to the App and opens the add-task form
• New CR — switches to CR Log and opens the new CR form
• New Issue — switches to Issue Log and opens the new issue form

This lets you log new items from the Dashboard without manually navigating away. Click anywhere outside the menu to dismiss it.

Section 7 — Live Sync & Refresh

The header displays a pulsing green LIVE indicator alongside the last-updated timestamp. All data is re-read every time you open the Dashboard. To force an instant re-read without navigating away, click the ↻ Refresh button — the timestamp updates to confirm the sync. The ✕ button in the header returns you to the App section.

📷

Export as PDF

Download workspace as PDF

Click the 📷 PDF button in the section header to generate a formatted PDF — includes a branded header with your name and timestamp, and all current data in a clean print-ready layout.

Try it now

▦

My ProctoAct Flow Chart. Quick Guide.

Map your processes, SOPs, and workflows visually.

▦

Section 1 - What is My ProctoAct Flow Chart?

Overview

A dedicated Visual Workflow Mapping workspace — a fullscreen canvas to create and manage professional flowcharts across multiple named projects, each saved independently in your browser.

Accessing It

Click the ☰ VIEWS tab on the right edge of the screen. In the Workspace Switcher, click ▦ My ProctoAct Flow Chart. Press Esc to close the switcher.

📁

Section 2 - Projects

Creating a Project

Click + New Project in the left sidebar. Enter a name (e.g. "Onboarding Flow") and click Create Project →. Projects appear in the left sidebar — click any to switch to it.

Dual-Pane Layout

The left sidebar lists all your projects with node and arrow counts. Hover a card to reveal ✎ Rename and 🗑 Delete buttons. The right area is your active drawing canvas with a dot-grid background.

▦

Section 3 - Node Shapes

9 Standard Shapes

• ⬤ Start/End — Oval. Marks the start or end of the process.
• ▮ Process — Rectangle. A specific action or task to be performed.
• ◆ Decision — Diamond. A question or condition to be evaluated.
• ◯ Connector — Circle. Connects separate parts of the diagram.
• ∕ I/O — Parallelogram. Data entering or leaving the system.
• 📄 Document — Wavy bottom. Refers to an external document or file.
• 📑 Multi-doc — Stacked. Indicates several printed documents or reports.
• ⬟ Prep — Hexagon. Marks an adjustment or preparation step.
• 🗐 Text — Free label. Floating annotations anywhere on the canvas.

→

Section 4 - Connecting Nodes with Arrows

2-Click Connect

1. Click a node to select it — a glowing → button appears on its right.
2. Click → — all other nodes glow blue as valid targets.
3. Click any other node — arrow is drawn instantly.
Press Esc to cancel at any time.

Select & Delete Arrows

Click any arrow to select it (turns amber) — a red 🗑 button appears at its midpoint. Click it or press Del to delete. Double-click an arrow to add or edit a label.

⚙

Section 5 - Moving, Selecting & Saving

Moving & Renaming Nodes

Move: drag a node — all connected arrows re-route automatically. Rename: double-click any node, type the new label, press Enter. Delete: select a node then press Del or click the red ✕ button.

Multi-Select & Group Move

Drag on the empty canvas background to draw a lasso rectangle — all nodes inside are selected. Drag any selected node to move the whole group. Press Del to delete all selected nodes at once.

Saving

Click 💾 Save in the toolbar or press Ctrl+S / ⌘+S. All projects are stored locally in your browser — clearing site data will erase them, so save regularly.

🔗

Section 6 - Cross-section Integration

Raise CR from the Flow Chart

Click 📄 Raise CR in the Flow Chart header to jump directly to the CR Log with a new Change Request pre-filled and linked to your current Flow Chart project. Use this when a process diagram review identifies a change that needs to be formally tracked — keeping your visual workflows connected to your change management trail.

Export & Backup

Flow Chart data is included in the JSON backup when you select Flow Chart in the Export Backup modal. Restoring a backup with a Flow Chart section will reload your saved diagrams and project list automatically.

📷

Export as PDF

Download Flow Chart as PDF

Click the 📷 PDF button in the section header to generate a formatted PDF — includes a branded header with your name and timestamp, and all current data in a clean print-ready layout.

Try it now

A powerful, offline‑first task manager
that respects your privacy.

See ProctoAct in action

One workspace, nine ways to get things done

My ProctoAct Gantt Chart

Section 1 — Getting Started

Section 2 — Task Fields Explained

Section 3 — Reading the Gantt Timeline

Section 4 — Managing Projects

Export as PDF

Knowledge Hub. Quick Start Guide.

Section 1 — The Basics

Section 2 — Dashboard Navigation

Section 3 — Power-User Features

Section 4 — Status Reporting & PDF Exports

Section 5 — ProctoAct Task Notes

Section 5 — Cross-section Integration

Export as PDF

✚ Add Sub-Task

📥 Export Backup

📤 Import Backup

ProctoAct Note. Quick Guide.

Section 1 - What is ProctoAct Note?

Section 2 - Creating & Managing Notes

Section 3 - Saving, Navigation & Recycle Bin

Section 4 - Books: Grouping Your Notes

Section 5 - Cross-section Integration

Export as PDF

Export as PDF

Export as PDF

Export as PDF

Export as PDF

My ProctoAct Flow Chart. Quick Guide.

Section 1 - What is My ProctoAct Flow Chart?

Section 2 - Projects

Section 3 - Node Shapes

Section 4 - Connecting Nodes with Arrows

Section 5 - Moving, Selecting & Saving

Section 6 - Cross-section Integration

Export as PDF

A powerful, offline‑first task managerthat respects your privacy.

See ProctoAct in action

One workspace, nine ways to get things done

✚ Add Sub-Task

📥 Export Backup

📤 Import Backup

New Project

Add Task

Export as PDF

Export as PDF

Export as PDF

Export as PDF

New Project

Add Task

A powerful, offline‑first task manager
that respects your privacy.