The ZK Payroll Dashboard is a privacy-first web application designed for managing decentralized payroll operations on the Stellar network. It leverages Zero-Knowledge Proofs (ZKPs) to ensure salary amounts and payment details remain confidential while maintaining on-chain verifiability.
- Connect Wallet: Seamless integration with Stellar-compatible wallets (Freighter, Albedo).
- Privacy-Preserving Payroll: Execute batch payroll transactions where salary amounts are hidden using ZK commitments.
- Employee Management: Register and manage employees with encrypted metadata.
- Transaction History: Verifiable history of all payroll events.
- Transaction Detail View: 🆕 Comprehensive transaction inspection with verification metadata, timestamps, and blockchain details.
- Compliance View: Optional view-key generation for auditing purposes.
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- Blockchain Interaction:
@zk-payroll/sdk,stellar-sdk
- Node.js 18+
- npm or yarn
- A Stellar testnet account (funded via Friendbot)
-
Clone the repository
git clone https://github.com/zkpayroll/zk-payroll-dashboard.git cd zk-payroll-dashboard -
Install dependencies
npm install
-
Configure Environment Copy the example env file and adjust values as needed:
cp .env.example .env.local
The default variables (already set for Stellar Testnet):
NEXT_PUBLIC_STELLAR_NETWORK=TESTNET NEXT_PUBLIC_HORIZON_URL=https://horizon-testnet.stellar.org NEXT_PUBLIC_SOROBAN_RPC_URL=https://soroban-testnet.stellar.org
-
Run Development Server
npm run dev
Open http://localhost:3000 to view the dashboard.
zk-payroll-dashboard/
├── app/ # Next.js App Router pages
│ ├── globals.css # Global styles & Tailwind directives
│ ├── layout.tsx # Root layout with providers
│ └── page.tsx # Dashboard home
├── components/ # React UI components
│ ├── features/ # Feature-specific components
│ │ └── transactions/ # Transaction-related components
│ │ ├── TransactionHistory.tsx
│ │ └── TransactionDetailDrawer.tsx 🆕
│ ├── layout/ # Structural components (Sidebar, Header)
│ └── ui/ # Reusable UI elements
│ ├── button.tsx
│ ├── badge.tsx 🆕
│ ├── sheet.tsx 🆕
│ └── scroll-area.tsx 🆕
├── docs/ # Documentation 🆕
│ ├── TRANSACTION_DETAIL_FEATURE.md
│ └── TRANSACTION_DETAIL_USAGE.md
├── lib/ # Utilities and helper functions
├── public/ # Static assets
└── package.json
Click the "Connect Wallet" button in the top right header. Select your preferred Stellar wallet.
Navigate to the Dashboard tab. You will see a summary of active employees and total payroll volume. Click "Process Payroll" to initiate a ZK-proof generation for the current pay period.
Once the transaction is confirmed, it will appear in the Transaction History table. The "Verified" status indicates that the on-chain ZK verifier successfully validated the payment proof.
Click any transaction row or the "Details" button to open a comprehensive detail view that shows:
- Transaction Summary: Total amount and employee count
- Verification Status: With detailed metadata and explanations
- Zero-Knowledge Proof: Masked by default for privacy, viewable on demand
- Blockchain Details: Transaction hash with explorer link
- Timeline: Creation and verification timestamps
- Privacy Protection: Clear indication of what remains encrypted
For detailed usage instructions, see Transaction Detail Usage Guide.
- Dashboard setup guide
- Admin recovery guide
- Wallet signing failure recovery guide 🆕
- Content style guide
Contributions are welcome! Please check out the issues page. Before opening a PR, please review our Contributor Issue Validation Checklist.
This project is licensed under the MIT License - see the LICENSE file for details.