v1

frontend/src/menuAside.ts

@@ -7,6 +7,12 @@ const menuAside: MenuAsideItem[] = [
     icon: icon.mdiViewDashboardOutline,
     label: 'Dashboard',
   },
+  {
+    href: '/configurator',
+    icon: icon.mdiSolarPanelLarge,
+    label: 'Configurator Nou',
+    permissions: 'CREATE_CONFIGURATIONS'
+  },
   
   {
     href: '/users/users-list',
@@ -152,4 +158,4 @@ const menuAside: MenuAsideItem[] = [
   },
 ]
 
-export default menuAside
+export default menuAside

frontend/src/pages/configurator.tsx

@@ -0,0 +1,253 @@
+import { mdiSolarPanelLarge, mdiChevronRight, mdiChevronLeft, mdiCheckCircleOutline, mdiInformationOutline } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useState, useEffect } from 'react';
+import CardBox from '../components/CardBox';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../config';
+import BaseButton from '../components/BaseButton';
+import BaseButtons from '../components/BaseButtons';
+import FormField from '../components/FormField';
+import BaseIcon from '../components/BaseIcon';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { create as createProject } from '../stores/projects/projectsSlice';
+import { fetch as fetchProducts } from '../stores/products/productsSlice';
+import { fetch as fetchCategories } from '../stores/product_categories/product_categoriesSlice';
+import { create as createConfiguration } from '../stores/configurations/configurationsSlice';
+import { useRouter } from 'next/router';
+
+const ConfiguratorPage = () => {
+  const dispatch = useAppDispatch();
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  
+  // Form State
+  const [projectData, setProjectData] = useState({
+    name: '',
+    address: '',
+    avg_monthly_consumption_kwh: '',
+    roof_type: 'tabla',
+  });
+
+  const [selection, setSelection] = useState({
+    panelId: '',
+    panelQuantity: 10,
+    inverterId: '',
+    batteryId: '',
+  });
+
+  const { products } = useAppSelector((state) => state.products);
+  const { product_categories } = useAppSelector((state) => state.product_categories);
+
+  useEffect(() => {
+    dispatch(fetchCategories({}));
+    dispatch(fetchProducts({}));
+  }, [dispatch]);
+
+  const panels = products.filter(p => {
+    const cat = product_categories.find(c => c.id === p.categoryId);
+    return cat?.name?.toLowerCase().includes('panel') || cat?.name?.toLowerCase().includes('panouri');
+  });
+
+  const inverters = products.filter(p => {
+    const cat = product_categories.find(c => c.id === p.categoryId);
+    return cat?.name?.toLowerCase().includes('inverter') || cat?.name?.toLowerCase().includes('invertor');
+  });
+
+  const nextStep = () => setStep(step + 1);
+  const prevStep = () => setStep(step - 1);
+
+  const handleProjectChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setProjectData({ ...projectData, [e.target.name]: e.target.value });
+  };
+
+  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
+    setSelection({ ...selection, [e.target.name]: e.target.value });
+  };
+
+  const calculateTotalPower = () => {
+    const selectedPanel = panels.find(p => p.id === selection.panelId);
+    if (selectedPanel && selection.panelQuantity) {
+      return (parseFloat(selectedPanel.rated_power_kw || '0') * parseInt(selection.panelQuantity as any)).toFixed(2);
+    }
+    return '0.00';
+  };
+
+  const handleSubmit = async () => {
+    // 1. Create Project
+    const projectResult = await dispatch(createProject(projectData));
+    if (createProject.fulfilled.match(projectResult)) {
+        const projectId = (projectResult.payload as any).id;
+        
+        // 2. Create Configuration
+        const configData = {
+            projectId,
+            status: 'draft',
+            panel_quantity: selection.panelQuantity,
+            total_power_kw: calculateTotalPower(),
+        };
+        const configResult = await dispatch(createConfiguration(configData));
+        if (createConfiguration.fulfilled.match(configResult)) {
+            router.push('/configurations/configurations-list');
+        }
+    }
+  };
+
+  const renderStep = () => {
+    switch (step) {
+      case 1:
+        return (
+          <div className="space-y-6 animate-fade-in">
+            <div className="flex items-center space-x-2 mb-6 border-b pb-2">
+                <BaseIcon path={mdiInformationOutline} className="text-amber-500" />
+                <h3 className="text-xl font-bold text-slate-800 dark:text-white">Informații Proiect & Client</h3>
+            </div>
+            <FormField label="Nume Proiect" help="Ex: Rezidențial Ionescu">
+              <input 
+                name="name" 
+                value={projectData.name} 
+                onChange={handleProjectChange}
+                className="w-full px-4 py-2 rounded-xl border border-slate-200 dark:bg-slate-800 dark:border-slate-700" 
+                placeholder="Introduceți numele proiectului"
+              />
+            </FormField>
+            <FormField label="Adresă Montaj">
+              <textarea 
+                name="address" 
+                value={projectData.address} 
+                onChange={handleProjectChange}
+                className="w-full px-4 py-2 rounded-xl border border-slate-200 dark:bg-slate-800 dark:border-slate-700" 
+                placeholder="Strada, Numărul, Orașul..."
+              />
+            </FormField>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <FormField label="Consum Mediu Lunar (kWh)">
+                <input 
+                  type="number"
+                  name="avg_monthly_consumption_kwh" 
+                  value={projectData.avg_monthly_consumption_kwh} 
+                  onChange={handleProjectChange}
+                  className="w-full px-4 py-2 rounded-xl border border-slate-200 dark:bg-slate-800 dark:border-slate-700" 
+                />
+              </FormField>
+              <FormField label="Tip Acoperiș">
+                <select 
+                  name="roof_type" 
+                  value={projectData.roof_type} 
+                  onChange={handleProjectChange}
+                  className="w-full px-4 py-2 rounded-xl border border-slate-200 dark:bg-slate-800 dark:border-slate-700"
+                >
+                  <option value="tabla">Tablă</option>
+                  <option value="tigla">Țiglă</option>
+                  <option value="terasa">Terasă</option>
+                  <option value="panou_termoizolant">Panou Termoizolant</option>
+                </select>
+              </FormField>
+            </div>
+            <BaseButtons className="justify-end mt-8">
+              <BaseButton label="Continuă la Produse" color="info" onClick={nextStep} icon={mdiChevronRight} />
+            </BaseButtons>
+          </div>
+        );
+      case 2:
+        return (
+          <div className="space-y-6 animate-fade-in">
+            <div className="flex items-center space-x-2 mb-6 border-b pb-2">
+                <BaseIcon path={mdiSolarPanelLarge} className="text-amber-500" />
+                <h3 className="text-xl font-bold text-slate-800 dark:text-white">Selecție Componente</h3>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div className="space-y-4">
+                    <FormField label="Selectează Panouri">
+                        <select 
+                            name="panelId" 
+                            value={selection.panelId} 
+                            onChange={handleSelectionChange}
+                            className="w-full px-4 py-2 rounded-xl border border-slate-200 dark:bg-slate-800 dark:border-slate-700"
+                        >
+                            <option value="">Alege un panou...</option>
+                            {panels.map(p => (
+                                <option key={p.id} value={p.id}>{p.name} ({p.rated_power_kw} kW)</option>
+                            ))}
+                        </select>
+                    </FormField>
+                    <FormField label="Cantitate Panouri">
+                        <input 
+                            type="number"
+                            name="panelQuantity" 
+                            value={selection.panelQuantity} 
+                            onChange={handleSelectionChange}
+                            className="w-full px-4 py-2 rounded-xl border border-slate-200 dark:bg-slate-800 dark:border-slate-700" 
+                        />
+                    </FormField>
+                </div>
+
+                <div className="p-6 bg-amber-50 dark:bg-amber-900/20 rounded-3xl border border-amber-100 dark:border-amber-800 flex flex-col justify-center items-center text-center">
+                    <div className="text-amber-600 dark:text-amber-400 mb-2">
+                        <BaseIcon path={mdiSolarPanelLarge} size={48} />
+                    </div>
+                    <div className="text-3xl font-black text-slate-800 dark:text-white">
+                        {calculateTotalPower()} <span className="text-lg font-normal">kWp</span>
+                    </div>
+                    <div className="text-sm text-slate-500 uppercase tracking-widest mt-1">Putere Totală Instalată</div>
+                </div>
+            </div>
+
+            <FormField label="Selectează Invertor">
+                <select 
+                    name="inverterId" 
+                    value={selection.inverterId} 
+                    onChange={handleSelectionChange}
+                    className="w-full px-4 py-2 rounded-xl border border-slate-200 dark:bg-slate-800 dark:border-slate-700"
+                >
+                    <option value="">Alege un invertor...</option>
+                    {inverters.map(p => (
+                        <option key={p.id} value={p.id}>{p.name} ({p.phases} faze)</option>
+                    ))}
+                </select>
+            </FormField>
+
+            <BaseButtons className="justify-between mt-8">
+              <BaseButton label="Înapoi" color="white" onClick={prevStep} icon={mdiChevronLeft} />
+              <BaseButton label="Finalizare Configurare" color="success" onClick={handleSubmit} icon={mdiCheckCircleOutline} />
+            </BaseButtons>
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Configurator Nou')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiSolarPanelLarge} title="Configurator Sistem PV" main>
+          <div className="flex items-center space-x-2 text-sm font-medium text-slate-400">
+            <span className={step >= 1 ? 'text-amber-500' : ''}>Pas 1</span>
+            <BaseIcon path={mdiChevronRight} size={16} />
+            <span className={step >= 2 ? 'text-amber-500' : ''}>Pas 2</span>
+            <BaseIcon path={mdiChevronRight} size={16} />
+            <span className={step >= 3 ? 'text-amber-500' : ''}>Finalizare</span>
+          </div>
+        </SectionTitleLineWithButton>
+
+        <div className="max-w-4xl mx-auto">
+            <CardBox className="shadow-xl border-none rounded-3xl overflow-hidden p-4 md:p-8">
+                {renderStep()}
+            </CardBox>
+        </div>
+      </SectionMain>
+    </>
+  );
+};
+
+ConfiguratorPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};
+
+export default ConfiguratorPage;

frontend/src/pages/index.tsx

@@ -1,158 +1,102 @@
-
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
-import Link from 'next/link';
 import BaseButton from '../components/BaseButton';
 import CardBox from '../components/CardBox';
 import SectionFullScreen from '../components/SectionFullScreen';
 import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
 import BaseButtons from '../components/BaseButtons';
 import { getPageTitle } from '../config';
 import { useAppSelector } from '../stores/hooks';
 import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
-
+import * as icon from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
 
 export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('video');
-    const [contentPosition, setContentPosition] = useState('left');
     const textColor = useAppSelector((state) => state.style.linkColor);
 
-    const title = 'App Draft'
-
-    // Fetch Pexels image/video
-    useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
-
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
+    const title = 'SolarConfig Pro'
 
   return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
+      <div className="bg-slate-50 dark:bg-slate-900 min-h-screen font-sans">
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('SolarConfig Pro - Configurator Sisteme Fotovoltaice')}</title>
       </Head>
 
       <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your App Draft app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center text-gray-500'>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
+          <div className='flex items-center justify-center flex-col space-y-8 w-full px-4 py-12'>
+            <div className="text-center space-y-4 max-w-2xl">
+                <div className="inline-flex items-center justify-center p-3 bg-amber-100 dark:bg-amber-900/30 rounded-2xl mb-4 text-amber-600 dark:text-amber-400">
+                    <BaseIcon path={icon.mdiSolarPanelLarge} size={48} />
+                </div>
+                <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 dark:text-white">
+                    SolarConfig <span className="text-amber-500">Pro</span>
+                </h1>
+                <p className="text-lg text-slate-600 dark:text-slate-400">
+                    Configurator inteligent de sisteme fotovoltaice pentru echipele de vânzări. 
+                    Generează oferte precise în câteva minute.
+                </p>
             </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
 
-            </BaseButtons>
-        </CardBox>
-        </div>
-      </div>
+            <CardBox className='w-full md:w-3/5 lg:w-1/2 border-none shadow-2xl rounded-3xl overflow-hidden'>
+                <div className="p-2">
+                    <CardBoxComponentTitle title="Acces Securizat Platformă"/>
+                
+                    <div className="space-y-6 py-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div className="p-4 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-700">
+                                <h3 className="font-semibold text-slate-800 dark:text-slate-200 flex items-center mb-2">
+                                    <BaseIcon path={icon.mdiTune} className="mr-2 text-amber-500" />
+                                    Configurare Rapidă
+                                </h3>
+                                <p className="text-xs text-slate-500 dark:text-slate-400">Introduceți datele proiectului și selectați componentele compatibile.</p>
+                            </div>
+                            <div className="p-4 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-700">
+                                <h3 className="font-semibold text-slate-800 dark:text-slate-200 flex items-center mb-2">
+                                    <BaseIcon path={icon.mdiFileDocumentMultiple} className="mr-2 text-blue-500" />
+                                    Oferte Verisonate
+                                </h3>
+                                <p className="text-xs text-slate-500 dark:text-slate-400">Păstrați istoricul tuturor variantelor trimise către clienți.</p>
+                            </div>
+                        </div>
+                    </div>
+                
+                    <BaseButtons>
+                        <BaseButton
+                            href='/login'
+                            label='Autentificare în Sistem'
+                            color='info'
+                            className='w-full py-4 text-lg font-bold rounded-2xl transition-all hover:scale-[1.02]'
+                        />
+                    </BaseButtons>
+                    
+                    <p className="mt-6 text-center text-xs text-slate-400 dark:text-slate-500 italic">
+                        * Aplicație destinată exclusiv uzului intern al companiei.
+                    </p>
+                </div>
+            </CardBox>
+
+            <div className="grid grid-cols-3 gap-8 max-w-xl text-center pt-8 border-t border-slate-200 dark:border-slate-800 w-full">
+                <div>
+                    <div className="text-2xl font-bold text-slate-900 dark:text-white">100%</div>
+                    <div className="text-[10px] uppercase tracking-wider text-slate-500">Compatibilitate</div>
+                </div>
+                <div>
+                    <div className="text-2xl font-bold text-slate-900 dark:text-white">API</div>
+                    <div className="text-[10px] uppercase tracking-wider text-slate-500">Integrat</div>
+                </div>
+                <div>
+                    <div className="text-2xl font-bold text-slate-900 dark:text-white">PRO</div>
+                    <div className="text-[10px] uppercase tracking-wider text-slate-500">Design</div>
+                </div>
+            </div>
+          </div>
       </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
+      
+      <div className='bg-slate-900 text-slate-400 flex flex-col text-center justify-center md:flex-row border-t border-slate-800'>
+        <p className='py-8 text-sm'>© 2026 <span className="text-white font-medium">{title}</span>. Toate drepturile rezervate.</p>
+        <Link className='py-8 ml-4 text-sm hover:text-white transition-colors' href='/terms-of-use/'>
+            Termeni și Condiții
         </Link>
       </div>
 
@@ -162,5 +106,4 @@ export default function Starter() {
 
 Starter.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
-};
-
+};