mukeshs/operify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docker config

Browse Source
This commit is contained in:
mukesh13
2025-06-16 15:53:12 +05:30
commit da3df17022
411 changed files with 24117 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/components/PackagingShipping/ContentSection.jsx Normal file
View File

@ -0,0 +1,51 @@
// components/PackagingShipping/ContentSection.jsx
'use client';
import React, { useState } from 'react';
import SidebarNavigation from './SidebarNavigation';
import GeneralGuidelines from './GeneralGuidelines';
import PackagingGuideline from './PackagingGuideline';
import DNASamples from './DNASamples';
import RNASamples from './RNASamples';
import ShippingTemperatureTable from './ShippingTemperatureTable';
import ShippingSchedule from './ShippingSchedule';
const ContentSection = () => {
const [activeSection, setActiveSection] = useState('general-content');
const renderContent = () => {
const sections = {
'general-content': <GeneralGuidelines />,
'packaging-content': <PackagingGuideline />,
'dna-content': <DNASamples />,
'rna-content': <RNASamples />,
'temperature-content': <ShippingTemperatureTable />,
'schedule-content': <ShippingSchedule />
};
return sections[activeSection] || <GeneralGuidelines />;
};
return (
<section className="bg-white py-5">
<div className="container mx-auto max-w-none px-4 xl:px-8">
<div className="bg-white p-4 md:p-6">
<div className="grid xl:grid-cols-[280px_1fr] gap-8">
{/* LEFT SIDEBAR */}
<div className="xl:sticky xl:top-8">
<SidebarNavigation
activeSection={activeSection}
onSectionChange={setActiveSection}
/>
</div>
{/* RIGHT CONTENT */}
<div>
{renderContent()}
</div>
</div>
</div>
</div>
</section>
);
};
export default ContentSection;

49
app/components/PackagingShipping/DNASamples.jsx Normal file
View File

@ -0,0 +1,49 @@
// components/PackagingShipping/DNASamples.jsx
import React from 'react';
const DNASamples = () => {
return (
<div className="space-y-6">
<div>
<h3 className="text-2xl font-semibold text-gray-700 mb-6">Shipping of DNA Samples</h3>
</div>
<div className="flex flex-col lg:flex-row gap-6">
<div className="flex-1 space-y-4">
<p className="text-gray-600 leading-relaxed">
Picogreen quantification is advised from the client, in absence of which
an agarose Gel Electrophoresis and Nanodrop quantification must be
shared. Samples with A260/280 ratio values of ~1.8 are considered "pure"
for DNA and will be accepted for processing further.
</p>
<p className="text-gray-600 leading-relaxed">
For large-scale projects, please submit DNA samples in strip tubes or in
well-sealed 96-well PCR plates with semi- or fully-skirted edges (we
recommend Eppendorf twin.tec PCR plate 96 LoBind). Arrange samples in a
column format (e.g., A1, B1, C1, D1, ..., A2, B2, C2, D2, ...) in
contiguous wells. Avoid skipping wells, rows, or columns.
</p>
<p className="text-gray-600 leading-relaxed">
DNA samples in 70% ethanol can be transported at room temperature, while
samples in H2O or TE buffer should be transported with ice packs (e.g.,
"blue ice").
</p>
</div>
<div className="lg:w-96 flex justify-center">
<div className="text-center">
<img
src="/images/dna.jpg"
alt="DNA Sample Order in 96-Well Plates"
className="w-full max-w-96 h-48 object-cover rounded-lg shadow-md"
/>
</div>
</div>
</div>
</div>
);
};
export default DNASamples;

38
app/components/PackagingShipping/GeneralGuidelines.jsx Normal file
View File

@ -0,0 +1,38 @@
import React from 'react';
const GeneralGuidelines = () => {
return (
<div className="space-y-6">
<div>
<h3 className="text-2xl font-semibold mb-6" style={{ color: '#555555' }}>General Guidelines</h3>
</div>
<div className="space-y-6">
<div>
<h6 className="text-lg font-medium text-teal-600 mb-3">Sample Submission Form</h6>
<p className="leading-relaxed" style={{ color: '#555555' }}>
When sending samples, please include the standard sample submission form
filled out through our company website or sent through mail (landscape
orientation, all on one page). We can only process samples if we receive a
hard copy of your submission form along with them. Ensure that the sample
names and quantities on the information sheet exactly match the sample names
and quantities actually sent.
</p>
</div>
<div>
<h6 className="text-lg font-medium text-teal-600 mb-3">Sample Naming</h6>
<p className="leading-relaxed" style={{ color: '#555555' }}>
Please use unique sample names consisting of 4-6 characters, using uppercase
letters, numbers, and underscores only. Do not write the sample name and
other information directly on the tube wall or tube cover with an oil pen.
Instead, use a black permanent marker to write sample names on the top and
side of each tube.
</p>
</div>
</div>
</div>
);
};
export default GeneralGuidelines;

49
app/components/PackagingShipping/PackagingGuideline.jsx Normal file
View File

@ -0,0 +1,49 @@
import React from 'react';
const PackagingGuideline = () => {
return (
<div className="space-y-6">
<div>
<h3 className="text-2xl font-semibold mb-6" style={{ color: '#555555' }}>Packaging Guideline</h3>
</div>
<div className="space-y-6">
<p className="leading-relaxed" style={{ color: '#555555' }}>
Seal the tubes with parafilm for transportation. To prevent the tubes from
being crushed and broken during transit (leading to sample loss), insert
sample tubes into 50 ml centrifuge tubes (or other rigid supports), which
can also be packed with cotton, foam, etc.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
To prevent sample loss and/or cross-contamination, tightly seal all wells of
the plate with an adhesive sheet or foil. Protect the plates or strip tubes
in a sturdy box with plenty of cushioning. Sample shipments of plates should
be carried out on frozen blue ice or dry ice to ensure that the samples
remain frozen during shipment.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
To prevent sample loss and cross-contamination, we recommend securely
sealing all wells of the plate with an adhesive sheet or foil. Place the
plates or strip tubes in a sturdy box with ample cushioning. Ship the
samples with a surplus of frozen blue ice blocks or dry ice to ensure they
remain frozen throughout shipment.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
For leak prevention and to avoid cross-contamination, use one of the
following sealing methods:<br />
<span className="font-medium">(a)</span> Cap the wells with matching 8-strip
caps, ensuring a tight seal. These caps are typically ordered separately
from the plates.<br />
<span className="font-medium">(b)</span> For foil seals, use a heat seal (preferred method)
like "Thermo Scientific Easy Peel Heat Sealing Foil" that allows for
resealing, or adhesive aluminum foil seals such as "AlumaSeal CS Film."
</p>
</div>
</div>
);
};
export default PackagingGuideline;

15
app/components/PackagingShipping/PackagingShippingPage.jsx Normal file
View File

@ -0,0 +1,15 @@
// components/PackagingShipping/PackagingShippingPage.jsx
import React from 'react';
import PageTitle from './PageTitle';
import ContentSection from './ContentSection';
const PackagingShippingPage = () => {
return (
<div className="page-content">
<PageTitle />
<ContentSection />
</div>
);
};
export default PackagingShippingPage;

41
app/components/PackagingShipping/PageTitle.jsx Normal file
View File

@ -0,0 +1,41 @@
import React from 'react';
const PageTitle = () => {
return (
<section
className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[140px]"
style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
>
{/* Breadcrumb */}
<div className="relative z-10 mb-2 sm:mb-1 pt-2 sm:pt-0 sm:-mt-3 lg:-mt-3">
<div className="container mx-auto max-w-none px-4">
<nav className="flex flex-wrap items-center gap-1 sm:gap-2 text-xs sm:text-sm lg:text-sm">
<a href="/" className="text-white hover:text-yellow-400 underline whitespace-nowrap">Home</a>
<span className="text-white flex-shrink-0">
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
</svg>
</span>
<a href="/sample-submission-guideline" className="text-white hover:text-yellow-400 underline whitespace-nowrap">Knowledge Hub</a>
<span className="text-white flex-shrink-0">
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
</svg>
</span>
<span className="text-white">Packaging and Shipping Guideline</span>
</nav>
</div>
</div>
{/* Page Title */}
<div className="relative z-10 text-center pb-2 sm:pb-0 sm:-mt-2 lg:mt-4">
<h1 className="text-lg sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl font-bold text-white mb-2 px-4 leading-tight">
Packaging and Shipping Guideline
</h1>
<div className="w-12 sm:w-14 md:w-16 lg:w-16 h-1 bg-yellow-400 mx-auto"></div>
</div>
</section>
);
};
export default PageTitle;

46
app/components/PackagingShipping/RNASamples.jsx Normal file
View File

@ -0,0 +1,46 @@
import React from 'react';
const RNASamples = () => {
return (
<div className="space-y-6">
<div>
<h3 className="text-2xl font-semibold mb-6" style={{ color: '#555555' }}>Shipping of RNA Samples</h3>
</div>
<div className="space-y-6">
<p className="leading-relaxed" style={{ color: '#555555' }}>
Bioanalyzer QC report is advised to be shared from the client's end, in the
absence of which an agarose Gel Electrophoresis and Nanodrop quantification
to confirm the integrity of RNA must be shared. Samples with A260/280 ratio
values of ~1.8 are considered "pure" for DNA and will be accepted for
processing further.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
We require Bioanalyzer traces (or similar) for all customer-submitted
sequencing libraries and total RNA samples. If traces are not provided, we
will perform Bioanalyzer QC for an additional fee. If you can supply traces,
please include them into the shipment in hard copy. Also, ensure that your
samples meet the specified sample or library requirements [LINK].
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
For large-scale projects, RNA samples can be submitted in strip tubes with
individually attached RNase-free caps. Pack the strips into racks (e.g.,
empty pipet tip boxes) and ensure they are secured to prevent movement
during transport.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
RNA, cells, bacteria, and frozen tissue samples should be stored in liquid
nitrogen for rapid freezing and then transported with dry ice. For longer
shipments, RNA samples can also be successfully shipped dry at room
temperature after LiCl/ethanol precipitation and ethanol washes; make sure
to mark the pellet's position on the tubes.
</p>
</div>
</div>
);
};
export default RNASamples;

61
app/components/PackagingShipping/ShippingSchedule.jsx Normal file
View File

@ -0,0 +1,61 @@
import React from 'react';
const ShippingSchedule = () => {
return (
<div className="space-y-6">
<div>
<h3 className="text-2xl font-semibold mb-6" style={{ color: '#555555' }}>Shipping Schedule and Address</h3>
</div>
<div className="space-y-6">
<p className="leading-relaxed" style={{ color: '#555555' }}>
Before sending your samples, please notify us promptly by mail or by
completing the form online, including the Sample Initiation Form. This helps
us register and process your samples efficiently upon arrival. As we do not
receive packages on weekends, ensure your samples arrive on a weekday. Avoid
shipping samples just before weekends (e.g., on a Thursday for Friday
arrival) or the day before a holiday.
</p>
<p className="leading-relaxed font-medium" style={{ color: '#555555' }}>
We highly recommend using "Priority Overnight Shipping" for morning
deliveries, as it is generally more reliable.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
We can pick up the sample from your institution (additional logistic charges
will be applicable) or you can ship/drop samples at the mentioned address:
</p>
<div >
<div className="leading-relaxed" style={{ color: '#555555' }}>
<div className="font-semibold text-lg text-teal-700 mb-3">
Operify Tech Pvt.Ltd.
</div>
<div className="space-y-1">
<div>64-65, Satguru Ram Singh Ji Marg,</div>
<div>Kirti Nagar Industrial Area,</div>
<div>New Delhi- 110015</div>
</div>
<div className="mt-2">
<div className="flex items-center gap-2">
<span className="font-medium">Phone:</span>
<a href="tel:9319171176" className="text-teal-600 hover:text-teal-800">
9319171176
</a>
</div>
<div className="flex items-center gap-2">
<span className="font-medium">Email:</span>
<a href="mailto:Info@operifytech.com" className="text-teal-600 hover:text-teal-800">
Info@operifytech.com
</a>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default ShippingSchedule;

186
app/components/PackagingShipping/ShippingTemperatureTable.jsx Normal file
View File

@ -0,0 +1,186 @@
'use client';
import React, { useState } from 'react';
const TooltipIcon = ({ text, rowIndex, totalRows }) => {
const [showTooltip, setShowTooltip] = useState(false);
if (!text) return null;
return (
<div className="relative inline-block ml-1">
<span
className="inline-flex items-center justify-center w-3 h-3 text-xs font-bold text-teal-600 border border-teal-600 rounded-full cursor-pointer hover:bg-teal-600 hover:text-white transition-all duration-200"
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
>
i
</span>
{showTooltip && (
<div className="absolute left-full top-1/2 transform -translate-y-1/2 ml-2 px-3 py-2 text-xs text-white bg-gray-800 rounded-md shadow-lg z-50 w-64 text-left">
{text}
<div className="absolute right-full top-1/2 transform -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-r-4 border-transparent border-r-gray-800"></div>
</div>
)}
</div>
);
};
const ShippingTemperatureTable = () => {
const shippingData = [
{
sampleType: 'Blood',
tooltip: 'Collect sample in 2mL EDTA tube for DNA, Collect sample in 2.5mL paxgen/tempus tube for RNA',
volume: '2/2.5ml',
conditions: 'DNA- 4 Degree (Cool Packs)/ RNA-Dry ice, overnight'
},
{
sampleType: 'Plant Tissue',
tooltip: 'Slice tissue into small pieces (<0.5cm) using a sterile scalpel and submerged in 100% Ethanol.',
volume: '1gm',
conditions: '4 Degree (Cool Packs)'
},
{
sampleType: 'Soil Samples',
tooltip: 'Soil samples are collected and then immediately transferred to 4 degree',
volume: '100 mg',
conditions: '4 Degree (Cool Packs)'
},
{
sampleType: 'Fecal Samples',
tooltip: 'Fecal samples are collected then immediately transferred to 4 degree',
volume: '100 mg',
conditions: '4 Degree (Cool Packs)'
},
{
sampleType: 'Bacterial Culture',
tooltip: 'Collect an appropriate amount of bacterial liquid into a 50 mL centrifuge tube, centrifugate at a low speed (3000-5000g/10min) with a 4 °C horizontal centrifuge to collect bacteria, and remove the culture medium as clean as possible. Add 5-10 mL sterile water or PBS solution to wash twice, then transfer it to a 1.5 mL or 2.0 mL centrifuge tube, centrifuge at 1500 rpm at 4 °C for 10min, remove the supernatant, and retain the precipitated bacteria.',
volume: '',
conditions: '4 Degree (Cool Packs)'
},
{
sampleType: 'Water',
tooltip: 'Samples should be taken from at least 10-20 mL of water or slightly turbid water in falcon tube',
volume: '50 mL',
conditions: '4 Degree (Cool Packs)'
},
{
sampleType: 'Plasma/ Serum',
tooltip: 'Plasma is separated from blood using 4 degree centrifugation, aliquoted in 2ml cryovials and Stored at -80 degrees',
volume: '10 mL',
conditions: 'Dry Ice'
},
{
sampleType: 'Animal Tissue',
tooltip: 'Slice tissue into small pieces (<0.5cm) using a sterile scalpel and submerged in 100% Ethanol.',
volume: '1gm',
conditions: '4 Degree (Cool Packs)'
},
{
sampleType: 'Cell',
tooltip: 'The cells in the culture bottle/dish were gently blown and mixed with a pipette gun, and transferred to a 15 mL centrifuge tube, horizontal centrifuge, centrifuge 400g~1000g at 4 °C for 5-10 minutes to collect cells and discard the supernatant, Carefully wash the flake sediment twice with precooled PBS, place it on ice, and discard the supernatant.',
volume: '1x10⁶ cells',
conditions: 'Dry ice, overnight'
},
{
sampleType: 'Fresh Tissue',
tooltip: 'The fresh tissue should be fixed with formaldehyde for no more than 24h. If a pretreatment kit is used, the fixing time shall be in accordance with the requirements of the kit. FFPE chips can be transported at room temperature.',
volume: '10 mg',
conditions: 'Room temperature'
},
{
sampleType: 'FFPE block/ slides',
tooltip: '',
volume: '>20% tumor content',
conditions: 'Room temperature'
},
{
sampleType: 'FFPE block/ slides',
tooltip: '',
volume: '≥ 4 FFPE slides, thickness 5 to 20 µm, area >150 mm²',
conditions: 'Room temperature'
},
{
sampleType: 'Swabs',
tooltip: 'Collect the specimen with the swab. Aseptically unscrew and remove the cap from the transport tube. Insert the swab into the transport tube and break the swab shaft at the indicated breakpoint and screw the cap on tightly.',
volume: '2 tubes/sample, 1 swap/tube',
conditions: '4 Degree (Cool Packs)'
},
{
sampleType: 'Saliva',
tooltip: 'As per the kit manufacture Guideline',
volume: '1 mL',
conditions: 'Dry ice'
},
{
sampleType: 'Bodily Fluids (gDNA)',
tooltip: 'As per the kit manufacture Guideline',
volume: '500 µL',
conditions: '4 Degree (Cool Packs)'
},
{
sampleType: 'Bodily Fluids (cell free DNA)',
tooltip: 'As per the kit manufacture Guideline',
volume: '500-10,000 µL',
conditions: 'Dry ice'
}
];
return (
<div className="space-y-6">
<div>
<h3 className="text-2xl font-semibold text-gray-700 mb-6">Shipping Temperature and Condition</h3>
</div>
<div className="space-y-6">
<p className="text-gray-600 leading-relaxed">
Before sending your samples, please ensure the shipping conditions, storage
temperature and requirements based on sample type:
</p>
<div className="overflow-x-auto">
<table className="w-full border-collapse border border-gray-300 text-sm">
<colgroup>
<col style={{width: '25%'}} />
<col style={{width: '25%'}} />
<col style={{width: '50%'}} />
</colgroup>
<thead>
<tr className="bg-teal-50">
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">
Sample Type
</th>
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">
Volume/Conc. Required
</th>
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">
Shipping Conditions
</th>
</tr>
</thead>
<tbody>
{shippingData.map((row, index) => (
<tr key={index} className={index % 2 === 1 ? 'bg-gray-50' : 'bg-white'}>
<td className="border border-gray-300 px-3 py-2 align-top" style={{ color: '#555555' }}>
<div className="flex items-start">
<span>{row.sampleType}</span>
<TooltipIcon text={row.tooltip} rowIndex={index} totalRows={shippingData.length} />
</div>
</td>
<td className="border border-gray-300 px-3 py-2 align-top" style={{ color: '#555555' }}>
{row.volume}
</td>
<td className="border border-gray-300 px-3 py-2 align-top" style={{ color: '#555555' }}>
{row.conditions}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
};
export default ShippingTemperatureTable;

39
app/components/PackagingShipping/SidebarNavigation.jsx Normal file
View File

@ -0,0 +1,39 @@
import React from 'react';
const SidebarNavigation = ({ activeSection, onSectionChange }) => {
const items = [
{ id: 'general-content', label: '1. General Guidelines' },
{ id: 'packaging-content', label: '2. Packaging Guideline' },
{ id: 'dna-content', label: '3. Shipping of DNA Samples' },
{ id: 'rna-content', label: '4. Shipping of RNA Samples' },
{ id: 'temperature-content', label: '5. Shipping Condition' },
{ id: 'schedule-content', label: '6. Shipping Schedule and Address' }
];
return (
<div className="space-y-3">
{items.map((item) => (
<button
key={item.id}
onClick={() => onSectionChange(item.id)}
className={`w-full text-left px-6 py-4 text-base font-medium rounded-full transition-all duration-300 border-2 ${
item.id === 'temperature-content' ? '' : 'whitespace-nowrap'
} ${
activeSection === item.id
? 'text-white shadow-lg border-transparent'
: 'bg-white text-gray-600 border-transparent hover:border-orange-400'
}`}
style={
activeSection === item.id
? { backgroundColor: '#ffa72a' }
: {}
}
>
{item.label}
</button>
))}
</div>
);
};
export default SidebarNavigation;