Initial commit

2026-05-25 09:45:08 +00:00
commit 662842019c
34 changed files with 10033 additions and 0 deletions
@@ -0,0 +1,53 @@
+# Dependencies
+node_modules/
+backend/node_modules/
+frontend/node_modules/
+
+# Production builds
+dist/
+frontend/dist/
+backend/public/
+
+# Environment configurations
+.env
+.env.local
+.env.*.local
+
+# Databases and persistent files
+data/
+backend/database.db
+*.db
+*.db-journal
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# System files
+.DS_Store
+Thumbs.db
+
+# extra safety
+.env
+*.env
+data/
+*.db
+*.sqlite
+*.sqlite3
+*.pem
+*.key
+*.crt
+*.token
+*secret*
+dist/
+build/
+frontend/dist/
+node_modules/
+__pycache__/
+.venv/
+venv/
+
+# local backups
+.gitignore.bak-*
@@ -0,0 +1,32 @@
+# Stage 1: Build the frontend React app
+FROM node:20-slim AS frontend-builder
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+RUN npm install
+COPY frontend/ ./
+RUN npm run build
+
+# Stage 2: Setup the backend and copy build output
+FROM node:20-slim
+WORKDIR /app
+
+COPY backend/package*.json ./backend/
+WORKDIR /app/backend
+RUN npm install --only=production
+
+# Copy backend source
+COPY backend/ ./
+
+# Copy built frontend from Stage 1 into the backend public static directory
+COPY --from=frontend-builder /app/frontend/dist ./public
+
+# Set default env variables
+ENV PORT=3000
+ENV NODE_ENV=production
+ENV DATABASE_PATH=/app/data/database.db
+
+# Create persistent storage folder for SQLite database
+RUN mkdir -p /app/data
+
+EXPOSE 3000
+CMD ["node", "server.js"]
@@ -0,0 +1,246 @@
+const sqlite3 = require('sqlite3').verbose();
+const path = require('path');
+const fs = require('fs');
+
+const dbPath = process.env.DATABASE_PATH || path.join(__dirname, 'database.db');
+
+// Ensure database directory exists
+const dbDir = path.dirname(dbPath);
+if (!fs.existsSync(dbDir)) {
+  fs.mkdirSync(dbDir, { recursive: true });
+}
+
+// Database schema is initialized safely using CREATE TABLE IF NOT EXISTS below.
+
+const db = new sqlite3.Database(dbPath, (err) => {
+  if (err) {
+    console.error('Error opening database:', err.message);
+  } else {
+    console.log('Connected to SQLite database at:', dbPath);
+    initializeTables();
+  }
+});
+
+function run(sql, params = []) {
+  return new Promise((resolve, reject) => {
+    db.run(sql, params, function (err) {
+      if (err) reject(err);
+      else resolve({ id: this.lastID, changes: this.changes });
+    });
+  });
+}
+
+function get(sql, params = []) {
+  return new Promise((resolve, reject) => {
+    db.get(sql, params, (err, row) => {
+      if (err) reject(err);
+      else resolve(row);
+    });
+  });
+}
+
+function all(sql, params = []) {
+  return new Promise((resolve, reject) => {
+    db.all(sql, params, (err, rows) => {
+      if (err) reject(err);
+      else resolve(rows);
+    });
+  });
+}
+
+async function initializeTables() {
+  try {
+    // 1. Create Departments Table
+    await run(`
+      CREATE TABLE IF NOT EXISTS departments (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        name TEXT UNIQUE NOT NULL
+      )
+    `);
+
+    // 2. Create Companies Table (New dictionary table)
+    await run(`
+      CREATE TABLE IF NOT EXISTS companies (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        name TEXT UNIQUE NOT NULL
+      )
+    `);
+
+    // 3. Create Employees Table (Updated Schema with foreign keys)
+    await run(`
+      CREATE TABLE IF NOT EXISTS employees (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        name TEXT NOT NULL,
+        company_id INTEGER,
+        job_title TEXT NOT NULL,
+        department_id INTEGER,
+        phone TEXT,
+        email TEXT,
+        building TEXT,
+        floor TEXT,
+        FOREIGN KEY (department_id) REFERENCES departments(id) ON DELETE SET NULL,
+        FOREIGN KEY (company_id) REFERENCES companies(id) ON DELETE SET NULL
+      )
+    `);
+
+    // Seed data if database is fresh
+    const deptCount = await get('SELECT COUNT(*) as count FROM departments');
+    if (deptCount.count === 0) {
+      console.log('Seeding initial departments, companies, and employees...');
+      await seedData();
+    }
+  } catch (error) {
+    console.error('Error initializing tables:', error);
+  }
+}
+
+async function seedData() {
+  // Seed Departments
+  const depts = [
+    'Руководство',
+    'Производственно-технический отдел',
+    'Бухгалтерия',
+    'Отдел кадров',
+    'Информационные технологии',
+    'Монтажный участок',
+    'Цех металлоконструкций',
+    'Служба безопасности'
+  ];
+
+  const deptIds = {};
+  for (const dept of depts) {
+    const res = await run('INSERT INTO departments (name) VALUES (?)', [dept]);
+    deptIds[dept] = res.id;
+  }
+
+  // Seed Companies (Melto Raboty)
+  const companiesList = [
+    'АО КМУ Гидромонтаж',
+    'ООО Гидромонтаж-Услуги',
+    'ООО Спецтранс'
+  ];
+
+  const companyIds = {};
+  for (const comp of companiesList) {
+    const res = await run('INSERT INTO companies (name) VALUES (?)', [comp]);
+    companyIds[comp] = res.id;
+  }
+
+  // Seed Employees
+  const employees = [
+    {
+      name: 'Иванов Александр Сергеевич',
+      company: 'АО КМУ Гидромонтаж',
+      job_title: 'Генеральный директор',
+      department: 'Руководство',
+      phone: '+7 (391) 234-56-78',
+      email: 'a.ivanov@gidrom24.ru',
+      building: 'Административный корпус',
+      floor: '3'
+    },
+    {
+      name: 'Петров Дмитрий Васильевич',
+      company: 'АО КМУ Гидромонтаж',
+      job_title: 'Руководитель IT-отдела',
+      department: 'Информационные технологии',
+      phone: '+7 (391) 234-56-79',
+      email: 'd.petrov@gidrom24.ru',
+      building: 'Административный корпус',
+      floor: '2'
+    },
+    {
+      name: 'Сидоров Алексей Михайлович',
+      company: 'АО КМУ Гидромонтаж',
+      job_title: 'Системный администратор',
+      department: 'Информационные технологии',
+      phone: '+7 (923) 456-78-90',
+      email: 'sysadmin@gidrom24.ru',
+      building: 'Административный корпус',
+      floor: '2'
+    },
+    {
+      name: 'Смирнова Елена Николаевна',
+      company: 'ООО Гидромонтаж-Услуги',
+      job_title: 'Главный бухгалтер',
+      department: 'Бухгалтерия',
+      phone: '+7 (391) 234-56-80',
+      email: 'e.smirnova@gidrom24.ru',
+      building: 'Административный корпус',
+      floor: '3'
+    },
+    {
+      name: 'Кузнецов Сергей Петрович',
+      company: 'АО КМУ Гидромонтаж',
+      job_title: 'Начальник ПТО',
+      department: 'Производственно-технический отдел',
+      phone: '+7 (391) 234-56-81',
+      email: 's.kuznetsov@gidrom24.ru',
+      building: 'Производственный корпус №1',
+      floor: '2'
+    },
+    {
+      name: 'Козлова Мария Игоревна',
+      company: 'АО КМУ Гидромонтаж',
+      job_title: 'Начальник отдела кадров',
+      department: 'Отдел кадров',
+      phone: '+7 (391) 234-56-82',
+      email: 'm.kozlova@gidrom24.ru',
+      building: 'Административный корпус',
+      floor: '3'
+    },
+    {
+      name: 'Морозов Артем Александрович',
+      company: 'ООО Спецтранс',
+      job_title: 'Начальник цеха металлоконструкций',
+      department: 'Цех металлоконструкций',
+      phone: '+7 (913) 765-43-21',
+      email: 'a.morozov@gidrom24.ru',
+      building: 'Производственный корпус №1',
+      floor: '1'
+    },
+    {
+      name: 'Васильев Игорь Олегович',
+      company: 'ООО Гидромонтаж-Услуги',
+      job_title: 'Бригадир монтажников',
+      department: 'Монтажный участок',
+      phone: '+7 (902) 123-45-67',
+      email: 'i.vasiliev@gidrom24.ru',
+      building: 'Складской терминал',
+      floor: '1'
+    },
+    {
+      name: 'Федоров Роман Геннадьевич',
+      company: 'ООО Спецтранс',
+      job_title: 'Начальник службы безопасности',
+      department: 'Служба безопасности',
+      phone: '+7 (391) 234-56-99',
+      email: 'security@gidrom24.ru',
+      building: 'Административный корпус',
+      floor: '1'
+    }
+  ];
+
+  for (const emp of employees) {
+    await run(`
+      INSERT INTO employees (name, company_id, job_title, department_id, phone, email, building, floor)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+    `, [
+      emp.name,
+      companyIds[emp.company],
+      emp.job_title,
+      deptIds[emp.department],
+      emp.phone,
+      emp.email,
+      emp.building,
+      emp.floor
+    ]);
+  }
+  console.log('Database initialized and seeded successfully.');
+}
+
+module.exports = {
+  db,
+  run,
+  get,
+  all
+};
@@ -0,0 +1,22 @@
+{
+  "name": "corporate-address-book-backend",
+  "version": "1.0.0",
+  "description": "Intranet Corporate Address Book Backend Server",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "bcryptjs": "^2.4.3",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2",
+    "jsonwebtoken": "^9.0.2",
+    "multer": "^1.4.5-lts.1",
+    "sqlite3": "^5.1.7"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.0"
+  }
+}
@@ -0,0 +1,381 @@
+require('dotenv').config();
+const express = require('express');
+const cors = require('cors');
+const path = require('path');
+const fs = require('fs');
+const jwt = require('jsonwebtoken');
+const bcrypt = require('bcryptjs');
+const db = require('./db');
+
+const app = express();
+const PORT = process.env.PORT || 8180;
+const JWT_SECRET = process.env.JWT_SECRET || 'super_secret_corporate_token_key_123!';
+
+// Setup default admin credentials
+const ADMIN_USER = process.env.ADMIN_USERNAME || 'admin';
+let ADMIN_PASS = process.env.ADMIN_PASSWORD || 'adminpass';
+const ADMIN_PASS_HASH = bcrypt.hashSync(ADMIN_PASS, 10);
+
+console.log(`=========================================`);
+console.log(`Intranet Address Book Server starting...`);
+console.log(`Admin Username: ${ADMIN_USER}`);
+console.log(`Admin Password: ${process.env.ADMIN_PASSWORD ? '****** (From Env)' : 'adminpass (Default)'}`);
+console.log(`Default Port: ${PORT}`);
+console.log(`=========================================`);
+
+app.use(cors());
+app.use(express.json());
+
+// Serve React static build files
+const publicDir = path.join(__dirname, 'public');
+if (fs.existsSync(publicDir)) {
+  app.use(express.static(publicDir));
+}
+
+// Authentication Middleware
+function authenticateToken(req, res, next) {
+  const authHeader = req.headers['authorization'];
+  const token = authHeader && authHeader.split(' ')[1];
+
+  if (!token) return res.status(401).json({ error: 'Access denied. No token provided.' });
+
+  jwt.verify(token, JWT_SECRET, (err, user) => {
+    if (err) return res.status(403).json({ error: 'Invalid or expired token.' });
+    req.user = user;
+    next();
+  });
+}
+
+// ==========================================
+// API ROUTES
+// ==========================================
+
+// 1. Auth Endpoint
+app.post('/api/auth/login', (req, res) => {
+  const { username, password } = req.body;
+  
+  if (!username || !password) {
+    return res.status(400).json({ error: 'Username and password are required' });
+  }
+
+  if (username === ADMIN_USER && bcrypt.compareSync(password, ADMIN_PASS_HASH)) {
+    const token = jwt.sign({ username }, JWT_SECRET, { expiresIn: '24h' });
+    return res.json({ token, username });
+  }
+
+  return res.status(401).json({ error: 'Incorrect username or password' });
+});
+
+// 2. Departments Endpoints
+app.get('/api/departments', async (req, res) => {
+  try {
+    const rows = await db.all('SELECT * FROM departments ORDER BY name ASC');
+    res.json(rows);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+app.post('/api/departments', authenticateToken, async (req, res) => {
+  const { name } = req.body;
+  if (!name || name.trim() === '') {
+    return res.status(400).json({ error: 'Department name is required' });
+  }
+
+  try {
+    const result = await db.run('INSERT INTO departments (name) VALUES (?)', [name.trim()]);
+    res.status(201).json({ id: result.id, name: name.trim() });
+  } catch (error) {
+    if (error.message.includes('UNIQUE')) {
+      return res.status(400).json({ error: 'Department already exists' });
+    }
+    res.status(500).json({ error: error.message });
+  }
+});
+
+app.delete('/api/departments/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  try {
+    await db.run('UPDATE employees SET department_id = NULL WHERE department_id = ?', [id]);
+    const result = await db.run('DELETE FROM departments WHERE id = ?', [id]);
+    res.json({ success: true, changes: result.changes });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// 3. Companies Endpoints (New dictionary CRUD)
+app.get('/api/companies', async (req, res) => {
+  try {
+    const rows = await db.all('SELECT * FROM companies ORDER BY name ASC');
+    res.json(rows);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+app.post('/api/companies', authenticateToken, async (req, res) => {
+  const { name } = req.body;
+  if (!name || name.trim() === '') {
+    return res.status(400).json({ error: 'Company name is required' });
+  }
+
+  try {
+    const result = await db.run('INSERT INTO companies (name) VALUES (?)', [name.trim()]);
+    res.status(201).json({ id: result.id, name: name.trim() });
+  } catch (error) {
+    if (error.message.includes('UNIQUE')) {
+      return res.status(400).json({ error: 'Company already exists' });
+    }
+    res.status(500).json({ error: error.message });
+  }
+});
+
+app.delete('/api/companies/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  try {
+    await db.run('UPDATE employees SET company_id = NULL WHERE company_id = ?', [id]);
+    const result = await db.run('DELETE FROM companies WHERE id = ?', [id]);
+    res.json({ success: true, changes: result.changes });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// 4. Employees Endpoints (Search & List)
+app.get('/api/employees', async (req, res) => {
+  const { search, departmentId } = req.query;
+  
+  let sql = `
+    SELECT e.*, d.name as department_name, c.name as company_name 
+    FROM employees e 
+    LEFT JOIN departments d ON e.department_id = d.id
+    LEFT JOIN companies c ON e.company_id = c.id
+  `;
+  const params = [];
+  const conditions = [];
+
+  if (departmentId) {
+    conditions.push('e.department_id = ?');
+    params.push(departmentId);
+  }
+
+  if (conditions.length > 0) {
+    sql += ' WHERE ' + conditions.join(' AND ');
+  }
+
+  sql += ' ORDER BY e.name ASC';
+
+  try {
+    let rows = await db.all(sql, params);
+
+    if (search && search.trim() !== '') {
+      const cleanSearch = search.trim().toLowerCase();
+      
+      const normalizePhone = (p) => {
+        if (!p) return '';
+        const digits = p.replace(/\D/g, '');
+        if (digits.length === 11 && (digits.startsWith('7') || digits.startsWith('8'))) {
+          return digits.slice(1);
+        }
+        return digits;
+      };
+
+      const searchDigits = normalizePhone(cleanSearch);
+
+      rows = rows.filter(e => {
+        const nameMatch = e.name && e.name.toLowerCase().includes(cleanSearch);
+        const jobMatch = e.job_title && e.job_title.toLowerCase().includes(cleanSearch);
+        const emailMatch = e.email && e.email.toLowerCase().includes(cleanSearch);
+        const deptMatch = e.department_name && e.department_name.toLowerCase().includes(cleanSearch);
+        const compMatch = e.company_name && e.company_name.toLowerCase().includes(cleanSearch);
+        const buildMatch = e.building && e.building.toLowerCase().includes(cleanSearch);
+        const floorMatch = e.floor && e.floor.toLowerCase().includes(cleanSearch);
+
+        let phoneMatch = false;
+        if (searchDigits.length > 0 && e.phone) {
+          const empPhoneDigits = normalizePhone(e.phone);
+          if (empPhoneDigits.includes(searchDigits)) {
+            phoneMatch = true;
+          }
+        }
+
+        return nameMatch || jobMatch || emailMatch || deptMatch || compMatch || buildMatch || floorMatch || phoneMatch;
+      });
+    }
+
+    res.json(rows);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Create Employee
+app.post('/api/employees', authenticateToken, async (req, res) => {
+  const { name, company_id, job_title, department_id, phone, email, building, floor } = req.body;
+  
+  if (!name || !job_title) {
+    return res.status(400).json({ error: 'Name and Job Title are required fields.' });
+  }
+
+  try {
+    const result = await db.run(`
+      INSERT INTO employees (name, company_id, job_title, department_id, phone, email, building, floor)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+    `, [
+      name.trim(), 
+      company_id || null, 
+      job_title.trim(), 
+      department_id || null, 
+      phone ? phone.trim() : '', 
+      email ? email.trim() : '', 
+      building ? building.trim() : '', 
+      floor ? floor.trim() : ''
+    ]);
+    
+    const newEmp = await db.get(`
+      SELECT e.*, d.name as department_name, c.name as company_name 
+      FROM employees e 
+      LEFT JOIN departments d ON e.department_id = d.id 
+      LEFT JOIN companies c ON e.company_id = c.id
+      WHERE e.id = ?
+    `, [result.id]);
+
+    res.status(201).json(newEmp);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Update Employee
+app.put('/api/employees/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  const { name, company_id, job_title, department_id, phone, email, building, floor } = req.body;
+
+  if (!name || !job_title) {
+    return res.status(400).json({ error: 'Name and Job Title are required fields.' });
+  }
+
+  try {
+    await db.run(`
+      UPDATE employees 
+      SET name = ?, company_id = ?, job_title = ?, department_id = ?, phone = ?, email = ?, building = ?, floor = ?
+      WHERE id = ?
+    `, [
+      name.trim(), 
+      company_id || null, 
+      job_title.trim(), 
+      department_id || null, 
+      phone ? phone.trim() : '', 
+      email ? email.trim() : '', 
+      building ? building.trim() : '', 
+      floor ? floor.trim() : '', 
+      id
+    ]);
+    
+    const updatedEmp = await db.get(`
+      SELECT e.*, d.name as department_name, c.name as company_name 
+      FROM employees e 
+      LEFT JOIN departments d ON e.department_id = d.id 
+      LEFT JOIN companies c ON e.company_id = c.id
+      WHERE e.id = ?
+    `, [id]);
+
+    res.json(updatedEmp);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Delete Employee
+app.delete('/api/employees/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+  try {
+    const result = await db.run('DELETE FROM employees WHERE id = ?', [id]);
+    res.json({ success: true, changes: result.changes });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Bulk Export (JSON dump of departments, companies, and employees)
+app.get('/api/admin/export', authenticateToken, async (req, res) => {
+  try {
+    const employees = await db.all('SELECT * FROM employees');
+    const departments = await db.all('SELECT * FROM departments');
+    const companies = await db.all('SELECT * FROM companies');
+    res.json({ employees, departments, companies });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Bulk Import
+app.post('/api/admin/import', authenticateToken, async (req, res) => {
+  const { employees, departments, companies } = req.body;
+  
+  if (!Array.isArray(employees) || !Array.isArray(departments) || !Array.isArray(companies)) {
+    return res.status(400).json({ error: 'Invalid data format. Expected arrays for employees, departments, and companies.' });
+  }
+
+  try {
+    // Truncate existing data
+    await db.run('DELETE FROM employees');
+    await db.run('DELETE FROM departments');
+    await db.run('DELETE FROM companies');
+    // Reset autoincrement sequence
+    await db.run("UPDATE sqlite_sequence SET seq = 0 WHERE name = 'employees'");
+    await db.run("UPDATE sqlite_sequence SET seq = 0 WHERE name = 'departments'");
+    await db.run("UPDATE sqlite_sequence SET seq = 0 WHERE name = 'companies'");
+
+    // Insert departments
+    const deptIdMapping = {};
+    for (const d of departments) {
+      const result = await db.run('INSERT INTO departments (name) VALUES (?)', [d.name]);
+      deptIdMapping[d.id] = result.id;
+    }
+
+    // Insert companies
+    const compIdMapping = {};
+    for (const c of companies) {
+      const result = await db.run('INSERT INTO companies (name) VALUES (?)', [c.name]);
+      compIdMapping[c.id] = result.id;
+    }
+
+    // Insert employees
+    for (const e of employees) {
+      const newDeptId = e.department_id ? (deptIdMapping[e.department_id] || null) : null;
+      const newCompId = e.company_id ? (compIdMapping[e.company_id] || null) : null;
+      await db.run(`
+        INSERT INTO employees (name, company_id, job_title, department_id, phone, email, building, floor)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+      `, [
+        e.name,
+        newCompId,
+        e.job_title,
+        newDeptId,
+        e.phone || '',
+        e.email || '',
+        e.building || '',
+        e.floor || ''
+      ]);
+    }
+
+    res.json({ success: true, message: `Imported ${departments.length} departments, ${companies.length} companies and ${employees.length} employees.` });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Catch-all route to serve Index.html
+if (fs.existsSync(publicDir)) {
+  app.get('*', (req, res) => {
+    res.sendFile(path.join(publicDir, 'index.html'));
+  });
+}
+
+// Start Server
+app.listen(PORT, '0.0.0.0', () => {
+  console.log(`Server is running on http://localhost:${PORT}`);
+  console.log(`Ready for Intranet users!`);
+});
@@ -0,0 +1,20 @@
+version: '3.8'
+
+services:
+  address-book:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: corporate-address-book
+    restart: unless-stopped
+    ports:
+      - "8180:3000"
+    environment:
+      - PORT=3000
+      - NODE_ENV=production
+      - DATABASE_PATH=/app/data/database.db
+      - ADMIN_USERNAME=${ADMIN_USERNAME:-admin}
+      - ADMIN_PASSWORD=${ADMIN_PASSWORD:-adminpass}
+      - JWT_SECRET=${JWT_SECRET:-corporate-address-book-secret-key-987654321!}
+    volumes:
+      - ./data:/app/data
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,27 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "vite": "^8.0.12"
+  }
+}
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}
@@ -0,0 +1,301 @@
+import React, { useState, useEffect } from 'react';
+import Sidebar from './components/Sidebar';
+import SearchFilters from './components/SearchFilters';
+import EmployeeTable from './components/EmployeeTable';
+import DetailModal from './components/DetailModal';
+import AdminPanel from './components/AdminPanel';
+import { SunIcon, MoonIcon, LoginIcon, LogoutIcon } from './utils/svgs';
+
+// Normalize Russian phone numbers to 10 digits (strip +7, 7, 8, spaces, dashes, brackets)
+const getPhoneDigits = (phone) => {
+  if (!phone) return '';
+  let digits = phone.replace(/\D/g, '');
+  // If it starts with 7 or 8 and is 11 digits, strip the first digit (country code)
+  if (digits.length === 11 && (digits.startsWith('7') || digits.startsWith('8'))) {
+    return digits.substring(1);
+  }
+  return digits;
+};
+
+// Normalize search query for phone matching
+const getQueryPhoneDigits = (q) => {
+  let digits = q.replace(/\D/g, '');
+  // Strip leading 7 or 8 if the query starts with them to allow matching the 10-digit local format
+  if (digits.startsWith('7') || digits.startsWith('8')) {
+    return digits.substring(1);
+  }
+  return digits;
+};
+
+const App = () => {
+  const [employees, setEmployees] = useState([]);
+  const [departments, setDepartments] = useState([]);
+  const [companies, setCompanies] = useState([]);
+  
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedDept, setSelectedDept] = useState(null);
+  const [activeView, setActiveView] = useState('directory'); // 'directory', 'login', 'admin'
+  const [selectedEmployee, setSelectedEmployee] = useState(null);
+  
+  // Auth state
+  const [token, setToken] = useState(localStorage.getItem('token') || '');
+  const [username, setUsername] = useState(localStorage.getItem('username') || '');
+  
+  // Login form state
+  const [loginForm, setLoginForm] = useState({ username: '', password: '' });
+  const [loginError, setLoginError] = useState('');
+
+  // Theme state
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+
+  // Fetch initial data from server
+  const fetchData = async () => {
+    try {
+      const empRes = await fetch('/api/employees');
+      const empData = await empRes.json();
+      if (empRes.ok) setEmployees(empData);
+
+      const deptRes = await fetch('/api/departments');
+      const deptData = await deptRes.json();
+      if (deptRes.ok) setDepartments(deptData);
+
+      const compRes = await fetch('/api/companies');
+      const compData = await compRes.json();
+      if (compRes.ok) setCompanies(compData);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  // Update HTML data-theme attribute for CSS styling
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+  };
+
+  // Auth Handlers
+  const handleLoginSubmit = async (e) => {
+    e.preventDefault();
+    setLoginError('');
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(loginForm)
+      });
+      const data = await res.json();
+      if (res.ok) {
+        setToken(data.token);
+        setUsername(data.username);
+        localStorage.setItem('token', data.token);
+        localStorage.setItem('username', data.username);
+        setLoginForm({ username: '', password: '' });
+        setActiveView('admin');
+      } else {
+        setLoginError(data.error || 'Ошибка входа');
+      }
+    } catch (err) {
+      setLoginError('Сетевая ошибка при авторизации');
+    }
+  };
+
+  const handleLogout = () => {
+    setToken('');
+    setUsername('');
+    localStorage.removeItem('token');
+    localStorage.removeItem('username');
+    setActiveView('directory');
+  };
+
+  // Client-side search and filtering
+  const filteredEmployees = employees.filter((emp) => {
+    // 1. Department filter
+    if (selectedDept && emp.department_id !== selectedDept) return false;
+
+    // 2. Search query filter (Case-insensitive, fragments, normalized phone)
+    if (searchQuery.trim()) {
+      const queryClean = searchQuery.toLowerCase().trim();
+      const queryDigits = getQueryPhoneDigits(queryClean);
+
+      // Match FIO fragments (full name parts)
+      const nameMatch = emp.name.toLowerCase().includes(queryClean);
+      
+      // Match phone digits normalized
+      const empPhoneDigits = getPhoneDigits(emp.phone);
+      const phoneMatch = queryDigits.length > 0 && empPhoneDigits.includes(queryDigits);
+
+      // Secondary match parameters (Job title, Company, Location)
+      const titleMatch = emp.job_title.toLowerCase().includes(queryClean);
+      const companyMatch = emp.company_name && emp.company_name.toLowerCase().includes(queryClean);
+      const deptMatch = emp.department_name && emp.department_name.toLowerCase().includes(queryClean);
+      const buildingMatch = emp.building && emp.building.toLowerCase().includes(queryClean);
+
+      return nameMatch || phoneMatch || titleMatch || companyMatch || deptMatch || buildingMatch;
+    }
+
+    return true;
+  });
+
+  return (
+    <div className="app-container">
+      {/* Header bar */}
+      <header className="app-header">
+        <div className="header-content">
+          <div className="logo-section" onClick={() => setActiveView('directory')}>
+            <svg className="logo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+              <path d="M12 2L2 22h20L12 2zm0 3.99L19.53 19H4.47L12 5.99zM11 10v4h2v-4h-2zm0 6v2h2v-2h-2z" />
+            </svg>
+            <div className="logo-text">
+              <h1>ГИДРОМОНТАЖ</h1>
+              <span>Адресная книга</span>
+            </div>
+          </div>
+
+          <div className="header-actions">
+            {/* Theme Toggle Button */}
+            <button className="btn-icon" onClick={toggleTheme} title={theme === 'light' ? 'Темная тема' : 'Светлая тема'}>
+              {theme === 'light' ? <MoonIcon style={{ width: '1.25rem', height: '1.25rem', fill: 'white' }} /> : <SunIcon style={{ width: '1.25rem', height: '1.25rem', fill: 'white' }} />}
+            </button>
+
+            {/* Admin Portal Toggle */}
+            {token ? (
+              <>
+                {activeView === 'admin' ? (
+                  <button className="btn btn-secondary" onClick={() => setActiveView('directory')}>
+                    Справочник
+                  </button>
+                ) : (
+                  <button className="btn btn-primary" onClick={() => setActiveView('admin')}>
+                    Админка
+                  </button>
+                )}
+                <button className="btn btn-danger btn-icon" onClick={handleLogout} title="Выйти">
+                  <LogoutIcon style={{ width: '1.25rem', height: '1.25rem', fill: 'currentColor' }} />
+                </button>
+              </>
+            ) : (
+              activeView === 'login' ? (
+                <button className="btn btn-secondary" onClick={() => setActiveView('directory')}>
+                  Справочник
+                </button>
+              ) : (
+                <button className="btn btn-secondary" onClick={() => setActiveView('login')} style={{ display: 'flex', gap: '0.4rem' }}>
+                  <LoginIcon style={{ width: '1.1rem', height: '1.1rem' }} /> Войти
+                </button>
+              )
+            )}
+          </div>
+        </div>
+      </header>
+
+      {/* Main View Area */}
+      <main className="main-content">
+        
+        {/* VIEW 1: Public Directory Search */}
+        {activeView === 'directory' && (
+          <div className="directory-layout">
+            <Sidebar
+              departments={departments}
+              selectedDept={selectedDept}
+              setSelectedDept={setSelectedDept}
+              employees={employees}
+            />
+            
+            <div className="directory-results">
+              <SearchFilters
+                searchQuery={searchQuery}
+                setSearchQuery={setSearchQuery}
+              />
+
+              <EmployeeTable
+                employees={filteredEmployees}
+                onEmployeeClick={setSelectedEmployee}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* VIEW 2: Admin Authentication Form */}
+        {activeView === 'login' && (
+          <div className="login-overlay">
+            <div className="login-card">
+              <h2 className="login-title">Вход в панель управления</h2>
+              <p className="login-subtitle">Доступ только для администраторов сети</p>
+              
+              {loginError && (
+                <div className="alert-banner alert-error">
+                  {loginError}
+                </div>
+              )}
+
+              <form onSubmit={handleLoginSubmit}>
+                <div className="form-group">
+                  <label className="form-label">Имя пользователя</label>
+                  <input
+                    type="text"
+                    className="form-control"
+                    placeholder="Например, admin"
+                    value={loginForm.username}
+                    onChange={(e) => setLoginForm({ ...loginForm, username: e.target.value })}
+                    required
+                  />
+                </div>
+                <div className="form-group">
+                  <label className="form-label">Пароль</label>
+                  <input
+                    type="password"
+                    className="form-control"
+                    placeholder="••••••••"
+                    value={loginForm.password}
+                    onChange={(e) => setLoginForm({ ...loginForm, password: e.target.value })}
+                    required
+                  />
+                </div>
+                <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '1.25rem' }}>
+                  Войти
+                </button>
+              </form>
+            </div>
+          </div>
+        )}
+
+        {/* VIEW 3: Admin CRUD Dashboard */}
+        {activeView === 'admin' && token && (
+          <AdminPanel
+            token={token}
+            employees={employees}
+            departments={departments}
+            companies={companies}
+            onRefreshData={fetchData}
+          />
+        )}
+      </main>
+
+      {/* Details Profile View Modal */}
+      {selectedEmployee && (
+        <DetailModal
+          employee={selectedEmployee}
+          onClose={() => setSelectedEmployee(null)}
+        />
+      )}
+
+      {/* Corporate Footer */}
+      <footer style={{ borderTop: '1px solid var(--border)', padding: '1rem', textAlign: 'center', fontSize: '0.8rem', color: 'var(--text-muted)', backgroundColor: 'var(--bg-card)', marginTop: 'auto' }}>
+        <div style={{ maxWidth: '1300px', margin: '0 auto', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '1rem' }}>
+          <div>© {new Date().getFullYear()} АО КМУ «Гидромонтаж». Все права защищены.</div>
+          <div>Внутренний корпоративный портал адресной книги.</div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default App;
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
@@ -0,0 +1,650 @@
+import React, { useState } from 'react';
+import { PlusIcon, EditIcon, DeleteIcon, CloseIcon } from '../utils/svgs';
+import ImportExport from './ImportExport';
+
+const AdminPanel = ({ token, employees, departments, companies, onRefreshData }) => {
+  const [activeTab, setActiveTab] = useState('employees'); // 'employees', 'departments', 'companies', 'import-export'
+  const [showEmpModal, setShowEmpModal] = useState(false);
+  const [editingEmp, setEditingEmp] = useState(null);
+  
+  // Employee form state (Updated fields matching new dictionary company schema)
+  const [empForm, setEmpForm] = useState({
+    name: '',
+    company_id: '',
+    job_title: '',
+    department_id: '',
+    phone: '',
+    email: '',
+    building: '',
+    floor: ''
+  });
+  
+  // Department form state
+  const [newDeptName, setNewDeptName] = useState('');
+  
+  // Company form state (New dictionary)
+  const [newCompanyName, setNewCompanyName] = useState('');
+  
+  // Notification states
+  const [alert, setAlert] = useState({ type: '', message: '' });
+  
+  // Search within admin employee table
+  const [adminSearch, setAdminSearch] = useState('');
+
+  const showAlert = (type, message) => {
+    setAlert({ type, message });
+    setTimeout(() => setAlert({ type: '', message: '' }), 5000);
+  };
+
+  // ----------------------------------------------------
+  // Department Actions
+  // ----------------------------------------------------
+  const handleAddDept = async (e) => {
+    e.preventDefault();
+    if (!newDeptName.trim()) return;
+
+    try {
+      const res = await fetch('/api/departments', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify({ name: newDeptName.trim() })
+      });
+      const data = await res.json();
+      
+      if (res.ok) {
+        setNewDeptName('');
+        onRefreshData();
+        showAlert('success', 'Подразделение успешно добавлено!');
+      } else {
+        showAlert('error', data.error || 'Ошибка при добавлении подразделения');
+      }
+    } catch (err) {
+      showAlert('error', 'Ошибка сети при добавлении подразделения');
+    }
+  };
+
+  const handleDeleteDept = async (id, name) => {
+    if (!window.confirm(`Вы уверены, что хотите удалить подразделение "${name}"? У привязанных сотрудников сбросится отдел.`)) {
+      return;
+    }
+
+    try {
+      const res = await fetch(`/api/departments/${id}`, {
+        method: 'DELETE',
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      
+      if (res.ok) {
+        onRefreshData();
+        showAlert('success', 'Подразделение удалено!');
+      } else {
+        showAlert('error', 'Ошибка при удалении подразделения');
+      }
+    } catch (err) {
+      showAlert('error', 'Ошибка сети при удалении');
+    }
+  };
+
+  // ----------------------------------------------------
+  // Company Actions (New dictionary)
+  // ----------------------------------------------------
+  const handleAddCompany = async (e) => {
+    e.preventDefault();
+    if (!newCompanyName.trim()) return;
+
+    try {
+      const res = await fetch('/api/companies', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify({ name: newCompanyName.trim() })
+      });
+      const data = await res.json();
+      
+      if (res.ok) {
+        setNewCompanyName('');
+        onRefreshData();
+        showAlert('success', 'Компания успешно добавлена!');
+      } else {
+        showAlert('error', data.error || 'Ошибка при добавлении компании');
+      }
+    } catch (err) {
+      showAlert('error', 'Ошибка сети при добавлении компании');
+    }
+  };
+
+  const handleDeleteCompany = async (id, name) => {
+    if (!window.confirm(`Вы уверены, что хотите удалить компанию "${name}"? У привязанных сотрудников сбросится место работы.`)) {
+      return;
+    }
+
+    try {
+      const res = await fetch(`/api/companies/${id}`, {
+        method: 'DELETE',
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      
+      if (res.ok) {
+        onRefreshData();
+        showAlert('success', 'Компания удалена!');
+      } else {
+        showAlert('error', 'Ошибка при удалении компании');
+      }
+    } catch (err) {
+      showAlert('error', 'Ошибка сети при удалении');
+    }
+  };
+
+  // ----------------------------------------------------
+  // Employee Actions
+  // ----------------------------------------------------
+  const openAddEmpModal = () => {
+    setEditingEmp(null);
+    setEmpForm({
+      name: '',
+      company_id: companies[0]?.id || '',
+      job_title: '',
+      department_id: departments[0]?.id || '',
+      phone: '',
+      email: '',
+      building: '',
+      floor: ''
+    });
+    setShowEmpModal(true);
+  };
+
+  const openEditEmpModal = (emp) => {
+    setEditingEmp(emp);
+    setEmpForm({
+      name: emp.name,
+      company_id: emp.company_id || '',
+      job_title: emp.job_title,
+      department_id: emp.department_id || '',
+      phone: emp.phone || '',
+      email: emp.email || '',
+      building: emp.building || '',
+      floor: emp.floor || ''
+    });
+    setShowEmpModal(true);
+  };
+
+  const handleEmpFormSubmit = async (e) => {
+    e.preventDefault();
+    if (!empForm.name.trim() || !empForm.job_title.trim()) {
+      showAlert('error', 'Поля ФИО и Должность обязательны для заполнения!');
+      return;
+    }
+
+    try {
+      const employeePayload = {
+        ...empForm,
+        company_id: empForm.company_id ? parseInt(empForm.company_id, 10) : null,
+        department_id: empForm.department_id ? parseInt(empForm.department_id, 10) : null
+      };
+
+      const url = editingEmp ? `/api/employees/${editingEmp.id}` : '/api/employees';
+      const method = editingEmp ? 'PUT' : 'POST';
+
+      const res = await fetch(url, {
+        method: method,
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify(employeePayload)
+      });
+
+      const data = await res.json();
+      if (res.ok) {
+        setShowEmpModal(false);
+        onRefreshData();
+        showAlert('success', editingEmp ? 'Данные сотрудника обновлены!' : 'Сотрудник добавлен в базу!');
+      } else {
+        showAlert('error', data.error || 'Ошибка при сохранении данных сотрудника');
+      }
+    } catch (err) {
+      showAlert('error', 'Сетевая ошибка при сохранении данных');
+    }
+  };
+
+  const handleDeleteEmp = async (id, name) => {
+    if (!window.confirm(`Вы уверены, что хотите удалить сотрудника "${name}" из адресной книги?`)) {
+      return;
+    }
+
+    try {
+      const res = await fetch(`/api/employees/${id}`, {
+        method: 'DELETE',
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+
+      if (res.ok) {
+        onRefreshData();
+        showAlert('success', 'Сотрудник удален из базы данных');
+      } else {
+        showAlert('error', 'Ошибка при удалении сотрудника');
+      }
+    } catch (err) {
+      showAlert('error', 'Сетевая ошибка при удалении сотрудника');
+    }
+  };
+
+  // Filter employees within the admin table
+  const filteredEmployees = employees.filter(emp => 
+    emp.name.toLowerCase().includes(adminSearch.toLowerCase()) ||
+    emp.job_title.toLowerCase().includes(adminSearch.toLowerCase()) ||
+    (emp.company_name && emp.company_name.toLowerCase().includes(adminSearch.toLowerCase())) ||
+    (emp.department_name && emp.department_name.toLowerCase().includes(adminSearch.toLowerCase()))
+  );
+
+  return (
+    <div className="admin-layout">
+      {/* Navigation tabs */}
+      <div className="admin-header">
+        <div className="admin-tabs">
+          <button 
+            className={`admin-tab ${activeTab === 'employees' ? 'active' : ''}`}
+            onClick={() => setActiveTab('employees')}
+          >
+            Сотрудники ({employees.length})
+          </button>
+          <button 
+            className={`admin-tab ${activeTab === 'companies' ? 'active' : ''}`}
+            onClick={() => setActiveTab('companies')}
+          >
+            Компании ({companies.length})
+          </button>
+          <button 
+            className={`admin-tab ${activeTab === 'departments' ? 'active' : ''}`}
+            onClick={() => setActiveTab('departments')}
+          >
+            Подразделения ({departments.length})
+          </button>
+          <button 
+            className={`admin-tab ${activeTab === 'import-export' ? 'active' : ''}`}
+            onClick={() => setActiveTab('import-export')}
+          >
+            Импорт и Экспорт
+          </button>
+        </div>
+        
+        {activeTab === 'employees' && (
+          <button className="btn btn-primary" onClick={openAddEmpModal}>
+            <PlusIcon style={{ width: '1rem', height: '1rem' }} /> Добавить сотрудника
+          </button>
+        )}
+      </div>
+
+      {alert.message && (
+        <div className={`alert-banner alert-${alert.type}`}>
+          {alert.message}
+        </div>
+      )}
+
+      {/* ---------------------------------------------------- */}
+      {/* Tab: Employees */}
+      {/* ---------------------------------------------------- */}
+      {activeTab === 'employees' && (
+        <div className="admin-card">
+          <div className="admin-table-actions">
+            <input
+              type="text"
+              className="form-control"
+              placeholder="Быстрый поиск в таблице..."
+              value={adminSearch}
+              onChange={(e) => setAdminSearch(e.target.value)}
+              style={{ maxWidth: '300px' }}
+            />
+          </div>
+
+          <div className="table-responsive">
+            <table className="employee-table">
+              <thead>
+                <tr>
+                  <th>ФИО</th>
+                  <th>Компания</th>
+                  <th>Отдел</th>
+                  <th>Должность</th>
+                  <th>Размещение</th>
+                  <th>Контакты</th>
+                  <th style={{ textAlign: 'right' }}>Действия</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredEmployees.length === 0 ? (
+                  <tr>
+                    <td colSpan="7" style={{ textAlign: 'center', padding: '2rem', color: 'var(--text-muted)' }}>
+                      Список пуст или ничего не найдено
+                    </td>
+                  </tr>
+                ) : (
+                  filteredEmployees.map((emp) => (
+                    <tr key={emp.id} style={{ cursor: 'default' }}>
+                      <td>
+                        <div className="table-user-name">{emp.name}</div>
+                      </td>
+                      <td>
+                        <span style={{ fontWeight: 500 }}>{emp.company_name || '—'}</span>
+                      </td>
+                      <td>
+                        <span className="dept-badge" style={{ marginBottom: 0 }}>
+                          {emp.department_name || 'Без отдела'}
+                        </span>
+                      </td>
+                      <td>{emp.job_title}</td>
+                      <td>
+                        <div className="location-cell">
+                          {emp.building ? emp.building : '—'}
+                          {emp.floor && <span className="location-subtext">, {emp.floor} этаж</span>}
+                        </div>
+                      </td>
+                      <td>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.15rem', fontSize: '0.8rem' }}>
+                          {emp.phone && <div>📞 {emp.phone}</div>}
+                          {emp.email && <div>✉️ {emp.email}</div>}
+                        </div>
+                      </td>
+                      <td style={{ textAlign: 'right' }}>
+                        <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
+                          <button 
+                            className="btn btn-secondary" 
+                            style={{ padding: '0.35rem 0.65rem', fontSize: '0.8rem' }}
+                            onClick={() => openEditEmpModal(emp)}
+                          >
+                            <EditIcon style={{ width: '0.9rem', height: '0.9rem' }} />
+                          </button>
+                          <button 
+                            className="btn btn-danger" 
+                            style={{ padding: '0.35rem 0.65rem', fontSize: '0.8rem' }}
+                            onClick={() => handleDeleteEmp(emp.id, emp.name)}
+                          >
+                            <DeleteIcon style={{ width: '0.9rem', height: '0.9rem' }} />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* ---------------------------------------------------- */}
+      {/* Tab: Companies (New tab interface) */}
+      {/* ---------------------------------------------------- */}
+      {activeTab === 'companies' && (
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '2rem' }}>
+          <div className="admin-card">
+            <h3 style={{ marginBottom: '1.25rem' }}>Новая компания</h3>
+            <form onSubmit={handleAddCompany}>
+              <div className="form-group">
+                <label className="form-label">Название организации</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  placeholder="Например, АО КМУ Гидромонтаж"
+                  value={newCompanyName}
+                  onChange={(e) => setNewCompanyName(e.target.value)}
+                  required
+                />
+              </div>
+              <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '0.5rem' }}>
+                <PlusIcon style={{ width: '1rem', height: '1rem' }} /> Добавить компанию
+              </button>
+            </form>
+          </div>
+
+          <div className="admin-card">
+            <h3 style={{ marginBottom: '1.25rem' }}>Справочник компаний</h3>
+            <div className="table-responsive">
+              <table className="employee-table">
+                <thead>
+                  <tr>
+                    <th>Название организации</th>
+                    <th style={{ textAlign: 'right' }}>Действия</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {companies.length === 0 ? (
+                    <tr>
+                      <td colSpan="2" style={{ textAlign: 'center', padding: '2rem', color: 'var(--text-muted)' }}>
+                        Список компаний пуст
+                      </td>
+                    </tr>
+                  ) : (
+                    companies.map((comp) => (
+                      <tr key={comp.id} style={{ cursor: 'default' }}>
+                        <td style={{ fontWeight: 600 }}>{comp.name}</td>
+                        <td style={{ textAlign: 'right' }}>
+                          <button
+                            className="btn btn-danger"
+                            style={{ padding: '0.35rem 0.65rem', fontSize: '0.8rem' }}
+                            onClick={() => handleDeleteCompany(comp.id, comp.name)}
+                          >
+                            <DeleteIcon style={{ width: '0.9rem', height: '0.9rem' }} /> Удалить
+                          </button>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ---------------------------------------------------- */}
+      {/* Tab: Departments */}
+      {/* ---------------------------------------------------- */}
+      {activeTab === 'departments' && (
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '2rem' }}>
+          <div className="admin-card">
+            <h3 style={{ marginBottom: '1.25rem' }}>Новое подразделение</h3>
+            <form onSubmit={handleAddDept}>
+              <div className="form-group">
+                <label className="form-label">Название отдела</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  placeholder="Например, Бухгалтерия"
+                  value={newDeptName}
+                  onChange={(e) => setNewDeptName(e.target.value)}
+                  required
+                />
+              </div>
+              <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '0.5rem' }}>
+                <PlusIcon style={{ width: '1rem', height: '1rem' }} /> Добавить отдел
+              </button>
+            </form>
+          </div>
+
+          <div className="admin-card">
+            <h3 style={{ marginBottom: '1.25rem' }}>Список подразделений</h3>
+            <div className="table-responsive">
+              <table className="employee-table">
+                <thead>
+                  <tr>
+                    <th>Название подразделения</th>
+                    <th style={{ textAlign: 'right' }}>Действия</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {departments.length === 0 ? (
+                    <tr>
+                      <td colSpan="2" style={{ textAlign: 'center', padding: '2rem', color: 'var(--text-muted)' }}>
+                        Список отделов пуст
+                      </td>
+                    </tr>
+                  ) : (
+                    departments.map((dept) => (
+                      <tr key={dept.id} style={{ cursor: 'default' }}>
+                        <td style={{ fontWeight: 600 }}>{dept.name}</td>
+                        <td style={{ textAlign: 'right' }}>
+                          <button
+                            className="btn btn-danger"
+                            style={{ padding: '0.35rem 0.65rem', fontSize: '0.8rem' }}
+                            onClick={() => handleDeleteDept(dept.id, dept.name)}
+                          >
+                            <DeleteIcon style={{ width: '0.9rem', height: '0.9rem' }} /> Удалить
+                          </button>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ---------------------------------------------------- */}
+      {/* Tab: Import/Export */}
+      {/* ---------------------------------------------------- */}
+      {activeTab === 'import-export' && (
+        <ImportExport token={token} onRefreshData={onRefreshData} />
+      )}
+
+      {/* ---------------------------------------------------- */}
+      {/* Edit/Add Employee Modal Dialog */}
+      {/* ---------------------------------------------------- */}
+      {showEmpModal && (
+        <div className="modal-overlay">
+          <div className="modal-content" style={{ maxWidth: '600px', transform: 'none', animation: 'none' }}>
+            <button className="modal-close-btn" onClick={() => setShowEmpModal(false)}>
+              <CloseIcon />
+            </button>
+            
+            <div style={{ padding: '1.25rem 1.5rem', borderBottom: '1px solid var(--border)' }}>
+              <h2>{editingEmp ? 'Редактировать сотрудника' : 'Добавить сотрудника'}</h2>
+            </div>
+            
+            <form onSubmit={handleEmpFormSubmit}>
+              <div className="modal-body" style={{ padding: '1.25rem 1.5rem', maxHeight: '75vh', overflowY: 'auto' }}>
+
+                <div className="form-grid">
+                  <div className="form-group form-grid-full">
+                    <label className="form-label">ФИО сотрудника *</label>
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Иванов Иван Иванович"
+                      value={empForm.name}
+                      onChange={(e) => setEmpForm({ ...empForm, name: e.target.value })}
+                      required
+                    />
+                  </div>
+
+                  <div className="form-group">
+                    <label className="form-label">Место работы (Компания) *</label>
+                    <select
+                      className="form-control"
+                      value={empForm.company_id}
+                      onChange={(e) => setEmpForm({ ...empForm, company_id: e.target.value })}
+                      required
+                    >
+                      <option value="">Выберите компанию...</option>
+                      {companies.map(c => (
+                        <option key={c.id} value={c.id}>{c.name}</option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div className="form-group">
+                    <label className="form-label">Должность *</label>
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Например, Инженер-конструктор"
+                      value={empForm.job_title}
+                      onChange={(e) => setEmpForm({ ...empForm, job_title: e.target.value })}
+                      required
+                    />
+                  </div>
+
+                  <div className="form-group">
+                    <label className="form-label">Подразделение (Отдел)</label>
+                    <select
+                      className="form-control"
+                      value={empForm.department_id}
+                      onChange={(e) => setEmpForm({ ...empForm, department_id: e.target.value })}
+                    >
+                      <option value="">Без отдела</option>
+                      {departments.map(d => (
+                        <option key={d.id} value={d.id}>{d.name}</option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div className="form-group">
+                    <label className="form-label">Рабочий телефон</label>
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="+7 (391) 123-45-67"
+                      value={empForm.phone}
+                      onChange={(e) => setEmpForm({ ...empForm, phone: e.target.value })}
+                    />
+                  </div>
+
+                  <div className="form-group">
+                    <label className="form-label">Электронная почта (Email)</label>
+                    <input
+                      type="email"
+                      className="form-control"
+                      placeholder="i.ivanov@company.ru"
+                      value={empForm.email}
+                      onChange={(e) => setEmpForm({ ...empForm, email: e.target.value })}
+                    />
+                  </div>
+
+                  <div className="form-group">
+                    <label className="form-label">Здание / Корпус</label>
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Например, Административный корпус"
+                      value={empForm.building}
+                      onChange={(e) => setEmpForm({ ...empForm, building: e.target.value })}
+                    />
+                  </div>
+
+                  <div className="form-group">
+                    <label className="form-label">Этаж</label>
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Например, 3"
+                      value={empForm.floor}
+                      onChange={(e) => setEmpForm({ ...empForm, floor: e.target.value })}
+                    />
+                  </div>
+                </div>
+
+              </div>
+              
+              <div className="modal-actions" style={{ padding: '1rem 1.5rem', borderTop: '1px solid var(--border)' }}>
+                <button type="button" className="btn btn-secondary" onClick={() => setShowEmpModal(false)}>
+                  Отмена
+                </button>
+                <button type="submit" className="btn btn-primary">
+                  Сохранить
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdminPanel;
@@ -0,0 +1,124 @@
+import React from 'react';
+import { CloseIcon, PhoneIcon, EmailIcon, OfficeIcon, DownloadIcon } from '../utils/svgs';
+
+const DetailModal = ({ employee, onClose }) => {
+  if (!employee) return null;
+
+  const { name, company_name, job_title, department_name, phone, email, building, floor } = employee;
+
+  // Generate and download vCard (VCF)
+  const handleDownloadVCard = () => {
+    const nameParts = name.trim().split(/\s+/);
+    let lastName = '';
+    let firstName = '';
+    let middleName = '';
+    if (nameParts.length > 0) lastName = nameParts[0];
+    if (nameParts.length > 1) firstName = nameParts[1];
+    if (nameParts.length > 2) middleName = nameParts.slice(2).join(' ');
+
+    const noteParts = [];
+    if (building) noteParts.push(`Здание: ${building}`);
+    if (floor) noteParts.push(`Этаж: ${floor}`);
+
+    const vCardLines = [
+      'BEGIN:VCARD',
+      'VERSION:3.0',
+      `N:${lastName};${firstName};${middleName};;`,
+      `FN:${name}`,
+      `ORG:${company_name || 'АО «КМУ «Гидромонтаж»'}`,
+      `TITLE:${job_title}`,
+      phone ? `TEL;TYPE=CELL,VOICE:${phone}` : '',
+      email ? `EMAIL;TYPE=PREF,INTERNET:${email}` : '',
+      noteParts.length > 0 ? `NOTE;CHARSET=UTF-8:${noteParts.join(', ')}` : '',
+      'END:VCARD'
+    ].filter(Boolean);
+
+    const vCardContent = vCardLines.join('\r\n');
+    const blob = new Blob([vCardContent], { type: 'text/vcard;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', `${name.replace(/\s+/g, '_')}.vcf`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <button className="modal-close-btn" onClick={onClose} aria-label="Закрыть">
+          <CloseIcon />
+        </button>
+        
+        <div className="modal-header-bg"></div>
+        
+        <div className="modal-body">
+          <div className="modal-profile-header">
+            <div className="modal-title-info">
+              <h2 className="modal-name">{name}</h2>
+              <p className="modal-job-title">{job_title}</p>
+              <span className="dept-badge" style={{ marginTop: '0.25rem' }}>
+                {department_name || 'Без отдела'}
+              </span>
+            </div>
+          </div>
+
+          <div className="modal-details-grid">
+            <div className="detail-block">
+              <span className="detail-label">Компания / Фирма</span>
+              <span className="detail-value">{company_name || 'АО «КМУ «Гидромонтаж»'}</span>
+            </div>
+
+            <div className="detail-block">
+              <span className="detail-label">Телефон</span>
+              <span className="detail-value">
+                {phone ? (
+                  <a href={`tel:${phone}`} style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}>
+                    <PhoneIcon style={{ width: '1rem', height: '1rem' }} /> {phone}
+                  </a>
+                ) : 'Не указан'}
+              </span>
+            </div>
+            
+            <div className="detail-block">
+              <span className="detail-label">Здание</span>
+              <span className="detail-value" style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}>
+                <OfficeIcon style={{ width: '1rem', height: '1rem' }} /> {building || 'Не указано'}
+              </span>
+            </div>
+            
+            <div className="detail-block">
+              <span className="detail-label">Этаж</span>
+              <span className="detail-value">{floor ? `${floor} этаж` : 'Не указан'}</span>
+            </div>
+            
+            <div className="detail-block">
+              <span className="detail-label">Электронная почта</span>
+              <span className="detail-value">
+                {email ? (
+                  <a href={`mailto:${email}`} style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}>
+                    <EmailIcon style={{ width: '1rem', height: '1rem' }} /> {email}
+                  </a>
+                ) : 'Не указана'}
+              </span>
+            </div>
+          </div>
+
+          <div className="modal-actions">
+            <button className="btn btn-secondary" onClick={handleDownloadVCard}>
+              <DownloadIcon style={{ width: '1.1rem', height: '1.1rem' }} /> Скачать визитку vCard
+            </button>
+            <button className="btn btn-primary" onClick={onClose}>
+              Закрыть
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DetailModal;
@@ -0,0 +1,92 @@
+import React from 'react';
+import { PhoneIcon, EmailIcon } from '../utils/svgs';
+
+const EmployeeTable = ({ employees, onEmployeeClick }) => {
+  const handleLinkClick = (e) => {
+    e.stopPropagation(); // Prevent opening the detail modal when clicking a direct contact link
+  };
+
+  return (
+    <div className="table-responsive">
+      <table className="employee-table">
+        <thead>
+          <tr>
+            <th>ФИО</th>
+            <th>Компания</th>
+            <th>Отдел</th>
+            <th>Должность</th>
+            <th>Размещение</th>
+            <th>Телефон</th>
+            <th>Email</th>
+          </tr>
+        </thead>
+        <tbody>
+          {employees.length === 0 ? (
+            <tr>
+              <td colSpan="7" style={{ textAlign: 'center', padding: '2rem', color: 'var(--text-muted)' }}>
+                Сотрудники не найдены
+              </td>
+            </tr>
+          ) : (
+            employees.map((emp) => (
+              <tr key={emp.id} onClick={() => onEmployeeClick(emp)}>
+                <td>
+                  <div className="table-user-name">{emp.name}</div>
+                </td>
+                <td>
+                  <span style={{ fontWeight: 500 }}>{emp.company_name || '—'}</span>
+                </td>
+                <td>
+                  <span className="dept-badge">
+                    {emp.department_name || 'Без отдела'}
+                  </span>
+                </td>
+                <td>{emp.job_title}</td>
+                <td>
+                  <div className="location-cell">
+                    {emp.building ? emp.building : '—'}
+                    {emp.floor && (
+                      <span className="location-subtext">
+                        {emp.building ? `, ${emp.floor} этаж` : `${emp.floor} этаж`}
+                      </span>
+                    )}
+                  </div>
+                </td>
+                <td>
+                  {emp.phone ? (
+                    <a
+                      href={`tel:${emp.phone}`}
+                      className="table-contact-link"
+                      onClick={handleLinkClick}
+                    >
+                      <PhoneIcon />
+                      <span>{emp.phone}</span>
+                    </a>
+                  ) : (
+                    <span style={{ color: 'var(--text-muted)' }}>—</span>
+                  )}
+                </td>
+                <td>
+                  {emp.email ? (
+                    <a
+                      href={`mailto:${emp.email}`}
+                      className="table-contact-link"
+                      onClick={handleLinkClick}
+                    >
+                      <EmailIcon />
+                      <span>{emp.email}</span>
+                    </a>
+                  ) : (
+                    <span style={{ color: 'var(--text-muted)' }}>—</span>
+                  )}
+                </td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default EmployeeTable;
@@ -0,0 +1,275 @@
+import React, { useState, useRef } from 'react';
+import { DownloadIcon, UploadIcon } from '../utils/svgs';
+
+const ImportExport = ({ token, onRefreshData }) => {
+  const [dragActive, setDragActive] = useState(false);
+  const [status, setStatus] = useState({ type: '', message: '' });
+  const fileInputRef = useRef(null);
+
+  const onButtonClick = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleDrag = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      handleFile(e.dataTransfer.files[0]);
+    }
+  };
+
+  const handleFileInputChange = (e) => {
+    if (e.target.files && e.target.files[0]) {
+      handleFile(e.target.files[0]);
+    }
+  };
+
+  const handleFile = (file) => {
+    const reader = new FileReader();
+    const fileType = file.name.split('.').pop().toLowerCase();
+
+    reader.onload = async (e) => {
+      const text = e.target.result;
+      try {
+        let payload = null;
+
+        if (fileType === 'json') {
+          payload = JSON.parse(text);
+          if (!payload.employees || !payload.departments || !payload.companies) {
+            throw new Error('Некорректный формат JSON. Ожидались массивы employees, departments и companies.');
+          }
+        } else if (fileType === 'csv') {
+          const rows = text.split('\n').map(row => row.trim()).filter(Boolean);
+          if (rows.length < 2) {
+            throw new Error('CSV файл пуст или содержит недостаточно строк.');
+          }
+          
+          // Expected Headers: ФИО;Компания;Отдел;Должность;Телефон;Email;Здание;Этаж
+          // Parse semicolon separated columns
+          const employees = [];
+          const departmentsSet = new Set();
+          const companiesSet = new Set();
+
+          for (let i = 1; i < rows.length; i++) {
+            // Split by semicolon and clean quotes
+            const values = rows[i].split(';').map(v => v.trim().replace(/^"|"$/g, ''));
+            
+            const emp = {
+              name: values[0] || '',
+              company_name: values[1] || '',
+              department_name: values[2] || '',
+              job_title: values[3] || '',
+              phone: values[4] || '',
+              email: values[5] || '',
+              building: values[6] || '',
+              floor: values[7] || ''
+            };
+
+            if (emp.name && emp.job_title) {
+              employees.push(emp);
+              if (emp.department_name) {
+                departmentsSet.add(emp.department_name);
+              }
+              if (emp.company_name) {
+                companiesSet.add(emp.company_name);
+              }
+            }
+          }
+
+          const departments = Array.from(departmentsSet).map((name, index) => ({
+            id: index + 1,
+            name
+          }));
+
+          const companies = Array.from(companiesSet).map((name, index) => ({
+            id: index + 1,
+            name
+          }));
+
+          const mappedEmployees = employees.map(emp => {
+            const dept = departments.find(d => d.name === emp.department_name);
+            const comp = companies.find(c => c.name === emp.company_name);
+            return {
+              name: emp.name,
+              job_title: emp.job_title,
+              phone: emp.phone,
+              email: emp.email,
+              building: emp.building,
+              floor: emp.floor,
+              department_id: dept ? dept.id : null,
+              company_id: comp ? comp.id : null
+            };
+          });
+
+          payload = { employees: mappedEmployees, departments, companies };
+        } else {
+          throw new Error('Поддерживаются только файлы .json и .csv');
+        }
+
+        setStatus({ type: 'info', message: 'Импортирование данных...' });
+        const res = await fetch('/api/admin/import', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${token}`
+          },
+          body: JSON.stringify(payload)
+        });
+
+        const data = await res.json();
+        if (res.ok) {
+          setStatus({ type: 'success', message: `Импорт завершен! Загружено компаний: ${payload.companies.length}, отделов: ${payload.departments.length}, сотрудников: ${payload.employees.length}` });
+          onRefreshData();
+        } else {
+          setStatus({ type: 'error', message: data.error || 'Ошибка при импорте на сервер.' });
+        }
+      } catch (err) {
+        setStatus({ type: 'error', message: `Ошибка чтения файла: ${err.message}` });
+      }
+    };
+
+    // Explicitly read file in UTF-8
+    reader.readAsText(file, "UTF-8");
+  };
+
+  const handleExportJSON = async () => {
+    try {
+      const res = await fetch('/api/admin/export', {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      if (!res.ok) throw new Error('Ошибка экспорта данных с сервера');
+      const data = await res.json();
+
+      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', `addressbook_backup_${new Date().toISOString().slice(0, 10)}.json`);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      setStatus({ type: 'error', message: err.message });
+    }
+  };
+
+  const handleExportCSV = async () => {
+    try {
+      const res = await fetch('/api/admin/export', {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      if (!res.ok) throw new Error('Ошибка экспорта данных с сервера');
+      const data = await res.json();
+
+      const headers = ['ФИО', 'Компания', 'Отдел', 'Должность', 'Телефон', 'Email', 'Здание', 'Этаж'];
+      // Semicolon separator
+      const csvRows = [headers.join(';')];
+
+      for (const emp of data.employees) {
+        const dept = data.departments.find(d => d.id === emp.department_id);
+        const comp = data.companies.find(c => c.id === emp.company_id);
+        const row = [
+          `"${emp.name.replace(/"/g, '""')}"`,
+          `"${(comp ? comp.name : '').replace(/"/g, '""')}"`,
+          `"${(dept ? dept.name : '').replace(/"/g, '""')}"`,
+          `"${(emp.job_title || '').replace(/"/g, '""')}"`,
+          `"${(emp.phone || '').replace(/"/g, '""')}"`,
+          `"${(emp.email || '').replace(/"/g, '""')}"`,
+          `"${(emp.building || '').replace(/"/g, '""')}"`,
+          `"${(emp.floor || '').replace(/"/g, '""')}"`
+        ];
+        csvRows.push(row.join(';'));
+      }
+
+      const blob = new Blob(['\uFEFF' + csvRows.join('\r\n')], { type: 'text/csv;charset=utf-8;' }); // Excel BOM
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', `addressbook_roster_${new Date().toISOString().slice(0, 10)}.csv`);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      setStatus({ type: 'error', message: err.message });
+    }
+  };
+
+  return (
+    <div className="import-export-section">
+      <div className="admin-card">
+        <h3 style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <UploadIcon style={{ width: '1.25rem', height: '1.25rem' }} /> Импорт данных (Бэкап / CSV)
+        </h3>
+        
+        {status.message && (
+          <div className={`alert-banner alert-${status.type}`}>
+            {status.message}
+          </div>
+        )}
+
+        <form id="form-file-upload" onDragEnter={handleDrag} onSubmit={(e) => e.preventDefault()}>
+          <input
+            ref={fileInputRef}
+            type="file"
+            id="input-file-upload"
+            multiple={false}
+            accept=".json,.csv"
+            onChange={handleFileInputChange}
+            style={{ display: 'none' }}
+          />
+          <div 
+            className={`dropzone ${dragActive ? "drag-active" : ""}`}
+            onClick={onButtonClick}
+            onDragEnter={handleDrag}
+            onDragLeave={handleDrag}
+            onDragOver={handleDrag}
+            onDrop={handleDrop}
+          >
+            <p>Перетащите сюда файл резервной копии <strong>.json</strong> или список сотрудников <strong>.csv</strong></p>
+            <button className="btn btn-secondary" style={{ marginTop: '1.1rem' }} type="button">
+              Выбрать файл на компьютере
+            </button>
+          </div>
+        </form>
+        <p style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: '0.75rem' }}>
+          * При импорте текущая база будет очищена и перезаписана! Структура колонок CSV (разделитель - <strong>точка с запятой ";"</strong>): ФИО;Компания;Отдел;Должность;Телефон;Email;Здание;Этаж. Кодировка UTF-8.
+        </p>
+      </div>
+
+      <div className="admin-card" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+        <div>
+          <h3 style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <DownloadIcon style={{ width: '1.25rem', height: '1.25rem' }} /> Экспорт данных (Бэкап)
+          </h3>
+          <p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem', fontSize: '0.875rem' }}>
+            Экспортируйте базу данных в любой момент. Скачайте структурированный бэкап в формате JSON для восстановления на другом компьютере, или скачайте плоский список сотрудников в формате CSV для редактирования в Excel.
+          </p>
+        </div>
+        <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
+          <button className="btn btn-primary" onClick={handleExportJSON} style={{ flex: '1' }}>
+            <DownloadIcon style={{ width: '1.1rem', height: '1.1rem' }} /> Скачать JSON Бэкап
+          </button>
+          <button className="btn btn-secondary" onClick={handleExportCSV} style={{ flex: '1' }}>
+            <DownloadIcon style={{ width: '1.1rem', height: '1.1rem' }} /> Скачать CSV Таблицу
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImportExport;
@@ -0,0 +1,23 @@
+import React from 'react';
+import { SearchIcon } from '../utils/svgs';
+
+const SearchFilters = ({ searchQuery, setSearchQuery }) => {
+  return (
+    <div className="directory-filters-wrapper">
+      <div className="search-controls">
+        <div className="search-input-wrapper">
+          <SearchIcon className="search-input-icon" />
+          <input
+            type="text"
+            className="search-input"
+            placeholder="Поиск по ФИО, компании, отделу, должности, телефону, почте или кабинету..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchFilters;
@@ -0,0 +1,43 @@
+import React from 'react';
+
+const Sidebar = ({ departments, selectedDept, setSelectedDept, employees }) => {
+  // Count employees in a department
+  const getDeptCount = (deptId) => {
+    if (!deptId) return employees.length;
+    return employees.filter(emp => emp.department_id === deptId).length;
+  };
+
+  return (
+    <aside className="filters-sidebar">
+      <div className="filters-title">
+        <span>Подразделения</span>
+      </div>
+      <div className="filters-section">
+        <ul className="dept-list">
+          <li>
+            <button
+              className={`dept-item ${selectedDept === null ? 'active' : ''}`}
+              onClick={() => setSelectedDept(null)}
+            >
+              <span>Все сотрудники</span>
+              <span className="dept-count">{getDeptCount(null)}</span>
+            </button>
+          </li>
+          {departments.map((dept) => (
+            <li key={dept.id}>
+              <button
+                className={`dept-item ${selectedDept === dept.id ? 'active' : ''}`}
+                onClick={() => setSelectedDept(dept.id)}
+              >
+                <span>{dept.name}</span>
+                <span className="dept-count">{getDeptCount(dept.id)}</span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;
@@ -0,0 +1,810 @@
+:root {
+  /* Modernized corporate color palette (inspired by gidrom24.ru) */
+  --bg-app: #f4f6f9;
+  --bg-card: #ffffff;
+  --bg-header: #1b1e26; /* Midnight/Slate Header */
+  --text-main: #1e293b; /* Slate-800 */
+  --text-muted: #64748b; /* Slate-500 */
+  --text-on-header: #ffffff;
+  
+  --primary: #0073aa; /* Classic corporate blue */
+  --primary-hover: #005a87;
+  --accent: #5583ff; /* Vibrant modern royal blue */
+  --accent-hover: #3b66df;
+  --accent-light: rgba(85, 131, 255, 0.06);
+  --success: #10b981; /* Emerald green (active status) */
+  --success-light: rgba(16, 185, 129, 0.1);
+  --warning: #f59e0b; /* Amber */
+  --warning-light: rgba(245, 158, 11, 0.1);
+  --danger: #ef4444; /* Rose */
+  --danger-light: rgba(239, 68, 68, 0.1);
+  
+  --border: #e2e8f0; /* Slate-200 */
+  --border-focus: #5583ff;
+  --input-bg: #ffffff;
+  
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
+  
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+  
+  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.2s ease;
+  
+  --container-width: 1300px;
+}
+
+[data-theme="dark"] {
+  --bg-app: #0f172a; /* Slate-900 */
+  --bg-card: #1e293b; /* Slate-800 */
+  --bg-header: #0b0f19;
+  --text-main: #f1f5f9; /* Slate-100 */
+  --text-muted: #94a3b8; /* Slate-400 */
+  
+  --primary: #3b82f6;
+  --primary-hover: #60a5fa;
+  --accent: #5583ff;
+  --accent-hover: #7b9eff;
+  --accent-light: rgba(85, 131, 255, 0.12);
+  
+  --border: #334155; /* Slate-700 */
+  --border-focus: #5583ff;
+  --input-bg: #1e293b;
+  
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+}
+
+/* Reset and Base Styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-family);
+  background-color: var(--bg-app);
+  color: var(--text-main);
+  min-height: 100vh;
+  line-height: 1.5;
+  transition: background-color var(--transition-normal), color var(--transition-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--accent-hover);
+}
+
+button, input, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+
+/* App Layout */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* Header Styles */
+.app-header {
+  background-color: var(--bg-header);
+  color: var(--text-on-header);
+  padding: 0.75rem 1.5rem;
+  box-shadow: var(--shadow-md);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-content {
+  max-width: var(--container-width);
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.logo-section {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+
+.logo-icon {
+  width: 2.2rem;
+  height: 2.2rem;
+  fill: var(--accent);
+  background: rgba(255, 255, 255, 0.08);
+  padding: 0.4rem;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-text h1 {
+  font-size: 1.15rem;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  line-height: 1.1;
+}
+
+.logo-text span {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+/* Button Component */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.45rem 0.9rem;
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+  font-size: 0.875rem;
+}
+
+.btn-primary {
+  background-color: var(--accent);
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: var(--accent-hover);
+}
+
+.btn-secondary {
+  background-color: var(--bg-card);
+  color: var(--text-main);
+  border-color: var(--border);
+}
+
+.btn-secondary:hover {
+  background-color: var(--bg-app);
+}
+
+.btn-danger {
+  background-color: var(--danger-light);
+  color: var(--danger);
+  border-color: rgba(239, 68, 68, 0.1);
+}
+
+.btn-danger:hover {
+  background-color: var(--danger);
+  color: white;
+}
+
+.btn-icon {
+  padding: 0.4rem;
+  border-radius: var(--radius-md);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.btn-icon:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-on-header);
+}
+
+[data-theme="dark"] .btn-icon:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* Main Area Layout */
+.main-content {
+  flex: 1;
+  max-width: var(--container-width);
+  width: 100%;
+  margin: 0 auto;
+  padding: 1.5rem;
+}
+
+/* Directory Page Grid */
+.directory-layout {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 1.5rem;
+  align-items: start;
+}
+
+@media (max-width: 768px) {
+  .directory-layout {
+    grid-template-columns: 1fr;
+    gap: 1.25rem;
+  }
+}
+
+/* Filters Sidebar */
+.filters-sidebar {
+  background-color: var(--bg-card);
+  padding: 1rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+}
+
+.filters-title {
+  font-size: 0.9rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.5px;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.dept-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.dept-item {
+  width: 100%;
+  padding: 0.4rem 0.5rem;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--text-main);
+  transition: all var(--transition-fast);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dept-item:hover {
+  background-color: var(--bg-app);
+  color: var(--accent);
+}
+
+.dept-item.active {
+  background-color: var(--accent-light);
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.dept-count {
+  font-size: 0.7rem;
+  background-color: var(--border);
+  color: var(--text-muted);
+  padding: 0.1rem 0.35rem;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.dept-item.active .dept-count {
+  background-color: var(--accent);
+  color: white;
+}
+
+/* Search Bar Area */
+.search-controls {
+  background-color: var(--bg-card);
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 1rem;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.search-input-wrapper {
+  position: relative;
+  flex: 1;
+}
+
+.search-input-icon {
+  position: absolute;
+  left: 0.85rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.1rem;
+  height: 1.1rem;
+  stroke: var(--text-muted);
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.55rem 1rem 0.55rem 2.4rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background-color: var(--input-bg);
+  font-size: 0.875rem;
+  transition: all var(--transition-fast);
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px rgba(85, 131, 255, 0.1);
+}
+
+.dept-badge {
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0.15rem 0.5rem;
+  border-radius: var(--radius-full);
+  background-color: var(--bg-app);
+  color: var(--text-muted);
+}
+
+/* Table List Layout (High density strict tabular view) */
+.table-responsive {
+  width: 100%;
+  overflow-x: auto;
+  background-color: var(--bg-card);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+}
+
+.employee-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  font-size: 0.85rem;
+}
+
+.employee-table th {
+  background-color: var(--bg-app);
+  padding: 0.75rem;
+  font-weight: 700;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border);
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.5px;
+}
+
+.employee-table td {
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+  transition: background-color var(--transition-fast);
+}
+
+.employee-table tr:last-child td {
+  border-bottom: none;
+}
+
+/* Alternating Row Colors (Zebra theme) */
+.employee-table tbody tr:nth-child(even) td {
+  background-color: rgba(0, 0, 0, 0.015);
+}
+[data-theme="dark"] .employee-table tbody tr:nth-child(even) td {
+  background-color: rgba(255, 255, 255, 0.01);
+}
+
+.employee-table tbody tr:hover td {
+  background-color: var(--accent-light) !important;
+  cursor: pointer;
+}
+
+.table-user-name {
+  font-weight: 600;
+  color: var(--text-main);
+}
+
+.table-contact-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--text-main);
+  font-size: 0.8rem;
+}
+
+.table-contact-link:hover {
+  color: var(--accent);
+}
+
+.table-contact-link svg {
+  width: 0.85rem;
+  height: 0.85rem;
+  fill: currentColor;
+}
+
+/* Location labels in table */
+.location-cell {
+  color: var(--text-main);
+  font-size: 0.8rem;
+}
+
+.location-subtext {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+}
+
+/* Modal Window Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(15, 23, 42, 0.5);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+  animation: fadeIn var(--transition-fast) forwards;
+}
+
+.modal-content {
+  background-color: var(--bg-card);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  width: 100%;
+  max-width: 500px;
+  border: 1px solid var(--border);
+  overflow: hidden;
+  position: relative;
+  transform: translateY(10px);
+  animation: slideUp var(--transition-normal) forwards;
+}
+
+.modal-close-btn {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  background: rgba(15, 23, 42, 0.05);
+  color: var(--text-main);
+  border: none;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-fast);
+  z-index: 10;
+}
+
+.modal-close-btn:hover {
+  background-color: rgba(15, 23, 42, 0.1);
+  transform: rotate(90deg);
+}
+
+[data-theme="dark"] .modal-close-btn {
+  background: rgba(255, 255, 255, 0.1);
+}
+[data-theme="dark"] .modal-close-btn:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.modal-header-bg {
+  height: 80px;
+  background: linear-gradient(135deg, var(--bg-header) 0%, var(--primary) 100%);
+  position: relative;
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.modal-profile-header {
+  margin-top: -40px;
+  margin-bottom: 1.25rem;
+  position: relative;
+  z-index: 2;
+}
+
+.modal-title-info {
+  background: var(--bg-card);
+  padding: 0.5rem 0;
+  border-radius: var(--radius-sm);
+}
+
+.modal-name {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text-main);
+  line-height: 1.2;
+}
+
+.modal-job-title {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  font-weight: 500;
+  margin-top: 0.15rem;
+}
+
+.modal-details-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  padding: 1.25rem 0;
+  margin-bottom: 1.25rem;
+}
+
+@media (max-width: 480px) {
+  .modal-details-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.detail-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.detail-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+.detail-value {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-main);
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+/* Login Card Layout */
+.login-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 120px);
+}
+
+.login-card {
+  background-color: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: 2rem;
+  width: 100%;
+  max-width: 360px;
+}
+
+.login-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+  text-align: center;
+}
+
+.login-subtitle {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.form-label {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--text-main);
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background-color: var(--input-bg);
+  font-size: 0.85rem;
+  transition: all var(--transition-fast);
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px rgba(85, 131, 255, 0.1);
+}
+
+/* Admin Dashboard Layout */
+.admin-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.admin-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.admin-tabs {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 1px;
+}
+
+.admin-tab {
+  background: transparent;
+  border: none;
+  padding: 0.6rem 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  color: var(--text-muted);
+  border-bottom: 2px solid transparent;
+  transition: all var(--transition-fast);
+  font-size: 0.85rem;
+}
+
+.admin-tab:hover {
+  color: var(--accent);
+}
+
+.admin-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.admin-card {
+  background-color: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  padding: 1.25rem;
+}
+
+.admin-table-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+/* Import/Export Utilities Layout */
+.import-export-section {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.25rem;
+  margin-top: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .import-export-section {
+    grid-template-columns: 1fr;
+  }
+}
+
+.dropzone {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius-sm);
+  padding: 1.5rem;
+  text-align: center;
+  cursor: pointer;
+  background-color: var(--bg-app);
+  transition: all var(--transition-fast);
+  font-size: 0.85rem;
+}
+
+.dropzone:hover {
+  border-color: var(--accent);
+  background-color: var(--accent-light);
+}
+
+/* Keyframe Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { transform: translateY(10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+/* Alert Notification Banner */
+.alert-banner {
+  padding: 0.6rem 0.85rem;
+  border-radius: var(--radius-sm);
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  animation: slideUp var(--transition-fast);
+}
+
+.alert-error {
+  background-color: var(--danger-light);
+  color: var(--danger);
+  border: 1px solid rgba(239, 68, 68, 0.1);
+}
+
+.alert-success {
+  background-color: var(--success-light);
+  color: var(--success);
+  border: 1px solid rgba(16, 185, 129, 0.1);
+}
+
+/* Form Grid for Modals */
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+@media (max-width: 480px) {
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.form-grid-full {
+  grid-column: span 2;
+}
+
+@media (max-width: 480px) {
+  .form-grid-full {
+    grid-column: span 1;
+  }
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
@@ -0,0 +1,132 @@
+import React from 'react';
+
+export const SearchIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+  </svg>
+);
+
+export const GridIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect>
+    <rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect>
+  </svg>
+);
+
+export const ListIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line>
+    <line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line>
+    <line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line>
+  </svg>
+);
+
+export const PhoneIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
+  </svg>
+);
+
+export const EmailIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline>
+  </svg>
+);
+
+export const TelegramIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+  </svg>
+);
+
+export const OfficeIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle>
+  </svg>
+);
+
+export const BirthdayIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <rect x="3" y="11" width="18" height="10" rx="2"></rect>
+    <path d="M12 2v9M8 5h8M12 11a3 3 0 0 1 3-3V6H9v2a3 3 0 0 1 3 3z"></path>
+  </svg>
+);
+
+export const HireDateIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><line x1="16" y1="21" x2="16" y2="19"></line>
+    <line x1="8" y1="21" x2="8" y2="19"></line><line x1="12" y1="5" x2="12" y2="7"></line>
+    <line x1="12" y1="3" x2="12" y2="5"></line><path d="M16 3H8a2 2 0 0 0-2 2v2h12V5a2 2 0 0 0-2-2z"></path>
+  </svg>
+);
+
+export const CloseIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+);
+
+export const EditIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+  </svg>
+);
+
+export const DeleteIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+    <line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line>
+  </svg>
+);
+
+export const PlusIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
+  </svg>
+);
+
+export const LoginIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line>
+  </svg>
+);
+
+export const LogoutIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line>
+  </svg>
+);
+
+export const SunIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+  </svg>
+);
+
+export const MoonIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+  </svg>
+);
+
+export const DownloadIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>
+  </svg>
+);
+
+export const UploadIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line>
+  </svg>
+);
+
+export const AvatarIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>
+  </svg>
+);
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000',
+      '/uploads': 'http://localhost:3000'
+    }
+  }
+})
@@ -0,0 +1,127 @@
+#!/bin/bash
+
+# Color codes for output formatting
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+RED='\033[0;31m'
+NC='\033[0m' # No Color
+
+echo -e "${GREEN}=====================================================${NC}"
+echo -e "${GREEN}      АО КМУ «Гидромонтаж» - Адресная книга          ${NC}"
+echo -e "${GREEN}            Проверка окружения и безопасности        ${NC}"
+echo -e "${GREEN}=====================================================${NC}"
+
+# 1. Check if folder already exists and is not empty
+INSTALL_DIR="/opt/corp-address-book"
+if [ -d "$INSTALL_DIR" ] && [ "$(ls -A "$INSTALL_DIR" 2>/dev/null)" ]; then
+  echo -e "${RED}[X] ОШИБКА: Директория установки $INSTALL_DIR уже существует и не пуста!${NC}"
+  echo -e "${RED}    Во избежание перезаписи чужих файлов установка остановлена.${NC}"
+  exit 1
+fi
+
+# 2. Check if port 8180 is busy on the server
+if command -v lsof >/dev/null 2>&1; then
+  if lsof -i :8180 >/dev/null 2>&1; then
+    echo -e "${RED}[X] ОШИБКА: Порт 8180 уже занят другим процессом!${NC}"
+    lsof -i :8180
+    exit 1
+  fi
+elif command -v netstat >/dev/null 2>&1; then
+  if netstat -tuln | grep -q ":8180 "; then
+    echo -e "${RED}[X] ОШИБКА: Порт 8180 уже занят другим процессом!${NC}"
+    exit 1
+  fi
+fi
+
+# 3. Check if docker container with name 'corporate-address-book' already exists
+if command -v docker >/dev/null 2>&1; then
+  if docker ps -a --format '{{.Names}}' | grep -Eq "^corporate-address-book$"; then
+    echo -e "${RED}[X] ОШИБКА: Контейнер с именем 'corporate-address-book' уже существует!${NC}"
+    echo -e "${RED}    Пожалуйста, удалите или переименуйте существующий контейнер перед установкой.${NC}"
+    exit 1
+  fi
+fi
+
+echo -e "${GREEN}[✓] Проверка пройдена. Конфликтов не обнаружено.${NC}"
+echo -e "${YELLOW}[i] Начинаем установку...${NC}"
+
+# Verify if Docker is installed
+if ! [ -x "$(command -v docker)" ]; then
+  echo -e "${YELLOW}[!] Docker не установлен. Устанавливаем Docker...${NC}"
+  sudo apt-get update
+  sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common
+  curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
+  sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
+  sudo apt-get update
+  sudo apt-get install -y docker-ce
+  sudo systemctl start docker
+  sudo systemctl enable docker
+  echo -e "${GREEN}[✓] Docker успешно установлен!${NC}"
+else
+  echo -e "${GREEN}[✓] Docker обнаружен.${NC}"
+fi
+
+# Verify if Docker Compose is installed
+if ! docker compose version >/dev/null 2>&1 && ! [ -x "$(command -v docker-compose)" ]; then
+  echo -e "${YELLOW}[!] Docker Compose не установлен. Устанавливаем...${NC}"
+  sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
+  sudo chmod +x /usr/local/bin/docker-compose
+  echo -e "${GREEN}[✓] Docker Compose установлен!${NC}"
+else
+  echo -e "${GREEN}[✓] Docker Compose обнаружен.${NC}"
+fi
+
+# Create directory structure
+sudo mkdir -p "$INSTALL_DIR"
+sudo cp -r . "$INSTALL_DIR"
+cd "$INSTALL_DIR"
+
+# Create .env file with secure settings if it doesn't exist
+if [ ! -f .env ]; then
+  echo -e "${YELLOW}[!] Файл настроек .env отсутствует. Создаем новый...${NC}"
+  
+  # Generate random admin password and JWT secret
+  RANDOM_PASS=$(openssl rand -base64 12 | tr -d '/+=')
+  JWT_SEC=$(openssl rand -base64 32 | tr -d '/+=')
+
+  cat <<EOT > .env
+# Настройки учетных данных администратора
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=$RANDOM_PASS
+
+# Секретный ключ для JWT токенов
+JWT_SECRET=$JWT_SEC
+EOT
+  echo -e "${GREEN}[✓] Файл .env успешно сгенерирован.${NC}"
+else
+  echo -e "${GREEN}[✓] Обнаружен существующий файл настроек .env.${NC}"
+fi
+
+# Load environment variables
+export $(grep -v '^#' .env | xargs)
+
+# Start docker compose containers with project name
+echo -e "${YELLOW}[i] Сборка и запуск контейнеров в фоновом режиме...${NC}"
+if docker compose version >/dev/null 2>&1; then
+  sudo docker compose -p corp-address-book up -d --build
+else
+  sudo docker-compose -p corp-address-book up -d --build
+fi
+
+if [ $? -eq 0 ]; then
+  echo -e "${GREEN}=====================================================${NC}"
+  echo -e "${GREEN}[✓] УСТАНОВКА ЗАВЕРШЕНА УСПЕШНО!${NC}"
+  echo -e "${GREEN}=====================================================${NC}"
+  echo -e "Сайт адресной книги доступен по адресу:"
+  echo -e "🔗 ${YELLOW}http://192.168.1.250:8180/${NC} (или по IP-адресу вашего сервера на порту 8180)"
+  echo -e ""
+  echo -e "Данные для входа в панель администратора:"
+  echo -e "Логин:  ${YELLOW}$ADMIN_USERNAME${NC}"
+  echo -e "Пароль: ${YELLOW}$ADMIN_PASSWORD${NC}"
+  echo -e ""
+  echo -e "${RED}ВАЖНО: Сохраните эти учетные данные! Вы можете изменить их в файле .env${NC}"
+  echo -e "====================================================="
+else
+  echo -e "${RED}[X] Произошла ошибка во время сборки или запуска контейнеров.${NC}"
+  exit 1
+fi
@@ -0,0 +1,147 @@
+#!/bin/bash
+
+# Color codes
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+RED='\033[0;31m'
+NC='\033[0m'
+
+echo -e "${GREEN}=====================================================${NC}"
+echo -e "${GREEN}      АО КМУ «Гидромонтаж» - Адресная книга          ${NC}"
+echo -e "${GREEN}            Проверка окружения и безопасности        ${NC}"
+echo -e "${GREEN}=====================================================${NC}"
+
+# Check running as root
+if [ "$EUID" -ne 0 ]; then
+  echo -e "${RED}[X] Этот скрипт должен быть запущен с правами root (sudo).${NC}"
+  exit 1
+fi
+
+INSTALL_DIR="/opt/corp-address-book"
+
+# 1. Check if folder already exists and is not empty
+if [ -d "$INSTALL_DIR" ] && [ "$(ls -A "$INSTALL_DIR" 2>/dev/null)" ]; then
+  echo -e "${RED}[X] ОШИБКА: Директория установки $INSTALL_DIR уже существует и не пуста!${NC}"
+  echo -e "${RED}    Во избежание перезаписи чужих файлов установка остановлена.${NC}"
+  exit 1
+fi
+
+# 2. Check if port 8180 is busy on the server
+if command -v lsof >/dev/null 2>&1; then
+  if lsof -i :8180 >/dev/null 2>&1; then
+    echo -e "${RED}[X] ОШИБКА: Порт 8180 уже занят другим процессом!${NC}"
+    lsof -i :8180
+    exit 1
+  fi
+elif command -v netstat >/dev/null 2>&1; then
+  if netstat -tuln | grep -q ":8180 "; then
+    echo -e "${RED}[X] ОШИБКА: Порт 8180 уже занят другим процессом!${NC}"
+    exit 1
+  fi
+fi
+
+# 3. Check if systemd service already exists
+if [ -f /etc/systemd/system/corp-address-book.service ]; then
+  echo -e "${RED}[X] ОШИБКА: Системная служба 'corp-address-book.service' уже существует!${NC}"
+  echo -e "${RED}    Пожалуйста, удалите или переименуйте существующую службу перед установкой.${NC}"
+  exit 1
+fi
+
+echo -e "${GREEN}[✓] Проверка пройдена. Конфликтов не обнаружено.${NC}"
+echo -e "${YELLOW}[i] Начинаем установку...${NC}"
+
+echo -e "${YELLOW}[i] Копируем проект в директорию установки: $INSTALL_DIR...${NC}"
+mkdir -p "$INSTALL_DIR"
+cp -r . "$INSTALL_DIR"
+cd "$INSTALL_DIR"
+
+# Install Node.js if not present
+if ! [ -x "$(command -v node)" ]; then
+  echo -e "${YELLOW}[!] Node.js не установлен. Устанавливаем Node.js...${NC}"
+  curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
+  apt-get install -y nodejs git build-essential
+  echo -e "${GREEN}[✓] Node.js успешно установлен!${NC}"
+else
+  echo -e "${GREEN}[✓] Node.js обнаружен ($(node -v)).${NC}"
+fi
+
+# Setup environment variables
+if [ ! -f .env ]; then
+  echo -e "${YELLOW}[!] Файл настроек .env отсутствует. Создаем новый...${NC}"
+  RANDOM_PASS=$(openssl rand -base64 12 | tr -d '/+=')
+  JWT_SEC=$(openssl rand -base64 32 | tr -d '/+=')
+  cat <<EOT > .env
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=$RANDOM_PASS
+JWT_SECRET=$JWT_SEC
+PORT=8180
+DATABASE_PATH=$INSTALL_DIR/data/database.db
+EOT
+  echo -e "${GREEN}[✓] Файл .env сгенерирован.${NC}"
+else
+  echo -e "${GREEN}[✓] Обнаружен существующий файл настроек .env.${NC}"
+fi
+
+# Make sure SQLite directory exists
+mkdir -p "$INSTALL_DIR/data"
+
+# Build frontend assets
+echo -e "${YELLOW}[i] Установка пакетов и сборка фронтенда...${NC}"
+cd "$INSTALL_DIR/frontend"
+npm install
+npm run build
+
+# Install backend dependencies and bundle public folder
+echo -e "${YELLOW}[i] Установка пакетов бэкенда...${NC}"
+cd "$INSTALL_DIR/backend"
+npm install --only=production
+rm -rf public
+cp -r ../frontend/dist ./public
+
+# Create Systemd Service File
+echo -e "${YELLOW}[i] Создание системной службы Systemd...${NC}"
+cat <<EOT > /etc/systemd/system/corp-address-book.service
+[Unit]
+Description=Corporate Address Book Web App
+After=network.target
+
+[Service]
+Type=simple
+User=root
+WorkingDirectory=$INSTALL_DIR/backend
+ExecStart=/usr/bin/node server.js
+Restart=on-failure
+Environment=NODE_ENV=production
+EnvironmentFile=$INSTALL_DIR/.env
+
+[Install]
+WantedBy=multi-user.target
+EOT
+
+# Reload systemd and start service
+systemctl daemon-reload
+systemctl enable corp-address-book
+systemctl restart corp-address-book
+
+# Fetch credentials from .env
+ADMIN_USERNAME=$(grep ADMIN_USERNAME $INSTALL_DIR/.env | cut -d '=' -f2)
+ADMIN_PASSWORD=$(grep ADMIN_PASSWORD $INSTALL_DIR/.env | cut -d '=' -f2)
+PORT=$(grep PORT $INSTALL_DIR/.env | cut -d '=' -f2)
+
+if [ $? -eq 0 ]; then
+  echo -e "${GREEN}=====================================================${NC}"
+  echo -e "${GREEN}[✓] СИСТЕМНАЯ СЛУЖБА ЗАПУЩЕНА УСПЕШНО!${NC}"
+  echo -e "${GREEN}=====================================================${NC}"
+  echo -e "Сайт адресной книги запущен локально на порту $PORT."
+  echo -e "🔗 Адрес: ${YELLOW}http://192.168.1.250:${PORT}/${NC} (или IP-адрес вашего сервера)"
+  echo -e ""
+  echo -e "Данные для входа в панель администратора:"
+  echo -e "Логин:  ${YELLOW}$ADMIN_USERNAME${NC}"
+  echo -e "Пароль: ${YELLOW}$ADMIN_PASSWORD${NC}"
+  echo -e ""
+  echo -e "${RED}Сохраните эти учетные данные! Вы можете отредактировать их в $INSTALL_DIR/.env${NC}"
+  echo -e "====================================================="
+else
+  echo -e "${RED}[X] Ошибка при запуске службы corp-address-book.${NC}"
+  exit 1
+fi
@@ -0,0 +1,747 @@
+import sys
+import os
+import ctypes
+import math
+import random
+import json
+import datetime
+import traceback
+import requests
+from PySide6 import QtCore, QtGui, QtWidgets
+from PySide6.QtGui import QPixmap, QPainter, QColor, QIcon, QFont
+
+# Hide console window on Windows immediately if running as compiled executable
+def hide_console():
+    try:
+        hwnd = ctypes.windll.kernel32.GetConsoleWindow()
+        if hwnd:
+            ctypes.windll.user32.ShowWindow(hwnd, 0) # SW_HIDE = 0
+    except Exception:
+        pass
+
+if getattr(sys, 'frozen', False):
+    hide_console()
+    base_dir = os.path.dirname(sys.executable)
+else:
+    base_dir = os.path.dirname(os.path.abspath(__file__))
+
+# Redirect stdout and stderr to a log file
+log_path = os.path.join(base_dir, "widget_output.log")
+try:
+    log_file = open(log_path, "a", encoding="utf-8")
+    sys.stdout = log_file
+    sys.stderr = log_file
+except Exception:
+    class DummyWriter:
+        def write(self, x): pass
+        def flush(self): pass
+    sys.stdout = DummyWriter()
+    sys.stderr = DummyWriter()
+
+# Weather descriptions in Russian
+WEATHER_DESCRIPTIONS = {
+    0: "Ясно",
+    1: "Преимущественно ясно",
+    2: "Переменная облачность",
+    3: "Пасмурно",
+    45: "Туман",
+    48: "Осаждающийся туман",
+    51: "Слабая морось",
+    53: "Умеренная морось",
+    55: "Плотная морось",
+    56: "Слабая ледяная морось",
+    57: "Плотная ледяная морось",
+    61: "Слабый дождь",
+    63: "Умеренный дождь",
+    65: "Сильный дождь",
+    66: "Слабый ледяной дождь",
+    67: "Сильный ледяной дождь",
+    71: "Слабый снегопад",
+    73: "Умеренный снегопад",
+    75: "Сильный снегопад",
+    77: "Снежные зерна",
+    80: "Слабый ливневый дождь",
+    81: "Умеренный ливневый дождь",
+    82: "Сильный ливневый дождь",
+    85: "Слабый снежный ливень",
+    86: "Сильный снежный ливень",
+    95: "Гроза",
+    96: "Гроза со слабым градом",
+    99: "Гроза с сильным градом"
+}
+
+# Drawing helpers for weather elements
+def draw_cloud(painter, x, y, size, color, opacity=1.0):
+    painter.save()
+    painter.setPen(QtCore.Qt.PenStyle.NoPen)
+    c = QColor(color)
+    if opacity < 1.0:
+        c.setAlpha(int(opacity * 255))
+    painter.setBrush(QtGui.QBrush(c))
+    
+    r1 = size * 0.28
+    r2 = size * 0.38
+    r3 = size * 0.28
+    
+    painter.drawEllipse(x + size*0.05, y + size*0.25, r1*2, r1*2)
+    painter.drawEllipse(x + size*0.2, y + size*0.05, r2*2, r2*2)
+    painter.drawEllipse(x + size*0.48, y + size*0.25, r3*2, r3*2)
+    painter.drawRoundedRect(x + size*0.1, y + size*0.3, size*0.55, size*0.26, size*0.13, size*0.13)
+    painter.restore()
+
+def draw_sun(painter, cx, cy, r, angle):
+    painter.save()
+    
+    # Center circle
+    grad = QtGui.QLinearGradient(cx - r, cy - r, cx + r, cy + r)
+    grad.setColorAt(0, QColor("#ffe259"))
+    grad.setColorAt(1, QColor("#ffa751"))
+    painter.setPen(QtCore.Qt.PenStyle.NoPen)
+    painter.setBrush(grad)
+    painter.drawEllipse(cx - r, cy - r, r*2, r*2)
+    
+    # Rays
+    painter.setPen(QtGui.QPen(QColor("#ffa751"), max(1.5, r * 0.18), QtCore.Qt.PenStyle.SolidLine, QtCore.Qt.PenCapStyle.RoundCap))
+    for i in range(8):
+        deg = angle + i * 45
+        rad = math.radians(deg)
+        x1 = cx + (r * 1.28) * math.cos(rad)
+        y1 = cy + (r * 1.28) * math.sin(rad)
+        x2 = cx + (r * 1.58) * math.cos(rad)
+        y2 = cy + (r * 1.58) * math.sin(rad)
+        painter.drawLine(x1, y1, x2, y2)
+        
+    painter.restore()
+
+def draw_moon(painter, cx, cy, r, float_y):
+    painter.save()
+    path = QtGui.QPainterPath()
+    path.addEllipse(cx - r, cy - r + float_y, r*2, r*2)
+    
+    cut_path = QtGui.QPainterPath()
+    cut_path.addEllipse(cx - r * 0.3, cy - r + float_y, r*2, r*2)
+    
+    moon_path = path.subtracted(cut_path)
+    
+    painter.setPen(QtCore.Qt.PenStyle.NoPen)
+    painter.setBrush(QColor("#e2e8f0"))
+    painter.drawPath(moon_path)
+    painter.restore()
+
+# Vector-animated custom weather icon widget
+class AnimatedWeatherIcon(QtWidgets.QWidget):
+    def __init__(self, parent=None, size=48, auto_start=True):
+        super().__init__(parent)
+        self.setFixedSize(size, size)
+        self.size_val = size
+        self.weather_code = 3
+        self.is_day = True
+        self.time_val = random.random() * 100.0  # offset start to desynchronize clouds
+        self.sun_angle = random.randint(0, 360)
+        
+        # Slanted Rain drop offsets
+        self.rain_offsets = [0.0, 5.0, 10.0]
+        # Snow flake offsets
+        self.snow_offsets = [0.0, 6.0, 3.0]
+        
+        self.lightning_timer = 0
+        self.lightning_visible = False
+        
+        self.timer = QtCore.QTimer(self)
+        self.timer.timeout.connect(self.animate)
+        if auto_start:
+            self.timer.start(33)
+            
+    def set_weather(self, code, is_day):
+        self.weather_code = code
+        self.is_day = is_day
+        self.update()
+        
+    def start_animation(self):
+        if not self.timer.isActive():
+            self.timer.start(33)
+            
+    def stop_animation(self):
+        if self.timer.isActive():
+            self.timer.stop()
+            
+    def animate(self):
+        self.time_val += 0.06
+        self.sun_angle = (self.sun_angle + 0.8) % 360.0
+        
+        # Rain animation
+        for i in range(len(self.rain_offsets)):
+            self.rain_offsets[i] += 0.5
+            if self.rain_offsets[i] > 12.0:
+                self.rain_offsets[i] = 0.0
+                
+        # Snow animation
+        for i in range(len(self.snow_offsets)):
+            self.snow_offsets[i] += 0.3
+            if self.snow_offsets[i] > 12.0:
+                self.snow_offsets[i] = 0.0
+                
+        # Lightning flash animation
+        self.lightning_timer += 1
+        if self.lightning_visible:
+            if self.lightning_timer > 3:
+                self.lightning_visible = False
+                self.lightning_timer = 0
+        else:
+            if self.lightning_timer > 80 and random.random() < 0.04:
+                self.lightning_visible = True
+                self.lightning_timer = 0
+                
+        self.update()
+
+    def paintEvent(self, event):
+        painter = QPainter(self)
+        painter.setRenderHint(QPainter.RenderHint.Antialiasing)
+        
+        w = self.width()
+        h = self.height()
+        cx = w / 2
+        cy = h / 2
+        
+        code = self.weather_code
+        
+        if code == 0:
+            weather_type = "clear"
+        elif code in (1, 2):
+            weather_type = "partly_cloudy"
+        elif code == 3:
+            weather_type = "cloudy"
+        elif code in (45, 48):
+            weather_type = "fog"
+        elif code in (51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82):
+            weather_type = "rain"
+        elif code in (71, 73, 75, 77, 85, 86):
+            weather_type = "snow"
+        elif code in (95, 96, 99):
+            weather_type = "storm"
+        else:
+            weather_type = "cloudy"
+            
+        float_y = math.sin(self.time_val) * (w * 0.05)
+        
+        if weather_type == "clear":
+            if self.is_day:
+                draw_sun(painter, cx, cy, w * 0.28, self.sun_angle)
+            else:
+                draw_moon(painter, cx, cy, w * 0.28, float_y)
+                
+        elif weather_type == "partly_cloudy":
+            if self.is_day:
+                draw_sun(painter, cx + w*0.14, cy - h*0.12, w * 0.22, self.sun_angle)
+            else:
+                draw_moon(painter, cx + w*0.14, cy - h*0.12, w * 0.2, float_y)
+            draw_cloud(painter, cx - w*0.3, cy - h*0.2 + float_y, w * 0.64, "#e0f2fe")
+            
+        elif weather_type == "cloudy":
+            draw_cloud(painter, cx - w*0.14, cy - h*0.28 + float_y*0.5, w * 0.58, "#bae6fd", opacity=0.8)
+            draw_cloud(painter, cx - w*0.3, cy - h*0.18 + float_y, w * 0.66, "#ffffff")
+            
+        elif weather_type == "fog":
+            draw_cloud(painter, cx - w*0.24, cy - h*0.26 + float_y, w * 0.6, "#e0f2fe", opacity=0.8)
+            painter.save()
+            painter.setPen(QtGui.QPen(QColor("#bae6fd"), max(1.5, w * 0.06), QtCore.Qt.PenStyle.SolidLine, QtCore.Qt.PenCapStyle.RoundCap))
+            drift = math.sin(self.time_val * 0.6) * (w * 0.06)
+            painter.drawLine(cx - w*0.3 + drift, cy + h*0.18, cx + w*0.3 + drift, cy + h*0.18)
+            painter.drawLine(cx - w*0.2 - drift, cy + h*0.28, cx + w*0.2 - drift, cy + h*0.28)
+            painter.restore()
+            
+        elif weather_type == "rain":
+            draw_cloud(painter, cx - w*0.3, cy - h*0.25 + float_y, w * 0.64, "#bae6fd")
+            painter.save()
+            painter.setPen(QtGui.QPen(QColor("#38bdf8"), max(1.5, w * 0.05), QtCore.Qt.PenStyle.SolidLine, QtCore.Qt.PenCapStyle.RoundCap))
+            for i, offset in enumerate(self.rain_offsets):
+                rx = cx - w*0.15 + i * (w*0.15)
+                ry = cy + h*0.14 + offset
+                if ry < cy + h*0.42:
+                    painter.drawLine(rx, ry, rx - w*0.03, ry + h*0.12)
+            painter.restore()
+            
+        elif weather_type == "snow":
+            draw_cloud(painter, cx - w*0.3, cy - h*0.25 + float_y, w * 0.64, "#e0f2fe")
+            painter.save()
+            painter.setPen(QtCore.Qt.PenStyle.NoPen)
+            painter.setBrush(QColor("#38bdf8"))
+            for i, offset in enumerate(self.snow_offsets):
+                sx = cx - w*0.15 + i * (w*0.15) + math.sin(self.time_val + i) * (w * 0.03)
+                sy = cy + h*0.14 + offset
+                if sy < cy + h*0.42:
+                    painter.drawEllipse(sx - w*0.04, sy - w*0.04, w*0.08, w*0.08)
+            painter.restore()
+            
+        elif weather_type == "storm":
+            draw_cloud(painter, cx - w*0.3, cy - h*0.25 + float_y, w * 0.64, "#94a3b8")
+            if self.lightning_visible:
+                painter.save()
+                painter.setPen(QtCore.Qt.PenStyle.NoPen)
+                painter.setBrush(QColor("#fbbf24"))
+                scale = w / 48.0
+                points = [
+                    QtCore.QPoint(cx - 2*scale, cy + 6*scale),
+                    QtCore.QPoint(cx - 10*scale, cy + 18*scale),
+                    QtCore.QPoint(cx - 3*scale, cy + 18*scale),
+                    QtCore.QPoint(cx - 7*scale, cy + 30*scale),
+                    QtCore.QPoint(cx + 5*scale, cy + 14*scale),
+                    QtCore.QPoint(cx - 1*scale, cy + 14*scale),
+                ]
+                painter.drawPolygon(points)
+                painter.restore()
+
+# Color themes list: Background gradients + Borders
+THEMES = [
+    # Theme 0: Deep Violet/Indigo (Default)
+    "background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #121026, stop:1 #1c183a); border: 1px solid rgba(255, 255, 255, 0.08);",
+    # Theme 1: Deep Navy Blue
+    "background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #09111e, stop:1 #14244a); border: 1px solid rgba(255, 255, 255, 0.08);",
+    # Theme 2: Forest Emerald Green
+    "background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #04160f, stop:1 #0c2d1e); border: 1px solid rgba(255, 255, 255, 0.08);",
+    # Theme 3: Dark Ruby Red
+    "background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #1b0707, stop:1 #351212); border: 1px solid rgba(255, 255, 255, 0.08);",
+    # Theme 4: Sleek Charcoal Black
+    "background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #121212, stop:1 #242424); border: 1px solid rgba(255, 255, 255, 0.08);"
+]
+
+class WeatherWidget(QtWidgets.QWidget):
+    def __init__(self):
+        super().__init__()
+        self.drag_position = QtCore.QPoint()
+        self.press_pos = QtCore.QPoint()
+        self.press_time = datetime.datetime.now()
+        self.expanded = False
+        self.theme_index = 0
+        
+        self.init_ui()
+        self.load_config()
+        
+        # Setup tray icon
+        self.tray_icon = QtWidgets.QSystemTrayIcon(self)
+        self.tray_icon.setIcon(self.create_tray_icon())
+        
+        tray_menu = QtWidgets.QMenu()
+        refresh_action = tray_menu.addAction("Обновить")
+        refresh_action.triggered.connect(self.update_weather)
+        exit_action = tray_menu.addAction("Выход")
+        exit_action.triggered.connect(self.close_app)
+        
+        self.tray_icon.setContextMenu(tray_menu)
+        self.tray_icon.show()
+        
+        # Setup update timer (10 minutes)
+        self.timer = QtCore.QTimer(self)
+        self.timer.timeout.connect(self.update_weather)
+        self.timer.start(10 * 60 * 1000)
+        
+        # Setup startup fade-in animation
+        self.setWindowOpacity(0.0)
+        self.fade_in_animation = QtCore.QPropertyAnimation(self, b"windowOpacity")
+        self.fade_in_animation.setDuration(400)
+        self.fade_in_animation.setStartValue(0.0)
+        self.fade_in_animation.setEndValue(1.0)
+        self.fade_in_animation.start()
+        
+        # Initial weather load
+        self.update_weather()
+
+    def get_config_path(self):
+        if getattr(sys, 'frozen', False):
+            base_dir = os.path.dirname(sys.executable)
+        else:
+            base_dir = os.path.dirname(os.path.abspath(__file__))
+        return os.path.join(base_dir, "widget_config.json")
+
+    def save_config(self):
+        try:
+            config = {
+                "x": self.x(),
+                "y": self.y(),
+                "theme_index": self.theme_index
+            }
+            with open(self.get_config_path(), "w") as f:
+                json.dump(config, f)
+        except Exception as e:
+            print(f"Error saving config: {e}")
+
+    def load_config(self):
+        # Balanced proportions: width 280 x height 102
+        widget_width = 280
+        widget_height = 102
+        
+        screen = QtWidgets.QApplication.primaryScreen()
+        screen_geom = screen.availableGeometry()
+        
+        # Default position: bottom-right
+        default_x = screen_geom.right() - widget_width - 20
+        default_y = screen_geom.bottom() - widget_height - 20
+        
+        config_path = self.get_config_path()
+        if os.path.exists(config_path):
+            try:
+                with open(config_path, "r") as f:
+                    config = json.load(f)
+                x = config.get("x", default_x)
+                y = config.get("y", default_y)
+                self.theme_index = config.get("theme_index", 0)
+                
+                # Check if position is within current screen boundaries
+                if 0 <= x < screen_geom.right() and 0 <= y < screen_geom.bottom():
+                    self.setGeometry(x, y, widget_width, widget_height)
+                    self.apply_theme()
+                    return
+            except Exception as e:
+                print(f"Error loading config: {e}")
+                
+        self.setGeometry(default_x, default_y, widget_width, widget_height)
+        self.apply_theme()
+
+    def apply_theme(self):
+        theme_style = THEMES[self.theme_index]
+        self.container.setStyleSheet(f"""
+            #container {{
+                {theme_style}
+                border-radius: 22px;
+            }}
+            #container:hover {{
+                border-width: 1px;
+                border-style: solid;
+                border-color: rgba(255, 255, 255, 0.18);
+            }}
+            QLabel {{
+                color: #ffffff;
+            }}
+        """)
+
+    def cycle_theme(self):
+        self.theme_index = (self.theme_index + 1) % len(THEMES)
+        self.apply_theme()
+        self.save_config()
+
+    def create_tray_icon(self):
+        # Dynamically draw a tray icon (stylized clouds/sun)
+        pixmap = QPixmap(16, 16)
+        pixmap.fill(QtCore.Qt.GlobalColor.transparent)
+        painter = QPainter(pixmap)
+        painter.setRenderHint(QPainter.RenderHint.Antialiasing)
+        painter.setPen(QtCore.Qt.PenStyle.NoPen)
+        # Background cloud circles
+        painter.setBrush(QColor("#38bdf8"))
+        painter.drawEllipse(1, 6, 8, 8)
+        painter.drawEllipse(6, 4, 9, 9)
+        painter.drawEllipse(4, 2, 8, 8)
+        painter.end()
+        return QIcon(pixmap)
+
+    def init_ui(self):
+        # Frameless, non-always-on-top, tool window (no taskbar button)
+        self.setWindowFlags(
+            QtCore.Qt.WindowType.FramelessWindowHint |
+            QtCore.Qt.WindowType.Tool |
+            QtCore.Qt.WindowType.Window
+        )
+        self.setAttribute(QtCore.Qt.WidgetAttribute.WA_TranslucentBackground, True)
+        
+        # Outer layout to provide space for the drop shadow
+        outer_layout = QtWidgets.QVBoxLayout(self)
+        outer_layout.setContentsMargins(12, 12, 12, 12)
+        
+        # Container frame
+        self.container = QtWidgets.QFrame()
+        self.container.setObjectName("container")
+        self.apply_theme()
+        
+        # Soft Drop Shadow
+        shadow = QtWidgets.QGraphicsDropShadowEffect(self)
+        shadow.setBlurRadius(15)
+        shadow.setXOffset(0)
+        shadow.setYOffset(4)
+        shadow.setColor(QColor(0, 0, 0, 120))
+        self.container.setGraphicsEffect(shadow)
+        
+        # Layout inside container (QVBoxLayout to hold current weather + divider + forecast)
+        container_layout = QtWidgets.QVBoxLayout(self.container)
+        container_layout.setContentsMargins(16, 8, 16, 8)
+        container_layout.setSpacing(6)
+        
+        # Top Row: Current weather layout (QHBoxLayout)
+        top_layout = QtWidgets.QHBoxLayout()
+        top_layout.setSpacing(12)
+        
+        # Left Side: Weather Icon (beautiful vector-animated)
+        self.icon_label = AnimatedWeatherIcon(self.container, size=48, auto_start=True)
+        top_layout.addWidget(self.icon_label, alignment=QtCore.Qt.AlignmentFlag.AlignCenter)
+        
+        # Right Side: Content
+        right_layout = QtWidgets.QVBoxLayout()
+        right_layout.setSpacing(0)
+        
+        # Row 1: Updated Time (aligned to top-right)
+        time_layout = QtWidgets.QHBoxLayout()
+        time_layout.addStretch()
+        self.update_time_label = QtWidgets.QLabel("обновление...")
+        self.update_time_label.setFont(QFont("Segoe UI", 7))
+        self.update_time_label.setStyleSheet("color: rgba(255, 255, 255, 0.45);")
+        time_layout.addWidget(self.update_time_label)
+        right_layout.addLayout(time_layout)
+        
+        # Row 2: Temperature
+        self.temp_label = QtWidgets.QLabel("--°")
+        self.temp_label.setFont(QFont("Segoe UI", 24, QFont.Weight.Bold))
+        self.temp_label.setStyleSheet("line-height: 1;")
+        right_layout.addWidget(self.temp_label)
+        
+        # Row 3: Condition text
+        self.condition_label = QtWidgets.QLabel("Загрузка...")
+        self.condition_label.setFont(QFont("Segoe UI", 9.5, QFont.Weight.DemiBold))
+        self.condition_label.setStyleSheet("color: rgba(255, 255, 255, 0.9);")
+        right_layout.addWidget(self.condition_label)
+        
+        # Row 4: Detailed info (apparent, wind, humidity)
+        self.details_label = QtWidgets.QLabel("ощущ. --° | -- м/с | --%")
+        self.details_label.setFont(QFont("Segoe UI", 8))
+        self.details_label.setStyleSheet("color: rgba(255, 255, 255, 0.55);")
+        right_layout.addWidget(self.details_label)
+        
+        top_layout.addLayout(right_layout)
+        container_layout.addLayout(top_layout)
+        
+        # Divider Line
+        self.divider = QtWidgets.QFrame()
+        self.divider.setFrameShape(QtWidgets.QFrame.Shape.HLine)
+        self.divider.setStyleSheet("background-color: rgba(255, 255, 255, 0.1); max-height: 1px; border: none; margin-top: 2px; margin-bottom: 2px;")
+        container_layout.addWidget(self.divider)
+        
+        # Forecast Panel
+        self.forecast_panel = QtWidgets.QWidget()
+        self.forecast_panel.setObjectName("forecast_panel")
+        forecast_layout = QtWidgets.QHBoxLayout(self.forecast_panel)
+        forecast_layout.setContentsMargins(0, 4, 0, 4)
+        forecast_layout.setSpacing(8)
+        
+        self.forecast_days = []
+        for i in range(3):
+            # Premium Glassmorphic cards for forecast ("нано-банану")
+            day_widget = QtWidgets.QFrame()
+            day_widget.setObjectName("forecast_card")
+            day_widget.setStyleSheet("""
+                #forecast_card {
+                    background: rgba(255, 255, 255, 0.03);
+                    border: 1px solid rgba(255, 255, 255, 0.05);
+                    border-radius: 10px;
+                }
+                #forecast_card:hover {
+                    background: rgba(255, 255, 255, 0.08);
+                    border: 1px solid rgba(255, 255, 255, 0.15);
+                }
+            """)
+            
+            day_widget_layout = QtWidgets.QVBoxLayout(day_widget)
+            day_widget_layout.setContentsMargins(4, 6, 4, 6)
+            day_widget_layout.setSpacing(2)
+            day_widget_layout.setAlignment(QtCore.Qt.AlignmentFlag.AlignCenter)
+            
+            day_label = QtWidgets.QLabel("---")
+            day_label.setFont(QFont("Segoe UI", 8, QFont.Weight.Bold))
+            day_label.setStyleSheet("color: rgba(255, 255, 255, 0.6);")
+            day_label.setAlignment(QtCore.Qt.AlignmentFlag.AlignCenter)
+            
+            # Forecast icon (stops drawing CPU when collapsed)
+            icon_widget = AnimatedWeatherIcon(day_widget, size=32, auto_start=False)
+            
+            temp_label = QtWidgets.QLabel("--° / --°")
+            temp_label.setFont(QFont("Segoe UI", 7.5))
+            temp_label.setStyleSheet("color: rgba(255, 255, 255, 0.95);")
+            temp_label.setAlignment(QtCore.Qt.AlignmentFlag.AlignCenter)
+            
+            day_widget_layout.addWidget(day_label)
+            day_widget_layout.addWidget(icon_widget, alignment=QtCore.Qt.AlignmentFlag.AlignCenter)
+            day_widget_layout.addWidget(temp_label)
+            
+            forecast_layout.addWidget(day_widget)
+            self.forecast_days.append({
+                "day_label": day_label,
+                "icon_label": icon_widget,
+                "temp_label": temp_label
+            })
+            
+        container_layout.addWidget(self.forecast_panel)
+        
+        # Set forecast initial state
+        self.forecast_panel.setVisible(False)
+        self.divider.setVisible(False)
+        
+        outer_layout.addWidget(self.container)
+
+    # Mouse dragging and closing implementation
+    def mousePressEvent(self, event):
+        if event.button() == QtCore.Qt.MouseButton.RightButton:
+            self.close_app()
+            event.accept()
+        elif event.button() == QtCore.Qt.MouseButton.LeftButton:
+            self.press_pos = event.globalPosition().toPoint()
+            self.press_time = datetime.datetime.now()
+            self.drag_position = event.globalPosition().toPoint() - self.frameGeometry().topLeft()
+            event.accept()
+
+    def mouseMoveEvent(self, event):
+        if event.buttons() == QtCore.Qt.MouseButton.LeftButton:
+            self.move(event.globalPosition().toPoint() - self.drag_position)
+            event.accept()
+
+    def mouseReleaseEvent(self, event):
+        if event.button() == QtCore.Qt.MouseButton.LeftButton:
+            self.save_config()
+            # Detect left click for expand/collapse
+            release_pos = event.globalPosition().toPoint()
+            distance = (release_pos - self.press_pos).manhattanLength()
+            duration = (datetime.datetime.now() - self.press_time).total_seconds()
+            
+            if distance < 5 and duration < 0.25:
+                self.toggle_expand()
+            event.accept()
+
+    def mouseDoubleClickEvent(self, event):
+        if event.button() == QtCore.Qt.MouseButton.LeftButton:
+            self.cycle_theme()
+            event.accept()
+
+    def toggle_expand(self):
+        self.expanded = not self.expanded
+        
+        # Animate geometry height change (collapsed 102 -> expanded 192)
+        start_geom = self.geometry()
+        target_height = 192 if self.expanded else 102
+        end_geom = QtCore.QRect(start_geom.x(), start_geom.y(), start_geom.width(), target_height)
+        
+        self.resize_anim = QtCore.QPropertyAnimation(self, b"geometry")
+        self.resize_anim.setDuration(220)
+        self.resize_anim.setEasingCurve(QtCore.QEasingCurve.Type.InOutQuad)
+        self.resize_anim.setStartValue(start_geom)
+        self.resize_anim.setEndValue(end_geom)
+        
+        if self.expanded:
+            # Show widgets and start forecast animations
+            self.divider.setVisible(True)
+            self.forecast_panel.setVisible(True)
+            for item in self.forecast_days:
+                item["icon_label"].start_animation()
+            self.resize_anim.start()
+        else:
+            # Hide forecast elements FIRST to release size constraints, allowing successful window shrink
+            self.divider.setVisible(False)
+            self.forecast_panel.setVisible(False)
+            for item in self.forecast_days:
+                item["icon_label"].stop_animation()
+            self.resize_anim.start()
+
+    # Update weather fetch (with fade transition)
+    def update_weather(self):
+        self.fade_anim = QtCore.QPropertyAnimation(self, b"windowOpacity")
+        self.fade_anim.setDuration(250)
+        self.fade_anim.setStartValue(self.windowOpacity())
+        self.fade_anim.setEndValue(0.3)
+        
+        def on_fade_out():
+            self.perform_weather_fetch()
+            self.fade_in_anim = QtCore.QPropertyAnimation(self, b"windowOpacity")
+            self.fade_in_anim.setDuration(250)
+            self.fade_in_anim.setStartValue(0.3)
+            self.fade_in_anim.setEndValue(1.0)
+            self.fade_in_anim.start()
+            
+        self.fade_anim.finished.connect(on_fade_out)
+        self.fade_anim.start()
+
+    def perform_weather_fetch(self):
+        # API URL for Krasnoyarsk coordinates with daily variables included
+        url = "https://api.open-meteo.com/v1/forecast?latitude=56.0184&longitude=92.8672&current=temperature_2m,relative_humidity_2m,apparent_temperature,is_day,weather_code,wind_speed_10m&daily=weather_code,temperature_2m_max,temperature_2m_min&wind_speed_unit=ms&timezone=Asia%2FKrasnoyarsk"
+        
+        try:
+            response = requests.get(url, timeout=10)
+            if response.status_code == 200:
+                data = response.json()
+                current = data.get("current", {})
+                
+                # Current Temperature
+                temp = round(current.get("temperature_2m", 0))
+                temp_str = f"+{temp}°" if temp > 0 else f"{temp}°"
+                self.temp_label.setText(temp_str)
+                
+                # Current Weather code & description
+                code = current.get("weather_code", 3)
+                condition = WEATHER_DESCRIPTIONS.get(code, "Пасмурно")
+                self.condition_label.setText(condition)
+                
+                # Current Apparent temp, wind, humidity
+                app_temp = round(current.get("apparent_temperature", 0))
+                app_temp_str = f"+{app_temp}°" if app_temp > 0 else f"{app_temp}°"
+                wind = round(current.get("wind_speed_10m", 0))
+                humidity = current.get("relative_humidity_2m", 0)
+                
+                self.details_label.setText(f"ощущ. {app_temp_str}  |  {wind} м/с  |  {humidity}%")
+                
+                # Current Animated Weather Icon
+                is_day = current.get("is_day", 1) == 1
+                self.icon_label.set_weather(code, is_day)
+                
+                # Last updated timestamp
+                now = datetime.datetime.now()
+                self.update_time_label.setText(f"обновлено {now.strftime('%H:%M')}")
+                
+                # Parse 3-day forecast (indices 1, 2, 3 in daily data)
+                daily = data.get("daily", {})
+                daily_times = daily.get("time", [])
+                daily_codes = daily.get("weather_code", [])
+                daily_maxs = daily.get("temperature_2m_max", [])
+                daily_mins = daily.get("temperature_2m_min", [])
+                
+                for i in range(1, 4):
+                    if i < len(daily_times):
+                        date_str = daily_times[i]
+                        f_code = daily_codes[i]
+                        max_temp = round(daily_maxs[i])
+                        min_temp = round(daily_mins[i])
+                        
+                        # Get weekday name in Russian
+                        dt = datetime.datetime.strptime(date_str, "%Y-%m-%d")
+                        weekdays_ru = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"]
+                        day_name = weekdays_ru[dt.weekday()]
+                        
+                        # Format forecast temps
+                        max_str = f"+{max_temp}°" if max_temp > 0 else f"{max_temp}°"
+                        min_str = f"+{min_temp}°" if min_temp > 0 else f"{min_temp}°"
+                        
+                        # Apply to forecast labels
+                        self.forecast_days[i-1]["day_label"].setText(day_name)
+                        self.forecast_days[i-1]["temp_label"].setText(f"{max_str} / {min_str}")
+                        self.forecast_days[i-1]["icon_label"].set_weather(f_code, True)
+            else:
+                self.set_offline_status("Ошибка сервера")
+        except Exception as e:
+            print(f"Fetch error: {e}")
+            self.set_offline_status("Нет сети")
+
+    def set_offline_status(self, message):
+        self.condition_label.setText(message)
+        self.temp_label.setText("--°")
+        self.details_label.setText("ощущ. --°  |  -- м/с  |  --%")
+        self.icon_label.set_weather(3, True) # Show cloud
+        for item in self.forecast_days:
+            item["day_label"].setText("---")
+            item["temp_label"].setText("--° / --°")
+            item["icon_label"].set_weather(3, True)
+
+    def close_app(self):
+        self.tray_icon.hide()
+        QtWidgets.QApplication.quit()
+
+if __name__ == "__main__":
+    app = QtWidgets.QApplication(sys.argv)
+    # Ensure app doesn't close when main window is hidden/minimized
+    app.setQuitOnLastWindowClosed(False)
+    
+    widget = WeatherWidget()
+    widget.show()
+    sys.exit(app.exec())
@@ -0,0 +1,38 @@
+# -*- mode: python ; coding: utf-8 -*-
+
+
+a = Analysis(
+    ['weather_widget.py'],
+    pathex=[],
+    binaries=[],
+    datas=[],
+    hiddenimports=[],
+    hookspath=[],
+    hooksconfig={},
+    runtime_hooks=[],
+    excludes=[],
+    noarchive=False,
+    optimize=0,
+)
+pyz = PYZ(a.pure)
+
+exe = EXE(
+    pyz,
+    a.scripts,
+    a.binaries,
+    a.datas,
+    [],
+    name='weather_widget',
+    debug=False,
+    bootloader_ignore_signals=False,
+    strip=False,
+    upx=True,
+    upx_exclude=[],
+    runtime_tmpdir=None,
+    console=True,
+    disable_windowed_traceback=False,
+    argv_emulation=False,
+    target_arch=None,
+    codesign_identity=None,
+    entitlements_file=None,
+)
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>