Doküman ve Kalite Yönetim Sistemi

Proje Hakkında

Doküman ve Kalite Yönetim Sistemi (DQMS), işletmelerin kurumsal doküman süreçlerini, kalite standartlarını, arşiv sürelerini ve harici kaynaklı belgelerini dijital ortamda güvenle yönetebilmeleri için geliştirilmiş kapsamlı bir kurumsal yönetim platformudur. Çok katmanlı yapısı sayesinde farklı departmanların ihtiyaç duyduğu modülleri tek bir merkezi panelde toplar.

Sorun

Uygulama çok modüllü kurumsal bir yapıya sahip olduğu için, tüm bileşenlerin ve alt sayfaların bağımsız olarak ve tek tek render edilmeye çalışılması istemci tarafında ciddi performans kayıplarına, gereksiz re-render döngülerine ve yüksek bellek tüketimine yol açıyordu.

Ne yaptım

• Mimariyi optimize etmek amacıyla dağınık yapıdaki tüm alt modülleri mantıksal ana modül çatıları altında kategorize ettim.
• React tarafında merkezi bir üst bileşen (DocumentParent) kurarak alt modül sayfalarının rota tabanlı ve kontrollü bir şekilde yüklenmesini sağladım.
• Backend tarafında ASP.NET Core 8.0 ve Dapper kullanarak bu ana modüllere özel, performans odaklı hızlı veri çekme (query) servisleri tasarladım.

Teknik notlar

Çok modüllü yapının performans kaybı yaratmadan, rota değişimlerine (location.pathname) göre optimize edilmiş bir üst bileşen (DocumentParent) ile yönetilmesini sağlayan örnek yapı:

const DocumentParent = () => {
    const [currentStep, setCurrentStep] = useState(1);
    const location = useLocation();

    const steps = [
        { id: 1, path: "/dokuman/listesi", component: <DocumentList/> },
        { id: 2, path: "/dokuman/arsiv-suresi", component: <ArchiveDuration/> },
        { id: 3, path: "/dokuman/dis-kaynakli", component: <ExternalDocuments/> },
        { id: 4, path: "/dokuman/olustur", component: <CreateDocuments/> },
        { id: 5, path: "/dokuman/prosedur", component: <ProcedurDoc/> },
        { id: 6, path: "/dokuman/dokumanlarim", component: <MyDocuments/> },
    ];

    useEffect(() => {
        const matchedStep = steps.find((step) => step.path === location.pathname);
        setCurrentStep(matchedStep ? matchedStep.id : 1);
    }, [location.pathname]);

    const renderCurrentStepComponent = () => {
        const matchedStep = steps.find((step) => step.id === currentStep);
        return matchedStep ? matchedStep.component : <div>Sayfa bulunamadı!</div>;
    };

    return (
        <div className="document-parent">
            <Sidebar/>
            <div className="content-container" data-aos="fade-up">
                <div className="step-content">{renderCurrentStepComponent()}</div>
            </div>
        </div>
    );
};

export default DocumentParent;