feat: add actions #43

igorihimbazwe · 2025-12-23T18:00:39Z

This pull request introduces a major update to the organization's Actions management features, including a new organization-only "Actions" page, expanded API helpers for action management, and improved navigation and user experience for organization users. The changes add support for viewing, creating, updating, and deleting organization actions, and lay the groundwork for a multi-step action creation wizard. Several supporting improvements and new dependencies are also included.

Key changes include:

1. Organization Actions Management UI

Replaces the previous static ActionPageLayout with a dynamic, organization-only Actions page. The new UI fetches actions from the backend, supports archiving (deleting) actions, and launches a multi-step "Action Wizard" for creating new actions. It also improves table columns, status handling, and user feedback. Non-organization users are shown a dedicated message. (components/ActionPage/ActionPageLayout.tsx)

2. API Helpers for Action Wizard

Adds a comprehensive set of API helper functions for all steps of the action creation wizard, sub-action management, and CRUD operations for actions and sub-actions. Includes support for both JSON and FormData payloads. (helpers/api.ts) [1] [2]

3. Data Model Enhancements

Introduces new TypeScript interfaces for OrganizationAction and SubActionSummary, capturing all relevant fields for organization actions and their sub-actions. (types/action.types.ts)

4. Navigation and User Experience

Adds an "Actions" item to the main navigation and ensures the navigation highlights "Actions" when on the relevant route. (components/Navigation.tsx) [1] [2]
Updates the account info and header components to gracefully handle both user and organization profiles when fetching balances and profile images. (components/AccountInfo.tsx, components/Header.tsx) [1] [2]

5. Dependency Updates

Adds new dependencies for PDF generation and manipulation (jspdf, @types/jspdf, pdfjs-dist), which may be used in future features related to actions or tickets. (package.json) [1] [2]

…features

…ction wizard

…input for custom fields and webhooks - Added dark mode styles to the ActionsByAccountPage and related components. - Introduced KeyValueInput component for managing custom fields and webhooks in the ActionWizardModal. - Updated Navigation to include Actions in the sidebar. - Added new SWC modules for improved compatibility across different platforms.

…roved ID extraction

netlify · 2025-12-23T18:00:44Z

✅ Deploy Preview for qiew-code-dev2 ready!

Name	Link
🔨 Latest commit	`7864a53`
🔍 Latest deploy log	https://app.netlify.com/projects/qiew-code-dev2/deploys/694ae0955da6860008db29c6
😎 Deploy Preview	https://deploy-preview-43--qiew-code-dev2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

This pull request introduces comprehensive organization-level actions management with a multi-step wizard, QR code validation, PDF ticket generation, and enhanced user/organization profile handling.

Key Changes:

New organization Actions page with create/edit/delete capabilities via multi-step wizard
QR object validation system with camera and PDF scanning support
API helpers for full CRUD operations on actions and sub-actions
Enhanced navigation with "Actions" menu item and profile image fallback logic
PDF ticket generation with jsPDF integration

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
`types/action.types.ts`	Defines OrganizationAction and SubActionSummary interfaces for action management
`helpers/api.ts`	Adds API helpers for action wizard steps, sub-actions, and CRUD operations with FormData support
`components/Navigation.tsx`	Adds "Actions" navigation item with route highlighting
`components/Header.tsx`	Implements user/organization profile image fallback using Promise.allSettled
`components/AccountInfo.tsx`	Removes error throwing to enable organization balance fallback
`components/ActionPage/QRObjectValidator.tsx`	New component for scanning and validating QR objects via camera or PDF upload
`components/ActionPage/ActionWizardModal.tsx`	Multi-step wizard for creating/editing actions with 9 configuration steps
`components/ActionPage/ActionPageLayout.tsx`	Replaces static layout with dynamic organization-only actions management
`app/welcome/[userId]/page.tsx`	Adds action display, sub-action modal, and purchase flow for organization profiles
`app/action/[userId]/page.tsx`	New page for managing purchased actions (users) or organization actions with QR validation
`package.json`	Adds jspdf, @types/jspdf, and pdfjs-dist dependencies for PDF generation and parsing

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-23T18:03:16Z

helpers/api.ts

+// Helper for FormData requests (no Content-Type header, let browser set it with boundary)
+const apiPostFormData = (url: string, formData: FormData) => 
+  axios.post(`${baseUrl}${url}`, formData, { 
+    headers: getAuthHeaders()
+  });
+
+const apiPutFormData = (url: string, formData: FormData) => 
+  axios.put(`${baseUrl}${url}`, formData, { 
+    headers: getAuthHeaders()
+  });


The ApiDelete helper function is defined but the FormData helper functions don't remove the Content-Type header, which is necessary for multipart/form-data requests. The browser needs to set the Content-Type header with the correct boundary parameter. However, getAuthHeaders() likely returns an object with a Content-Type header that should be removed or excluded for FormData requests.

Copilot · 2025-12-23T18:03:16Z

components/AccountInfo.tsx

                // First try as user
                let response;
                try {
                    response = await getEntityBalance(userId, 'user');
                } catch (userError) {
                    // If user fails, try as organization
                    response = await getEntityBalance(userId, 'organization');
-                    throw userError;
                }


The error handling in the catch block removes the user error throwing that was preventing the organization fallback logic from working. However, this creates a logical issue: if the user fetch succeeds, the organizationRes is never checked. The response variable will be set from userRes, but then the code tries to use organizationRes in the catch, which never executes if userRes succeeds. This makes the organization fallback unreachable when user fetch succeeds.

Copilot · 2025-12-23T18:03:16Z

components/ActionPage/QRObjectValidator.tsx

+                        script.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js";
+                        script.onload = () => {
+                            (window as any).pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";


The QRObjectValidator component has hardcoded CDN URLs for PDF.js (line 490, 492) that specify version 3.11.174, but pdfjs-dist 5.4.449 is installed via package.json. This version mismatch could cause compatibility issues. The component should either use the installed package version consistently or update the CDN URLs to match the installed version.

Suggested change

script.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js";

script.onload = () => {

(window as any).pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";

script.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/5.4.449/pdf.min.js";

script.onload = () => {

(window as any).pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/5.4.449/pdf.worker.min.js";

Copilot · 2025-12-23T18:03:17Z

app/action/[userId]/page.tsx

+    const fetchData = useCallback(
+        async (targetUserId: string) => {
+            const token = getToken();
+            if (!token) {
+                setError('You need to be logged in to view your actions.');
+                setLoading(false);
+                return;
+            }
+
+            const headers = { Authorization: `Bearer ${token}` };
+
+            try {
+                setLoading(true);
+                setError(null);
+
+                const [userRes, organizationRes] = await Promise.allSettled([
+                    axios.get(`${baseUrl}/users/${targetUserId}`, { headers }),
+                    axios.get(`${baseUrl}/organizations/${targetUserId}`, { headers }),
+                ]);
+
+                if (userRes.status === 'fulfilled') {
+                    setAccountMode('individual');
+                    const qrResponse = await axios.get(`${baseUrl}/users/${targetUserId}/qr-objects`, { headers });
+                    let qrData = Array.isArray(qrResponse.data?.data) ? qrResponse.data.data : [];
+
+                    // If an organization is viewing another user's QR objects,
+                    // filter to only show QR objects from their own actions
+                    if (isLoggedInAsOrganization && isViewingAnotherUser && tokenUserId) {
+                        try {
+                            // Fetch the organization's actions to get their action IDs
+                            const orgActionsResponse = await axios.get(
+                                `${baseUrl}/organizations/${tokenUserId}/actions`,
+                                { headers }
+                            );
+                            const orgActions = orgActionsResponse.data?.data ?? orgActionsResponse.data ?? [];
+                            const orgActionIds = new Set(
+                                Array.isArray(orgActions) ? orgActions.map((action: OrganizationAction) => action.id) : []
+                            );
+
+                            // Filter QR objects to only include those from the organization's actions
+                            qrData = qrData.filter((qrObj: QrObject) => {
+                                const actionId = qrObj.actionId || qrObj.metadata?.actionId;
+                                const organizationId = qrObj.organizationId || qrObj.metadata?.organizationId;
+
+                                // Match by actionId or organizationId
+                                return (actionId && orgActionIds.has(actionId)) || 
+                                       (organizationId && organizationId === tokenUserId);
+                            });
+                        } catch (filterErr) {
+                            console.error('Failed to filter QR objects by organization:', filterErr);
+                            // If filtering fails, show no QR objects for security
+                            qrData = [];
+                        }
+                    }
+
+                    setPurchasedActions(qrData);
+                    setOrganizationActions([]);
+                    return;
+                }
+
+                if (organizationRes.status === 'fulfilled') {
+                    setAccountMode('organization');
+                    const searchParams = new URLSearchParams();
+                    if (statusFilter !== 'all') {
+                        searchParams.append('status', statusFilter);
+                    }
+                    const query = searchParams.toString();
+                    const orgActionsResponse = await axios.get(
+                        `${baseUrl}/organizations/${targetUserId}/actions${query ? `?${query}` : ''}`,
+                        {
+                            headers,
+                        },
+                    );
+                    const actionPayload = orgActionsResponse.data?.data ?? orgActionsResponse.data ?? [];
+                    setOrganizationActions(Array.isArray(actionPayload) ? actionPayload : []);
+                    setPurchasedActions([]);
+                    return;
+                }
+
+                throw new Error('Account not found. Please try logging out and back in.');
+            } catch (err: any) {
+                const errorMessage =
+                    err?.response?.data?.message ||
+                    err?.message ||
+                    'Something went wrong while loading your actions. Please try again.';
+                setError(errorMessage);
+                setPurchasedActions([]);
+                setOrganizationActions([]);
+            } finally {
+                setLoading(false);
+            }
+        },
+        [getToken, statusFilter, isLoggedInAsOrganization, isViewingAnotherUser, tokenUserId],
+    );


The dependency array for the fetchData useCallback includes statusFilter, but statusFilter is only used for organization accounts. For individual accounts (line 178), changing statusFilter will trigger an unnecessary re-fetch even though the filter doesn't apply. Consider either splitting this into two separate fetch functions or checking accountMode before including statusFilter in the API call.

Copilot · 2025-12-23T18:03:17Z

app/action/[userId]/page.tsx

+            if (!coverImage && qrObject.metadata?.actionId) {
+                try {
+                    const token = getToken();
+                    if (token) {
+                        const headers = { Authorization: `Bearer ${token}` };
+                        const actionResponse = await axios.get(
+                            `${baseUrl}/actions/${qrObject.metadata.actionId}`,
+                            { headers }
+                        );
+                        coverImage = actionResponse.data?.data?.coverImage || actionResponse.data?.coverImage;
+                    }
+                } catch (err) {
+                    console.warn('Could not fetch action cover image:', err);
+                }
+            }


The PDF ticket generation function attempts to fetch the action cover image if not available (lines 302-316), but this is an async operation within the download handler. If the fetch fails or takes time, it doesn't wait for completion before proceeding. The cover image fetching should properly await the result and handle the promise, or remove the async/await pattern since the surrounding function isn't awaiting this operation.

Copilot · 2025-12-23T18:03:17Z

components/ActionPage/QRObjectValidator.tsx

+import { useState, useRef, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Scan, CheckCircle2, XCircle, Loader2, Camera, X, Upload, FileText, ExternalLink } from "lucide-react";


Unused import FileText.

Suggested change

import { Scan, CheckCircle2, XCircle, Loader2, Camera, X, Upload, FileText, ExternalLink } from "lucide-react";

import { Scan, CheckCircle2, XCircle, Loader2, Camera, X, Upload, ExternalLink } from "lucide-react";

Copilot · 2025-12-23T18:03:17Z

components/ActionPage/QRObjectValidator.tsx

+}
+
+export default function QRObjectValidator({ isOpen, onClose, organizationId }: QRObjectValidatorProps) {
+    const { getToken, getUserId } = useAuthToken();


Unused variable getUserId.

Suggested change

const { getToken, getUserId } = useAuthToken();

const { getToken } = useAuthToken();

Copilot · 2025-12-23T18:03:18Z

components/ActionPage/QRObjectValidator.tsx

+
+export default function QRObjectValidator({ isOpen, onClose, organizationId }: QRObjectValidatorProps) {
+    const { getToken, getUserId } = useAuthToken();
+    const [isScanning, setIsScanning] = useState(false);


Unused variable isScanning.

Suggested change

const [isScanning, setIsScanning] = useState(false);

Copilot · 2025-12-23T18:03:18Z

components/ActionPage/QRObjectValidator.tsx

+    const [isScanning, setIsScanning] = useState(false);
+    const [cameraActive, setCameraActive] = useState(false);
+    const [error, setError] = useState<string>("");
+    const [scanResult, setScanResult] = useState<string>("");


Unused variable scanResult.

Suggested change

const [scanResult, setScanResult] = useState<string>("");

const [, setScanResult] = useState<string>("");

Copilot · 2025-12-23T18:03:18Z

components/ActionPage/ActionWizardModal.tsx

+    const [subActions, setSubActions] = useState<SubActionSummary[]>([]);
+    const [subActionsLoading, setSubActionsLoading] = useState(false);
+    const [existingAction, setExistingAction] = useState<any | null>(null);
+    const [isEditingExisting, setIsEditingExisting] = useState(false);


Unused variable isEditingExisting.

igorihimbazwe added 5 commits December 14, 2025 19:47

feat: update dependencies and add new action page

fd6bc58

feat: enhance action management with sub-action creation and editing …

fcd29b7

…features

feat: add pdfjs-dist dependency and implement cover image upload in a…

6c60e37

…ction wizard

feat: enhance QR object validation with external URL handling and imp…

b2a3f44

…roved ID extraction

Copilot AI review requested due to automatic review settings December 23, 2025 18:00

Copilot started reviewing on behalf of igorihimbazwe December 23, 2025 18:01 View session

Merge branch 'dev2' into actions

eb88ac8

Copilot AI reviewed Dec 23, 2025

View reviewed changes

igorihimbazwe requested a review from Oliviier-dev December 23, 2025 18:06

igorihimbazwe added 3 commits December 23, 2025 20:15

Refactor code structure for improved readability and maintainability

197d781

chore: regenerate pnpm-lock.yaml for CI compatibility

4347bd5

chore: sync package-lock.json and pnpm-lock.yaml with package.json

2af3347

igorihimbazwe changed the title ~~Ft-actions~~ Feat actions Dec 23, 2025

igorihimbazwe changed the title ~~Feat actions~~ feat: add actions Dec 23, 2025

fix: remove console statements to pass ESLint

7864a53

igorihimbazwe merged commit 2e7af0e into dev2 Dec 23, 2025
9 checks passed

	import { Scan, CheckCircle2, XCircle, Loader2, Camera, X, Upload, FileText, ExternalLink } from "lucide-react";
	import { Scan, CheckCircle2, XCircle, Loader2, Camera, X, Upload, ExternalLink } from "lucide-react";

	const { getToken, getUserId } = useAuthToken();
	const { getToken } = useAuthToken();

	const [scanResult, setScanResult] = useState<string>("");
	const [, setScanResult] = useState<string>("");

feat: add actions #43

feat: add actions #43

Uh oh!

Conversation

igorihimbazwe commented Dec 23, 2025

1. Organization Actions Management UI

2. API Helpers for Action Wizard

3. Data Model Enhancements

4. Navigation and User Experience

5. Dependency Updates

Uh oh!

netlify bot commented Dec 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for qiew-code-dev2 ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

netlify bot commented Dec 23, 2025 •

edited

Loading