### Copy Example .env File

Source: https://github.com/skewtas/maklarsystem/blob/main/ENVIRONMENT_SETUP.md

Copies the example environment file to a local configuration file, which is the first step in setting up project-specific environment variables.

```bash
cp .env.local.example .env.local
```

--------------------------------

### Installation and Setup

Source: https://github.com/skewtas/maklarsystem/blob/main/README.md

Provides instructions for cloning the repository, installing dependencies, setting up environment variables, configuring Supabase, and running the development server.

```bash
git clone [your-repo-url]
cd maklarsystem
npm install

# Create .env.local file with:
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-supabase-service-role-key

npm run dev
```

--------------------------------

### Development Server Commands

Source: https://github.com/skewtas/maklarsystem/blob/main/SETUP_STATUS.md

Commands to manage the development server. This includes starting the server and stopping it if it's already running.

```bash
# Stop current server (Ctrl+C in terminal running dev)
# Then restart:
npm run dev
```

--------------------------------

### Restart Development Server

Source: https://github.com/skewtas/maklarsystem/blob/main/ENVIRONMENT_SETUP.md

Instructs on how to restart the development server, a crucial step after modifying environment variables for changes to take effect.

```bash
# Stop the server (Ctrl+C) then:
npm run dev
```

--------------------------------

### SQL (pgTAP) Testing Setup

Source: https://github.com/skewtas/maklarsystem/blob/main/tests/README.md

This section details the setup and execution of SQL tests using pgTAP. It assumes pgtap is installed in the 'test' schema and explains how to run the SQL test files using a SQL runner.

```SQL
-- Assumes pgtap is installed in schema 'test'
-- See migration 20250808_move_pgtap_schema

-- To run pgtap files:
-- psql -d your_database -f tests/sql/pgtap/your_test_file.sql
-- Or use Supabase SQL Editor
```

--------------------------------

### Development Environment Settings

Source: https://github.com/skewtas/maklarsystem/blob/main/ENVIRONMENT_SETUP.md

Configures environment-specific settings for local development, such as enabling debug mode and controlling the use of mock data.

```env
NEXT_PUBLIC_ENVIRONMENT=development
NEXT_PUBLIC_DEBUG_MODE=true
NEXT_PUBLIC_USE_MOCK_DATA=false
```

--------------------------------

### Supabase Configuration Variables

Source: https://github.com/skewtas/maklarsystem/blob/main/ENVIRONMENT_SETUP.md

Defines the essential environment variables for connecting to Supabase, including the project URL and anonymous key for client-side access, and the service role key for server-side operations.

```env
NEXT_PUBLIC_SUPABASE_URL=https://[YOUR_PROJECT_REF].supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here
```

--------------------------------

### Setup Supabase Script

Source: https://github.com/skewtas/maklarsystem/blob/main/SETUP_STATUS.md

This bash script is responsible for setting up the Supabase environment. It needs to be made executable before running.

```bash
cd ../Context-Engineering-Intro
./setup-scripts/setup-supabase.sh
```

--------------------------------

### Mapbox Token Configuration

Source: https://github.com/skewtas/maklarsystem/blob/main/ENVIRONMENT_SETUP.md

Specifies the environment variable for integrating Mapbox services, allowing the application to display properties on a map.

```env
NEXT_PUBLIC_MAPBOX_TOKEN=your-mapbox-token-here
```

--------------------------------

### Analytics and Monitoring Configuration

Source: https://github.com/skewtas/maklarsystem/blob/main/ENVIRONMENT_SETUP.md

Defines environment variables for integrating analytics (Google Analytics) and error tracking (Sentry), enabling usage monitoring and issue detection.

```env
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
NEXT_PUBLIC_SENTRY_DSN=https://xxx@xxx.ingest.sentry.io/xxx
```

--------------------------------

### Generate Secure Secrets (Node.js)

Source: https://github.com/skewtas/maklarsystem/blob/main/ENVIRONMENT_SETUP.md

Offers a JavaScript code snippet to generate secure random strings using Node.js's built-in crypto module, suitable for creating secrets.

```javascript
require('crypto').randomBytes(32).toString('base64')
```

--------------------------------

### Environment Configuration

Source: https://github.com/skewtas/maklarsystem/blob/main/SETUP_STATUS.md

Configuration file for local environment variables, specifically for Supabase credentials. Requires NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, and SUPABASE_SERVICE_ROLE_KEY.

```env
NEXT_PUBLIC_SUPABASE_URL=https://YOUR_PROJECT.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-actual-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-actual-service-role-key
```

--------------------------------

### Generate Secure Secrets (macOS/Linux)

Source: https://github.com/skewtas/maklarsystem/blob/main/ENVIRONMENT_SETUP.md

Provides a command-line method for generating secure random strings using OpenSSL, commonly used for secrets like JWT or CSRF keys.

```bash
openssl rand -base64 32
```

--------------------------------

### Swedish Market Default Settings

Source: https://github.com/skewtas/maklarsystem/blob/main/ENVIRONMENT_SETUP.md

Specifies default configuration values tailored for the Swedish market, including currency, locale, and timezone, which can be customized as needed.

```env
NEXT_PUBLIC_DEFAULT_CURRENCY=SEK
NEXT_PUBLIC_DEFAULT_LOCALE=sv-SE
NEXT_PUBLIC_DEFAULT_TIMEZONE=Europe/Stockholm
```

--------------------------------

### Install Playwright Dependencies

Source: https://github.com/skewtas/maklarsystem/blob/main/tests/README.md

Installs Playwright and its necessary dependencies for end-to-end testing. This command ensures all browser binaries and drivers are downloaded.

```Shell
npx playwright install --with-deps
```

--------------------------------

### Email Notification Configuration

Source: https://github.com/skewtas/maklarsystem/blob/main/ENVIRONMENT_SETUP.md

Lists the environment variables required for configuring email sending capabilities, such as password resets and notifications, including SMTP server details and credentials.

```env
EMAIL_FROM=noreply@maklarsystem.se
EMAIL_SMTP_HOST=smtp.gmail.com
EMAIL_SMTP_PORT=587
EMAIL_SMTP_USER=your-email@gmail.com
EMAIL_SMTP_PASS=your-app-password
```

--------------------------------

### Migration Example: GlassInput

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Provides a before-and-after comparison for migrating a simple GlassInput to the enhanced version, demonstrating the use of the `label`, `error`, `maxLength`, `showCharacterCount`, and `required` props, along with React Hook Form integration.

```tsx
/* Before:
<GlassInput
  value={title}
  onChange={(e) => setTitle(e.target.value)}
  placeholder="Fastighetstitel"
/>
*/

/* After:
<Controller
  name="title"
  control={control}
  render={({ field, fieldState: { error } }) => (
    <GlassInput
      {...field}
      label="Fastighetstitel"
      placeholder="Ange titel för fastigheten"
      error={error?.message}
      maxLength={100}
      showCharacterCount
      required
    />
  )}
/>
*/
```

--------------------------------

### Seed Test Data Script

Source: https://github.com/skewtas/maklarsystem/blob/main/SETUP_STATUS.md

A TypeScript script to seed the database with test data. This is typically run after Supabase credentials have been configured and the database is ready.

```typescript
npx tsx scripts/seed-test-data.ts
```

--------------------------------

### GlassCheckbox Component Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Example of using the GlassCheckbox component for boolean toggles. It includes labels, descriptions, and size customization.

```tsx
<GlassCheckbox
  checked={hasParking}
  onChange={setHasParking}
  label="Parkering tillgänglig"
  description="Finns det parkeringsplats?"
  size="md"
/>
```

--------------------------------

### GlassSwitch Component Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Example of using the GlassSwitch component for binary toggles. It allows customization of size, label, description, and switch position.

```tsx
<GlassSwitch
  checked={allowsPets}
  onChange={setAllowsPets}
  label="Husdjur tillåtna"
  description="Är husdjur välkomna?"
  size="lg"
  position="right"
/>
```

--------------------------------

### GlassInput Component Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Example of using the GlassInput component for text input. It demonstrates features like labels, placeholders, prefixes, suffixes, character counting, and error handling.

```tsx
<GlassInput
  label="Adress"
  placeholder="Gatuadress"
  prefix={<MapPin size={16} />}
  suffix="SEK"
  maxLength={100}
  showCharacterCount
  required
  error="Detta fält är obligatoriskt"
/>
```

--------------------------------

### Notifications System Features

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Outlines the requirements for the notifications system, including real-time notifications, a notification center, email notifications, and push notification setup.

```APIDOC
Notifications System:
  - Implement real-time notifications.
  - Provide a central notification center.
  - Support email notifications.
  - Configure push notifications.
```

--------------------------------

### GlassDatePicker Component Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Example of using the GlassDatePicker component for date selection. It supports localization, minimum date constraints, and placeholder text.

```tsx
<GlassDatePicker
  label="Tillgänglig från"
  min={new Date().toISOString().split('T')[0]}
  placeholder="Välj datum"
/>
```

--------------------------------

### GlassSelect Component Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Example of using the GlassSelect component for dropdown selection. It supports searchable options, clearable selection, multiple selections, and custom option rendering with icons and descriptions.

```tsx
<GlassSelect
  options={[
    { value: 'villa', label: 'Villa', icon: <Home />, description: 'Fristående hus' },
    { value: 'apartment', label: 'Lägenhet' }
  ]}
  searchable
  clearable
  multiple
  label="Fastighetstyp"
/>
```

--------------------------------

### GlassNumberInput Component Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Example of using the GlassNumberInput component for numerical input. It includes features like currency prefixes/suffixes, thousand separators, minimum/maximum values, and step increments.

```tsx
<GlassNumberInput
  label="Pris"
  prefix="Kr"
  suffix="SEK"
  thousandSeparator
  min={0}
  step={10000}
/>
```

--------------------------------

### GlassTextarea Component Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Example of using the GlassTextarea component for multi-line text input. It supports auto-resizing, character counting, and defines minimum and maximum rows.

```tsx
<GlassTextarea
  label="Beskrivning"
  placeholder="Beskriv fastigheten..."
  autoResize
  minRows={3}
  maxRows={8}
  maxLength={1000}
  showCharacterCount
/>
```

--------------------------------

### GlassTabs Component Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Example of using the GlassTabs component for creating tabbed interfaces. It supports different variants, custom tab content with icons and badges, and active tab management.

```tsx
<GlassTabs
  tabs={[
    { id: 'basic', label: 'Grundinfo', icon: <Home size={16} />, badge: '3' },
    { id: 'details', label: 'Detaljer', icon: <Building size={16} /> }
  ]}
  activeTab={activeTab}
  onTabChange={setActiveTab}
  variant="pills" // 'default' | 'pills' | 'underline'
>
  <TabContent />
</GlassTabs>
```

--------------------------------

### GlassRadioGroup Component Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Example of using the GlassRadioGroup component for selecting one option from a group. It supports horizontal or vertical orientation, labels, descriptions, and custom options.

```tsx
<GlassRadioGroup
  name="energyRating"
  value={energyRating}
  onChange={setEnergyRating}
  options={[
    { value: 'A', label: 'A - Mycket bra', description: 'Under 50 kWh/m²' },
    { value: 'B', label: 'B - Bra', description: '50-75 kWh/m²' }
  ]}
  orientation="horizontal"
  label="Energiklass"
/>
```

--------------------------------

### GlassFormSection Component Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Example of using the GlassFormSection component to group form elements. It provides a title, description, optional icon, and collapsible functionality with different visual variants.

```tsx
<GlassFormSection
  title="Fastighetsinformation"
  description="Grundläggande information om fastigheten"
  icon={<Building size={24} />}
  variant="default" // 'default' | 'outlined' | 'minimal'
  collapsible
  badge="Obligatorisk"
>
  <FormContent />
</GlassFormSection>
```

--------------------------------

### GlassAccordion Component Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Example of using the GlassAccordion component for collapsible content sections. It allows for multiple items, custom titles, icons, badges, and default open states.

```tsx
<GlassAccordion
  items={[
    {
      id: 'pricing',
      title: 'Prissättning',
      icon: <DollarSign size={18} />,
      badge: 'Viktigt',
      content: <PricingContent />,
      defaultOpen: true
    }
  ]}
  type="multiple" // 'single' | 'multiple'
  collapsible
/>
```

--------------------------------

### Project Structure Overview

Source: https://github.com/skewtas/maklarsystem/blob/main/README.md

Illustrates the directory structure of the maklarsystem project, highlighting key directories like `src/app`, `src/components`, `src/lib`, `src/types`, `supabase`, and `public`.

```bash
maklarsystem/
├── src/
│   ├── app/              # Next.js app router pages
│   ├── components/       # React components
│   │   ├── layout/      # Layout components (Navigation, Sidebar)
│   │   └── dashboard/   # Dashboard-specific components
│   ├── lib/             # Utilities and Supabase client
│   └── types/           # TypeScript type definitions
├── supabase/            # Database schema and migrations
└── public/              # Static assets
```

--------------------------------

### Help Page Content

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Specifies the content and purpose of the Help page, including user documentation, FAQs, and support contact information.

```APIDOC
Help Page (/hjalp):
  - Provide user documentation.
  - Include Frequently Asked Questions (FAQs).
  - Display support contact information.
```

--------------------------------

### Object Detail Page Structure

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Outlines the required tabbed interface for the Object Detail page, including the specific sections to be implemented and the need for add/edit functionality for all fields.

```APIDOC
Object Detail Page (/objekt/[id]):
  - Tabbed Interface:
    - Översikt (Overview)
    - Beskrivningar (Descriptions)
    - Spekulanter (Interested Parties)
    - Dokument (Documents)
    - Parter (Parties Involved)
    - Affären (The Deal)
    - Uppföljning (Follow-up)
    - Historik (History)
  - Functionality:
    - Add/edit functionality for all fields within each tab.
    - Image gallery with upload capabilities.
    - Document management system.
    - Bid tracking implementation.
    - Viewing schedule management.
```

--------------------------------

### Settings Page Modules

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Specifies the different modules and functionalities required for the Settings page, including user profile management, system settings, email templates, document templates, and an administration section.

```APIDOC
Settings Page (/installningar):
  - User Profile Management.
  - System Settings configuration.
  - Email Templates management.
  - Document Templates management.
  - Administration section for system-wide settings.
```

--------------------------------

### Supabase Integration Requirements

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Details the requirements for integrating with Supabase for data operations, authentication, real-time subscriptions, and file storage. This includes replacing mock data with actual database queries and implementing robust error handling.

```APIDOC
Supabase Integration:
  - Replace mock data with real database queries using Supabase client.
  - Implement user authentication using Supabase Auth.
  - Utilize Supabase Realtime for real-time data updates.
  - Integrate Supabase Storage for file uploads (images, documents).
  - Implement comprehensive error handling for all Supabase operations.
  - Ensure proper handling of Supabase-related errors and display user-friendly messages.
```

--------------------------------

### Tasks Page Management

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Outlines the requirements for the Tasks page, including task listing with priorities, CRUD operations for tasks, status tracking, due date management, and user assignment.

```APIDOC
Tasks Page (/att-gora):
  - Task Listing:
    - Display tasks with priorities.
  - Task Management:
    - Create, edit, and delete tasks.
    - Track task status.
    - Manage due dates.
    - Assign tasks to users.
```

--------------------------------

### Use Full Schemas

Source: https://github.com/skewtas/maklarsystem/blob/main/src/lib/validation/README.md

Illustrates how to import and use complete validation schemas for data validation.

```typescript
import { kontaktCreateSchema, objektCreateSchema } from '@/lib/validation/schemas'

// Validera data
const result = kontaktCreateSchema.parse(inputData)
```

--------------------------------

### Projects Page Structure

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Defines the requirements for the Projects page, including listing projects, displaying project details, and grouping related objects within projects.

```APIDOC
Projects Page (/projekt):
  - Project Listing.
  - Project Details view.
  - Group related objects by project.
```

--------------------------------

### Reports/BI Page Features

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Details the requirements for the Reports/BI page, including sales statistics, commission tracking, performance metrics, graphical reports, and export functionality.

```APIDOC
Reports/BI Page (/bi):
  - Display sales statistics.
  - Track commissions.
  - Show performance metrics.
  - Generate graphical reports.
  - Implement export functionality for reports.
```

--------------------------------

### Use Partial Schemas

Source: https://github.com/skewtas/maklarsystem/blob/main/src/lib/validation/README.md

Shows how to import and extend partial schemas to build custom validation schemas.

```typescript
import { baseKontaktPartialSchema } from '@/lib/validation/schemas/partials/kontakt.partial'

// Bygg anpassade schemas
const customSchema = baseKontaktPartialSchema.extend({
  customField: z.string()
})
```

--------------------------------

### Responsive Design Requirements

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Specifies the requirements for responsive design, ensuring the application is optimized for various devices including mobile phones, tablets, and includes print styles and accessibility features.

```APIDOC
Responsive Design:
  - Optimize for mobile devices.
  - Ensure proper display on tablets.
  - Implement print styles.
  - Adhere to accessibility standards.
```

--------------------------------

### Component Import

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Imports various glassmorphism UI components from a local '@/components/ui/glass' path. This is the initial step for using the library in a TypeScript project.

```typescript
import {
  GlassInput,
  GlassSelect,
  GlassTextarea,
  // ... other components
} from '@/components/ui/glass'
```

--------------------------------

### Global Search Functionality

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Details the requirements for the global search feature, including quick filters, advanced search options, and search history.

```APIDOC
Search Functionality:
  - Implement global search across all entities.
  - Provide quick filters for common searches.
  - Include advanced search options for complex queries.
  - Maintain search history for users.
```

--------------------------------

### Contact Detail Page Functionality

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Details the requirements for the Contact Detail page, including displaying and editing contact information, managing related objects, communication history, notes, activities, and document attachments.

```APIDOC
Contact Detail Page (/kontakter/[id]):
  - Display and edit full contact information.
  - List related objects associated with the contact.
  - Manage and display communication history.
  - Add and track notes and activities.
  - Handle document attachments.
```

--------------------------------

### Supabase Database Tables

Source: https://github.com/skewtas/maklarsystem/blob/main/README.md

Lists the main tables used in the Supabase database for the maklarsystem, including users, properties, contacts, viewings, bids, calendar events, tasks, and notifications.

```sql
-- Main tables:
-- users - System users (agents, coordinators, etc.)
-- objekt - Real estate properties
-- kontakter - Contacts (sellers, buyers, prospects)
-- visningar - Property viewings
-- bud - Bids on properties
-- kalenderhändelser - Calendar events
-- uppgifter - Tasks and to-dos
-- notifikationer - System notifications
```

--------------------------------

### New Entity Creation Forms

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Specifies the requirements for creating new entities, including dropdown menu implementation, forms for new objects (manual and property extract), new contacts, and new calendar events, along with form validation.

```APIDOC
New Entity Creation (/nytt):
  - Implement dropdown menus for selections.
  - New Object Form:
    - Manual entry.
    - Data import via property extract.
  - New Contact Form.
  - New Calendar Event Form.
  - Implement comprehensive form validation for all new entity forms.
```

--------------------------------

### Dokumentation för Validation Schemas

Source: https://github.com/skewtas/maklarsystem/blob/main/src/lib/validation/REFACTORING_SUMMARY.md

Struktur för README.md som beskriver refaktoriseringsarbetet, inklusive syfte, genomförda ändringar, tekniska fördelar och nästa steg.

```markdown
# Dokumentation för Validation Schemas

Detta dokument beskriver refaktoriseringsarbetet som genomförts för att förbättra strukturen och återanvändbarheten av våra validation schemas.

## Syfte

- Centralisera enums för att följa DRY-principen.
- Skapa modulära partial schemas för ökad flexibilitet och återanvändbarhet.
- Uppdatera befintliga schemas för att använda de nya komponenterna.
- Säkerställa bakåtkompatibilitet.

## Genomförda Ändringar

### 1. Centraliserade Enums

- Skapade centraliserade enum-filer (`common.enums.ts`, `kontakt.enums.ts`, `objekt.enums.ts`).
- Använde TypeScript `const assertions` för type safety.

### 2. Partial Schemas

- Skapade modulära partial schemas för kontakt och objekt.
- Möjliggjorde flexibel kombinering av schema-delar.

### 3. Uppdaterade Befintliga Schemas

- Refaktoriserade `kontakter.schema.ts` och `objekt.schema.ts`.

### 4. Bakåtkompatibilitet

- Bibehöll befintliga exports genom re-exports.

## Tekniska Fördelar

- DRY-princip
- Type Safety
- Moduläritet
- Maintainability
- Återanvändbarhet
- Konsistens

## Nästa Steg

- Gradvis migrering av befintlig kod.
- Utöka partial schemas vid behov.
- Uppdatera API-dokumentation.
```

--------------------------------

### Run Jest Unit Tests

Source: https://github.com/skewtas/maklarsystem/blob/main/tests/README.md

Instructions for executing unit tests using Jest. This command runs all tests defined within the project.

```Shell
npm test
```

--------------------------------

### CRM Page Features

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Details the required features for the CRM page, focusing on managing leads, tracking customer meetings, implementing a follow-up system, managing call lists, and enabling email campaigns.

```APIDOC
CRM Page (/crm):
  - Manage tips and leads.
  - Track customer meetings.
  - Implement a follow-up system.
  - Manage call lists.
  - Support for email campaigns.
```

--------------------------------

### GlassFormGrid Component Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Demonstrates the usage of the GlassFormGrid component for creating responsive grid layouts in forms. It allows specifying the number of columns, gap between items, responsiveness, and alignment.

```tsx
<GlassFormGrid
  columns={3}
  gap="md"
  responsive
  alignItems="start">
  <GlassInput label="Rum" />
  <GlassInput label="Yta" />
  <GlassInput label="Byggår" />
</GlassFormGrid>
```

--------------------------------

### Form Validation and User Feedback

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Highlights the technical requirements for form validation and user feedback mechanisms, including toast notifications and confirmation dialogs.

```APIDOC
User Interface Elements:
  - Implement robust form validation for all forms.
  - Utilize toast notifications for user feedback (e.g., success, error messages).
  - Implement confirmation dialogs for critical actions.
```

--------------------------------

### Import Enums

Source: https://github.com/skewtas/maklarsystem/blob/main/src/lib/validation/README.md

Demonstrates how to import common and specific enums from the centralized enum definitions.

```typescript
import { STATUS_VALUES, KONTAKT_TYP_VALUES } from '@/lib/enums'
```

--------------------------------

### Next.js App Router and TypeScript Usage

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Specifies the core technical requirements for the project, including the use of Next.js App Router for routing and structure, and TypeScript for type safety across all components and logic.

```APIDOC
Technical Stack:
  - Framework: Next.js App Router
  - Language: TypeScript (for all components and logic)
  - Styling: Tailwind CSS
  - Database: Supabase
  - Key Features: Error handling, loading states, form validation, toast notifications, confirmation dialogs.
```

--------------------------------

### Organizations Page Tabs and CRUD

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Defines the structure and functionality for the Organizations page, including three distinct tabs for different organization types and the requirement for CRUD operations for each.

```APIDOC
Organizations Page (/organisationer):
  - Tabs:
    - Bostadsrättsföreningar (Housing Associations)
    - Förvaltare (Property Managers)
    - Långivare (Lenders)
  - Functionality:
    - Implement Create, Read, Update, Delete (CRUD) operations for each organization type.
    - Include search and filtering capabilities for organizations.
```

--------------------------------

### Run Playwright End-to-End Tests

Source: https://github.com/skewtas/maklarsystem/blob/main/tests/README.md

Executes the end-to-end tests using Playwright. This command initiates the test suite that simulates user interactions with the application.

```Shell
npm run e2e
```

--------------------------------

### Glassmorphism Styling

Source: https://github.com/skewtas/maklarsystem/blob/main/src/components/ui/glass/README.md

Core CSS classes defining the glassmorphism aesthetic for UI components. These classes provide background blur, transparency, borders, and shadows.

```css
backdrop-blur-xl bg-white/20 rounded-3xl border border-white/30 shadow-xl
```

--------------------------------

### Calendar Page Functionality

Source: https://github.com/skewtas/maklarsystem/blob/main/prd-phase2.txt

Specifies the requirements for the Calendar page, including different view options, event management, event types with color coding, drag-and-drop functionality, and integration with objects and contacts.

```APIDOC
Calendar Page (/kalender):
  - Views:
    - Full calendar view (month, week, day).
  - Event Management:
    - Create and edit events.
    - Support different event types with color coding.
    - Implement drag and drop functionality for events.
  - Integration:
    - Link events to objects and contacts.
```

--------------------------------

### Next.js 15 Authentication Warning

Source: https://github.com/skewtas/maklarsystem/blob/main/README.md

This section details a critical compatibility issue between Next.js 15 and Supabase Auth Helpers due to changes in the cookies API. It outlines the symptoms and the current workaround of disabling authentication. Developers are advised against using specific Supabase client functions in server components.

```markdown
# Mäklarsystem - Professional Real Estate Management System

## 🚨 KRITISK VARNING: Next.js 15 Kompatibilitet

**VIKTIGT:** Detta system använder för närvarande **AVSTÄNGD AUTENTISERING** på grund av kompatibilitetsproblem mellan Next.js 15 och Supabase Auth Helpers.

### ⚠️ Känt Problem:
- **Next.js 15** ändrade cookies API som krashar Supabase Auth Helpers
- **Symptom:** Vit sida, `cookies().get(...) should be awaited` fel
- **Nuvarande lösning:** All autentisering avstängd tills fix finns

### 📋 Vad som är avstängt:
- ❌ Inloggning/utloggning
- ❌ Rollbaserad åtkomstkontroll  
- ❌ Session hantering
- ❌ Middleware autentisering

### 🔧 För utvecklare:
Se `NEXT_JS_15_AUTH_FIX.md` för fullständig dokumentation av problemet och lösningen.

**ANVÄND ALDRIG:**
- `createServerComponentClient`
- `createMiddlewareClient`
- `cookies().get()` i server components
```