Sbb Vendor Fe Svelte

jehnsen

Vendor Risk Management Questionnaire

A modern, responsive web application built with SvelteKit for managing vendor compliance questionnaires and vendor risk assessments.

Features

🏢 Vendor Management

Browse a list of vendors with search functionality
Each vendor has industry-specific compliance questions
Beautiful card-based UI for vendor selection

📋 Questionnaire System

Multiple Question Types:
- Yes/No questions
- Multiple choice (checkboxes)
- Free-text responses
Category Organization:
- Questions organized into 6 categories:
  - Data Security
  - Access Control
  - Compliance
  - Business Continuity
  - Privacy
  - Network Security

🎨 User Interface

Split Layout Design:
- Left sidebar: Question list with visual indicators
- Right panel: Answer input section
Visual Progress Indicators:
- Series of numbered boxes (left to right) representing each question
- 🟥 Red boxes: Unanswered questions
- 🟩 Green boxes: Answered questions
- ⬜ Smoke white boxes: Default/untouched questions
- Highlighted border: Currently selected question
- Click any box to jump directly to that question
- Easy visual scanning to spot unanswered questions and question sequence
Category Filtering:
- Filter questions by category using button cards
- Shows answered/total count for each category
Responsive Design:
- Mobile-first approach
- Adapts seamlessly to all screen sizes
- Clean, modern UI with smooth transitions

✨ Additional Features

Real-time answer tracking
Required field validation
Question selection highlighting
Auto Answer Button: Automatically answer 60% of questions randomly for testing/demo purposes
- Intelligently generates responses for all question types
- Yes/No: Random selection
- Multiple choice: Randomly selects 1-3 options
- Text: Uses realistic sample compliance responses
AI Auto-Answer Button: Simulates AI-powered questionnaire completion
- Answers only remaining unanswered questions
- Matches questions using canonical_question_id
- Provides confidence scores (70-95%)
- Shows status indicators (LINKED vs CONFIRMATION_REQUIRED)
- Displays detailed summary with answer statistics
- Uses enterprise-grade compliance responses
Gradient color scheme for visual appeal
Shadow effects and hover animations

Tech Stack

Framework: SvelteKit 2.0 with Svelte 5
Language: TypeScript
Styling: Pure CSS with CSS custom properties
State Management: Svelte 5 runes ($state, $derived, $effect)

Project Structure

src/
├── lib/
│   ├── components/             # Reusable Svelte components
│   │   ├── VendorCard.svelte         # Vendor card component
│   │   ├── ProgressBoxes.svelte      # Progress indicator boxes
│   │   ├── CategoryFilter.svelte     # Category filter buttons
│   │   ├── QuestionSidebar.svelte    # Left sidebar with questions
│   │   ├── QuestionItem.svelte       # Individual question in sidebar
│   │   └── AnswerInput.svelte        # Answer input (all types)
│   ├── data/
│   │   ├── vendors.ts                # Vendor data exports
│   │   └── comprehensive-vendor.ts   # 200 question vendor
│   └── types.ts                      # TypeScript interfaces
├── routes/
│   ├── +layout.svelte          # App layout with header
│   ├── +page.svelte            # Vendor list page
│   └── vendor/[id]/
│       ├── +page.ts            # Page load function
│       └── +page.svelte        # Questionnaire orchestrator
├── app.css                     # Global styles
└── app.html                    # HTML template

Component Architecture

The application follows proper component-based architecture:

VendorCard: Displays vendor information in a card layout
ProgressBoxes: Numbered boxes showing question progress (red/green/white)
CategoryFilter: Filter buttons for question categories
QuestionSidebar: Left panel showing list of questions
QuestionItem: Individual question with answer indicator
AnswerInput: Dynamic input component handling all 3 question types

Getting Started

Prerequisites

Node.js 18+ installed
npm or pnpm package manager

Installation

# Install dependencies (if not already installed)
npm install

Running the Application

Option 1: Using npm (Recommended)

npm run dev

Option 2: Using the startup script

# Windows: Double-click start.bat or run:
start.bat

# Linux/Mac/Git Bash:
bash start.sh

Option 3: Using Node directly

node node_modules/vite/bin/vite.js dev --host

The application will be available at:

Local: http://localhost:5173
Network: Check console output for your network IP addresses

You can now access the app from any device on your network!

Building for Production

npm run build
npm run preview

Sample Vendors

The application comes with 4 pre-configured vendors:

TechSecure Global Services (Technology Services) - COMPREHENSIVE
- 200 enterprise-grade compliance questions covering all 6 categories
- Data Security: 60 questions (encryption, monitoring, incident response, malware protection, SDLC)
- Access Control: 30 questions (MFA, passwords, privileged access, SSO, remote access)
- Compliance: 30 questions (certifications, audits, frameworks, risk management)
- Business Continuity: 30 questions (BCP/DRP, backups, redundancy, testing)
- Privacy: 30 questions (GDPR/CCPA, DPO, data retention, PIAs, international transfers)
- Network Security: 20 questions (firewalls, segmentation, vulnerability scanning, DDoS)
- Realistic questions based on industry standards (ISO 27001, SOC 2, NIST, GDPR)
CloudSecure Solutions (Technology)
- 15 general compliance questions
DataGuard Analytics (Analytics)
- 10 data analytics-focused questions
PaymentTech Services (Financial Services)
- 10 PCI DSS and payment security questions

Customization

Adding New Vendors

Edit src/lib/data/vendors.ts to add new vendors:

{
  id: 'vendor-4',
  name: 'Your Vendor Name',
  description: 'Vendor description',
  industry: 'Industry',
  questions: [
    {
      id: 'q1',
      text: 'Your question?',
      type: 'yes_no', // or 'multiple_choice' or 'text'
      category: 'Data Security',
      required: true,
      options: ['Option 1', 'Option 2'] // for multiple_choice only
    }
  ]
}

Adding New Categories

Edit the QuestionCategory type in src/lib/types.ts:

export type QuestionCategory =
  | 'Data Security'
  | 'Your New Category'
  | ...;

Color Scheme

The app uses CSS custom properties for easy theming:

Primary: Blue gradient (#667eea to #764ba2)
Success: Green (#10b981)
Danger: Red (#ef4444)
Background: Light grays with subtle shadows

Edit src/app.css to customize colors.

License

This project is open source and available under the MIT License.

create anopther button "Auto-Answered by AI" that auto fill the remaining unanswered questions. let's assume this is a response from the backend: [ { "question_id": {uuid}, "canonical_question_id": {uuid} "answer": { "type": "yes_no", "text" : "Y", "comment": "" }, "confidence_score": 0.87234, "status" : "LINKED }, { "question_id": {uuid}, "canonical_question_id": {uuid} "answer": { "type": "text", "text" : "We submit ISO compliance.....", "comment": "" }, "confidence_score": 0.77234, "status" : "CONFIRMATION_REQUIRED } ]

now, compare all the existing canonical_question_id from the response and matched it in the current filteredQuestions array then in order to mark it answered update the incidator

Top categories